Display CSS Animations When In Browser Viewport
CSS Animations can be easily applied to elements in HTML and viewed in the browser, but when the animation is lower down on the page it may have animated already before the user has scrolled to it. Here’s where Waypoints can solve the problem. (This example is done using WordPress). Waypoints allows you to run…
Read MoreAdd Link Tag to Whole Column in Beaver Builder Layout
To add a link to a whole column in a Beaver Builder layout you need to use some jQuery to add the link tag markup to make the whole column clickable. This post has 2 solutions the first is the simpler one with no CSS just some jQuery – the second one is more long…
Read MoreAdd Taxonomy Terms as CSS Classes to a Post
You can use the body_class filter in WordPress to add the Taxonomy Terms of a Custom Taxonomy as CSS classes to a post. The CSS class appears in the body element and is only used if the post has been assigned to the taxonomy. The code goes in your functions.php file. add_filter( ‘body_class’, ‘themeprefix_add_taxonomy_class’…
Read MoreStyling Beaver Builder Buttons Globally using a CSS Snippet
Styling buttons in Beaver Builder can be quite a lengthy and tedious task and if a change has to be done over many pages the task becomes more onerous. The Builder Module UI covers most aspects of the style but is missing elements such as borders and shadows and the RGBA color model for colors.…
Read MoreFix the Gap in Unordered Lists From Columns In Beaver Builder
If you split 2 unordered lists into columns in Beaver Builder at desktop size, the results will look a little uneven at the smaller viewport on tablet or mobile. You could create a duplicate of the module and show/hide based on viewport or you could fix in CSS by adding a CSS class…
Read MoreCheckerboard Featured Posts Layout like Genesis Atmosphere Pro Theme
Here is a quick tutorial on how to create a blog post layout that has a checkerboard style layout which uses a featured image on one side of the the post and the post headline and content on the other, the image alternates position on each post. This is similar to the Atmosphere Pro theme…
Read MoreAdd a Different CSS Body Class to a Page in WordPress
Using WordPress filter ‘body_class‘ you can add a unique CSS class to the body element of a page by passing in what pages you want the new CSS class applied to. So in the above code I want an additional class ‘beaverbuilder’ applied just to the page with the ID of 8. This code will…
Read MoreFind and Trump Z-Index on all Elements on a Page with jQuery
The jQuery snippet below will search all HTML elements on a page and find the element with the highest z-index value and capture that value in a variable – then using the .css function in jQuery, assign and increment that value by 1 to a selector you have chosen.
Read MoreGive Comments Fields Some Full Width Love
Looking at the WordPress comments field input fields in Genesis on mobile leaves you a bit shortchanged… Give them a full width feeling… @media only screen and (max-width: 860px) { .comment-respond input[type=”email”], .comment-respond input[type=”text”], .comment-respond input[type=”url”] { width: 100%; } } Just change the max-width value to the pixel number that you want the…
Read MoreUsing Customizer to add a CSS background image to widget in WordPress
Here is a guide to add a single background image to a widget using the Customizer in WordPress, I have written up on this topic before utilising some Genesis code used in the Altitude Pro theme to be able to use on other Genesis themes but here I just want to break it down to one single image for…
Read More