CSS
Controlling long document display on a web page can be greatly enhanced with a Javascript solution like ScrollNav which collates all of a defined HTML element in a document like a heading tag such as a h2, puts all of the elements set up in a navigation markup done for you and keeps the links to the relevant…
Read MoreHow to swap Header Right and the Title/Logo Area mark up structure in Genesis Sample Theme. Genesis themes most of the time come with a header site title & description area on the left and widget area on the right, this is suitable a lot of the times but on occasion you may need this…
Read MoreThe Genesis Sample theme does not have a custom Header option in the Appearance sub-menu in WordPress Dashboard unlike all the other Genesis themes. Custom Headers are a native WordPress function that can be added to any theme including the Sample theme. This option can be easily added via a code snippet into your functions.php file. //*…
Read More
You’ve worked long and hard and slaved over your masterpiece but the CSS styles you wrote are just not being applied to your HTML, how can you check that the CSS syntax and formatting is correct? CSS Lint can do this for you. Got to the CSS LINT site and paste in your CSS. You…
Read MoreBy default the Search widget in a Genesis WordPress theme does not have a submit button, just hitting enter on the keyboard will do the trick but what if you deadset want that clickable submit button back. Using the Genesis Sample Theme, this is how the search widget looks like when added in the Header Right and…
Read MoreYou 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
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
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 TwentyTwelve 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. Also…
Read More