• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Genesis Tutorials CSS Styles, Themes

Check Boxes, Radio Boxes, and Input Fields in Genesis Themes

June 3, 2014 Updated on December 2, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

Occasionally when using WordPress themes, but especially when using the Genesis Sample theme, you will run into form elements in some plugins not being styled quite the way you would expect. I have seen this before using form plugins, and an events calendar.

I recently saw it again with a taxonomy query plugin and an ecommerce plugin. For instance, it appeared like there was no item in the cart when there was one item there.

add to cart input - added item not visible



The reason for the styling not being quite as you expect is a combination between the input styles for the child theme and the styles in the plugin. It’s not difficult to fix though. So here are a few things you can look for.

Input Styles

While working with iThemes Exchange, when an item was added to the cart, you couldn’t see that it was added; see image above. Here are the cart input styles:

.it-exchange-super-widget .cart-items-wrapper .cart-item .item-info input {
	max-width: 50px;
	text-align: center;
}

And here are the input styles for the default Genesis Sample theme:

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #eee inset;
	color: #999;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 16px;
	padding: 1.6rem;
	width: 100%;
}

Note the padding: 16px; and padding: 1.6rem; The large padding can often be an issue with plugins that use smaller input fields, especially if the plugin sets a width or max-width for the input that isn’t large enough to compensate for the extra padding, as in the e-commerce cart.

There are two things that you can do to correct the input styles so that the cart item shows. You can either make the cart input field wider or you can use less padding on it.

For a wider input field, you would use:

.it-exchange-super-widget .cart-items-wrapper .cart-item .item-info input {
	max-width: 70px !important;
}

For less padding, you would use:

.it-exchange-super-widget .cart-items-wrapper .cart-item .item-info input {
	padding: 8px;
}

This is how these two styles look; you can see the item added to the cart with both of them. It’s up to you to decide which method you prefer for your theme.

add to cart input with styles

Note that if you don’t see changes to your styles when you add this code, you may need to use an !important declaration to override the plugin styles, as in the first cart input example above.

Check Boxes and Radio Boxes

Here is an image for check boxes for a recently used taxonomy query plugin, but using check boxes with form plugins often does something similar.

check boxes with no added styles

The solution is to add a width and height to the check box and radio box inputs.
Note that you may also want to change the vertical alignment for some plugins (so I included it), and with some plugins you may need to use an !important declaration. You can also use a width and height that are a bit larger, depending on how large you want your check boxes to be. I generally use 16px or 18px.

input[type="checkbox"],
input[type="radio"]  {
	height: 14px;
	width: 14px;
	vertical-align: middle;
}

And then you have nicely aligned check boxes.

check boxes with styles

While these are general solutions, they provide a starting point, if you find your check boxes, radio boxes or inputs not styled as you expected.

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marcus L Tibesar says

    Thank you for covering this subject Marcy. Integrating plugins’ CSS with the child theme’s CSS is always a HUGE pain! Cheers!

    Reply
    • Marcy Diaz says

      Marcus, I agree that the CSS for plugins and child themes sometimes takes a bit of work! :)

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework