[Schneizel Britannia]

I tried everything to solve this problem of mine but I really can’t make it. I’m just a newbie in this field. My problem is that when I installed a plugin, like BuddyPress Media, it automatically creates a new sidebar menu named “Media” along with the menus: Activity, Profile, Friends, Groups, etc ….

All I want is to add an icon besides “Media” …. So it will look well along with the other menus that have icons….

Also if you can suggest me where can I get similar black icons that you are using, it will be a great help.

Hope you can help me out. Thanks again for providing CommonsinaBox for free. 😀

[Ray]

Hi Schneizel,

The CBOX Theme’s sidebar navigation menu does not allow you to remove any subnav items. However, you could get creative and hide the BuddyPress Media subnav items with a few CSS rules.

[Schneizel Britannia]

Ahm, the thing is I don’t really have a plan to remove any of your subnav items. It is really common that when you install a plugin another subnav will appear on that area. What I’m trying to do is to find a way on how to put icon besides it so that it will look well along with your preset subnav items.

[Ray]

Hi Schneizel,

I misread your initial forum post. Apologies!

Unfortunately, the subnav icons are manually added by the theme. So if plugins add new subnav items, we’ll need to manually add new icons for them.

In the meantime, you should be able to add new icons yourself if you are familiar with CSS. If you’re not familiar with CSS, you’ll have to wait until the theme is updated to include these new icons.

If you are familiar with CSS, you could use findicons.com to search for icons that you could add to your CSS stylesheet. I use that site whenever I need to add some nice UI graphics!

Hope that helps.

[Schneizel Britannia]

Ahm, thanks for the information. I’m familiar with CSS. Anyway, what file in your theme has the code for subnav items or has the “Media” item added? I tried looking in sidebar.php but couldn’t find it.

[Ray]

The icons actually use a font.

So if you want to add your own icon temporarily, use the background CSS rule and link to your icon.

If you don’t know how to use the background CSS rule, here’s a quick tutorial:
http://www.portent.com/blog/design-dev/class-up-your-link-icons-with.htm

If you are adding your own icon, also make sure you target the correct <li> ID. Use the web developer tools that come bundled with your browser. I personally use Firebug on Firefox. But other people like using the Developer Tools that come bundled with Chrome / Safari.

[Schneizel Britannia]

I tried adding this

.user-media {
background:url(images/smiley.png) center left no-repeat;
padding:0 16px 0 0;
white-space:nowrap;
}

and this

#user-media {
background:url(images/smiley.png) center left no-repeat;
padding:0 16px 0 0;
white-space:nowrap;
}

but nothing seems to work. Also. Do i really need to add them just in commonsinabox infinity theme css.stylesheet or somewhere else?

[Scott Voth]

Hi – Can you try putting something like this is the custom CSS (Appearance>>CBOX Theme Options>>Global>>Custom CSS) ?

#nav-media:before {
content: url(http://your site’s domain/wp-content/uploads/2013/04/ your icon.png);

}

seems to work for me.

[Schneizel Britannia]

It works!!!

Thanks a lot Scott Voth!!! 😀

[Schneizel Britannia]

Hello, I just updated CBOX to the latest version, I also updated the CBOX theme.

Here’s my problem with the latest version

The code you gave to me to show an icon in profile sidebar seems not to work now:

#nav-media:before {
content: url(http://your site’s domain/wp-content/uploads/2013/04/ your icon.png);

}

What should I do?

[Schneizel Britannia]

Bump… This seems not to work to the latest CBOX…

[Schneizel Britannia]

Problem Solved. Looks like the CBOX update deletes my icons so I just reuploaded them. 😀

[Author]

Posts