WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] 2012 Theme: how do I remove the header shadow? (13 posts)

  1. Lordarchway
    Member
    Posted 1 year ago #

    Using 2012 on self-host and I'd like a nice clean white header. Have uploaded a borderless, transparent header image but the theme seems to have added a grey border/faint drop shadow around it. How do I remove this?

    Thanks for any idiot-proof step-by-steps you can give, chaps!
    Simon

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Do you have a Child Theme or custom CSS (via jetpack plugin for example) set up? That's the first step so that your changes are not erased when WP is updated.

  3. Lordarchway
    Member
    Posted 1 year ago #

    HI there, thanks for replying (and so quickly!) No, I've literally just installed the site at my hosting company and uploaded the header image. I'd heard I should do a child theme if I'm tweaking it, but have no idea how to do that. Have just done a Plugin search and there's one called Childthemify to create an instant child--should I use that?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Personally, I would read the linked page and follow those directions for a child theme. But if you only want to make CSS changes (which is what the border removal involves), just install the jetpack plugin - it has custom CSS along with a bunch of other useful stuff.

    http://wordpress.org/extend/plugins/jetpack/

  5. Lordarchway
    Member
    Posted 1 year ago #

    OK, installed Jetpack--lots of interesting stuff there! But still none the wiser about how to use the CSS Stylesheet Editor that it brings up--don't really want to learn to speak HTML fluently right now if I can avoid it! So is there a bit of code I just drop into the jetpack editor window?

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yep, perfect, and try this:

    img.header-image {
        box-shadow: none;
    }
  7. Lordarchway
    Member
    Posted 1 year ago #

    Genius! That did it, thank you soooo much!

    I don't suppose you know a bit of code to delete the two grey lines at the top of the page too? I may not do it but it would be nice to see what it looked like! Thanks again!
    Simon

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The best way to sleuth out these CSS issues is using a tool such as Firebug -- as it will show you the CSS that is creating or affecting an element on your page -- then you can copy that code to your custom CSS and make the changes there. So you might want to check it out! https://getfirebug.com/

    Can you post a link to the site so I can see which lines you are talking about?

  9. Lordarchway
    Member
    Posted 1 year ago #

    Sorry, yes the lines holding the top menu items:

    Couldn't get the link thing to work here: it's: http://www.nobodyscrolls.co.uk

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    See if this does it:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
        border-bottom: 0;
        border-top: 0;
    }
  11. Lordarchway
    Member
    Posted 1 year ago #

    That's it! Fabulous! Can't thank you enough...like having my own live support person. I'll check out Firebug, 'bout time I understood html properly. Cheers and goodnight from the UK!

  12. janetchanson
    Member
    Posted 1 year ago #

    I just installed the 2012 theme. Is there any way to have share buttons across the top instead of on the side

    http://www.janetchanson.com

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry Janetchanson, you'll have to create a thread to discuss that.

Topic Closed

This topic has been closed to new replies.

About this Topic