Boy, was this a huge pain to figure out. I’m hoping I can save others some teeth-grinding here.
CSS3 PIE is a wonderful addon that makes IE 6-8 render many of the most-used CSS3 features, including:
- rounded corners
- box shadows
- text shadows
- linear gradients
- border images
- multiple background images
It is super-easy to use on an HTML/CSS site, you simply add the PIE.htc file to your site and call the behavior like this in CSS:
|
1 2 3 4 |
#myElement { ... behavior: url(PIE.htc); } |
And if you can, add this to .htaccess (if you can’t do this for some reason, you can use PIE.php instead of PIE.htc in the CSS file):
|
1 |
AddType text/x-component .htc |
Works like a charm.
But if you’re using WordPress…
We have a different story entirely. I was unable to get PIE working after several attempts, moving the PIE file, trying PIE.htc vs PIE.php, etc. What I’ll show you are the final edits that got it working for me. Note: I’m using a child theme of Theme Hybrid.
1) This is in my functions.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function my_render_ie_pie() { ?> <!--[if lte IE 8]> <style type="text/css" media="screen"> #your-css-elements-here { behavior: url('http://www.redkitecreative.com/PIE.htc'); } </style> <![endif]--> <?php } add_action('hybrid_head', 'my_render_ie_pie', 8); |
So you see you’ll add all the CSS elements that need PIE treatment in IE, then the behavior line with a call to the PIE.htc file (I found that I had to use an absolute link, relative did not work for me on this WordPress site).
2) I added the AddType statement for .htc in my .htaccess file; if for some reason I hadn’t been able to do that, I’d call PIE.php instead.
3) I removed the filters in every CSS element I included in functions.php (I was using a gradient filter for the buttons, and that hides the PIE results).
4) All the CSS elements involved were given position: relative.
Getting PIE to work in WordPress is tricky. There are some posts on the PIE forums that helped, but the part about the filter eluded me and that was the final issue to solve. There are other suggestions there that are reported to work in WordPress, but they didn’t for me, maybe due to something about Theme Hybrid – I don’t know. I did have another Theme Hybrid user confirm that what I showed above worked for him, too.
Let me know if this helps you!
Related posts:
- WordPress custom profile page I have a pet project using WordPress that’s close to...
- Using WordPress custom fields I learned how to use WP’s custom fields tool today....
- How to show all the custom field values for a WordPress post I’m working with TDO Mini Forms in WordPress and having...
« A low-cost CRM perfect for freelancers My current default WordPress plugins »
Thank you, just what I needed. Works great for all css elements and supported behaviors. I’m building a new theme and I needed to put PIE in theme directory (not in site root). I put absolute url in variable which I call for each css element. So here is my function:
function my_render_ie_pie() {
$piedir = WP_CONTENT_URL. “/themes/themename/library/js/PIE.htc”;
?>
#searchform input#s {
behavior: url(“$piedir”);
}
<?php
}
add_action('wp_head', 'my_render_ie_pie', 8);
There’s a typo in my previous comment, correct is.
behavior: url(“$piedir”);
I updated the first post with your correction. Thanks for the reply, I’m still trying to get my head around using this in WordPress but the results in IE are worth it.
Thanks folks,
Above saved me a lot of work.
I put the style declaration directly into header –
#your-css-elements-here {
behavior: url(‘http://www.mysite.com/wp-includes/PIE.htc’);
}
added ‘position: relative’ to css and ‘AddType text/x-component .htc’ to .htaccess and it works fine and good for basic rounded corners on divs in wordpress twentyten theme
Thanks – it was ridiculous how hard it was to find info on using PIE in WordPress. I’m glad it helped.
redsalmon: just adding the behaviour in the head as you mentioned did it for me.
.ie-round { position: relative; margin:0 0 5px 0 !important;/*PIE.htc*/ behavior: url(/PIE.htc);
i didn’t even need to use AddType in .htaccess (but I’ll know where to add it, if necessary later). thanks to debbie and all who posted with your workarounds for wordpress !
I’m still having issues, but you saved my life with this code!! Oh man, thanks Debbie, you are appreciated.
Thank you
My pleasure, this was such a pain to deal with.
Kind of combined your two functions
function PIE_CSS()
{
$piedir = WP_CONTENT_URL.”/themes/mytheme/css/PIE.htc”;
?>
#nav .dropdown {
behavior: url(”);
}
<?php
}
add_action('wp_head', 'PIE_CSS', 8);
Thanks Debbie, for this one and the next (http://www.position-relative.com/2011/04/using-css-pie-in-wordpress-themes-updated/). I finally have it all working now!
You’re welcome.
I seem to occasionally have some WordPress sites where even these two setups don’t work – I suspect it might be the client’s host, because there are no differences in the WordPress install.
Thanks Debbie!
Border-radius and box-shadow works perfect.
However I can not get text-shadow to work.
Are you sure pie.htc support text-shadow?
You’re right – PIE doesn’t support text-shadow now but they say on their blog that they are planning to add this in the future.
Hi Debbie,
Thank you very much for this blog post.
I wrote a wiki entry on the same here: http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2#How_to_use_CSS3_PIE
Does not need a function to make PIE.htc work in wordpress
Just give relative path with respect to your base folder.
Lets say you put PIE.htc in your theme folder then path will be as follows
behavior: url(wp-content/themes/twentyeleven/PIE.htc);
This may work now, but it certainly didn’t at the time I wrote that post. I’ll try this on the next site again.
THANK YOU! That helped a ton.
You’re welcome, but you might want to check out the latest version of this method, it could be easier to implement if you need it again.