Hard coded icons kickin'

[McFly]

I've been doing some work on my site and came across hardcoded icons in the user and stats block. I was so free to transfer this into tp-custom.css and change the templates. If this does not fit here, please move it to the appropriate board.

User block in TPsubs.template.php

Code Select Expand

// blocktype 1: User
function TPortal_userbox()
{
global $context, $settings, $scripturl, $txt, $user_info;

echo '
<div class="tp_userblocknew">';

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{

if (!empty($context['user']['avatar']) &&  isset($context['TPortal']['userbox']['avatar']))
echo '
<span class="tpavatar">', $context['user']['avatar']['image'], '</span>';
echo '
<strong><a class="subject"  href="'.$scripturl.'?action=profile;u='.$context['user']['id'].'">', $context['user']['name'], '</a></strong>
<ul class="tp_user_pm">';

// Only tell them about their messages if they can read their messages!
if ($context['allow_pm'])
{
echo '
<li><a href="', $scripturl, '?action=pm">' .$txt['tp-pm'].' ',  $context['user']['messages'], '</a></li>';
if($context['user']['unread_messages'] > 0)
echo '
<li><a href="', $scripturl, '?action=pm">' .$txt['tp-pm2'].' ',$context['user']['unread_messages'] , '</a></li>';
}
// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
<li><a href="', $scripturl, '?action=admin;area=viewmembers;sa=browse;type=approve;' . $context['session_var'] . '=' . $context['session_id'].'">' .$txt['tp_unapproved_members'].' '. $context['unapproved_members']  . '</a></li>';
// Are there any moderation reports?
if(!TP_SMF21)
{
if (!empty($context['open_mod_reports']) && $context['show_open_reports'])
echo '
</ul>
<hr>
<ul class="tp_user_moderate">
<li><a href="', $scripturl, '?action=moderate;area=reports">'.$txt['tp_modreports'].' ' . $context['open_mod_reports']. '</a></li>';
}
else {
if (!empty($user_info['mod_cache']) && $user_info['mod_cache']['bq'] != '0=1' && !empty($context['open_mod_reports']))
echo '
</ul>
<hr>
<ul class="tp_user_moderate">
<li><a href="', $scripturl, '?action=moderate;area=reports">'.$txt['tp_modreports'].' ' . $context['open_mod_reports']. '</a></li>';
}
if(isset($context['TPortal']['userbox']['unread']))
echo '
</ul>
<hr>
<ul class="tp_user_unread">
<li><a href="', $scripturl, '?action=unread">' .$txt['tp-unread'].'</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">'.$txt['tp-replies'].'</a></li>
<li><a href="', $scripturl, '?action=profile;u='.$context['user']['id'].';area=showposts">'.$txt['tp-showownposts'].'</a></li>
<li><a href="', $scripturl, '?action=tportal;sa=showcomments">'.$txt['tp-showcomments'].'</a></li>
';
// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
</ul>
<hr>
<ul class="tp_user_maintenance">
<li>' .$txt['tp_maintenace']. '</li>';
// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']) && isset($context['TPortal']['userbox']['logged']))
{
echo '
</ul>
<hr>
<ul class="tp_user_loggedintime">
<li>' .$txt['tp-loggedintime'] . '</li>
<li>'.$context['user']['total_time_logged_in']['days'] . $txt['tp-acronymdays']. $context['user']['total_time_logged_in']['hours'] . $txt['tp-acronymhours']. $context['user']['total_time_logged_in']['minutes'] .$txt['tp-acronymminutes'].'</li>';
}
if (isset($context['TPortal']['userbox']['time']))
echo '
<li>' .$context['current_time'].'</li>';

// admin parts etc.
if(!isset($context['TPortal']['can_submit_article']))
            $context['TPortal']['can_submit_article']=0;

// can we submit an article?
        if(allowedTo('tp_submithtml'))
echo '
</ul>
<hr>
<ul class="tp_user_subart">
<li><a href="', $scripturl, '?action=' . (allowedTo('tp_articles') ? 'tpadmin' : 'tportal') . ';sa=addarticle_html">' .$txt['tp-submitarticle']. '</a></li>';
        if(allowedTo('tp_submitbbc'))
echo '
<li><a href="', $scripturl, '?action=' . (allowedTo('tp_articles') ? 'tpadmin' : 'tportal') . ';sa=addarticle_bbc">' .$txt['tp-submitarticlebbc']. '</a></li>';

if(allowedTo('tp_editownarticle'))
echo '
<li><a href="', $scripturl, '?action=tportal;sa=myarticles">' .$txt['tp-myarticles']. '</a></li>';

// upload a file?
        if(allowedTo('tp_dlupload') || allowedTo('tp_dlmanager'))
echo '
<li><a href="', $scripturl, '?action=tportal;sa=download;dl=upload">' .$txt['permissionname_tp_dlupload']. '</a></li>';

// tpadmin checks
if (allowedTo('tp_settings'))
echo '
</ul>
<hr>
<ul class="tp_user_settings">
<li><a href="' . $scripturl . '?action=tpadmin;sa=settings">' .$txt['permissionname_tp_settings'] . '</a></li>';
if (allowedTo('tp_blocks'))
echo '
<li><a href="' . $scripturl . '?action=tpadmin;sa=blocks">' .$txt['permissionname_tp_blocks'] . '</a></li>';
if (allowedTo('tp_articles'))
{
echo '
<li><a href="' . $scripturl . '?action=tpadmin;sa=articles">' .$txt['permissionname_tp_articles'] . '</a></li>';
// any submissions?
if($context['TPortal']['submitcheck']['articles']>0)
echo '
<li><a href="' . $scripturl . '?action=tpadmin;sa=submission"><b> ' .$txt['tp-articlessubmitted'] . ' ' .$context['TPortal']['submitcheck']['articles'] . '</b></a></li>';
}
if (allowedTo('tp_dlmanager'))
{
echo '
<li><a href="' . $scripturl . '?action=tportal;sa=download;dl=admin">' .$txt['permissionname_tp_dlmanager'] . '</a></li>';
// any submissions?
if($context['TPortal']['submitcheck']['uploads']>0)
echo '
<li><a href="' . $scripturl . '?action=tportal;sa=download;dl=adminsubmission"><b>' .$context['TPortal']['submitcheck']['uploads'] . ' ' .$txt['tp-dluploaded'] . '</b></a></li>';
}

echo '
</ul>';
}
// Otherwise they're a guest - so politely ask them to register or login.
else  {
if(TP_SMF21) {
echo '<div style="line-height: 1.4em;">', sprintf($txt[$context['can_register'] ? 'tp-welcome_guest_register' : 'tp-welcome_guest'], $context['forum_name_html_safe'], $scripturl . '?action=login', 'return reqOverlayDiv(this.href, ' . JavaScriptEscape($txt['login']) . ');', $scripturl . '?action=signup'), '<br><br>', $context['current_time'], '</div>';
}
else {
echo '<div style="line-height: 1.4em;">', sprintf($txt['welcome_guest'], $txt['guest_title']), '<br><br>', $context['current_time'], '</div>';
}
    echo '
        <form style="margin-top: 5px;" action="', $scripturl, '?action=login2" method="post" >
            <input type="text" class="input_text" name="user" size="10" style="max-width: 45%!important;"/> <input type="password" class="input_password" name="passwrd" size="10" style="max-width: 45%!important;"/><br>
            <select name="cookielength" style="max-width: 45%!important;">
                <option value="-1" selected="selected">', $txt['forever'], '</option>
                <option value="60">', $txt['one_hour'], '</option>
                <option value="1440">', $txt['one_day'], '</option>
                <option value="10080">', $txt['one_week'], '</option>
                <option value="302400">', $txt['one_month'], '</option>
            </select>
            <input type="submit" class="button_submit" value="', $txt['login'], '" />
            <input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '" />';
if (TP_SMF21) {
echo '
<input type="hidden" name="', $context['login_token_var'], '" value="', $context['login_token'], '">';
}
echo '
        </form>
        <div style="line-height: 1.4em;" class="middletext">', $txt['tp-quick_login_dec'], '</div>';
}
echo '
        </div>';
}

