Simple Machines Community Forum

SMF Support => SMF 2.1.x Support => Topic started by: FrizzleFried on April 09, 2022, 10:41:35 AM

Title: The Bell
Post by: FrizzleFried on April 09, 2022, 10:41:35 AM
I've been wanting to change the Alerts text at the top bar over to a bell icon for a while but haven't had the time to even look in to how to do it.  Being the overly-observant person I am (can you feel the sarcasm in that sentence?) I just noticed that the mobile version of Curve2 changes over from Alerts to the exact bell icon that I'd rather have in it's place!

Can someone point me to where I can force the bell icon to show in the wide-screen version of the theme versus "Alerts"?

Title: Re: The Bell
Post by: Arantor on April 09, 2022, 11:13:43 AM
This is handled in responsive.css.

@media (max-width: 855px) {
#profile_menu_top .textmenu,
#pm_menu_top .textmenu,
#alerts_menu_top .textmenu {
display: none;
}
#pm_menu_top .main_icons,
#alerts_menu_top .main_icons {
display: inline-block;
}
#member_list .ip, #member_list .last_active, #member_list .user_name {
display: none !important;
}
}

Basically you want to have:

#alerts_menu_top .textmenu {
display: none;
}
#alerts_menu_top .main_icons {
display: inline-block;
}

be applicable all the time - so add that to the end of responsive.css to override the earlier declarations.
Title: Re: The Bell
Post by: FrizzleFried on April 09, 2022, 05:07:01 PM
Thank you Arantor.  Works as expected.  I'm guessing I can figure out how to do the Private Message version if I decide to do so... :)

Title: Re: The Bell
Post by: FrizzleFried on April 11, 2022, 09:12:30 AM
BTW... for anyone reading that would like to have both the BELL image AND the ALERTS text next to it all you need to add to the bottom of responsive.css is:

  #alerts_menu_top .main_icons {
      display: inline-block;
  }

To make things a little more uniform and to add the icon next to MY MESSAGES at top go with:

  #pm_menu_top .main_icons, #alerts_menu_top .main_icons {
      display: inline-block;
  }

This is the end result (and of course the text disappears when going to mobile mode):

ScreenHunter 383.jpg
Title: Re: The Bell
Post by: Doug Heffernan on April 11, 2022, 09:25:12 AM
Thanks for sharing this as it will help other users as well in the future who might want to do the same thing.

I am going to mark this as solved btw.