[Resolved] CSS: Add blank line/space below Toolset element

[Author]

Posts

[GamX]

Hi there, can you give me an example of how to add more blank space... more margin... or a blank line below a Toolset element? I simply want more space before the next element so they don't run together, but not sure what the best way is.

For example, I used "Inspect element" to figure out the class of my Toolset Submit buttons as follows:
class="btn btn-primary btn-lg wpt-form-submit form-submit submit"

How do I refer to this class in my WordPress "Additional CSS" box, and then define some extra space after it?

I will also want to do this with other Toolset elements, but thought this might be a good start.

By the way, I am only talking about the front-end display for the current logged-in user.

Thanks!

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - you can use CSS box available with your form editor and add your custom CSS there if you do not want to add it to WordPress "Additional CSS" box.

For example - to add 50px margin at bottom of the submit button, you should use the following CSS:

.submit {
  margin-bottom:50px !important;
}

More info:
=> hidden link

[GamX]

Hi Minesh, this totally works for the submit button, thanks!

Can you also tell me how to refer to the part of a Toolset custom user field that becomes the <label> inside of a user form?

For instance, here is an example form with a single field. Let's say I want to italicize just the field label, but not anything else.

*****
THIS IS THE COLOR FORM WITH ONE FIELD

What is your favorite color?
__ blue
__ red

*****
The auto-generated form code would include the following:
<label>What is your favorite color?</label>

I know that I can change the font style within the label tag... but I want to make ALL of my Toolset user field labels italic, and would prefer to not have to do this individually.

I tried the following Additional CSS, but it italicizes the entire field including the label and the radio buttons:

.form-group {
font-style: italic;
}

How do I correctly refer to just the label in my Additional CSS panel?

[Minesh]

Well - I need to check the markup generated by form. Could you please share the problem URL where you added the form.

[GamX]

Hi, my site is not yet live. Is there a way that I can send you my login info confidentially? Or to save time, can you get it from Luo Yang who is working on another ticket? (Our time zones are at opposite times of day so it takes awhile for us to get back to each other.)

In case it helps, below is what the markup looks like before and after adding the following Additional CSS:

.form-group {
font-style: italic;
}

PAGE SOURCE BEFORE (see screenshot)

<div class="form-group">
<label>test-radio</label>
<div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="radios-wpcf-1-1-unhelpful-thought"><ul class="wpt-form-set wpt-form-set-radios wpt-form-set-radios-wpcf-1-1-unhelpful-thought">
<li class="wpt-form-item wpt-form-item-radio radio-they-are-inconsiderate">

<input type="radio" id="form-1688372512" name="wpcf-1-1-unhelpful-thought" value="1" class="wpt-form-radio form-radio radio" data-wpt-type="radio" data-wpt-id="cred_user_form_1940_1_form-1688372512" data-wpt-name="wpcf-1-1-unhelpful-thought" /><label class="wpt-form-label wpt-form-radio-label" for="form-1688372512">they are inconsiderate</label>

<li class="wpt-form-item wpt-form-item-radio radio-they-must-be-angry">

<input type="radio" id="form-1345999712" name="wpcf-1-1-unhelpful-thought" value="2" class="wpt-form-radio form-radio radio" checked="checked" data-wpt-type="radio" data-wpt-id="cred_user_form_1940_1_form-1345999712" data-wpt-name="wpcf-1-1-unhelpful-thought" /><label class="wpt-form-label wpt-form-radio-label" for="form-1345999712">they must be angry</label>

<li class="wpt-form-item wpt-form-item-radio radio-they-must-be-in-a-hurry">

<input type="radio" id="form-498570704" name="wpcf-1-1-unhelpful-thought" value="3" class="wpt-form-radio form-radio radio" data-wpt-type="radio" data-wpt-id="cred_user_form_1940_1_form-498570704" data-wpt-name="wpcf-1-1-unhelpful-thought" /><label class="wpt-form-label wpt-form-radio-label" for="form-498570704">they must be in a hurry</label>

</div>
</div>

PAGE SOURCE AFTER (see screenshot)

<div class="form-group">
<label>test-radio</label>
<div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="radios-wpcf-1-1-unhelpful-thought"><ul class="wpt-form-set wpt-form-set-radios wpt-form-set-radios-wpcf-1-1-unhelpful-thought">
<li class="wpt-form-item wpt-form-item-radio radio-they-are-inconsiderate">

<input type="radio" id="form-1526604627" name="wpcf-1-1-unhelpful-thought" value="1" class="wpt-form-radio form-radio radio" data-wpt-type="radio" data-wpt-id="cred_user_form_1940_1_form-1526604627" data-wpt-name="wpcf-1-1-unhelpful-thought" /><label class="wpt-form-label wpt-form-radio-label" for="form-1526604627">they are inconsiderate</label>

<li class="wpt-form-item wpt-form-item-radio radio-they-must-be-angry">

<input type="radio" id="form-1231949014" name="wpcf-1-1-unhelpful-thought" value="2" class="wpt-form-radio form-radio radio" checked="checked" data-wpt-type="radio" data-wpt-id="cred_user_form_1940_1_form-1231949014" data-wpt-name="wpcf-1-1-unhelpful-thought" /><label class="wpt-form-label wpt-form-radio-label" for="form-1231949014">they must be angry</label>

<li class="wpt-form-item wpt-form-item-radio radio-they-must-be-in-a-hurry">

<input type="radio" id="form-2147293954" name="wpcf-1-1-unhelpful-thought" value="3" class="wpt-form-radio form-radio radio" data-wpt-type="radio" data-wpt-id="cred_user_form_1940_1_form-2147293954" data-wpt-name="wpcf-1-1-unhelpful-thought" /><label class="wpt-form-label wpt-form-radio-label" for="form-2147293954">they must be in a hurry</label>

</div>
</div>

[Luo Yang]

Hi,

Minesh has one day vacation, you will get the response ASAP when he back on Thursday.

[Minesh]

What if you try to use the following CSS - i think following CSS will help you to resolve your issue:

.form-group label:first {
font-style: italic;
}

[GamX]

Thanks! I just added -child and it worked!

.form-group label:first-child {
font-style: italic;
}

[GamX]

Hello, I just tested the above code a bit more... it works for most fields, except for checkbox fields it italicizes the field label (which is what I want) as well as all of the checkbox labels (which I don't want). Let me know if you can think of an alternative that fixes this.

.form-group label:first-child {
font-style: italic;
}

[Minesh]

Well - if you share a problem URL of your test site it will help me to fix the issue with correct code as without knowing your HTML structure its bit hard to share the perfect solution.

[GamX]

Hi Minesh, my site is not yet live. I'm happy to share an administrative login if you can tell me how to share this privately. Thank you.

[Minesh]

Yes please.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Could you please check now. I've added the following CSS and it works:

div.form-group > label:first-child {
    font-style: italic;
}

could you please confirm: hidden link

[GamX]

This totally works, Minesh. Thank you!