Sidebar widget text shawdow

  • sylvia

    #2450

    I used this css in my child theme to remove the text shadow in the sidebar widget, but it did not work…..can someone please help with why?? THANKS!!

    .sidebar h3 {

    text-shadow:none;

    }

    Josh

    #20253

    Weird. That’s the correct code. And you are placing it in the correct place.

    The only things I can think of is to make sure you refresh your browser, and maybe clear any caches you have.

    Secondly, make sure it is at the bottom of your child theme stylesheet. You may also want to try adding !important like this:

    .sidebar h3 {
    text-shadow: none !important;
    }

    Otherwise, it should work. I can get it to work using Firebug on my site (since you didn’t provide a link to test on yours).

    soapy

    #20254

    Josh,

    Thanks for the reply. The weird thing is this works in Firebug…..but not once i make it live on the web. Can’t figure it out and its driving me crazy!

    Mod

    Kenneth John Odle

    #20255

    You can always try:

    .sidebar h3 {
    text-shadow: 0 0 0;
    }

    Include a URL and we can take a closer look.

    soapy

    #20256

    Ken, thanks for the suggestion but that did not work either. Here is what it looks like in firebug…..you can see that the CSS that you suggested appears below the original .sidebar h3……it doesn’t want to recognize it for some reason??

    .sidebar h3 {
    background: -moz-linear-gradient(#B60C0C, #B60C0C) repeat scroll 0 0 transparent;
    }
    www.soapyfame.com (line 18)
    .sidebar h3 {
    text-shadow: 0 -1px #FFFFFF;
    }
    www.soapyfame.com (line 18)
    .sidebar h3, .sidebar h3 a, .sidebar h3 a:visited {
    color: #000000;
    }
    www.soapyfame.com (line 18)
    .sidebar h3 {
    border-color: #B60C0C;
    }
    www.soapyfame.com (line 18)
    .sidebar h3 {
    text-shadow: 0 0 0;
    }
    style....r=3.2.1 (line 62)
    .sidebar h3 {
    background: -moz-linear-gradient(#3C9CD2, #1F6EB6) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #195392;
    border-radius: 5px 5px 0 0;
    color: #FFFFFF;
    font: bold 16px/20px arial;
    margin: -15px 0 5px -12px;
    padding: 7px 12px;
    text-shadow: 0 -1px 0 #555555;
    width: 100%;
    }
    style.css (line 1775)
    html, body, h1, h2, h3, h4, h5, h6, p, img, ul, ol, li, form, fieldset {
    border: 0 none;
    margin: 0;
    padding: 0;
    }

    Josh

    #20257

    The line you are adding MUST be at the BOTTOM of the style.css file. With what you provided:

    This:

    .sidebar h3 {
    text-shadow: 0 0 0;
    }

    is being overwritten by this:

    .sidebar h3 {
    background: -moz-linear-gradient(#3C9CD2, #1F6EB6) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #195392;
    border-radius: 5px 5px 0 0;
    color: #FFFFFF;
    font: bold 16px/20px arial;
    margin: -15px 0 5px -12px;
    padding: 7px 12px;
    text-shadow: 0 -1px 0 #555555;
    width: 100%;
    }

    which is re-writing your text shadow.

    Move your line of code ken gave you (or I gave you), to the bottom of the style.css file on a new line.

    Mod

    Kenneth John Odle

    #20258

    or use a child theme or custom CSS. I still can’t see your site (it redirects to Google).

    soapy

    #20259

    Yeah, sorry about that….its in maintenance mode….have to change that when i get back home.

    Anyways, Josh, the following code

    .sidebar h3 {
    text-shadow:0 0 0;
    }

    is in my child theme. The code I pasted in the previous post is how it appears in firebug. For whatever reason, my child theme css isn’t over ruling this line of code:

    .sidebar h3 {
    text-shadow: 0 -1px #FFFFFF;

    The only way I could get it to work was to go in the graphene display settings…..and where it allows you to pick a color for the sidebar widget text shadow…..i changed that to #0 and then clicked on save settings, and it worked! But this is very strange, it should have allowed my css code in my child theme to over rule the css in the style.css file.

    Mod

    Kenneth John Odle

    #20260

    Actually, this is the order CSS things load in:

    Graphene style sheet

    child theme style sheet

    Graphene light style sheet (for light-colored menu bars)

    Settings made through Graphene settings

    Because CSS always uses the last value loaded, if you make changes in a child theme and then later change the Graphene settings, the Graphene color settings is what will be applied.

    To override later CSS settings, you’ll need to use the !important tag in your css, which Josh suggested. I’m not sure if you tried that, but it should have worked.

    soapy

    #20261

    Ken,

    Thanks for the great information!! This is probably the issue….I’ll try later and let you know, but it makes perfect sense! Thanks SO much for your time!!!!!!!!!!!!!!!!!!!!!!

Viewing 10 posts - 1 through 10 (of 12 total)

You must be logged in to reply to this topic.