Title: Custom CSS Help
Last modified: August 20, 2016

---

# Custom CSS Help

 *  [leeson1776](https://wordpress.org/support/users/leeson1776/)
 * (@leeson1776)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/custom-css-help/)
 * I can’t figure out how to get custom CSS for individual elements to work. I don’t
   know hardly anything about CSS so it’s probably pretty simple.
 * One of the things I want to do is be able to customize the width of individual
   elements beyond quarter, third, half and full.
 * For example I have a checkbox that’s set to half width on the left of the form,
   and a free HTML element to its right set at half width, but I want that HTML 
   element to be wider. How do I do that?
 * One of my problems is that I don’t know where to find all the “classes”, and 
   what they’re called. The only ones I know are:
 * div.jzzf_element label
 * div.jzzf_element input, select, message
 * div.jzzf_element .jzzf_email_button
 * div.jzzf_element #jzzf_1_reset
 * div.jzzf_element #jzzf_1_update
 * ul li.jzzf_row
 * But what are the other ones? How do you find them?
 * [http://wordpress.org/extend/plugins/jazzy-forms/](http://wordpress.org/extend/plugins/jazzy-forms/)

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Thread Starter [leeson1776](https://wordpress.org/support/users/leeson1776/)
 * (@leeson1776)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336332)
 * Also wandering why the HTML elements aren’t lining up with the “heading” elements.
   They’re like 8px offset. Anyone?
 * Here’s the form:
    [http://www.arbor-x.net/services/lawn-treatments/instant-lawn-quote/](http://www.arbor-x.net/services/lawn-treatments/instant-lawn-quote/)
 * Edit: Just figured out the answer to my first question (change width of elements):
 * div.jzzf_half{width:__px;}
 * Discovered that if you have more than one form on a page, you have to change 
   the CSS for _all_ forms to the same settings or it doesn’t work.
 *  [DBZEROONE](https://wordpress.org/support/users/dbzeroone/)
 * (@dbzeroone)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336381)
 * Are you using Firebug for Firefox or the developer tools in Safari and Chrome?
   Those tools make it easy to identify exactly which IDs/Classes are affecting 
   an element.
 * In Jazzy Forms, you can set the ID and custom classes of each element. If you
   don’t set the IDs, JF will set them for you as “element”, “element_1”, etc.
 * To add a custom class, click the “Appearance” tab for the element you want to
   add a custom class to and type your class name in the “Custom CSS Class” field.
 * By calling the IDs and/or classes in your CSS, you can customize any individual
   element without affecting all the others in the form or other forms. NOTE: When
   you add a custom class in Jazzy Forms, do NOT include the dot “.” before the 
   class name!
 * Hope that helps!
 *  Thread Starter [leeson1776](https://wordpress.org/support/users/leeson1776/)
 * (@leeson1776)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336382)
 * Thanks for your response. I’ve been figuring some of this stuff out today. Yes,
   I started Firebug, it’s very helpful.
 * Can’t quite figure this out yet though. I have a text element, and put “text”(
   no quotes) in for the custom CSS class. Then when I go to the other CSS field
   where you put in the rules, what goes there? I want to make the width:550px
 * Some of the things I tried, but don’t work:
 * .text {width:550px;}
    #text {width:550px;} text {width:550px;} (just in case 
   I misunderstood your note above) and every other thing I could think of.
 * This is the div I want to customize:
    <div id=”jzzf_2_element_3″ class=”jzzf_element
   jzzf_element_t jzzf_ahead_n jzzf_break jzzf_full text”>
 * Thank you so much for your help!
 *  [DBZEROONE](https://wordpress.org/support/users/dbzeroone/)
 * (@dbzeroone)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336412)
 * > Then when I go to the other CSS field where you put in the rules, what goes
   > there? I want to make the width:550px
 * Are you referring to the place in the Appearance tab where you enter your custom
   CSS?
 * Here are a couple guesses: First, try to add !important at the end of your class.
   This will force it to override anything else that may be affecting it. For example:
   `.
   text{width:550px !important;}`
 * My other guess would be to uncheck “Load default theme” and see if that makes
   any difference.
 * Sorry about the delay in responding. If you’ve already figured this out, could
   you post the solution? Thanks!
 *  Thread Starter [leeson1776](https://wordpress.org/support/users/leeson1776/)
 * (@leeson1776)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336413)
 * Yea, figured it out. You can change the width of elements with this:
 * div.jzzf_half {
    width: 225px; }
 * Where “half” is, I think the other options are full, thrid, and quarter.
 * You can assign classes to individual elements, to change the width of just specific
   elements. To assign a class, open the appearances tab WITHIN the element, and
   write something where it says Custom CSS Class. Then go to the OTHER appearances
   tab, and do something like this:
 * .something {
    width: 225px; } Something like that. I’m still not real clear on
   the custom css classes.
 *  [deshmukh](https://wordpress.org/support/users/deshmukh/)
 * (@deshmukh)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336416)
 * I am unable to use custom css classes for buttons in jazzy forms.
 * Here is what I have done. In the Appearance tab, in custom CSS box, added the
   following:
 * .redbutton{
    color: #ff0000; }
 * In the Elements tab, Email Button element, Appearance section, Custom CSS Classes,
   added redbutton
 * No difference in the appearance.
 * The same process for other elements works properly.
 *  Thread Starter [leeson1776](https://wordpress.org/support/users/leeson1776/)
 * (@leeson1776)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336417)
 * Maybe try this. Sorry, I can’t really help because I don’t know what I’m doing,
   I just use trial and error until it works.
 * .redbutton {color: #ff0000; !important;}
 *  [deshmukh](https://wordpress.org/support/users/deshmukh/)
 * (@deshmukh)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336418)
 * That, too, does not work 🙁
 * The button per say remains just the same size. But the area around it changes(
   if I change the background color and size, etc.)
 *  Thread Starter [leeson1776](https://wordpress.org/support/users/leeson1776/)
 * (@leeson1776)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336419)
 * For what it’s worth, I’m posting all the custom CSS I’ve used on my form in a
   new thread. Since you still haven’t posted a link to your form, no one can really
   help you any further.
 *  [likethejeans](https://wordpress.org/support/users/likethejeans/)
 * (@likethejeans)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336442)
 * I am trying to add CSS borders to the forms on my site but not having much luck.
   Would just like to add a couple pixels thick so the input boxes are more distinguishable.
   Can anyone help?
 * [http://wundermeet.com/get-started](http://wundermeet.com/get-started)
 * I’ve installed the Simple Custom CSS plugin, hopefully I don’t screw things up!
 * Thanks in advance!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Custom CSS Help’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/jazzy-forms_dac291.svg)
 * [Jazzy Forms](https://wordpress.org/plugins/jazzy-forms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/jazzy-forms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/jazzy-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/jazzy-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/jazzy-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/jazzy-forms/reviews/)

 * 10 replies
 * 4 participants
 * Last reply from: [likethejeans](https://wordpress.org/support/users/likethejeans/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/custom-css-help/#post-3336442)
 * Status: not resolved