Custom CSS class not working

Question

I have added custom CSS to style.css file on my own custom skin in Wordpress 3.9.2. All classes seem to be working fine, apart from the new ones that I have added.

.frontpage_tile {
    width: 270px;
    float: left;
    min-height: 1px;
    margin-left: 30px;
}

.block {
    display: block;
    position: relative;
}

.block img {
    display: block;
    border: 1px solid rgba(53, 53, 53, 0.65);
    box-sizing: border-box;
    border-radius: 3px;
}

.block .caption {
    font-size: 13px;
    font-weight: normal;
    line-height: 1.2em;
    padding: 10px;
    margin: 0px;
    position: absolute;
    bottom: 1px;
    left: 1px;
    right: 1px;
    color: #FFF;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);
    text-shadow: 0px 0px 20px #000, 0px 0px 10px #000;
    z-index: 1;
}

The above code is just ignored by all browsers. It does not appear on the page, nor on "Inspect Element" in the browser. Any ideas? This is the code I am using on the template, which I am calling on the custom page.

<div class="frontpage_tile">
    <a class="block" href="<?php echo get_permalink(); ?>" data-icon="&#xe00b;">
      <?php the_post_thumbnail('home-thumb'); ?>
      <span class="caption">
          <?php the_title(); ?>
      </span>
    </a>
</div>

Not sure, restarted the computer already and tried Firefox, Chrome and IE. — zzwyb89
– zzwyb89, Commented Aug 7, 2014 at 14:35
Try the key-combination CTRL (CMD on mac) + SHIFT + R, or CTRL + F5 for IE. This will clear your local cache while refreshing the page. — Sander Koedood
– Sander Koedood, Commented Aug 7, 2014 at 14:36
I can see all the css you said didn't applied in chrome's web dev tool. So caching issue on your end I assume — IndieRok
– IndieRok, Commented Aug 7, 2014 at 14:41

MacK · Accepted Answer · 2014-08-07 14:55:38Z

5

I just scanned your website with wpscan for the sake of it, and here's your problem:

[+] Interesting header: CF-RAY: 15644be6d86308d8-LHR
[+] Interesting header: SERVER: cloudflare-nginx
[+] Interesting header: X-CF-POWERED-BY: WP 1.3.14
[+] Interesting header: X-POWERED-BY: PHP/5.5.14

You're using Cloudflare :) , just login into your Control Panel and enable Development mode.

I'll leave the old answer below, just in case someone finds this question and wants to know how to do a bit of troubleshooting:

If you go at the top of your stylesheet you'll see the following comments:

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Author: the WordPress team
[...]
Version: 1.4
[...]
*/

Just change your number version and Wordpress now will serve the stylesheet with the new version number, forcing your browser to re-download it, otherwise while you're under development you can register your CSS in that way (which is really handy):

wp_enqueue_style( 'main-style', get_stylesheet_uri(), array(), time() );

This enforces to append a timestamp on the CSS as query variable, so your browser believes that's a new file and the new fresh CSS gets downloaded every time you refresh the page.

Generally the CTRL/CMD + SHIFT + R works without any problem, if you still see your old CSS even with those changes one of these is probably what is causing problems:

Your website is using Cloudflare and you forgot to enable dev mode
Your wordpress is running a caching plugin
You're uploading your file in the wrong place

Cheers

edited Aug 7, 2014 at 14:55

answered Aug 7, 2014 at 14:50

MacK

2,22122 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rlatief Over a year ago

a cooment about adding timestamp to css/image file query, rather than time() you might want to use filemtime('path_to_file') instead so "redownload" only happens when the file's changed.

zzwyb89 Over a year ago

Thank you, that works. Didn't know Cloudflare can actually affect it!

MacK Over a year ago

@rlatief true, if we are going for the elegant way I would suggest filemtime() too :)

MacK Over a year ago

@zzwyb89 no worries, I had same problem and I lost 2 hours looking into it, I learned the hard way to keep development off Cloudflare ;)

sami · Accepted Answer · 2014-08-07 15:08:58Z

-1

in the css addd the !important syntax after the lines like this

.some_class_to_edit{
   text-decoration: none !important;
}

And also try to check that there is no another css coming after that, which can override it

edited Aug 7, 2014 at 15:08

answered Aug 7, 2014 at 14:55

sami

4913 bronze badges

Collectives™ on Stack Overflow

Custom CSS class not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related