Trouble changing child theme styles

  • I am having trouble figuring out how to change styles for the WP Bootstrap Starter theme. I’ve created a functions file with the following:

    <?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

    I can change some parts of the theme css like blog post title font size. But I cannot change the sub header font size where it says “WordPress + Bootstrap”. I’ve tried:

    #page-sub-header {
    font-size: 1rem;
}

    That should have done it, but it doesn’t do anything. Driving me crazy.

    Anyone have any ideas?

    • This topic was modified 6 years, 2 months ago by everapt.

    The page I need help with: [log in to see the link]

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

  • When the themes are loaded, the child functions.php runs first and then the parent functions.php. If your child theme truly is using ‘parent-style’ as the handle for the parent theme’s styles, then the parent styles are getting loaded twice (once in the child as parent-style and once in the parent as whatever handle it is using).
    That means that the child style is overriding the rule for the parent-style that it loaded, but it is being overridden in the real parent stylesheet that is loaded afterwards.

    If you use the correct handle, the parent theme’s call to wp_enqueue_style will just return without doing anything.

    Thread Starter everapt

    (@everapt)

    But then why would I still be able to change the blog post title style?

    And I tried changing to the following:

    $parent_style = 'wp-bootstrap-starter-style';

    Still didn’t change anything.

    • This reply was modified 6 years, 2 months ago by everapt.
    Moderator bcworkz

    (@bcworkz)

    ‘wp-bootstrap-starter-style’ appears to be the correct tag. Some styles that can be set in the customizer can be difficult to override on stylesheets. For such styles, you should use the customizer. It all has to do with in what order conflicting rules are loaded and evaluated. Review the page’s HTML source to see what order stylesheets are loaded in, in addition to whatever inline styles also occur on the page.

    For difficult overrides, your best chance is in placing rules in the Additional CSS area of the customizer. Such rules become high precedence inline styles. Another thing to try is to use a more specific selector if possible. ID selectors override class selectors in the specificity hierarchy. Little help when you already have an ID selector, but good to know.

    Other ways to override styles that can work are really frowned upon and should be avoided. But in a pinch and in desperation, you could try adding the !important modifier. If you get really desperate, you could alter a child template file to include an element style attribute for the problem element. These sort of measures make future maintenance and alterations very difficult. Don’t use them unless you are sure there is no alternative.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Trouble changing child theme styles’ is closed to new replies.