Coldskins: Custom CSS Skins for Contact Coldform

♦ Posted by Jeff Starr in CSS, WordPress

Updated September 21, 2022 • 14 comments

[ Contact Coldform ] With the recent release of my latest WordPress plugin, Contact Coldform, I am also creating a series of free, “drop-in” CSS skins for easy, “plug-n-play” customization. These skins employ valid, optimized CSS code designed for the following browsers:

Firefox 2 (mac & pc)
Internet Explorer 6
Internet Explorer 7
Opera 9 (mac & pc)
Netscape
Camino
Safari

Update: Contact Coldform is updated with new built-in “coldskins” and option to add your own custom styles. The coldskins on this page will still work for previous versions of the Coldform, but are replaced by the built-in styles for Coldform version 20121031+.</update>

The goal for these skins involves minimizing the amount of CSS code while simultaneously maximizing its universal effectiveness. Thus, while these skins may not appear identical in every browser tested, I am able to keep CSS code sizes to a minimum by focusing on overall design proximity as opposed to pixel perfect precision, which is possible, but would require additional code. In other words, the balance between presentational fidelity and relative code quantity may require further manipulation, depending on your particular design requirements.

Coldskin #1

This minimalistic skin features fields of uniform length and default Verdana text for all elements. The perfect slate for further customization and stylistic fine-tuning..

Coldskin #1 in Firefox 2 (pc)

Check out Coldskin #1 in other browsers:

Download

To use this Coldskin, simply copy & paste the CSS code from the following file into your default (or custom) WordPress-theme stylesheet, generally located at: /wp-content/themes/theme/style.css:

Download Coldskin #1Version 1.0 ( 1.01 KB TXT )

Coldskin #2

This is the same skin used by the current theme here at Perishable Press. Coldskin #2 features tight, minimalistic form design with “Lucida Grande” labels and “Courier New” input text. Another keen design ready for instant styling or further customization..

Coldskin #2 in Firefox 2 (pc)

Check out Coldskin #2 in other browsers:

Download

To use this Coldskin, simply copy & paste the CSS code from the following file into your default (or custom) WordPress-theme stylesheet, generally located at: /wp-content/themes/theme/style.css:

Download Coldskin #2Version 1.0 ( 1.42 KB TXT )

Coldskin #3

This skin works great for a clean, minimalistic aesthetic or as a template for further styling and customization. This layout requires no floats and should similar in virtually all modern browsers. Coldskin #3 uses Verdana font for both field labels and text input. Plug it in and make it your own..

Coldskin #3 in Firefox 2 (pc)

Check out Coldskin #3 in other browsers:

Download

To use this Coldskin, simply copy & paste the CSS code from the following file into your default (or custom) WordPress-theme stylesheet, generally located at: /wp-content/themes/theme/style.css:

Download Coldskin #3Version 1.0 ( 1.04 KB TXT )

Check back for more Coldskins!

This is the permanent home for Coldform skins, and all future Coldskins will be presented and archived here. Also, if you have a Coldform design that you would like to feature here, please contact me and let me know about it — Thanks ;)

browsers plugins

About the Author

Jeff Starr = Creative thinker. Passionate about free and open Web.

14 responses to “Coldskins: Custom CSS Skins for Contact Coldform”

Graham Smith 2008/03/30 3:58 am

Finally got round to tinkering with my theme colours. My old Blog used to be dark grey.

So finally got it done. Wanted it to be as nice as possible for this week. Had a guest post published, also had my theme highlighted on graphpaperpress blog.

So more traffic coming, and I wanted it to be good for when we release the interview.

Sorry its taken so long, but I have really wanted to get my site to apoint where I am relatively proud and will be a place people will want to come back to. Etc.

So am close to finishing the interview anyway.

Also got your contact form up again, after I had some theme issues with it. Not your fault, just needed to tinker a bit. But looking good.

Later

Perishable 2008/03/30 1:54 pm • Post Author

Good to hear you are staying busy, Graham. Sounds like all the hard work is beginning to pay off for you! I am looking forward to seeing the interview posted, but understand that it is best to wait until everything is place before publishing such a thing. Thanks for dropping by — glad to hear the Coldform plugin is treating you well ;)

K 2009/04/03 5:18 am

Hi,

Your Comment-Form is really good & easy. One question: I use WP 2.7.1 and didn’t find any admin-options to replace the english text like “use this form to contact us via email.” … do you plan any options for this?

Jeff Starr 2009/04/06 12:50 pm • Post Author

@K: Yes, the next release of the plugin will be completely internationalized (I18n), which will make it easy for you to customize the language in whatever way you see fit.

Lorraine 2009/12/11 12:50 am

Hi! I tried pasting the CSS code for codeskin #3 into my stylesheet but nothing happens. There are no changes. I am really new at this so I may be missing something important. Does it have to go in a certain place? Thanks!

Jeff Starr 2009/12/14 11:34 am • Post Author

Hi Lorraine, the only requirement is that the stylesheet contains the code and the Coldform is installed and displayed properly. I can’t think of any reason why only the Coldskin styles wouldn’t be applied if all of the other styles are working.

natalia 2010/04/11 11:01 am

Hi Jeff,
I have to questions:

Where exactly is the Coldform Admin Options panel? (As in “Customize your preferences in the Coldform Admin Options panel “). I cannot find anything else to edit but the .php files and the instruction is clear this is not neccesary.
I have pasted the css style for one of the skins into my style.css. The contact form changed nicely but the instructions on what to fill in each tab dissapeared! he same happened with another one of the above skins. They are visible with the default style though.

