You can add in a full width responsive image header into a Genesis child theme by using the header element and set a background image to it by setting a CSS rule. Using the Genesis sample theme as an example, in the above illustration the logo or site title will be handled with the .title-area div if …
Read More
Faux Full Width Page Titles in a Genesis Child WordPress Theme
This layout calls for a full viewport width background color of the page title which is to appear on all pages, there are a defined amount of pages on the site with short titles. To achieve this effect using the sample Genesis child theme you can take advantage of the .site-inner div Change the CSS .site-inner …
Read More
Swap WordPress Twenty Twelve Mobile Menu to Slick Navigation Menu
How to use Slick Navigation menus in a WordPress theme, you can use the jquery responsive menus in any theme, this guide will use a clean default WordPress Twenty Twelve child theme, remove the existing responsive mobile menu used and use the slick navigation menus instead. There is a Genesis version of the guide here. …
Read More
Make a Read More Link with Dashicons for Posts in Genesis Child Theme
By default in a Genesis Child and any WordPress theme the ‘read more‘ link in a post is not a link and is an ellipse surrounded by square brackets[…] There is a WordPress filter that allows this to be changed called excerpt_more, a function needs to be created and then passed into that filter. This …
Read More
Create a PreHeader Full Width Wrap Bar in Genesis Theme
If you have a layout that requires a pre-header full content wrap that needs to have elements such as an optin form and member or social media menu, you can add a widget area in a Genesis child theme just above the main header area that contains any content you need with the ability to …
Read More
Add a Facebook Like Box HTML5 style to Genesis Child Theme (Responsively)
How to add a HTML5 version Facebook Like Box to a Genesis Child Theme and make it responsive… Facebook Code Get you facebook code and choose the HTML5 version. The bottom HTML code goes in your sidebar widget or where ever you want the Facebook like box to go, the top javascript code needs to go …
Read More
Create an FAQ Page with Show and Hide Questions and Answers using jQuery
This guide will take you through the steps needed to create an FAQ page with contract and expand Questions and Answers, just follow the Questions below… What jQuery do I need? Include the latest jQuery <script type=”text/javascript” src=”//code.jquery.com/jquery-1.11.0.min.js”></script> If you are using a modern CMS such as WordPress or Drupal you can skip this as …
Read More
How to Make Images Scale for Responsive Web Design
So you have got your web layout flexing and changing layout in a fluid or responsive web layout – but the images are not quite working they are being stubborn and not scaling and moving around like the text! The reason is because the images most probably have a fixed width which the web layout …
Read More