Title: Changing the Showcase CSS/Menu Problem
Last modified: August 21, 2016

---

# Changing the Showcase CSS/Menu Problem

 *  Resolved [lhk](https://wordpress.org/support/users/lhk/)
 * (@lhk)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/)
 * [Illustration of the problem](http://img843.imageshack.us/img843/4315/94rc.png)
 * 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)

 *  [Flash Buddy](https://wordpress.org/support/users/flashbuddy/)
 * (@flashbuddy)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120217)
 * 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;
       }
       ```
   
 *  Thread Starter [lhk](https://wordpress.org/support/users/lhk/)
 * (@lhk)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120221)
 * 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 🙂
 *  [Flash Buddy](https://wordpress.org/support/users/flashbuddy/)
 * (@flashbuddy)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120327)
 * Find a [css3 boxshadow](https://www.google.com/search?q=css3+box+shadow+generator&rlz=1C1SKPM_enUS510US510&oq=css3+box&aqs=chrome.3.0j69i57j5j0.8033j0&sourceid=chrome&ie=UTF-8)
   generator, create your shadow, then copy and paste the code.
 *  Thread Starter [lhk](https://wordpress.org/support/users/lhk/)
 * (@lhk)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120331)
 * 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.
 *  [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120410)
 * Which part of the showcase area do you want a shadow, the very bottom of it where
   the main content (white area) is?
 *  Thread Starter [lhk](https://wordpress.org/support/users/lhk/)
 * (@lhk)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120415)
 * 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.
 *  [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120418)
 * 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/](http://css3generator.com/)
 *  Thread Starter [lhk](https://wordpress.org/support/users/lhk/)
 * (@lhk)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120421)
 * 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?
 *  [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120422)
 * 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).
 *  Thread Starter [lhk](https://wordpress.org/support/users/lhk/)
 * (@lhk)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120430)
 * 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](http://img692.imageshack.us/img692/7616/g6en.jpg)
 *  [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120431)
 * What version of Encounters Lite are you using? Also, do you have a link to your
   site?
 *  Thread Starter [lhk](https://wordpress.org/support/users/lhk/)
 * (@lhk)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120435)
 * Version: 1.6.3
 * I don’t really want to post a link here. Can I send you that per email?
 *  [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120443)
 * No worries… contact me from my styledthemes.com website with your link.

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

The topic ‘Changing the Showcase CSS/Menu Problem’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/encounters-lite/2.6.0/screenshot.
   png)
 * Encounters Lite
 * [Support Threads](https://wordpress.org/support/theme/encounters-lite/)
 * [Active Topics](https://wordpress.org/support/theme/encounters-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/encounters-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/encounters-lite/reviews/)

## Tags

 * [Borders](https://wordpress.org/support/topic-tag/borders/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 13 replies
 * 3 participants
 * Last reply from: [Styled Themes](https://wordpress.org/support/users/gejay/)
 * Last activity: [12 years, 8 months ago](https://wordpress.org/support/topic/changing-the-showcase-cssmenu-problem/#post-4120443)
 * Status: resolved