Change layout contact form by Custom CSS

• 

  triskelephotography · Member · Sep 27, 2012 at 8:47 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  triskelephotography · Member · Sep 27, 2012 at 8:48 pm

  • Copy link

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

• 

  designsimply · Member · Sep 29, 2012 at 5:51 pm

  • Copy link

  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/

• 

  triskelephotography · Member · Sep 30, 2012 at 5:24 pm

  • Copy link

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

  Regards

  Franca

• 

  adrienemery · Member · Oct 27, 2012 at 3:47 am

  • Copy link

  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

• 

  adrienemery · Member · Oct 27, 2012 at 3:47 am

  • Copy link

  link dissapeard there,

  http://adrienemery.com/contact/

• 

  adrienemery · Member · Oct 27, 2012 at 5:23 pm

  • Copy link

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