Inspired by Rafal Tomal’s blog, in this tutorial I show how CSS transition and transform properties can be used to smoothly show a background color around entries animate post title and post info down animate read more link up when an entry in content archives (all listing i.e., non singular pages) that are split into […]
CSS
How to edit Altitude Pro’s style.css to fix the background images’ loading problem
If you have used a full width slider or background video in/for the front page 1 section of Altitude Pro you might have noticed the the backgrounds for other image sections either load incorrectly or partially in Google Chrome. The main reason for this buggy behavior seems to be a combination of z-index and relative […]
Sample CSS for styling Google Custom Search Engine Results page in Genesis
If you have switched the search functionality in your Genesis site from the default WordPress to Google’s and wanted to style the results so they don’t look boring (or ‘ugly’ depending on how design-sensitive you are), add the following in your child theme’s style.css and make the necessary adjustments to match your site’s colors. After […]
How to display a magnifying glass icon in the center of an image on hover using CSS
Want to show a magnifying icon when hovering on an image? In this tutorial I am going to share the code for displaying a Font Awesome magnifying glass icon when a thumbnail image is hovered. We are going to use FooBox plugin to open the full image in a lightbox when the thumbnail image or […]
Circular Color Bullets for List Items using Font Awesome
Please do not follow the tutorial below until further notice. There is currently a problem with the code that’s causing the click region for links inside list items to work erratically. Until I figure out a solution you may want to follow this method. While it is possible to set up color bullets for unordered […]
Zoom hover effect for images using CSS
Using CSS transform and transition properties we can magnify images upon hover. Example: Adding the following in Minimum Pro’s style.css adds the zoom hover effect for images in the Portfolio archive page. Note: Actual animation will be smoother than what’s captured in the above screencast. To view the full content, please sign up for the […]
[Video] How to display entries in columns in Genesis
A user asked, I’m trying to add a column grid of the 8 latest portfolio items to my front page (amongst other content) by adding code tin front-page.php. Each item should show the featured image, title and excerpt. I need to keep the standard loop in tact to display the introductory content but just add […]
CSS for matching Simple Social Icons’ Background Color with their networks
Updated on January 13, 2017 Simple Social Icons Genesis plugin provides options for setting icons’ colors in its widget. However these colors apply to all the icons. We can add CSS to style individual social icons with matching colors as that of the network’s official logo/branding. Here’s the CSS: To view the full content, please […]
[Video] How to make Titles appear on hover in Genesis Featured Page Widgets
Want to learn how Page title can be taken off from the bottom of featured image and made to appear centered on featured image when hovered, using CSS? To view the full content, please sign up for the membership. Already a member? Log in below or here.
How to format CSS per WordPress coding standards using CSScomb in Sublime Text
Want to format your CSS with the click of a button so it is properly formatted per WordPress’s coding standards? Gary Jones has put together a configuration file for this about which he writes: Current WP CSS coding standards for property ordering are outlined at http://make.wordpress.org/core/handbook/coding-standards/css/#property-ordering . These are too generic, so using an automated […]
Recent Comments