Support » Fixing WordPress » Creating a child theme modifies the looks of without any changes

  • Resolved Myntekt

    (@myntekt)


    Hello,
    I’m not sure you understood what I meant, but when I create a child theme, and activate it without adding anything in the style.css it looks different.
    This is what I have in the style.css

    /*
    Theme Name: Zerif Lite Child
    Theme URI: https://themeisle.com/themes/zerif-lite/
    Author: ThemeIsle
    Author URI: https://themeisle.com
    Description: Zerif LITE is a free one page WordPress theme. It's perfect for web agency business,corporate business,personal and parallax business portfolio, photography sites and freelancer.Is built on BootStrap with parallax support, is responsive, clean, modern, flat and minimal. Zerif Lite is ecommerce (WooCommerce) Compatible, WPML, RTL, Retina-Ready, SEO Friendly and with parallax, full screen image is one of the best business themes.
    Version: 1.7.6
    License: GNU General Public License version 3
    License URI: license.txt
    Text Domain: zerif-lite
    Domain Path: /languages/
    Template: zerif-lite
    Tags: black, gray, red, white, one-column, two-columns, right-sidebar,fixed-layout,light,front-page-post-form,full-width-template,rtl-language-support,sticky-post,theme-options,responsive-layout, custom-background, custom-menu, editor-style, featured-images, threaded-comments, translation-ready,photoblogging
    */

    and this is what I have in the functions.php

    <?php
    
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    }

    am I doing anything wrong? Those are the only two files I have in the child theme. Imgur post showing how they look like. The child theme is the one with the grey background.

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Myntekt

    (@myntekt)

    This does not happen when I do the same with the twentyfifteen theme.

    I just created a child theme for Zerif Lite using the code above and it seems to work fine. The only difference was that the header was black instead of white, and the logo image in the header was missing because it tries to look for the logo image under the child theme folder instead of the parent theme folder. Can you post a link to your site with the child theme active? You didn’t copy over and modify any of the parent theme files into the child theme folder?

    Thread Starter Myntekt

    (@myntekt)

    Did you see what I pasted? http://imgur.com/92i8jrc,xheS2Dg#0 That’s how it looks. Basically what you said. Black/smaller header, logo is bugged out and the post title loses the bold thing. I think that is a valid reason to say it isn’t working as it should..

    The problem seems to be that the order in which the parent theme’s style.css file comes is different than when the child theme is active. That is, if you do a view source on your site when the parent theme is active, versus when the child theme is active, you’ll see that the parent’s style.css file is listed in a different order.

    What does that mean as far as CSS goes? Just focusing on the background color of the header, when the parent theme is active, this rule, in the parent theme’s style.css file, comes into play:

    .navbar {
    	background: #FFF;
    	border: 0;
    	border-radius: 0 !important;
    	text-align: left;
    }

    However, when the child theme is active, this rule, from bootstrap.css, is used:

    .navbar-inverse {
      background-color: #222;
      border-color: #080808;
    }

    The reason why this second rule is used when the child theme is active is because in the child theme, bootstrap.css comes after the parent theme’s style.css file. When the parent theme is active, bootstrap.css comes before the parent theme’s style.css file. The rules for CSS state that when two or more rules for the same element have the same selector, or if their selectors have the same specificity, then the rule which comes last will take precedence.

    So, to fix this, you need to make sure the parent’s stylesheet, when the child theme is active, comes in the same order as it did when the parent theme was active. If you do a view source on the site when the parent theme is active, then you’ll see that the style.css file comes after a stylesheet with an ID of zerif_pixeden_style-css. What you should do, then, is alter the call to wp-enqueue-stylesheet in your functions.php file so it looks like this:

    <?php
    
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array('zerif_pixeden_style'), 'v1' );
    }

    So you are basically adding a third parameter to the wp_enqueue_style function, which says that this stylesheet is dependent upon the zerif_pixeden_style stylesheet, so it needs to come after it.

    Thread Starter Myntekt

    (@myntekt)

    Well, that actually made a lot of sense. I understand the rules of CSS but didn’t really think of that before. I’ll try it out. Just to confirm, I need to remove what I have on my php file and put in what you sent here, right? I don’t know anything about php so I didn’t quite understand what you did there.

    Yes, substitute what you have in your child theme’s functions.php file with what I posted. It should be the same except for the two extra parameters at the end of the third line of code starting with array.

    Thread Starter Myntekt

    (@myntekt)

    Yeah, got it. It’s working. Thanks a lot really!

    Thread Starter Myntekt

    (@myntekt)

    Hey, by the way. I know that this is kind of offtopic, but is there an easy way of finding out what I have to add in the css to change something? For example, how do I find the element that cointains the “Home” title?
    Thanks again

    You can use Firebug.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Creating a child theme modifies the looks of without any changes’ is closed to new replies.