Skip to:
Content
Pages
Categories
Search
Top
Bottom

Building a child theme: overriding default.css


  • pgideonbolger
    Member

    @pgideonbolger

    Trying to override the selectors in default.css is driving me batty. Can I copy it to a directory of my child theme and chop out the bits that are annoying me? (I’m mostly referring to the #nav section).

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

  • danbpfr
    Participant

    @chouf1

    Hi, you don’t need to copy default.css to your child theme. Use instead style.css in the child theme and add your changes to the specific part taken from default.

    Example: let’s say you want to change the width of div#content .left-menu from 170 to 200px
    in default.css you have

    `div#content .left-menu {
    float: left;
    width: 170px;
    }`

    In your child theme, you write this in the style.css file

    `div#content .left-menu {
    width: 200px;
    }`

    https://codex.buddypress.org/theme-development/building-a-buddypress-child-theme/


    pgideonbolger
    Member

    @pgideonbolger

    Hi Chouf1

    Sorry, I’m not being clear enough. I’m already using style.css, but I’m finding that overriding the #nav rules in default.css more complicated than its worth.

    What I’d like to do is override default.css in the theme with a local copy so I can comment out the section which is causing me problems and replace it with fresh rules in style.css.

    This is more a WordPress question than a Buddypress one, but is it possible to get WordPress to load a theme css file by placing a copy in your child theme, or do I need to mess with the PHP to change the location? In the interests of BC and upgradablility I’d rather not trash all the CSS.

    have you tried creating custom.css and adding the changes to that in your child theme, im no bp pro but thats what I am currently doing. :)


    danbpfr
    Participant

    @chouf1

    default.css is comming with bp and overriden at each update. Don’t touch it !
    As soon as it exist, style.css from within your child theme has priority.

    So you can copy/paste the css parts you want to change to your child style.css and work on it. The only thing you must be carefull is to use the same ID and class names as from the original default when you work on existing styles.
    Or add news at your convenience

    @pgideonbolger — I ran into this as well. I was going around in circles trying to override the defaults selector by selector. To override the defaults en masse, you have to address the fact that BP 1.5 uses enqueue to load the styles. You’ll want to stop it from loading the default styles and instead copy/paste the styles you want to retain from default.css into your child theme’s styles.css.

    FYI, I got this info from https://codex.buddypress.org/theme-development/building-a-buddypress-child-theme/ – which is a helpful page – and am using it with success. But if you don’t want to search that page for the info, just grab the code below and add it to your child theme’s functions.php:
    `
    if ( !function_exists( ‘bp_dtheme_enqueue_styles’ ) ) :
    function bp_dtheme_enqueue_styles() {

    // You should bump this version when changes are made to bust cache
    $version = ‘20120625’;

    // Register stylesheet of child-theme
    wp_register_style( ‘child-theme’, get_stylesheet_directory_uri() . ‘/style.css’, array(), $version );

    // Enqueue stylesheet of child-theme
    wp_enqueue_style( ‘child-theme’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘bp_dtheme_enqueue_styles’ );
    endif;
    `

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Building a child theme: overriding default.css’ is closed to new replies.
Skip to toolbar