Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Change layout contact form by Custom CSS

  1. triskelephotography
    Member

    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.

  2. triskelephotography
    Member

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

  3. designsimply
    Staff

    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/

  4. triskelephotography
    Member

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

    Regards

    Franca

  5. 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

  6. adrienemery
    Member

    link dissapeard there,

    http://adrienemery.com/contact/

  7. 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:

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags