-1

I have a simple site with several html pages. I use only standard html tags like table (tr, td, th), p, form (input), center, a, img. But by default controls look boring.

I would like to make it more cool with minimum effort. I have already thought about some external CSS to include on my page (or completely copy) - but didn't find any from-the-box solution.

I would like to get some suggestions/solutions to make my site looks better without massive modifications on it.

Thank you for any help!

Raman
  • 887
  • 4
  • 12
  • 28
  • Are you talking about the whole page or just form controls? – Abraham Aug 14 '12 at 10:18
  • @timonik, if you dont know how to do this yourself, try and learn. See how other sites have styled form controls using CSS. If you dont want to do this, hire someone to do this for you. – Undefined Aug 14 '12 at 10:22
  • Find a free-html theme (or buy a premium one) where your elements are defined as you like and link the css files from that theme to your site (or copy the needed portion from it in case if the whole css file affect other parts of your site). – Roman Aug 14 '12 at 10:28

3 Answers3

2

you can try simple background-color , box-shadow, border-radius , css3 gradients and other css3 styles to your th and td elements and also to your p elements ;

for Eg:

table{font-size:11px;margin:auto; color:#fff; border:1px solid #666; background:#4b4b4b url('../images/low_contrast_linen.png') !important; box-shadow:0px 0px 8px 1px #1e1e1e; border-radius:3px; padding:0px;}

table tr:hover{background-color:#666;}

table td{border-top:1px solid #666; padding:10px 5px;}

table th{background-image:-moz-linear-gradient(90deg,#127286, #1a9eba) !important; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#1a9eba', EndColorStr='#127286') !important; background: -webkit-gradient(linear, left top, left bottom, from(#1a9eba), to(#127286)) !important; box-shadow:0 2px 8px #444444; color:#fff; text-shadow:none; background-color:#017AC5;font-weight:normal; padding:8px; font-size:12px; border-right:1px solid #1A9EBA;}

this adds nice effects to your table throughout the site with out much effort.. P.S try a nice linen style background image for the table it will look awesome.

The same applies to the other tags.

Krishna sagar
  • 145
  • 1
  • 8
1

You could download templates in which you only need to add text:

http://www.oswd.org/ http://www.openwebdesign.org/

just google for "free css" or something

Dries Marien
  • 211
  • 2
  • 9
0

Try out playing with bootstrap, it adds a lot of CSS styles that makes everything look pretty nice.

(The page structure stuff that Bootstrap can provide wouldn't really be needed in your case, but I'd strongly recommend trying it out)

Doug
  • 3,312
  • 1
  • 24
  • 31