Main navigation

Amethyst Website Design

Small business website design and development providing a WordPress blog for your content marketing. Located in Phoenix, Arizona 85048 (Ahwatukee)

You are here: Home / Archives for CSS Styles

CSS Styles

Customize the Read More Text in Genesis Themes with Accessibility

by 2 Comments

And Without Losing the Read More Accessibility!

blog excerpt with accessible Read More

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 of just hearing a lot of “Read more”, if the blog post has a title “New Blog Post”, they now hear “Read more about New Blog Post”. This is really helpful in navigating a website.
Read More » about Customize the Read More Text in Genesis Themes with Accessibility

Style Dropdown Select Menus in Chrome – Square Corners and Height

by 1 Comment

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 – rounded corners and narrow in height, compared to Firefox, even though they have the same CSS styles as the other input fields.

select dropdowns for chrome and firefoxe default styles

Small, round corner select dropdown menus just seem out of place when the rest of your form inputs are a nicer size (mobile-friendly size for touch screens) and have square corners too.
Read More » about Style Dropdown Select Menus in Chrome – Square Corners and Height

Limit Contact Form Widths in Genesis Themes

by 2 Comments

stylized input forms
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 make a few quick edits to the “Forms” section of your style.css to limit contact form widths. I’ll be using the Genesis Sample theme, but you’ll find the same section in most of the child themes.
Read More » about Limit Contact Form Widths in Genesis Themes

Add and Style Post Formats in Your Genesis Child Theme

by 12 Comments

This tutorial will show you how to add and style post formats in your Genesis child theme.
post formats with centered dashicons

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 website just allows you to easily style different posts. Some other platforms, such as Tumblr do this automatically. The default WordPress theme Twenty Thirteen is styled using post formats.
Read More » about Add and Style Post Formats in Your Genesis Child Theme

Genesis WordPress HTML5 Gallery Styles

by

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 tutorial applies to most other WordPress themes.
default three column gallery on genesis sample theme
Read More » about Genesis WordPress HTML5 Gallery Styles

Remove or Override Plugin CSS with !Important

by 7 Comments

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.
simple social icons styles

I was recently working with Simple Social Icons, and I wanted to put a circular border around the icons. It didn’t work the way I first expected.
Read More » about Remove or Override Plugin CSS with !Important

Add Unique Custom Styles to One WordPress Page or Post

by 9 Comments

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.
add unique styles to only one post or page

So let’s suppose you’re creating a sales page, and you want the headings and the buttons to be a green color instead of the blue on the rest of the site. This is how to use WordPress body and post classes to add the special styles.
Read More » about Add Unique Custom Styles to One WordPress Page or Post

Add An Image to WordPress Category Archive Description

by 4 Comments

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.
genesis category archive with added styles
Read More » about Add An Image to WordPress Category Archive Description

Add HTML – Images and Links – to Text Widgets Without a Plugin

by 2 Comments

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 Widget without actually writing the code or using a plugin.
sidebars with image genesis and twenty fourteen
Suppose you want to add a thumbnail image, some text, and a link to a Text Widget, like this. Genesis Sample theme sidebar is on the left and Twenty Fourteen sidebar is on the right. No additional styles were added; this is the theme default for both.
Read More » about Add HTML – Images and Links – to Text Widgets Without a Plugin