The css for the user block

Code Select Expand

.tp_user_pm li::before {
    content: url('../images/tinyportal/TPdivider.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
.tp_user_unapproved_members li::before {
    content: url('../images/tinyportal/TPmodule2.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
.tp_user_moderate li::before {
    content: url('../images/tinyportal/TPdivider.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
.tp_user_unread li::before {
    content: url('../images/tinyportal/TPdivider.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
.tp_user_maintenance li::before {
    content: url('../images/tinyportal/TPdivider2.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
.tp_user_loggedintime li::before {
    content: url('../images/tinyportal/TPdivider2.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
.tp_user_subart li::before {
    content: url('../images/tinyportal/TPdivider3.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
.tp_user_settings li::before {
    content: url('../images/tinyportal/TPmodule2.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}

Stats block in TPsubs.template.php

Code Select Expand

// blocktype 3: Stats
function TPortal_statsbox()
{
global $context, $settings, $scripturl, $txt, $modSettings;

echo '
<div class="tp_statsblock">';

if(isset($context['TPortal']['userbox']['stats']))
// members stats
echo '
<h5 class="mlist"><a href="'.$scripturl.'?action=mlist">'.$txt['members'].'</a></h5>
<ul class="tp_stats_members">
<li>' . $txt['total_members'].': ' , isset($modSettings['memberCount']) ? comma_format($modSettings['memberCount']) : comma_format($modSettings['totalMembers']) , '</li>
<li>' . $txt['tp-latest']. ': <a href="', $scripturl, '?action=profile;u=', $modSettings['latestMember'], '"><strong>', $modSettings['latestRealName'], '</strong></a></li>
</ul>';
if(isset($context['TPortal']['userbox']['stats_all']))
// more stats
echo '
<h5 class="stats"><a href="'.$scripturl.'?action=stats">'.$txt['tp-stats'].'</a></h5>
<ul class="tp_stats_forum">
<li>' . $txt['total_posts'].': '.comma_format($modSettings['totalMessages']). '</li>
<li>' . $txt['total_topics'].': '.comma_format($modSettings['totalTopics']). '</li>
<li>' . $txt['tp-mostonline-today'].': '.comma_format($modSettings['mostOnlineToday']).'</li>
<li>' . $txt['tp-mostonline'].': '.comma_format($modSettings['mostOnline']).'</li>
<li>('.timeformat($modSettings['mostDate']).')</li>
</ul>';

if(isset($context['TPortal']['userbox']['online']))
{
// add online users
$online = ssi_whosOnline('array');
echo '
<h5 class="online"><a href="'.$scripturl.'?action=who">'.$txt['online_users'].'</a></h5>
<ul class="tp_stats_users">
<li>' . $txt['tp-users'].': '.$online['num_users'].'</li>
<li>' . $txt['tp-guests'].': '.$online['guests'].'</li>
<li>' . $txt['tp-total'].': '.$online['total_users'].'</li>';

foreach($online['users'] as $user)
{
echo '<li class="tp_stats_online_users">' , $user['hidden'] ? '<i>' . $user['link'] . '</i>' : $user['link'];
echo '</li>';
}
echo '
</ul>';
}
echo '
</div>';
}

And the css for the stats

Code Select Expand

.tp_statsblock ul {
    padding: 0 0 1em;
}
.tp_statsblock ul.tp_stats_users {
    padding: 0 0 1em 2em;
}
.tp_stats_members li::before {
    content: url('../images/tinyportal/TPdivider.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
.tp_stats_forum li::before {
    content: url('../images/tinyportal/TPdivider.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
.tp_stats_users li::before {
    content: url('../images/tinyportal/TPmodule2.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}
li.tp_stats_online_users::before {
    content: url('../images/tinyportal/TPdivider2.png');
    left: -.25em;
    position: relative;
    top: -.125em;
}


[@rjen]

Thanks, need to check it, but it may be part of the next codebase cleanup

[@rjen]

Just checked your code, and I will take out the hard reference to the default theme...

so instead of
.tp_user_pm::before {
    content: url('../../default/images/tinyportal/TPdivider.png');

use

.tp_user_pm::before {
    content: url('../images/tinyportal/TPdivider.png');

this way it allows the css file to be placed in a theme folder and changed from the default if so desired...

[McFly]

The position information (top / left) in the css can also be specified in em instead of px ( in this case left: -.3em and top: -.1em). Then the list-icons should be positioned the same for each font size. This can also be applied to the size of the icons.

Off topic: TP also uses the sceditor, like smf. How do I get the smiley selection in smf back into the menu as a button?

[McFly]

Slept on it again and applied the properties via the lists instead of the list items directly.
Also corrected the text indentations in the code.

[@rjen]

took your changes and incorporated them in the new code

[McFly]

However, in case the date of the most frequent online users is shown including the time, the time is now also provided with a list item. To prevent this, I have simply changed the lines (about 388):

Code Select Expand

<li>' . $bullet. $txt['tp-mostonline'].': '.comma_format($modSettings['mostOnline']).'</li>
<li>('.timeformat($modSettings['mostDate']).')</li>to:

Code Select Expand

<li>' . $txt['tp-mostonline'].': '.comma_format($modSettings['mostOnline']).' ('.timeformat($modSettings['mostDate']).')</li>
Because of the line break, there should possibly be a hyphens: auto in the css.