• Resolved deborahbabin

    (@deborahbabin)


    I am using YOKO theme and would like to have a shadow effect under the header. Any tips?
    I think I saw this in some other themes. The current header is too flat.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Marventus

    (@marventus)

    Hi. Could you capture a screenshot of your site and add the shadow so that I can understand where you want it?
    Also, please share a link to your site.
    Thanks!

    Thread Starter deborahbabin

    (@deborahbabin)

    http://www.deborahbabin.com
    i tried to do a screen shot but it won’t copy here.
    it is simple….
    the header is a regular image, flat.
    i want dimension, with a shadow to one corner.
    the shadow would show on two sides
    the images in the gallery have a slight shadow and this looks nice.
    i only found one theme that had shadows but it was over the top.
    i want a clean modern look.

    Marventus

    (@marventus)

    Hi Deborah,

    Is this what you have in mind?

    Thread Starter deborahbabin

    (@deborahbabin)

    close! thanks so much.
    The shadow is hardly there but it is better than flat.
    Can it be increased a bit?
    I want a slight floating effect.

    Marventus

    (@marventus)

    How about now?

    Thread Starter deborahbabin

    (@deborahbabin)

    that is great! I see a new line above the menu…is that because of the shadow? I would like the page to be clean and this line is sort of distracting.
    thanks

    Marventus

    (@marventus)

    Here are the changes you need to make to your theme’s style.css to implement that shadow:
    1. Change:

    #container {
    max-width: 770px;
    }

    To:

    #container {
        max-width: 778px;
    }

    2. Change:
    `
    #branding img {

    max-width: 100%;
    }

    2. Add this new style:
    #branding a {
    display: block;
    width: 778px;
    }

    Marventus

    (@marventus)

    Here are the changes you need to make to your theme’s style.css to implement that shadow:

    1. Change:

    #container {
    max-width: 770px;
    }

    To:

    #container {
        max-width: 778px;
    }

    2. Change:

    #branding img {
    (etc...)
    max-width: 100%;
    }

    To:

    #branding img {
    box-shadow: 5px 5px 5px #666666;
    max-width: 775px;
    }

    3. Add this new style:

    #branding a {
    display: block;
    width: 778px;
    }

    About the line above the menu, it was already there in your theme. However, if you wish to remove it, Look for this code:

    #access {
    border-top: 1px solid #CCCCCC;
    display: block;
    float: left;
    margin: 0 auto;
    padding: 1px 0 0;
    width: 100%;
    }

    and delete the border-top property.
    That’s about it.
    Good luck!

    Hi!
    Did you figure this out? If so, please mark this thread as resolved.
    Thanks!

    Thread Starter deborahbabin

    (@deborahbabin)

    thanks for the effort. i have decided to use a different theme. i think your code would have worked, but i found another theme that provided the effect i wanted.

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

The topic ‘Header with shadow’ is closed to new replies.