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 MoreChange WooCommerce Checkout Page To A 2-Column Layout
The default WooCommerce checkout page layout doesn’t make great use of a 2nd right hand column and looks a bit disjointed. Here is some CSS that can push the product order data to the 2nd column balancing the layout more evenly, making for a better user experience whilst checking out. The CSS kicks in at…
Read MoreAdd full screen window canvas to back to icons when searching in Beaver Builder
In a recent Beaver Builder update the canvas size for an icon search was humbly shrunk as some users didn’t like the vast open lands of icon city. With a bit of CSS code injected into the backend, the icon canvas size can be resized back to its former glory. Add the above code to…
Read MoreMake a whole container a clickable link in Bricks Builder
To add a link to a whole container element in a Bricks Builder layout you need to use some jQuery to add the link tag markup to make the whole container clickable. There needs to be 1 link already within the containers nested elements – that is the link that will be used for the…
Read MoreA look at various types of CSS selectors and differences between them.
CSS styling can get very specific and you can target less classes and IDs in the HTML markup, and instead target cascading HTML elements – here we take a look at the various CSS Selectors, and give some simple examples of how the selector is written and what it targets. Descendant Selector The descendant selector…
Read MoreAvoid Blank Square FontAwesome 5 Icons when used as CSS Pseudo Elements
Are your FontAwesome 5 icons appearing as blank squares “□ □ □ □” ? Are the icons displaying on Desktop ok but not displaying on iOS Mobile Safari iPhones or iPads? – you need to tighten up your CSS rules in order for them to display correctly. Add FontAwesome 5 CSS First up is to…
Read MoreAn Introductory Guide for starting out with SASS for CSS
SASS and LESS are two similar tools for writing out CSS code that is sort of pre-CSS code with variables – that is then converted to good ole regular CSS code. Why you would want to use them really depends on your workflow, for smaller scale work and minor CSS updates it probably isn’t necessary but for mid-large…
Read MoreUp and running with installing Sass on macOS
Up and running with installing Sass on macOS Big Sur or earlier OSX Sass (Syntactically Awesome Stylesheets) is a CSS pre-processor tool in which you write your CSS code using variables, selector inheritance, mixins, and nestings and and then compile that code to spit out regular CSS. The benefits of SASS are more advantageous in…
Read MoreAdd a CSS class on a current active menu item
With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS. (function($){ $(function() { // Document Ready activeMenu(); }); // Functions // @link https://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu function activeMenu() {…
Read MoreShow All Loaded Scripts and Styles on a Page in WordPress
To show all loaded scripts and styles on a page in WordPress you can use a foreach loop and show the name of the script as referred to as a $handle add_action( ‘wp_print_scripts’, ‘prefix_show_me_the_scripts’ ); /** * Show what Scripts and Styles are running on a page */ function prefix_show_me_the_scripts() { global $wp_scripts; global $wp_styles; echo…
Read More