WordPress.org

Support

Support » Themes and Templates » Encounters Lite » [Resolved] Changing the Showcase CSS/Menu Problem

[Resolved] Changing the Showcase CSS/Menu Problem

  • 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!

Viewing 13 replies - 1 through 13 (of 13 total)
  • 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;
    }

    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 🙂

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

    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.

    Theme Author Styled Themes

    @gejay

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

    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.

    Theme Author Styled Themes

    @gejay

    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/

    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?

    Theme Author Styled Themes

    @gejay

    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).

    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

    Theme Author Styled Themes

    @gejay

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

    Version: 1.6.3

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

    Theme Author Styled Themes

    @gejay

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

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Resolved] Changing the Showcase CSS/Menu Problem’ is closed to new replies.
Skip to toolbar