Jump to content
pagelinesbetsy

Changing CSS on Main Buddypress Nav Bar

Recommended Posts

pagelinesbetsy    0
pagelinesbetsy

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
catrina    103
catrina
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

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
pagelinesbetsy    0
pagelinesbetsy
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
Rob    547
Rob
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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pagelinesbetsy    0
pagelinesbetsy
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
Danny    1,327
Danny
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]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pagelinesbetsy    0
pagelinesbetsy
Thanks, Danny. Will give this a try!

Share this post


Link to post
Share on other sites
pagelinesbetsy    0
pagelinesbetsy
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
Rob    547
Rob
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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pagelinesbetsy    0
pagelinesbetsy
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


×