Support » Themes and Templates » TwentyFifteen Child – base colour won’t take effect

  • Hi,

    I’ve created a site using twentyfifteen, and can customise it to change the base colour.

    When I created a child theme of twentyfifteen and activated it, it showed up in the default base colours. I changed the base colour but it has no effect on the background of either the sidebar or the main screen – only the font colour. So if I change it to, eg. purple, the text is no longer visible because it (correctly) changes the text colour to white, but (incorrectly) leaves the sidebar and the main area with a white background.

    I can’t see anywhere in style.css that sets the background colours, so I can’t bring that into my child stylesheet.

    How can I get around this?

    Many thanks,

    WP.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Can you please post a link to your site? Thanks.

    Thread Starter WhitePhantom

    (@whitephantom)

    Hi,

    The site (still only in its beginning stages) is at http://www.hracommunications.com/website/

    The purple base colour scheme is applied at the moment, so the site name and all the links in the sidebar, above ‘Upcoming Events’, are white and therefore not visible.

    Thanks,

    WP.

    I believe the problem is that you are enqueuing the parent theme in your child theme’s function.php file when you don’t need to, because the theme is already bringing it in by default. That is, when I do a view source on your site, I see the parent theme’s style.css, followed by the inline customization CSS (that would make your sidebar purple), followed by another copy of your parent theme’s style.css, followed by your child theme’s style.css. The second copy of the parent theme is overriding the customization CSS. Try removing the enqueing of the parent theme’s stylesheet from your functions.php file.

    Also, I took a look at your child theme’s style.css file and you are missing closing right braces for all of your media queries. For example:

    
    /**
     * 16.2 Tablet Small 740px
     */
    
    @media screen and (min-width: 46.25em) {
    	body,
    	button,
    	input,
    	select,
    	textarea {
    		font-size: 25px;
    		font-size: 1.7rem; 
    		line-height: 1.6471;
    	}
    
    /**
     * 16.3 Tablet Large 880px
     */
    

    You need a closing right brace } before the comment for 16.3 Tablet. All of the other media queries are also missing closing right braces.

    Thread Starter WhitePhantom

    (@whitephantom)

    Hi,

    Thanks so much for your reply!

    I removed the enqueuing of the parent theme’s stylesheet (I think!) – this is what’s in the function.php file now:

    <?php
    add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
    function enqueue_child_theme_styles() {
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
    }

    but I’ve really messed something else up and I don’t know what.

    I have an empty style.css file (apart from the header info) now in the child theme, as I want to see what the parent style is doing, and only modify the bits that I need to. The child theme’s style.css has the following:

    /*
    Theme Name: Twenty Fifteen HRA
    Theme URI: https://wordpress.org/themes/twentyfifteen/
    Author: the WordPress team
    Author URI: https://wordpress.org/
    Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
    Version: 1.3
    Template: twentyfifteen
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
    Text Domain: twentyfifteen_HRA
    
    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you've learned with others.
    */
    

    but the display is terrible! I’ve made a really bad mess of something…

    When I look in the source code of the site, there is a whole lot of inline css – is that meant to be there?

    I’m sure sorting this out is quite straight-forward if you know what to look for, but unfortunately I don’t. (I tried copying the entire parent stylesheet and pasting it into the child stylesheet and everything displayed properly, but this is obviously not what I should be doing, so I want to find out where I’ve gone wrong and do it right.)

    Many thanks for any help with this,

    WP.

    Hmm, strange, now I don’t see a link to the parent stylesheet in your source at all. I guess go ahead & put back in the enqueuing of the parent stylesheet, but I wonder why it was getting included twice before.

    What you can do, instead of relying on your child theme’s style.css file, is to use a Custom CSS plugin like Jetpack or Custom CSS Manager. The CSS from a custom CSS plugin should come after the second parent stylesheet (if it happens to re-appear), so you’ll avoid the problems that you had earlier.

    Thread Starter WhitePhantom

    (@whitephantom)

    I’m getting very confused!!

    I’ve enqueued the parent again, and when I make changes to the colour scheme for the child, it doens’t take effect (just like before). But there is a whole lot of inline CSS when I view source – is that overriding the child-theme customisation?

    Should I just create a new child theme from the twentyfifteen template and start again? Is there any reason to think that anything would be different if I did that?

    Thread Starter WhitePhantom

    (@whitephantom)

    Hurray!

    I created a new child theme and (very carefully!) followed the steps on https://codex.wordpress.org/Child_Themes and now it’s working properly.

    Whew!

    Thank you so much for your time and help 🙂

    OK, great, and now your purple background is coming through. Congratulations!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘TwentyFifteen Child – base colour won’t take effect’ is closed to new replies.