Aligning Last Item to the Bottom of a Container in Flexbox

By Neil Gowran / February 15, 2017 /

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 a row of similar items but with varying amounts of text. The ordered list has…

Read More

Centering The Last Item In A Flexbox Container

By Neil Gowran / November 14, 2016 /

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 could use  justify-content: flex-start; – but when that won’t do, here is a solution  below. So…

Read More

Flexbox – some notes on Container and Child Item Properties and Values

By Neil Gowran / October 30, 2016 /

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 not going that far here – so on with the properties… Flexbox is best used…

Read More

AutoPrefix Browser Vendors to your CSS style sheet with a Gulp Workflow

By Neil Gowran / October 22, 2016 /

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. Create a package.json file Either run npm init in your project directory or just copy and…

Read More

Adding a centered horizontal submenu in Genesis Theme

By Neil Gowran / September 20, 2016 /

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 from this…   to this…   There are only 5 CSS selectors to edit, you…

Read More

Add CSS3 Animations to your WordPress Theme

By Neil Gowran / December 30, 2015 /

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 After the animate.min.css is filed add to your themes functions.php file Adding the CSS Animation…

Read More

Make a Full Width Twenty Sixteen Theme Header

By Neil Gowran / December 25, 2015 /

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 image below the the site title and menu – maybe you want the image as a background…

Read More

Add Odd / Even CSS Class Name to Posts in WordPress

By Neil Gowran / December 23, 2015 /

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 home page, you can either wrap the code in a conditional statement or write your…

Read More

Add a CSS class to a menu or menu item in WordPress

By Neil Gowran / December 10, 2015 /

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 menu function modify_nav_menu_args( $args ) { if( ‘primary’ == $args[‘theme_location’] ) { $args[‘menu_class’] = ‘menu…

Read More

Overriding JetPacks CSS Styles in WordPress

By Neil Gowran / April 2, 2015 /

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 style sheet, it is a 53kb minified style sheet which has CSS for a number…

Read More