Css Cascade

A look at various types of CSS selectors and differences between them.

By Neil Gowran / April 14, 2021 /

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 More
Twitter Icon Fontawesome

Creating a Social Media Menu from Icon Fonts with FontAwesome

By Neil Gowran / March 29, 2021 /

How to make social media menus from icon fonts using the awesome FontAwesome. Fontawesome is widely used and supported in all modern browsers and older browsers.   <link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css” rel=”stylesheet”> You can link to the Fontawesome CSS file via a CDN or just copy the download it to your site. If using WordPress you can…

Read More

Remove WooCommerce CSS Styles and Scripts From Pages That Don’t Need It

By Neil Gowran / March 3, 2021 /

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 not need it . It also loads a bunch of other javascripts and CSS styles…

Read More
Sass Macos

An Introductory Guide for starting out with SASS for CSS

By Neil Gowran / May 15, 2019 /

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 More
Add Css Class Active Menu

Add a CSS class on a current active menu item

By Neil Gowran / March 14, 2019 /

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 More

Add Javascript and CSS files to the Head and Footer in WordPress

By Neil Gowran / October 4, 2018 /

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 no! as this can result in script conflicts or duplications or just downright badness,  there…

Read More

Adding a Sticky Footer to Beaver Builder Theme with CSS

By Neil Gowran / July 26, 2018 /

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 More

Adding Flexbox CSS to WooCommerce Shop and Products

By Neil Gowran / June 5, 2017 /

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

By Neil Gowran / February 23, 2017 /

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

By Neil Gowran / February 23, 2017 /

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