The best thing for you will be create a child theme from the bp-default. copy the css and change the color.
Use Firebug for firefox to help you to make the changes easily as you can see the line numbers where you need to make the changes.
where you can find the css files, well copy bp-defaults/_inc/css to your child theme, all the css will be there.
Personally… I would go one step further and NOT make a copy of the css file from the default. I would just create a new custom.css file in the child and override individual declarations as needed. That way your theme should be more future-proof if the default theme ever gets updated. If all you want to do is override a few colors… you could probably do it in just a few lines of CSS code in child-theme/_inc/css/custom.css. You would have to import this new sheet from child-theme/styles.css. i.e.
/*
Template: bp-default
*/
/* Parent styles */
@import url( ../bp-default/_inc/css/adminbar.css );
@import url( ../bp-default/_inc/css/default.css );
/* Custom styles */
@import url( _inc/css/custom.css);
Thanks for your reply! So let me get this right before I start:
1) I create a child theme, i.e.’ bp-default-child’ and copy all files EXCEPT the style.css
2) I create a new custom stylesheet ‘custom.css’ and import the following sheet:
/* Parent styles */
@import url( ../bp-default/_inc/css/adminbar.css );
@import url( ../bp-default/_inc/css/default.css );
/* Custom styles */
@import url( _inc/css/custom.css);
3) Then, I use firebug to find out the #div names and customize the colors. So let’s say the top navigation is called #topnav I add
#topnav {background-color:#newcolor;}
to my custom css file
4) I link to that file in the header of my child theme
5) Done
Is that about how I have to do it so it would work correctly?
Thanks a lot!!
@do77 , David’s method will save a lot when you will upgrade.
Now for your questions
1.No, You do not need to copy any file(because you want the same layout, so child theme inherits it from parent).
2. Create style.css, and put there the content as David has pointed(do not miss the parent tag and theme name in comments, wordpress uses this to recognize the theme)
3.yes, then you can use firebug to override it as you have already given an example
4.You may not need to do that, because you are not using any other files than css.
5, yes, but please read about wordpress child theme, that will help you in long run.
I will! Just about to learn how to create a child theme properly Thanks Brajesh!
By the way… I don’t suppose you are on a Mac… but if you are… CSSEdit is far better than Firebug for inspecting and creating CSS. It’s actually a full-blown editor but with Firebug style “inspectors” and “x-ray” views. I couldn’t live without it. It’s almost worth switching for if you’re a web guy working on PC!! I love it.
Firebug is very useful though. Great utility.