CSS
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
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
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
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
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
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
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
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
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
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