Skip to:

Custom CSS Changes

  • 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


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

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

    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


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