• 0

Changing CSS on Main Buddypress Nav Bar

Question

Posted · Report post

Can someone please tell me how to change the color scheme of the main nav bar with Activity, Members, Groups, etc. for Buddy press? I can't find a recent thread about it. If there is a file (or files) I need to go in and edit, can you tell me specifically where to find it (or them)? In digging around with firebug, I'm pretty astonished by the mountain of css that's involved with Buddypress. Should it really be that involved to format a menu? Hopefully I'm missing an easier way? Thanks!

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted · Report post

Editing the files isn't advisable because any updates will overwrite the changes you made in those files. The easiest way is with Firebug and adding the CSS to your Custom Code > Custom CSS settings. It's quite an involved process the first time around, but it'll get easier the more you do it and it's great in the long run. Have you seen this tutorial on how to use Firebug for customizations?: http://www.pagelines.com/wiki/Custom_CSS#How_to_use_CSS_Inspection_Tools

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, Catrina. Still trying to figure out what to edit. I get that I'm not supposed to edit the file, but I'm trying to figure out what to put in my child theme. Here is the CSS path: html body.home-page div#site.one-sidebar-right div#page.thepage div.page-canvas header#header.container-group div.outline section#nav.container div.texture div.content div.content-pad div.navigation_wrap div.main_nav_container nav#nav_row.main_nav ul#menu-main-navigation.main-nav Here is the html path: New to wordpress, so anyone that can provide specific instructions is my hero!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'd suggest you [url="http://www.getfirebug.com"]get Firebug[/url] for Firefox, which is a tool you add to your Firefox browser. It allows you to inspect each element for specific CSS. One of my colleagues with more specific CSS experience might be able to assist, but in the meantime, let me say that the BuddyPress menu items are in the WordPress menu, thus the styling is controlled by PageLines.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, Rangelone. I have firebug, which is where I pulled the CSS and HTML paths from. Hope to hear more from any of your colleagues who might be able to get me pointed in the right direction. Thanks so much for taking the time to answer!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, Hopefully the below CSS will assist you ! [code].buddypress-page #page .item-list-tabs, div.item-list-tabs#subnav ul li.selected a, div.item-list-tabs#subnav ul li.current, .buddypress-page .padder input[type="text"], .buddypress-page .padder input[type="password"], .buddypress-page .padder textarea, .buddypress-page .padder textarea, .padder form#whats-new-form textarea { background-color: orange; color: white; } .buddypress-page #page .item-list-tabs#subnav, div.item-list-tabs ul li.selected a, div.item-list-tabs ul li.current { background-color: green; color: black; } .padder div.pagination { background: purple; border: none; color: #888; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, Danny. Will give this a try!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Let us know how it works out for you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny - does the css you gave me go in my style.css child theme? Or elsewhere?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It should go in pagelines-customize plugin's style.css or, if you prefer, you may add it to Dashboard > PageLines > Settings > Custom Code in CSS Rules.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay... The CSS provided by Danny worked - Yay! - but it worked in a different place than I wanted. That's fine - great, actually - because I needed to edit that nav section, too. You can see what was edited here: http://www.expatexchange.com/glutenfree/members/ I still need to edit the main nav bar that is right under the logo that has the following sections in it: Tips - Add New Tip - Activity - Forums - Members - Groups - Register Any chance someone has the CSS like Danny posted above for this main nav? Thanks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now