css for form
Home › Forums › WordPress Themes – Premium › Pure & Simple › css for form
- This topic has 10 replies, 2 voices, and was last updated 6 years, 4 months ago by
Sushil Adhikari.
-
AuthorPosts
-
March 13, 2016 at 8:09 pm #17129
Michelle Aldous
ParticipantI 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
Michellemy 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
Michellehttps://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;
}March 14, 2016 at 8:17 am #22578Sushil Adhikari
ModeratorHi 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
March 14, 2016 at 9:41 pm #22584Michelle Aldous
ParticipantHi sorry that doesn’t work. It changes briefly but after its fully refreshed its reverts back again
ThanksMarch 15, 2016 at 6:26 am #22586Sushil Adhikari
Moderatori 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
March 15, 2016 at 12:52 pm #22595Michelle Aldous
ParticipantHi 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
MichelleMarch 16, 2016 at 11:15 am #22603Sushil Adhikari
ModeratorIncase 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
March 16, 2016 at 6:46 pm #22607Michelle Aldous
ParticipantHi, 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 – checkboxThank you
Michelle
2016-03-163.pngAttachments:
You must be logged in to view attached files.March 16, 2016 at 6:50 pm #22608Michelle Aldous
ParticipantSorry, the radio buttons and check boxes should be left of the information for them
ThanksMichelle
March 17, 2016 at 8:54 am #22611Sushil Adhikari
ModeratorHi 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
March 17, 2016 at 2:39 pm #22612Michelle Aldous
ParticipantHi thank you again.. but that still does not work. Anymore suggestions
MichelleMarch 24, 2016 at 6:13 am #17130Sushil Adhikari
ModeratorHi 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
-
AuthorPosts
- You must be logged in to reply to this topic.