Skip to:
Content
Pages
Categories
Search
Top
Bottom

Keep default bp theme but change main colors


  • do77
    Participant

    @do77

    I would like to use the bp default theme as it is but change the main colors. Is there already a css pack out there that lets me quickly change the colors or do I need to browse through the css file to do it?

    I am also not quite sure where I should start since the default theme imports most of the css files. Where will I find the css file that I can actually edit?

    Thank you!

    do77

Viewing 7 replies - 1 through 7 (of 7 total)

  • Brajesh Singh
    Participant

    @sbrajesh

    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);


    do77
    Participant

    @do77

    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!!


    Brajesh Singh
    Participant

    @sbrajesh

    @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.


    do77
    Participant

    @do77

    I will! Just about to learn how to create a child theme properly :) Thanks Brajesh!


    Brajesh Singh
    Participant

    @sbrajesh

    You are most welcome, and here is a good news, Andy has updated codex for a basic guide on how to build child theme.

    Checkout here

    https://buddypress.org/forums/topic/how-to-building-buddypress-12-themes

    https://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Keep default bp theme but change main colors’ is closed to new replies.
Skip to toolbar