Custom CSS Help

Also wandering why the HTML elements aren’t lining up with the “heading” elements. They’re like 8px offset. Anyone?

Here’s the form:
https://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.

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!

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!

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!

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.

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.

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;}

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.)

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.

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?

https://wundermeet.com/get-started

I’ve installed the Simple Custom CSS plugin, hopefully I don’t screw things up!

Thanks in advance!