Skip to:
Content
Pages
Categories
Search
Top
Bottom

Custom CSS Changes


  • RockyMtnHi
    Member

    @rockymtnhi

    I want to change the CSS definitions for h1, h2, h3 and h4 tags in the bp-social theme. It looks like the /bp-social/_inc/css/custom-sample.css is the place to do this, but when I write a definition it doesn’t work. Here is what I put into that file:
    `h1 {
    color: #ff6600;
    size: x-large;
    font-family: Georgia,serif;
    }`

    Is there a way to do this so that bp-social upgrades do not overwrite my custom CSS definitions?

    Thanks in advance…

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

  • r-a-y
    Keymaster

    @r-a-y

    You’re probably trying to override the default styles so try adding an `!important` declaration in your definition.

    eg.
    `h1 { color:#ff6600 !important; font-size:x-large !important; font-family: Georgia,serif !important; }`


    Hugo Ashmore
    Participant

    @hnla

    That instruction to add !important :)

    The cascade and specificity should really be observed first and foremost where are you adding your styles and where is the custom css file called from.


    Boone Gorges
    Keymaster

    @boonebgorges

    Are you sure that your custom-sample.css file is actually being included? With a file name like ‘custom-sample’, I’m guessing that it might not be. Check out the theme’s main style.css, and see if there’s an @import rule for custom-sample.css (or if there is a rule in any other imported stylesheet).

    I’m not sure how bp-social works (it appears to be a premium theme so I can’t look at the code) but if it is a child of bp-default, then you won’t be able to create a “grandchild” theme so that your changes won’t be overridden – WP doesn’t support that. However, you could fake it by dropping a snippet in your bp-custom.php file that looks something like this:

    `function bbg_custom_style() {
    $myStyleUrl = WP_PLUGIN_URL . ‘/custom.css’;
    $myStyleFile = WP_PLUGIN_DIR . ‘/custom.css’;
    if ( file_exists($myStyleFile) ) {
    wp_register_style(‘myStyleSheet’, $myStyleUrl);
    wp_enqueue_style( ‘myStyleSheet’);
    }
    }
    add_action(‘wp_print_styles’, ‘bbg_custom_style’);`

    (See https://codex.wordpress.org/Function_Reference/wp_enqueue_style for more info on how to enqueue styles)

    Just make sure that you have your custom styles in a file called custom.css in your plugin directory. That should make sure that your styles get loaded, but that they don’t get overwritten by future upgrades to your main theme.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom CSS Changes’ is closed to new replies.
Skip to toolbar