WallBB Forums

Full Version: Styling myalerts header icon on godark ( tutorial )
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
[Image: Zx3hq7i.jpg]

Doesn't look good 

You will have to follow this steps 


MyAlerts Templates » Edit Template: myalerts_headericon

Replace this code 

Code:
<li class="alerts {$newAlertsIndicator}">
    <a href="{$mybb->settings['bburl']}/alerts.php" class="myalerts" onclick="MyBB.popupWindow('/alerts.php?modal=1&amp;ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">{$lang->myalerts_alerts}
        ({$mybb->user['unreadAlerts']})</a>
</li>

To
Code:
<span class="alerts {$newAlertsIndicator}">
     <a href="{$mybb->settings['bburl']}/alerts.php"
        class="myalerts"
        onclick="MyBB.popupWindow('/alerts.php?modal=1&amp;ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">
       <i class="fa fa-bell"></i> {$mybb->user['unreadAlerts']}
         </a>
</span>

Booyah you have finally styled that part of header 

[Image: Z4Fq535.jpg]

Icon doesn't stand out well with other icons 

What you can do is add <li> at being of code thanks to wallbb dev it automatically styles the icon 

Code:
<span class="alerts {$newAlertsIndicator}">
     <li> <a href="{$mybb->settings['bburl']}/alerts.php"
        class="myalerts"
        onclick="MyBB.popupWindow('/alerts.php?modal=1&amp;ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">
       <i class="fa fa-bell"></i> {$mybb->user['unreadAlerts']}
         </a></li>
</span>


[Image: zG6FdAX.jpg]

Now the icon looks better then it used to be
Good work JohnRip3r Smile
I am moving this to tutorials section.