Change layout contact form by Custom CSS

  • Author
    Posts
  • #1025650

    Hello,

    I’m trying to change the layout (colours/font) of the contact form I created in my Photography theme (by using CSS). I don’t know the CSS code to be working with though. Can anyone help me?

    Regards

    Franca (obviously very new at this)

    The blog I need help with is triskele-photography.com.

    #1025802

    Hmm http:// was removed when submitting the form…..complete link: http://triskele-photography.com

    #1025871

    I found your contact page here:
    http://triskele-photography.com/contact-2/

    Here is an example to get you started. It will change the colors and the fonts of the labels:

    .entry .contact-form label {
    	color: #DBA03E;
    	font-family: Arial, sans-serif;
    	font-size: 80%;
    }
    .entry .contact-form label span {
    	color: #FF0000;
    	font-size: 70%;
    }

    You an adjust the color codes, font stack, and font size percentages until it looks good to you.

    Here is a color picker you can use to find new color codes:
    http://automattic.github.com/Iris/

    Read this to lear more about font stacks:
    http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

    #1025873

    Fantastic! Thanks for your quick reply! It looks so much better now! And the information links were quite helpful too!

    Regards

    Franca

    #1025888

    adrienemery
    Member

    So I tried adding the code to my custom style sheet but it doesn’t seem to have any affect.

    Does it need to be added in a specific area?

    Thanks in advance…

    my contact form is at

    #1025889

    adrienemery
    Member

    link dissapeard there,

    http://adrienemery.com/contact/

    #1025890

    adrienemery
    Member

    Ok so here is an update. I got it to work by removing the “.entry” in both cases so it looks like this:


    .contact-form label {
    color: #DBA03E;
    font-family: Arial, sans-serif;
    font-size: 80%;
    }
    .contact-form label span {
    color: #FF0000;
    font-size: 70%;
    }

The topic ‘Change layout contact form by Custom CSS’ is closed to new replies.