-
Alternate Colors in Post and Widget Titles with CSS :nth-of-type
You can alternate colors for your post and widget titles in your WordPress theme or website. It’s easy with a bit of CSS and the :nth-of-type() pseudo selector. While this may sound a bit difficult, it’s really quite easy. Use a Four Color Palette for Every Fourth Post and Widget Title This tutorial starts by…
-
Customize the Read More Text in Genesis Themes with Accessibility
And Without Losing the Read More Accessibility! Accessibility support was added to the Genesis Framework with version 2.2 (Sept. 1, 2015). One of the new accessibility features added was screen reader text on the blog post read more links, so those who use a screen reader know where the read more link takes them. Instead…
-
Style Dropdown Select Menus in Chrome – Square Corners and Height
Have you noticed lately that when you view dropdown select menus with Chrome or Safari browsers that they are very narrow in height and also have rounded corners? This happens, if you’re using a forms plugin or the WordPress Archives or Categories widgets with the dropdown option. They all look like the image below –…
-
Limit Contact Form Widths in Genesis Themes
A number of Genesis child themes set the default styles for form fields (your contact form) to a width of 100%. This makes a nice mobile-friendly form on phones or tablets. On larger screens, it may not be the look you want for your contact form, especially if your child theme is full-width. You can…
-
Add and Style Post Formats in Your Genesis Child Theme
This tutorial will show you how to add and style post formats in your Genesis child theme. So what are post formats? A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. WordPress Codex But really, adding post formats to your WordPress…
-
Genesis WordPress HTML5 Gallery Styles
Genesis and WordPress HTML5 galleries are mobile friendly, and the galleries will resize to fit the device screen. But the default styling has the images get smaller for smaller screens. This tutorial shows you how to keep larger images on smaller screens using inline-block. Note that while I’ll be using the Genesis Sample theme, this…
-
Remove or Override Plugin CSS with !Important
Often when you install a plugin, you want to give it a style that matches or coordinates with your WordPress theme. Sometimes this is easy to do. But sometimes a plugin will use !important in it’s stylesheet. Then editing the CSS can become more difficult. I was recently working with Simple Social Icons, and I…
-
Add Unique Custom Styles to One WordPress Page or Post
One of the nice things about using WordPress is that all the pages and posts can be styled consistently. But sometimes I’m asked to make a particular page or post have custom or unique styles. So let’s suppose you’re creating a sales page, and you want the headings and the buttons to be a green…
-
Add Dashicons to Your WordPress Post
You can add a font icon and a border to your WordPress website pages or posts or widgets. This tutorial shows you how use dashicons in a border on your posts. Many themes now have dashicons enqueued in the theme functions.php, but if yours doesn’t, you can read more about how to add dashicons to…
-
Add An Image to WordPress Category Archive Description
Most WordPress themes now add category descriptions to the category archive pages, if you fill in the Category Name and Description fields. This tutorial shows you how to add images and other HTML to category archive descriptions for the Twenty Fourteen theme and for Genesis child themes, because it’s a bit different.
-
Add HTML – Images and Links – to Text Widgets Without a Plugin
WordPress posts and pages use the TinyMCE editor, so you don’t have to write HTML in your posts and pages, unless, of course, you want to. But the Text Widget is still, well, text. This tutorial will show you how to use the WordPress WYSIWYG editor from a Page to add HTML to a Text…
-
Add Styles to Read More Link in Your WordPress Theme
The “Read more” link is used in all WordPress website or blog themes. Some themes add some style to the Read more, and some leave them as default links. If you want to change the style of your WordPress Read more links, this tutorial provides some options, using only CSS. Here is an example of styling…
Tag: CSS Styles
1
2
