Home › Forums › WordPress Themes – Premium › Pure & Simple › css for form
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
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;
}
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
Hi sorry that doesn’t work. It changes briefly but after its fully refreshed its reverts back again
Thanks
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
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
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
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
Sorry, the radio buttons and check boxes should be left of the information for them
Thanks
Michelle
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
Hi thank you again.. but that still does not work. Anymore suggestions
Michelle
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
With our premium themes, we offer access to site documentation, video tutorials and timely support. Even if you have just started on WordPress, our support staff have the patience to help you create appealing sites gracefully.
Company
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.To find out more, including how to control cookies, see here: Privacy Policy
© Copyright © 2023 Styled Themes. All Right Reserved.