Saturday, 25 February 2012

New Layout & Template - CSS Hacks!

How do you like the new look? I've spent some time going through the various templates, different colours and finally hacking around with the HTML/CSS.

Overall I am very impressed with all the options available! The only thing I had issue was with tweaking the transparency of the white content background. In case anyone else is using the Picture Window template and would like to adjust the alpha, here is the CSS code:

.content-outer {
    background: rgba(255,255,255,0.8) none repeat scroll top left;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -goog-ms-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    -goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    margin: 30px auto;

Most of that is just preserving the original style but I've highlighted the key changes I made. CSS3 lets you specify colours in rbga format, giving us access to the alpha (last argument). I've also removed the original white image which was used (now none).

I'll hopefully be adding more content and widgets soon as well!

No comments:

Post a Comment