Aligning Last Item to the Bottom of a Container in Flexbox
In a column based Flexbox layout you may want the last item to align to the bottom of the parent container – something you can achieve with the margin property – consider a simple column layout but it is in…
Centering The Last Item In A Flexbox Container
I’m using flexbox more and really liking it, I’ve hit an issue a few times with center aligning the last item in an uneven row of elements inside a flexbox row container when using the justify-content: space-between; flexbox property, you…
Flexbox – some notes on Container and Child Item Properties and Values
This is not a tutorial as such, just a bunch of notes for myself as I start to utilize flexbox more in my layouts, there is quite a lot of great guides with working layout interactive examples but I am…
AutoPrefix Browser Vendors to your CSS style sheet with a Gulp Workflow
You can automatically add browser vendor prefixes to your CSS style sheet using a Gulp workflow and an AutoPrefixer package, this can be a huge time save and safety net to use newer CSS properties like flexbox that require cross browser prefixes.…
Adding a centered horizontal submenu in Genesis Theme
In some instances you may need a horizontal submenu as appose to a vertical one, in WordPress with a few CSS tweaks, here is how you can achieve it, this guide uses the latest Genesis Sample theme CSS. So going…
Add CSS3 Animations to your WordPress Theme
You can easily add CSS 3 animations to your WordPress Theme with the very easy and popular animate.css by Daniel Eden. Download the latest version and add the animate.min.css file to your themes directory in a css subdirectory. Enqueing the CSS…
Make a Full Width Twenty Sixteen Theme Header
Here’s how you can make a full width header with a background image in WordPress’ latest default theme ‘Twenty Sixteen’. So above I have just chosen the color scheme as grey and added a header image, which just sits the…
Add Odd / Even CSS Class Name to Posts in WordPress
You can add an ‘odd’ and ‘even’/ CSS class name to sequential posts in a blog /archive page by utilising the post_class filter. You can add the snippet below in your theme functions.php file. To target specific posts in an archive or…
Add a CSS class to a menu or menu item in WordPress
CSS Classes can be added to a WordPress menu via a filter named – wp_nav_menu_args , a number of other parameters can also be added. Another filter nav_menu_css_class can also be used for actual list items. Adding a CSS Class to a…
Overriding JetPacks CSS Styles in WordPress
You can override JetPacks CSS styles without using the !important declaration with a few tweaks in your functions.php file. Currently the JetPack CSS style sheet is loaded late in the header of the document pretty much after your main theme’s…
