Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+4 votes
in Plugins by
edited by

Keeping up with the times

It wasn't until recently that I noticed OSN was creating an exception for SnowFlat theme in order to display the Notification Bell correctly. Next to the User Avatar at the TopBar.

While that may have made sense at the time, as we move forward, there's plenty of modern themes that also use this type of layout. So it only makes sense to create an exception for the old themes instead.

So I pushed an update for the Notification Bell output.
For old themes that come with Q2A by default (Candy, Classic, Snow), the bell will be outputted the old way. as a loggedin suffix:


For modern themes, the Bell will be outputted as a sibling of  nav_user_search();  content:

<div id="osnbox">...</div>
<div id="qam-account-toggle" class="qam-logged-in">...</div>
<div class="qam-account-items clearfix">...</div>

That way we can wrap it in a container and display it as a sibling of Loggedin User Avatar, as it was intended to be on SnowFlat. Without the help of Javascript.

SnowFlat theme 

Small adjustment to be made (Being pushed to Q2A core)

If you're using SnowFlat or created a custom theme based off SnowFlat, you'll need to make a small tweak on your qa-theme.php file.

Basically it's just removing the  qam-account-items-wrapper  inside the  nav_user_search()  function, and wrap it around  nav_user_search()  instead:

public function nav_user_search()
     $this->output('<div class="qam-account-items-wrapper">'); 
     $this->output('</div> <!-- END qam-account-items-wrapper -->'); 

public function nav_main_sub()
     $this->output('<div class="qam-account-items-wrapper">'); 

For theme developers

You can simply wrap your  nav_user_search()  like the example above demonstrated in SnowFlat code snippet, add a  display:inline-block;  property to the siblings (for example  .qam-account-toggle  .qam-account-items  in SnowFlat) and should be good to go.

On Site Notifications - GitHub
While the commit isn't merged with the official repository, you can download it from - My GitHub 

Thanks for making these fixes!

1 Answer

+1 vote
Best answer

This branch is now merged to the official repository