You can add Flexbox to WooCommerce shop page, product category archives and related products rows and actual products with a few lines of CSS – this will ensure that the products will line up nicely aligned top to bottom. WooCommerce CSS itself will do a lot of the grunt work with row % widths based on… Read More
Add Icons in Genesis Header and Footer Post Meta Info
You can easily add icons just before the labels in Genesis Entry and Footer Meta content, including… .entry-time .entry-author .entry-comments-link .entry-categories .entry-tags The five metas can be targetted with some CSS pseudo selectors by adding the below CSS to your style.css So in the above the 5 regular metas are targetted, swap in your desired icon… Read More
Change the Genesis Meta Output, Post-Info, Post-Meta and Post-Terms
This tutorial takes you through changing the Genesis Meta Output, the Post-Info, Post-Meta and Post-Terms, post-info is typically at the top of a single post above or below the heading with dates, author and comments info, post-meta is at the foot of the post and includes category and tag info and post-terms applies to custom taxonomy… Read More
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 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
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
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
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
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
You can easily add CSS 3 animations to your Genesis 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
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