Changing the Showcase CSS/Menu Problem

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.

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.

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:
https://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?

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:

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

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?

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