Incorporating CSS PIE into a custom skin

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
11/29/2011 5:32:20 AM
freshangle
Gravatar
Total Posts 11
View Posts

Incorporating CSS PIE into a custom skin

Hi All,

Wondering if anybody has successfully incorporated CSS PIE into a custom skin and if so, could you post a step by step guide?

 

12/1/2011 1:27:56 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Incorporating CSS PIE into a custom skin

Hi,

I had not heard of it but looking at the documentation for CSS PIE, I would think you could put the pie.htc file directly in your skin folder and reference it in css like this:

behavior: url('PIE.htc');

Not sure if the file is really upper case but in their example it is. I would make the case match the file just to be on the safe side and I'd probably name it lower case on disk and reference it lower case in CSS. Windows isn't case sensitive but I still try to keep things in correct case just out of habit because on linux file names and urls are case sensitive. The use of single quotes is needed to make it work with our CSS combiner.

The documentation says it would only be loaded by IE but I'm a little skeptical about whether an http request for it would be made by other browsers, though I have not tested it.

I'd be more inclined to put in the IE specific css files.

Let us know how it goes if you use it.

Best,

Joe

12/3/2011 10:13:01 AM
freshangle
Gravatar
Total Posts 11
View Posts

Re: Incorporating CSS PIE into a custom skin

Hi Joe,

Thanks for the tips!

The issue I had was confusion about the paths involved. The css3pie documentation about known issues states that 'IE interprets the URL for the behavior property relative to the source HTML document, rather than relative to the CSS file like every other CSS property'. Because of the dynamic nature of page rendering in MojoPortal, I wasn't sure what the path should be...

After a bit of experimentation, I've found that that the .htc file has to be placed wherever the' imagebasevpath' for the stylesheet calling css3pie points within the 'style.config' - in other words, treat it as you would an image that is referenced by your stylesheet.

If you haven't fiddled with the style.config setup on a base skin it should work as you say by placing the file directly in the skin folder; in my case the (renamed to lowercase) 'pie.htc' is placed in the path described for my 'style.css' sheet in 'style.config': 'imagebasevpath="Data/Sites/1/skins/myskin/css/custom/components/" and called in my stylesheet using 'behavior: url('pie.htc');'

I did play around with other path options, but it as the stylesheet combiner already injects the imagebasevpath into any url declared in the CSS, there seems no sense in fighting it.

Its a shame that the 'behaviour' rule defies all validation, but the usefulness of bringing border-radius and box-shadow to IE has to be weighed against that, as with so much in the ever evolving world of CSS3.

Thanks again for your time, and an even bigger thanks for putting MojoPortal together for us all to use. I started using MP because I reckoned that anybody who cared enough to produce a CMS that output W3C valid code would care about the way the rest of the product was put together, and you've proved that to be true at every turn.

Beers on the way, cheers!

Al.

You must sign in to post in the forums. This thread is closed to new posts.