Custom CSS not working

  • carthagod

    #4481

    Hello,

    First of all thanks a bunch to Syahir for his great theme !

    I’m having a problem with the custom CSS. It works for some things, but doesn’t seem to be working with others… I’m trying to do two things :

    1) Change the color of the h2 headings. I’ve tried the following code, which should work I guess (as well as many others), without any effects :

    h2{
    color : yellow;
    }

    Strangely enough it works for paragraphs :

    p{
    color : yellow;
    }

    works perfectly, my paragraphs are in yellow.

    2) I want to remove the thick grey border around the images with links. I tried the following, again with no effect :

    a img {
    border: none;
    }

    Starts to drive me crazy cuz I’m trying everything I can think of and it doesn’t work, and I really don’t understand why ! (Because, again, other modifications work perfectly). I also tried editing directly the file style.css (just to test), but no effect as well.

    Can someone please give me a hand ?

    Thanks !

    Thomas

    Anonymous

    #28337

    1. To change h2 colour, try

    h2 {
    color: yellow !important;
    }

    OR,

    h2 {
    color: #FFFF00 !important;
    }

    3. To remove gray border/background colour around images,

    .wp-caption {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    }

    carthagod

    #28338

    Hello Prasanna,

    Thanks for your answer. This fixed the point 1. (color of h2) but not the second one : I still have a grey border around my linked images. What is strange is that I just realised that actually some images have this grey border, while others don’t. It’s easier if you have a look for yourself : http://scuba-college.eu/pictures/they-are-watching-you/. The images in the middle have a grey border, as well as the “Facebook” pic on the left widget, however the picture of the left widget “Red sea liveaboad” doesn’t have this border.

    Can you please also explain to me why the “!important” is needed for solving the point 1. With what is left of my knowledge of css I thought this was a hack so that IE wouldn’t take it into account.

    Also what is “.wp-caption” ? And why doesn’t it work with “a img” ?

    Mod

    Kenneth John Odle

    #28339

    Use Firebug to isolate those codes. I see two borders on those images. On is coming from WP’s default image border, and the other is coming from your plugin’s default image border.

    wp-caption:

    http://codex.wordpress.org/CSS#WordPress_Generated_Classes

    This is an area around an image that can include text. So it doesn’t refer just to an image, but to an image and the text associated with it.

    carthagod

    #28340

    Thank you for your help, I sorted the problem. The relevant classes where : “.ngg-gallery-thumbnail img” for the gallery, and “.sidebar p img” for the facebook image.

    The last unanswered question is the use of the “!important”. Why do I need this for changing the color of the h2 ? Prasanna could you please shed any light on this !

    Thanks a lot,

    Cheers,

    Thomas

    Mod

    Kenneth John Odle

    #28341

    CSS stands for Cascading Style Sheet. Because it’s cascading, whatever is defined last is what you see. the !important tag makes an earlier declaration take precedence over a later declaration. This is sometimes important when something else is styling an element after you style it, but you’re not sure where that style is coming from.

    carthagod

    #28342

    I see ! So another way to get rid of the borders (tried, it works) is the following. Will apply to all images though :

    ‘img {

    border : none !important;

    }’

    Thanks for your help, all problems sorted out !

    Anonymous

    #28343

    carthagod

    #28344

    Ok, thanks !

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!