Weird behavior: user-defined CSS vs. style.css

Resolved loft75
(@loft75)

10 years, 2 months ago
Hi Folks, I noticed a very strange behaviour when figuring out the appearance of my website.

I wanted to set border color for my posts and articles to #5F5F5F, so I edited the style.css of the child theme of my parabola (I use several style modifications in the style.css of my child theme and they work fine). So I inserted the following code into style.css:
```
post, div.page, div.hentry, .sidey .widget-container, #comments, .commentlist .comment-body, article.post, article.page, article.hentry, #nav-below, .page-header, .yoyo > li {
    border-color: #5F5F5F;
}
```
It didn’t work, the border-color was ignored and I deleted it. Then I put the same code into the “Custom CSS”-Section of the Parabola settings -> NOW IT WORKED!

So, how can it be? What is the difference between the Custom CSS-section and editing the style.css? My website is Loft 75.

Many thanks to anyone who can help me understanding this…

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

paulwpxp
(@paulwp)

10 years, 2 months ago
View source and take a look at the HTML <head>
```
<link rel='stylesheet' id='parent-style-css'  href='http://www.loft75.de/wp-content/themes/parabola/style.css?ver=4.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://www.loft75.de/wp-content/themes/loft75p/style.css?ver=4.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='parabola-style-css'  href='http://www.loft75.de/wp-content/themes/loft75p/style.css?ver=1.6.1' type='text/css' media='all' />
```
It loads main theme styleseet 2 times, with child theme style in the middle. That explains your question why CSS works in Custom CSS plugin but not in child theme stylesheet.

Another thing, the post should be .post (with dot)
Thread Starter loft75
(@loft75)

10 years, 2 months ago

Thanks for your analysis, it explains the behaviour. I don’t know about style.css-versions, what is it? Where do the version numbers come from? And…how do I fix that?

paulwpxp
(@paulwp)

10 years, 2 months ago

After a closer look I was wrong. I mean yes there is double loading issue but it doesn’t account for problem posted here because it loads parent style first and then child theme style 2 times, so changes in child theme stylesheet should override parent’s.

The version number is a parameter in wp_enqueue_style(). I think it’s default to WP’s version if none given.
https://developer.ww.wp.xz.cn/reference/functions/wp_enqueue_style/

Look inside your child theme functions.php, and make sure it only enqueue child theme stylesheet once.
Thread Starter loft75
(@loft75)

10 years, 2 months ago
This is my child theme’s functions.php, I have no idea if anything goes wrong here:
```
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    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')
    );
}
```
I’ve made the child theme with the “One-click Child Theme”-Plugin, because it was convenient for me 😉 At the moment, I have only a style.css and a functions.php in my child theme.

So, what should I do? In fact, 3 stylesheets are loaded: the parent’s, the child’s and the extra-css from the parabola settings. I can’t understand why the lines from my first post are loaded when present in parabola-css, but not in child-css. Theoretically it should do the same, no matter where I place the lines.
paulwpxp
(@paulwp)

10 years, 2 months ago
I found the problem, it’s because parent themes already enqueued its own stylesheet (we see this one coming in the version number 1.6.1 which is parent theme’s version), as shown at #Line15
https://themes.trac.ww.wp.xz.cn/browser/parabola/1.6.1/includes/theme-styles.php#L15

So in your child theme function, this line is not necessary, just remove it
```
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
```
Change this line
```
wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
```
To this
```
wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parabola-style')
```
So we use the same parameter parabola-style as dependency. What should happen now is that WP will load the dependency (parent theme stylesheet that registered as parabola-style) first and then your child stylesheet.
Thread Starter loft75
(@loft75)

10 years, 2 months ago

I modified the style.css as you recommended, but after that it didn’t load the style elements properly, so my site was completely messed up.

In fact, I do not really need a child theme, because I only modify some style elements. This can also be done with the “extra css”-option in Parabola (that is not affected from theme updates), so I decided to switch back to the parent theme and do all the things I want in the extra css-section.

A look into page sourcecode showed that only one style.css is loaded – as it should be. All styling works perfect now.

Anyway, many thanks for your help and effort 🙂
paulwpxp
(@paulwp)

10 years, 2 months ago
Thank you for letting me know the problem. Now I figure out why it didn’t work, look at Line#15 again, it uses get_stylesheet_uri() meaning the main theme will load child theme stylesheet automatically when there is child theme in use.

So in our child theme functions.php should look like this
```
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
```
I installed the theme in my local development and tested it out, now both stylesheets from parent and child load properly in order
```
<link rel='stylesheet' id='parent-style-css'  href='http://localhost/wp/wp-content/themes/parabola/style.css?ver=4.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='parabola-style-css'  href='http://localhost/wp/wp-content/themes/parabola-child/style.css?ver=1.6.1' type='text/css' media='all' />
```

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

The topic ‘Weird behavior: user-defined CSS vs. style.css’ is closed to new replies.