WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form Clean and Simple
[resolved] Theme vs. plugin stylesheet (5 posts)

  1. kathinka123
    Member
    Posted 9 months ago #

    Hi Meg,

    Love the contact form, it's exactly what I was looking for. I only have one problem: despite unticking the "Use plugin default stylesheet" checkbox, the fonts don't display correctly. Don't know if there might be a conflict with the Attitude theme I'm using? Any ideas how I can fix this? Would greatly appreciate if you could point me in the right direction...

    Kat

    http://wordpress.org/extend/plugins/clean-and-simple-contact-form-by-meg-nicholas/

  2. megnicholas
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Kat,

    What does it look like when you check the box instead, any better?

    If not, can you give me your url and I will have a look.

    Meg

  3. kathinka123
    Member
    Posted 9 months ago #

    Hi Meg,

    Checking the box only changes the size of the input fields ...
    This is the url http://apostrophegirl.com/contact/

    Thanks very much!

    Kat

  4. megnicholas
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Kat,

    As the form is now being formatted by your theme, rather than the stylesheet that comes with the plugin, the form's formatting is now done solely by your theme. Which of course is fine, that is why the plugin gives you that option in the settings screen.

    You will need to edit this file:

    http://apostrophegirl.com/wp-content/themes/attitude/style.css

    If you are using chrome browser, right click on the element you want to change and click 'inspect element'. On the right hand side you will see the matched css rules. This will give you an idea of where in the stylesheet you need to make your changes to suit the styling you have in mind for the form.

    If you right click on the label element 'Email Address:' you will see the following rule is a match:

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    	border: 0;
    	font-family: inherit;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;
    }

    I don't recommend you change that because alot of other elements will also be effected. To add a styling rule that only effects 'label' elements you will want to add something like this:

    label {
    	font-family:[your chosen font];
    	font-style: [your chosen font style];
    	font-weight:[your chosen font weight];
    }

    Make sure you add the above after the original or the styling will not cascade down.

    As an aside/warning, it is generally not good practice to make changes to a theme directly because any updates the author supplies later on will overwrite any changes you make. The general advice is to create a child theme instead and put all your changes in there. Here is a link for more information:

    http://codex.wordpress.org/Child_Themes

    Hope that helps.

    Meg

  5. kathinka123
    Member
    Posted 9 months ago #

    Thanks Meg! You're a star :)

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.