0

I know it's already been asked but that person had a typo, and the answer mentioned firebug so it's not current (and is closed).

In WordPress, I noticed that main file, style.css is not being applied, specifically:

  • The file IS loaded correctly
  • Its styles are NOT being applied

When I inspect element for an element I know is being targeted by style.css, nothing from style.css is there (styles tab of inspect element) at all. I've inspected several elements.

It's loaded through WordPress as so (an unchanged call generated with _underscores):

wp_enqueue_style( 'themexzz-style', get_stylesheet_uri(), array(), _S_VERSION );

This is the produced link (and clicking on it works like it's supposed to):

<link rel='stylesheet' id='themexzz-style-css'  href='http://localhost:8012/themexzz/wp-content/themes/themexzz/style.css?ver=1.0.0' media='all' />

I'm using

  • Xampp with php 7.2.3
  • with wordpress 5.5.3
  • meta charset="UTF-8"
  • Database collation is utf8mb4_unicode_ci
  • It's an underscores generated theme

Thanks in advance.

oneone
  • 25
  • 6
  • Please show your CSS codes – Yeshwin Verma Nov 14 '20 at 07:03
  • 2
    There's not enough to go off of here. There's a chance you're seeing a cached version, there's a chance your browser is blocking it as an insecure resource, you may have invalid CSS way at the beginning of that file, blocking all the rest of the CSS being applied, etc. – Xhynk Nov 14 '20 at 07:47
  • I agree with @Xhynk We can not replicate the problem remotely. You can double check with Chrome Dev Tools and see the "Computed" styles for a certain element. – Ozgur Sar Nov 14 '20 at 11:58

2 Answers2

0

@Xhynk - You were right. It was the:

you may have invalid CSS way at the beginning of that file, blocking all the rest of the CSS being applied

As it is an underscores theme and I apply my own CSS from another file, it didn't even cross my mind that there might be invalid CSS in style.css

Thank you @Xhynk

oneone
  • 25
  • 6
0

The position of CSS files in head tag also matters, Assume that you have loaded 2 CSS file in the head tag

<link rel='stylesheet' href="..../style.css"> 
<!--(have property of background color blue and text white)-->
<link rel='stylesheet' href="..../mycss.css">
<!--(have property of background color white and text black)-->

if you place tags in this order

<head>
<link rel='stylesheet' href="..../style.css"> 
<link rel='stylesheet' href="..../mycss.css">
</head>

Both the files will be loaded but CSS will be applied of the myss.css file, this happens because of CSS overwrite

You can change the position of the link tags to get your desired output

Krutik Raut
  • 139
  • 7