CODEWITHSUNDEEP
phphtmlcsswordpress
zzwyb89
zzwyb89

Reputation: 470

Custom CSS class not working

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>

Upvotes: 0

Views: 2400

Answers (2)

sami
sami

Reputation: 49

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

Upvotes: -1

MacK
MacK

Reputation: 2191

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

Upvotes: 5

Related Questions