Aligning the last element in a Beaver Builder Posts Module
Here is how to align the last element across multiple columns in Beaver Builder Posts Module with Flexbox – this would typically be a button or a read more link. In the Posts Module ensure Equal Heights is enabled as this will give the correct same size height for the columns. Then click on Edit…
Read MoreAdding a Sticky Footer to Beaver Builder Theme with CSS
A sticky footer refers to a web page footer that sticks to the foot of the page even when there is not a lot of content on the page, without one the footer will ride up leaving the layout somewhat unsightly. There are various methods to add a sticky footer, some javascript and others CSS, you…
Read MoreAdd Search Icon After Menu using Beaver Themer with the Beaver Theme
Here’s how you can add a search icon after a menu in a header done in the Beaver Theme using Beaver Themer. Create a Shortcode for the Beaver Builder Search function add_shortcode( ‘bb_search’,’bb_search_shortcode’ ); /* Add Search via shortcode */ function bb_search_shortcode() { ob_start(); FLTheme::nav_search(); return ob_get_clean(); } Create the Header in Beaver Themer Create…
Read MoreFixing BuddyPress Profile Page CSS on a Genesis Theme
When you look at a BuddyPress profile page on a full width page with no sidebar when using a WordPress default theme like Twenty Sixteen it looks a lot better than when viewing in a Genesis starter theme… So out of the box the Genesis theme loses the navigation layout structure of…
Read MoreAdding Flexbox CSS to WooCommerce Shop and Products
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 MoreAdding a Sticky Footer to Genesis Theme with Flexbox
A sticky footer refers to a web page footer that sticks to the foot of the page even when there is not a lot of content on the page, without one the footer will ride up leaving the layout somewhat unsightly. There are various methods to add a sticky footer, some javascript and others CSS, you…
Read MoreAligning 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 MoreCentering 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 MoreFlexbox – 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