css for form

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #17129
    Michelle Aldous
    Participant

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

    #22578
    Sushil Adhikari
    Moderator

    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

    #22584
    Michelle Aldous
    Participant

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

    #22586
    Sushil Adhikari
    Moderator

    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

    #22595
    Michelle Aldous
    Participant

    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

    #22603
    Sushil Adhikari
    Moderator

    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

    #22607
    Michelle Aldous
    Participant

    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.
    #22608
    Michelle Aldous
    Participant

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

    Michelle

    #22611
    Sushil Adhikari
    Moderator

    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

    #22612
    Michelle Aldous
    Participant

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

    #17130
    Sushil Adhikari
    Moderator

    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

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.