Go Dark Theme - Styling myalerts header icon on godark ( tutorial )

Go Dark Theme - Styling myalerts header icon on godark ( tutorial ) - Printable Version

+- WallBB Forums (https://wallbb.co.uk/forums)
+-- Forum: Theme Section (https://wallbb.co.uk/forums/forumdisplay.php?fid=5)
+--- Forum: Theme Documentation (https://wallbb.co.uk/forums/forumdisplay.php?fid=9)
+--- Thread: Go Dark Theme - Styling myalerts header icon on godark ( tutorial ) (/showthread.php?tid=332)

Styling myalerts header icon on godark ( tutorial ) - JohnRip3r - 03-29-2020

[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>

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>

Now the icon looks better then it used to be

RE: Styling myalerts header icon on godark ( tutorial ) - WallBB - 03-30-2020

Good work JohnRip3r Smile

I am moving this to tutorials section.