Skip to:
Content
Pages
Categories
Search
Top
Bottom

[1.2] Child Theme Best Practices

  • @arnonel

    Participant

    This thread can be used for anything really, but what I want to know is:

    What do I do if I only want to override 1 CSS element?

    eg: I want to change the background color.

    Do I need to copy _inc/css to my child theme and change there? ie, all the elements?

    If yes, what if there is updated parent css?

    If no, how do i override just that 1 element and leave everything else as-is?

Viewing 8 replies - 1 through 8 (of 8 total)
  • @apeatling

    Keymaster

    @takeo

    Participant

    I believe the only file required for a child is style.css. If it’s literally just one line of CSS… I’d probably put it in that file. So for instance:

    /*
    Theme Name: My Child Theme
    Template: bp-default
    Tags: buddypress
    */

    /* Parent styles */
    @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
    @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );

    /* Custom styles */
    body {background: #cf0;}

    @arnonel

    Participant

    @Andy I did :)

    Im happy with the default CSS, I dont want to create my own CSS, but im asking:

    What is the best practice if you only want to change ONE element.

    @David

    thanks.

    So effectively this means, I still use default CSS, but override that one element, right?

    That way if there are CSS updates to the parent, im still good to go

    @apeatling

    Keymaster

    Yes exactly.

    @arnonel

    Participant

    Thanks guys.

    Are there any implications on performance when overriding .php pages etc ?

    @apeatling

    Keymaster

    None.

    @johnjamesjacoby

    Keymaster

    @arnonel, the parent template file is never accessed. The only possible performance hit you would see is with loading the additional CSS from your child theme. Since you’re styling it one way with one set of CSS rules, then overriding it with another, you’re basically doing the same thing twice.

    It’s still the best/only way of doing this without totally writing your own CSS from scratch, or copying the bp-default CSS over totally, and never including it from the parent theme. If you go that route, you run the risk of not getting updates when CSS changes in the parent theme.

    @arnonel

    Participant

    Great stuff, thanks for all the help guys

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[1.2] Child Theme Best Practices’ is closed to new replies.
Skip to toolbar