Do you have any ideas on ehat is causing it?
Many thanks for your help and big thanks for the plugin!

Jeff Starr 2010/04/21 5:19 pm • Post Author

Hi natalia,

The Coldform Options Page is viewable from within the WordPress Admin. Just log in, go to Settings > Coldform
If you provide a link to an example, I could take a look at it for you. Otherwise it’s difficult to say..

Mike R. 2011/09/21 11:39 am

I attempted to use your contact sheet and I love it… However, I can’t change the font color to be black with your CSS code. Any idea why?

Here’s the page: http://choicemedia.tv/contact/

Jeff Starr 2011/09/22 8:07 am • Post Author

Hi Mike,

No problem, you should be able to open the file:

http://choicemedia.tv/news/wp-content/themes/choice_media/style.css

and then find this line:

div#coldform {
     font-family: Verdana, sans-serif;
     background-color: #fff;
     font-size: 12px;
     margin: 12px 0;
     width: 600px;
     color: #000;
}

in that set of rules, change the #fff (white) to #000 (black).

Let me know how it goes! :)

Mike R. 2011/09/22 8:12 am

@Jeff Starr

I did that but it changes the background to be black not the font color…

Jeff Starr 2011/09/22 8:26 am • Post Author

Ah sorry I misread your comment. It looks like the form labels are picking up the font color from elsewhere in your stylesheet:

.entry-content label {
color: #888;
font-size: 12px;
}

That should do it, if not using a tool like Firebug or similar will help you find it pretty quickly.

Good luck!

Comments are closed for this post. Something to add? Let me know.

Graham Smith 2008/03/30 3:58 am

Finally got round to tinkering with my theme colours. My old Blog used to be dark grey.

So finally got it done. Wanted it to be as nice as possible for this week. Had a guest post published, also had my theme highlighted on graphpaperpress blog.

So more traffic coming, and I wanted it to be good for when we release the interview.

Sorry its taken so long, but I have really wanted to get my site to apoint where I am relatively proud and will be a place people will want to come back to. Etc.

So am close to finishing the interview anyway.

Also got your contact form up again, after I had some theme issues with it. Not your fault, just needed to tinker a bit. But looking good.

Later
Perishable 2008/03/30 1:54 pm • Post Author

Good to hear you are staying busy, Graham. Sounds like all the hard work is beginning to pay off for you! I am looking forward to seeing the interview posted, but understand that it is best to wait until everything is place before publishing such a thing. Thanks for dropping by — glad to hear the Coldform plugin is treating you well ;)
K 2009/04/03 5:18 am

Hi,

Your Comment-Form is really good & easy. One question: I use WP 2.7.1 and didn’t find any admin-options to replace the english text like “use this form to contact us via email.” … do you plan any options for this?
Jeff Starr 2009/04/06 12:50 pm • Post Author

@K: Yes, the next release of the plugin will be completely internationalized (I18n), which will make it easy for you to customize the language in whatever way you see fit.
Lorraine 2009/12/11 12:50 am

Hi! I tried pasting the CSS code for codeskin #3 into my stylesheet but nothing happens. There are no changes. I am really new at this so I may be missing something important. Does it have to go in a certain place? Thanks!
Jeff Starr 2009/12/14 11:34 am • Post Author

Hi Lorraine, the only requirement is that the stylesheet contains the code and the Coldform is installed and displayed properly. I can’t think of any reason why only the Coldskin styles wouldn’t be applied if all of the other styles are working.
natalia 2010/04/11 11:01 am
Hi Jeff,
I have to questions:
1. Where exactly is the Coldform Admin Options panel? (As in “Customize your preferences in the Coldform Admin Options panel “). I cannot find anything else to edit but the .php files and the instruction is clear this is not neccesary.
2. I have pasted the css style for one of the skins into my style.css. The contact form changed nicely but the instructions on what to fill in each tab dissapeared! he same happened with another one of the above skins. They are visible with the default style though.
Do you have any ideas on ehat is causing it?
Many thanks for your help and big thanks for the plugin!
Jeff Starr 2010/04/21 5:19 pm • Post Author
Hi natalia,
1. The Coldform Options Page is viewable from within the WordPress Admin. Just log in, go to Settings > Coldform
2. If you provide a link to an example, I could take a look at it for you. Otherwise it’s difficult to say..
Mike R. 2011/09/21 11:39 am

I attempted to use your contact sheet and I love it… However, I can’t change the font color to be black with your CSS code. Any idea why?

Here’s the page: http://choicemedia.tv/contact/
Jeff Starr 2011/09/22 8:07 am • Post Author

Hi Mike,

No problem, you should be able to open the file:

http://choicemedia.tv/news/wp-content/themes/choice_media/style.css

and then find this line:

div#coldform {
     font-family: Verdana, sans-serif;
     background-color: #fff;
     font-size: 12px;
     margin: 12px 0;
     width: 600px;
     color: #000;
}

in that set of rules, change the #fff (white) to #000 (black).

Let me know how it goes! :)
Mike R. 2011/09/22 8:12 am

@Jeff Starr

I did that but it changes the background to be black not the font color…
Jeff Starr 2011/09/22 8:26 am • Post Author

Ah sorry I misread your comment. It looks like the form labels are picking up the font color from elsewhere in your stylesheet:

.entry-content label {
color: #888;
font-size: 12px;
}

That should do it, if not using a tool like Firebug or similar will help you find it pretty quickly.

Good luck!

12 • Newer Comments »