css for form

[Michelle Aldous]

I posted the following 2 posts on the mailpoet support forum, but been directed back to yourselves. Please advise what to do because nothing I do changes and improves the styling on the form.

Thanks
Michelle

my 1st post – mailpoet forum

I’m sure this is a common problem, but I need it explaining please. Its about Forms. When I go to display a form it overscales… if that the right term. When building the form its compact, the check boxes properly in line etc, fonts size looks too big, boxes to large. Here is an example. I took a screen print of the form as its built in mailform, then below how it looks. I guess I need to add some form of css styling but don’t know how to do it. My theme pure & simple

http://www.tsmt.co.uk/form/

Thanks
Michelle

https://wordpress.org/plugins/wysija-newsletters/

seniormasters
Member
Posted 3 days ago #

Re above, I have been working out a code which should work, but doesn’t change anything. Can I have some help with getting this to work please. Thanks you

#form-wysija-shortcode56e0beec132d1-7 p.wysija-paragraph label{ font-weight:400; }

#form-wysija-shortcode56e0beec132d1-7 p.wysija-paragraph label.wysija-radio-label{
font-weight:400;
font-style:italic;
font-size:15px;
color:#000000;
}

#form-wysija-shortcode56e0beec132d1-7 p.wysija-paragraph label.wysija-radio-label input[type=radio]{
height:14px;
display:inline;
top:auto;
bottom:auto;
left:auto;
position:static !important;
clear:none;
float:none;
max-width:37px;
min-height:4px;
max-height:24px;
}

#form-wysija-shortcode56e0beec132d1-7 p.wysija-paragraph label.wysija-checkbox-label input[type=checkbox]{
display:inline;
position:relative !important;
top:auto;
bottom:auto;
left:auto;
clear:none;
float:none;
max-width:37px;
height:16px !important;
min-height:16px;
}

#form-wysija-shortcode56e0beec132d1-7 p.wysija-paragraph label.wysija-checkbox-label{
font-style:italic;
font-size:15px;
}

[Sushil Adhikari]

Hi Michelle Aldous,

Form id [@SEE
#form-wysija-shortcode56e0beec132d1-7 ] you are using is dynamic, it changes on each referesh of pages, so you are not able to make this following css works .

#form-wysija-shortcode56e0beec132d1-7 p.wysija-paragraph label.wysija-radio-label {
font-weight:400;
font-style:italic;
font-size:13px;
color:#000000;
}

Let us know if you got any problems on this.

Thanks

[Michelle Aldous]

Hi sorry that doesn’t work. It changes briefly but after its fully refreshed its reverts back again
Thanks

[Sushil Adhikari]

i have checked your child theme style.css still i can see dynamic selector for the form elements. Here is the css you had placed on child theme style.css

#form-wysija-shortcode56e0beec132d1 p.wysija-paragraph label.wysija-radio-label {
 font-weight:400;
 font-style:italic;
 font-size:13px;
 color:#000000;
 }

There again you have written dynamic selector #form-wysija-shortcode56e0beec132d1 which changes on every referesh. And your browser doesn’t find any match.

Thanks

[Michelle Aldous]

Hi thanks for your help. Sorry but I need this explaining as I don’t understand. What should I put please to make it work.

Thanks
Michelle

[Sushil Adhikari]

Incase of use this class as a selector in replace of #form-wysija-shortcode56e0beec132d1. Below is the example

.widget_wysija shortcode_wysija  p.wysija-paragraph label.wysija-radio-label {
   //your css here
}

Thanks

[Michelle Aldous]

Hi, I have no idea how to change this. Would appreciate some more help please

Please look at attached screen print… the radio buttons and checkboxes are not inline with the info for them… –

for example – professional – radio button next to it. but smaller radio box, same size as text

So should – amateur – radio button

Similar this with the check boxes.

Enter South Staffs 14/14 – check box but small box, same size as text
Enter Enville Masters 18/19 – check box
Enter Forest Hills Masters 23/14 June – checkbox

Thank you

Michelle
2016-03-163.png

Attachments:

You must be logged in to view attached files.

[Michelle Aldous]

Sorry, the radio buttons and check boxes should be left of the information for them
Thanks

Michelle

[Sushil Adhikari]

Hi Michelle Aldous,

Please add this css on child theme style.css file

.shortcode_wysija input[type="radio"],
.shortcode_wysija input[type="checkbox"] {
   width: 20px
   display: inline-block;
}
.shortcode_wysija input[type="radio"]:hover,
.shortcode_wysija input[type="radio"]:active,
.shortcode_wysija input[type="radio"]:focus,
.shortcode_wysija input[type="checkbox"]:hover,
.shortcode_wysija input[type="checkbox"]:active,
.shortcode_wysija input[type="checkbox"]:focus {
   box-shadow: none;
   outline: none;
   width: 20px;
   height: 20px;
}

Note : Please change height and width value as per your requirement. Using chiild theme style.css file to add custom css will prevent your lost on theme update

Thanks

[Michelle Aldous]

Hi thank you again.. but that still does not work. Anymore suggestions
Michelle

[Sushil Adhikari]

Hi Michelle Aldous,

We had visited your site but still we sees the issue out in the form. So could you please try by adding css given on previous reply and let us know so we provide you the alternative solution.

Thanks

[Author]

Posts