Jump to content


Photo
- - - - -

Changing CSS on Main Buddypress Nav Bar


  • Please log in to reply
16 replies to this topic

#1 pagelinesbetsy

pagelinesbetsy

    Advanced Member

  • Members
  • 34 posts

Posted 09 March 2012 - 02:59 AM

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!

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 09 March 2012 - 03:31 AM

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?:

Please Login or Register to see this Hidden Content



#3 pagelinesbetsy

pagelinesbetsy

    Advanced Member

  • Members
  • 34 posts

Posted 11 March 2012 - 01:01 AM

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!

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 March 2012 - 01:12 AM

I'd suggest you

Please Login or Register to see this Hidden Content

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.

#5 pagelinesbetsy

pagelinesbetsy

    Advanced Member

  • Members
  • 34 posts

Posted 11 March 2012 - 04:07 AM

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!

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16995 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 March 2012 - 11:59 AM

Hi,

Hopefully the below CSS will assist you !

Please Login or Register to see this Hidden Content



#7 pagelinesbetsy

pagelinesbetsy

    Advanced Member

  • Members
  • 34 posts

Posted 13 March 2012 - 12:07 AM

Thanks, Danny. Will give this a try!

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 13 March 2012 - 02:51 AM

Let us know how it works out for you.

#9 pagelinesbetsy

pagelinesbetsy

    Advanced Member

  • Members
  • 34 posts

Posted 13 March 2012 - 05:48 PM

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

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 March 2012 - 08:42 PM

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.

#11 pagelinesbetsy

pagelinesbetsy

    Advanced Member

  • Members
  • 34 posts

Posted 15 March 2012 - 03:19 PM

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:

Please Login or Register to see this Hidden Content

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!