yet another – removing box-shadow from header image in twenty twelve

  • Resolved 5high

    (@5high)


    11 years, 3 months ago

    Hi,

    I realise this has been asked heaps already – but for some reason the overriding css that works for them, isn’t working for me…

    I’m developing a twenty-twelve child theme, which can temporarily be seen here: https://trevorpenfold.com/testing

    and the code I’m using is:

    img.header-image {
		border-radius: none !important;
		box-shadow: none !important;
		}

    and I’ve also tried it with

    img.header-image {
		border-radius: 0 !important;
		box-shadow: 0 !important;
		}

    I’ve even tried to get rid of it from the whole of the ‘masthead’ area with this:

    #masthead .site-header {
		border-radius: none !important;
		box-shadow: none !important;
		}

    but again no luck. So any pointers would be much appreciated.

    Cheers.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Which section are you trying to remove the box-shadow from – the entire white content area?

    If so, it is:

    body .site {
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    margin-bottom: 3.42857rem;
    margin-top: 3.42857rem;
    padding: 0 2.85714rem;
}

    Replace, in your child theme:
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

    with:
    box-shadow: none;

    Thread Starter 5high

    (@5high)

    Hi mb,

    Thanks for your reply – I’m trying to remove the box-shadow from either the header image area, or the whole ‘masthead’ .site-header area, so it remains on the rest of the page.

    I’m obviously not getting the correct css syntax as I can remove the whole page box-shadow as you’ve said, and can eliminate the border-radius on the header image, but absolutely no effect on the box-shadow in the header area.

    Other css I’ve tried is:

    body.site-header [role="banner"] {
		box-shadow: none !important;
		}

    and

    masthead.site-header [role="banner"] {
		box-shadow: none !important;
		}

    both with no effect!

    Any ideas??

    I looked at this in Firebug:

    There is this main div:
    <div id="page" class="hfeed site">
    which wraps around everything, including the
    <header id="masthead" class="site-header" role="banner">
    … and it is the div with the box-shadow:

    body .site {
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    margin-bottom: 3.42857rem;
    margin-top: 3.42857rem;
    padding: 0 2.85714rem;
}

    …so, it seems that to remove the box shadow from the header, the box-shadow has to be removed from the whole div id=page.

    If you view the page source, you can see this div id=page wrapping around everything.

    Thread Starter 5high

    (@5high)

    Hi,
    Thanks for your reply – I’ve been slightly delayed, as i’ve had an issue with my php memory usage – so my site crashed – up again now, so will look at it tomorrow hopefully and get back with the result.
    Cheers.

    Thread Starter 5high

    (@5high)

    Hi mb,

    What you’ve said certainly seems to be true, as no matter what I try, it makes no effect, except when i remove it from the #body .site div.

    I had thought that if you were very specific in your css class selection, you could alter individual classes – but it appears not with this one, presumably because it wraps the whole page as one, as you said.

    Never mind, i guess it’s all or nothing then!

    Thanks heaps for taking the time to look at this for me – much appreciated.

    Cheers.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘yet another – removing box-shadow from header image in twenty twelve’ is closed to new replies.