This tutorial provides the steps to get the list of all users in the site, loop through them and if the user has published at least one post, display the user’s avatar, display name and job title (a custom user profile field) and use CSS Grid with a Flebox fallback to display the results in […]
CSS
How to remove dark overlay on hero images in Showcase Pro
Looking to get rid of the dark overlay on hero images (appearing, for example, on static Pages with featured images) in Showcase Pro? Before: After: Simply locate .bg-primary:after, .bg-light-gray:after { content: ” “; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .bg-primary:after { background: #1a1a1a; } in Showcase […]
Using Flexbox for displaying widgets in columns
A common question I see being asked is, “How do I display widgets placed in a widget area in columns?” In this tutorial, I provide basic Flexbox CSS code for arranging three child elements of a container side by side in columns. Screencast: Given the HTML structure of we begin by declaring display property of […]
Thin Font Awesome Close Icon
As of v4.7.0, FontAwesome does not have a thin close (x) icon. <i class="fa fa-times fa-2x" aria-hidden="true"></i> results in, for example, To display a thin icon instead, add this CSS: .fa-times-thin:before { content: ‘\00d7’; } and this sample HTML: <i class="fa fa-times-thin fa-2x" aria-hidden="true"></i> The result: Much better! Source: https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
How to overlay titles over images in Genesis Featured Posts widget
When a Genesis – Featured Posts widget is set to display title and featured image (but not content) it may look something like this (screenshot from Lifestyle Pro): We can add CSS to overlay the entry titles centered on top of the featured images like this: Add the following in child theme’s style.css and customize […]
How to slant edges of elements in Genesis
For a while I had this article on viget.com saved in my pinboard. I tried the clip-path CSS code given in that article a few times and wasn’t sure what the values were representing or where they came from plus couldn’t get it working in Firefox. I finally took the time yesterday to research on […]
Flexbox Grid in Genesis
Flexbox Grid is a grid system based on the flex display property. Here’s how it can be loaded and used in Genesis: Step 1 Upload flexboxgrid.min.css to child theme’s css directory (create if not existing). Step 2 Add the following in child theme’s functions.php: Step 3 Add the needed markup to display your desired content […]
Retina-ready Circular Navigation Icons in Genesis
In this article I share how I have set up circular navigation items in the Primary Navigation of Genesis in a recent PSD > WP project. Each image is a sprite with regular state and hover state images next to each other horizontally. Since the desired icons’ size is 60 x 60, I have set […]
[Video] Using ungrid for showing content in columns in WordPress
In this screencast I take a look at ungrid, a responsive and table-based CSS grid system and show how it can be used to split content into columns in WordPress (Genesis to be specific). Here’s the code you see in the above video:
How to Remove Border From Image Links
Scenario: Problem: Solution: to get Source: http://stackoverflow.com/a/17925145/778809
Recent Comments