WordPress.org

Ready to get started?Download WordPress

Forums

Encounters Lite
Changing the Showcase CSS/Menu Problem (14 posts)

  1. lhk
    Member
    Posted 10 months ago #

    Illustration of the problem

    I'm trying to change the way the showcase area displays. # 3 is what I would love to achieve (well, actually I'd love me a real drop shadow, but I'd be satisfied with this).

    Version 1 is how it looks like with just the inner borders and margins set to 0px.

    So I fiddled with the CSS and a child theme and pasted this into the child style.css:

    #showcase {
    margin: 0% auto;
    padding: 1% 5%;
    }
    
    #showcase-wrapper,
    #banner-wrapper,
    #wpheader-wrapper {
    	border-bottom: 8px solid #000000;
    	border-top: 1px solid #000000;
    }

    and #2 is the result. I did try to set

    #header {
    border-bottom:9px solid #938E87;
    }

    but this doesn't change anything. At all.

    Please, any ideas anyone what I could do? And I don't know whether I didn't break anything with the changes I made, especially the one from 1% to 0% or whether that was correctly done at all. Please advise there as well. Thank you so much!

  2. flashbuddy
    Member
    Posted 10 months ago #

    Fooling around with it I found that the top border you are trying to color black is controlled via the theme options:
    Header Border (select color).

    Try adding this to your child theme and let me know what happens. Note: you won't see the shadow effect if you make that border black, it would have to be some shade much lighter. Try #575757.

    .scanlines-header {
    -webkit-box-shadow: 0px 4px 4px 1px #000000;
    box-shadow: 0px 4px 4px 1px #000000;
    }
  3. lhk
    Member
    Posted 10 months ago #

    Hi flashbuddy!

    That worked perfectly! And stupid me has now also found where to set the base colour.

    Would it be possible to use that also for the bottom border, the show-case wrapper one? How do I replace the border then to do that?

    And thank you so much, you spared me hours of fiddling :)

  4. flashbuddy
    Member
    Posted 10 months ago #

    Find a css3 boxshadow generator, create your shadow, then copy and paste the code.

  5. lhk
    Member
    Posted 10 months ago #

    I tried that, but it doesn't attach to the showcase-wrapper. I can get it to attach to the showcase item itself, but that's not what I wanted.

  6. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    Which part of the showcase area do you want a shadow, the very bottom of it where the main content (white area) is?

  7. lhk
    Member
    Posted 10 months ago #

    The lowermost border, yes. The one which is now a full black 8px. Can't change it.

    There are anyway several areas which do not really respond to CSS changes and are hard to figure out.

  8. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    Some things may be hard to change because they are using inline styling from the theme customizer. However, to help you on adding a drop shadow on the showcase area, add this to your child theme's style.css file, although you can make any adjustments you want to it:

    #showcase-wrapper {
    -webkit-box-shadow:  0px 6px 12px 0px rgba(0, 0, 0, .5);
    box-shadow:  0px 6px 12px 0px rgba(0, 0, 0, .5);
    position: relative;
    }

    One thing about this one, is that if you don't have anything in the Showcase, you won't have the shadow. If you want the shadow on all pages with or without the showcase, then in the code above, add #header to it like this:

    #showcase-wrapper,
    #header {
    -webkit-box-shadow:  0px 6px 12px 0px rgba(0, 0, 0, .5);
    box-shadow:  0px 6px 12px 0px rgba(0, 0, 0, .5);
    position: relative;
    }

    By the way, I use this for my CSS3 shadows and other things:
    http://css3generator.com/

  9. lhk
    Member
    Posted 10 months ago #

    Thank you! This works perfectly.

    Another question. I installed from the online WP-version of the theme. When I set up child menus under the main top menu, it will show unhighlighted with rounded edges. The moment I go active, it only partially highlights (the rightside curve isn't) and on the left side there's an upper "sharp" corner instead of a rounded one.

    I suppose some of the CSS or code didn't fully transmit, because when I check with the version on your site it works fine.

    What exactly *should* the relevant CSS be? Is there some code somewhere which might get messed up?

  10. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    Actually...I've been trying to figure out how to solve that one. That will only happen if there is a single submenu item. Once you add more submenu items, that self adjusts. The only way I am thinking I can solve that is to increase the padding space at the top and bottom (which I made a note to try out).

  11. lhk
    Member
    Posted 10 months ago #

    OK, thanks again! I added one more item, and now the corners are rounded.

    However the whole container still seems to be roughly 20px wider than yours on the demo site, and the highlighted area doesn't reach this surplus. Here's a screenshot of this:

    http://img692.imageshack.us/img692/7616/g6en.jpg

  12. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    What version of Encounters Lite are you using? Also, do you have a link to your site?

  13. lhk
    Member
    Posted 10 months ago #

    Version: 1.6.3

    I don't really want to post a link here. Can I send you that per email?

  14. StyledThemes
    Member
    Theme Author

    Posted 10 months ago #

    No worries... contact me from my styledthemes.com website with your link.

Reply

You must log in to post.

About this Theme

About this Topic