[Template] Winter

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[sottwell]

A variation of the Foggy Autumn template. The photo used was taken in Switzerland last winter.

[Dr. Scotty Delicious]

Very cool!!! (Pun intended!).  I love the pine cones.

-sD-

[sottwell]

The original "Autumn" template actually had the leaves part of the section background, half in the top background and half in the bottom.  I used an empty <div> element with the transparent .png as its background and positioned it absolutely (relative to the top banner section). with a z-index of 100.   This way it's easy to move it or change the images to change the theme.  I found that when I gave the image the high z-index I had to give my drop-down li ul an even higher z-index!   

[Dr. Scotty Delicious]

How do you manage PNG transparency with visitors using IE?  I tried pngfix.js with relatively little success.  I would love to know what other options there are because I am a big fan of extra <div>'s and alpha transparency.  In fact my last XHTML 1.1 template has at least 4 extra empty divs in them.  This is because rather than make a new template each time I want to change my site, I just make a new style sheet, then add it to the {{meta}} chunk placed in the head of my HTML, then i use a style switcher script to change the default css from a UL of links to css files.

-sD-

[sottwell]

I have no idea how the png is working with IE users; I've got the slight.js file that comes with MODx, but you can use a transparent .gif if you prefer.  Or just set up the site with the png on a real browser and get a screenshot of it, then 'shop the two parts like the original did.

[zi]

Check this Plug-in http://modxcms.com/forums/index.php/topic,303.0.html for png transparency fix in IE!

regards,

zi

[sottwell]

Thank you!  He's got a function that you can call on an individual image basis, which is very useful. I had to remove the slight.js file, since I use .png images, although not transparent, and they all were getting converted and there was a little broken image icon and the alternate text superimposed over each one!  This way, you use the onload function for any transparent png files, and leave the rest of them alone.  I think.  I'll have to try it out.

[Dr. Scotty Delicious]

Outstanding Zi!!! you saved the day again!

-sD-