A 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…
Remove WooCommerce CSS Styles and Scripts From Pages That Don’t Need It
WooCommerce loads three core CSS style sheets on every page and post when installed on a WordPress site. You can save a bit of page load time here by removing the styles and scripts from pages and content that do…
An 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,…
Add 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($){…
Add Javascript and CSS files to the Head and Footer in WordPress
Getting it right in the head As a hack every now and then I used to add in javascript or CSS files with links hardcoded directly into the header.php or footer.php template files of a WordPress theme. This really is a no…
Adding 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. …
Adding 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…
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…
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…
