Genesis Showcase Pro

I have been creating a new website for my church, using the Showcase Pro theme (a Genesis child theme).

Here are some of the customisations that I’ve made to the CSS. They may appear to be small changes, but they were very much needed.

1. Menu sub items to show that they’re highlighted.

I toyed with the idea of a background colour, but decided to just change the text decoration, in line with links throughout.

.genesis-nav-menu .sub-menu li:hover {
	text-decoration: underline;
}

2. ‘Highlight’ button to change upon page scroll.

The menu buttons can have different classes assigned. The ‘highlight’ class places a menu item in a box, which fills white when hovered over (and the text colour changes to match). I found it strange that similar style changes didn’t occur when scrolling (invoking the fixed menu). I used this code to fix that, where #e94b24 is the my main theme colour.

.header-scroll .genesis-nav-menu .menu-item.highlight a:hover {
	background: #e94b24;
	color: #fff;
}

3. Indication of sub menus

The default menu doesn’t give a clue that there may be additional items to display. The following post is out of date, but with a tweak works as expected. Drop-down indicator

The change needed was in the name of the font. I also changed the font size which is specific to the Showcase Pro menu, to ensure that the alignment was correct.

.genesis-nav-menu .menu-item-has-children > a:after {
	content: '\f431';
	font-family: 'Genericons-Neue';
	font-size: 14px;
	font-size: 1.4rem;
	padding-left: 10px;
	padding-left: 1rem;
	vertical-align: bottom;
}

4. Front Page 1 Widget Area

Another thing that I found strange was that the widget area referenced a class (.front-page-1) that didn’t exist in the CSS file. I wanted to be able to add multiple widgets, side-by-side instead of the main widget as intended, so added a section to the CSS file based upon this class.

/* Front Page 1
 * ========================================================================== */

.front-page-1 .widget {
	background: rgba(255,255,255,0.6);
	margin: 20px;
    }
    
.front-page-1 h3 {
	color: #000;
}

.front-page-1 a {
	color: #e94b24 !important;
	font-weight: bold;
	opacity: 1 !important;
}

.front-page-1 a:hover {
	color: #000;
	font-weight: bold;
	opacity: 1 !important;
}

.front-page-1 .feedzy-rss li {
	padding: 0px 0 16px !important;
}

.front-page-1 .feedzy-rss .rss_item {
	border-bottom: 0px solid #eee !important;
	margin: 0px !important;
}

.front-page-1 h3.widgettitle.widget-title {
    padding-top: 20px;
}

.view-cap, .view-container-border {
	padding: 0 !important;
    background-color: #fff !important;
}

The .feedzy-rss CSS styles an RSS feed to look like the latest posts widget that is next to it. To add three widgets into this widget area, side-by-side, I made use of a plugin called Genesis Widget Column Classes.

I’ll provide a link to the website once it goes live later this month, so that you can see these changes.