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 of how the selector is written and what it targets. Descendant Selector The descendant selector…
Read MoreCreating a Social Media Menu from Icon Fonts with FontAwesome
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 MoreRemove 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 not need it . It also loads a bunch of other javascripts and CSS styles…
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 MoreAdd 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 no! as this can result in script conflicts or duplications or just downright badness, there…
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 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 MoreAdd 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 So in the above the 5 regular metas are targetted, swap in your desired icon…
Read MoreChange 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 of the post and includes category and tag info and post-terms applies to custom taxonomy…
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 More