USING PIE.htc CSS3 library in themes

USING PIE.htc CSS3 library in themes

by Michael Kornowski -
Number of replies: 12

Dears,

we have a larger Moodle project for a bank-chain. Part of this project is the creation of a highly customized theme. This is almost complete and finally we have managed to create a theme which complies to the styleguide policy almost 100%.

Our last concern is the integration of the PIE.htc CSS3 library which provides CSS3 attributes to older IE browsers from 6-8 and 9.

Normally this library integration is very easy and quite rock-solid.

We added the htc mimetype to apache using htaccess file and tested with a static html file. Works!

The normal way to integrate this into the CSS file is like this:

 

-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
position:relative; -webkit-border-radius:5px;
behavior: url(PIE.htc);

but also contructs like

behavior: url(http://mydomain.xx/folder/PIE.htc);

work fine. We know as we implemented several times in CMS like typo3 or others.

In case of moodle I'm bit worried. Whatever definition we enter in CSS, it does not work. Do not knw why but even givving an absolute domain does not do the job.

Might it be that we need to integrate like pics and therefore need to add the filetype to the pix function?

e.g. similar to this?

url([[pix:theme|core/PIE]]);

I would be amazed to get a reply as we already spent relatively high amount of hours in trying to get this done.

Many thanks' in advance.

 

Have a great weekend

Michael

 

Average of ratings: -
In reply to Michael Kornowski

Re: USING PIE.htc CSS3 library in themes

by Mary Evans -

Hi Michael,

This is a tricky one but in Moodle I would be tempted to use the full address to the PIE.htc file like so...

.for-example {
 -moz-border-radius:5px;
 -ms-border-radius:5px;
 -o-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:5px;
 position:relative; -webkit-border-radius:5px;
 behavior: url(http://yoursitename/moodle/theme/yourthemename/style/PIE.htc);
}

...providing of course you add the PIE.htc file to your theme's style directory.

I think that will work.

Mary


Average of ratings:Useful (1)
In reply to Mary Evans

Re: USING PIE.htc CSS3 library in themes

by Michael Kornowski -

hi mary,

many thanks' for your reply.

yes, normally i would always think this works...but...nothing...

what i also noticed:

as i was thinking that at some point the htc is not loaded or simply overwritten by a YUI definition, we have even triend the unelegant way (<style></style> in head) as this normally takes presedence over the CSS files..


even this (with absolute URL) did not do the job...the funny thing: I used it in an inline style desciption on a pure html element which worked...never experienced such a thing...

now i will try to build either a PHP or a JQuery loader for it. Might be when I preload the file and get it passed by PHP or JS it will work. not very sure about this...

I will post our results...

many thx again.

 

cheers

michael

Average of ratings: -
In reply to Michael Kornowski

Re: USING PIE.htc CSS3 library in themes

by Mary Evans -

I should have said before, you need to first enable Theme Designer Mode otherwise you will not see any changes. If you have already done this then the other alternative is add the PIE.css to your theme's style directory and add PIE.css to your theme's config.php along with all the other stylesheets. The only problem is that Moodle requires you to make all directories and filenames lowercase, so it may be that fact which is stopping that file from being read?

If you rename PIE.css to pie.css and add it in the stylesheet section of your theme's config.php like so...

for example...

$THEME->sheets = array(
    'pagelayout',   /** Must come first: Page layout **/
    'core',              /** Must come second: General styles **/
    'pie',
);

This will work as it will get loaded with the other stylesheets.

HTH

Mary

Average of ratings:Useful (1)
In reply to Mary Evans

Re: USING PIE.htc CSS3 library in themes

by Melinda Rabenstein -

This should be close, but it's a known issue that CSS3PIE doesn't like absolute pathing. Replace the behavior url with /moodle/theme/yourthemename/style/PIE.htc. If that doesn't work try using the php version however YOU WILL NEED TO KEEP THE HTC AND PHP VERSIONS IN THE SAME FOLDER. This will rule out any issues you may be having with your server not understanding what a .htc file is and therefore not including it when it sends you information.

Average of ratings:Useful (1)
In reply to Michael Kornowski

Re: USING PIE.htc CSS3 library in themes

by David Scotson -
Hi Michael,

you might want to rule out the bug I just posted about, which can lead to odd behaviour in IE 6-9 if you're not aware of it:

https://moodle.org/mod/forum/discuss.php?d=224333
Average of ratings:Useful (1)
In reply to David Scotson

Re: USING PIE.htc CSS3 library in themes

by Michael Kornowski -

dear mary,
dear david,

so many thanks for these hints. i will test it today and let you know my results...

all my best and have a great day

michael

Average of ratings: -
In reply to Michael Kornowski

Re: USING PIE.htc CSS3 library in themes

by Andrew S -

Hi 

Did you manage to get this working yet? I also would like to include PIE in my theme. 

I thought that including the .htc file in the pix directory would not work as its not an image file, but I also thought that including it in the styles directory would probably not work as it isn't a css file??

I'm aware that there's a javascript version of PIE which you could easily include in the theme /javascripts/ folder

http://css3pie.com/documentation/pie-js/

but I'm not sure if there are going to be further issues and hassles with actually applying this.

Average of ratings:Useful (1)
In reply to Andrew S

Re: USING PIE.htc CSS3 library in themes

by Melinda Rabenstein -

Okay, so this is going to sound strange, but give this a try. It should hopefully make things work.

1) Put the PIE.php and PIE.htc files into the same directory and use the php version in your css file.

2) Reference the PIE.php file from root ex. if you put in the folder CSS3PIE in your root directory reference it as '/CSS3PIE/PIE.php' in your css file.

3) Make sure all border-radius rules are written in shorthand. ex. border-radius:15px 15px 15px 15px; opposed to border-top-left-radius:15px; etc.

4) Include this rule (along with the behavior rule), replace the dummy HEX colors for whatever ones you want, if you are trying to do a gradient -pie-background: linear-gradient(#EEFF99, #66EE33);

 

HTH

~hypertwitch

Average of ratings:Useful (1)
In reply to Michael Kornowski

Re: USING PIE.htc CSS3 library in themes

by Mary Evans -

Hi Michael

Sorry, but it looks like I made a mistake with my solution. I was thinking PIE was a css file and of course it isn't it .htc. So my solution will not work. sad

Mary

Average of ratings:Useful (1)
In reply to Mary Evans

Re: USING PIE.htc CSS3 library in themes

by Michael Kornowski -

Dear Mary,

dear all

At first: MANY THANKS to all of you trying to help with this. I did not expect such a resonance.

It's no CSS but it somehow teaches the IE browsers CSS3 stuff using JS.

Meanwhile I need to mention that we tried every way provided here and in addition some more. Still no result.

Currently we do following:

1. we use the php behaviour url instead of direct htc inclusion.

2. YES, our server knows htc as we explicitely put this into htaccess and with static html file and raw html elements with inline css and behaviour url it qworks like hell.

3. we placed all files into /theme/themename/style/

4. in css we use as follows:

/*example */

.tabtree .tabrow0 li a span {
background-repeat: repeat-x;
background-image: url([[pix:theme|top]]);
background-repeat: repeat-x;
padding-right: 14px;
padding-top: 10px;
padding-bottom: 3px;
color:#FFFFFF;
padding-left:10px;
padding-right:10px;
border-radius: 5px 5px 0px 0px;
behavior: url("/theme/sparda/style/pie.php");

}

5. the php looks like this

<?php

header( 'Content-type: text/x-component' );

include( 'PIE.htc' );

?>

While text/x-component is anyway defined in .htaccess as well...

6. The PHP loads the pie which can be tested if I call the script directly

7. the ressources are shown in all.css if i call e.g.

http://mydomain/theme/styles.php/themename/1363443170/all

BUT it is not shown i the parsed CSS in Firebug. So I assume it's not loaded but cannot understand whysad

7. No I don't think we run into that 4095 selector issue...even changing the design to a minimalistic one does not solve the issue for us.

So far we have a very customized theme and everything works, except this. Our client request a design accordingly to a complex styleguide. All has been met except rounded tabs and buttons. And due to the really different text lengths in Moodle we cannot use background images for the buttons/submits. The theme looks exactly same in all browsers, even in IE 10 but NOT in IE 8,9. And the client's internal browser is still IE 8 and will at least be for an additional year, until they move globally to win 7.

8. Additional hint: Even if our theme does not look near like afterburner, we used it as the base for our development.

9. changing the url from

behavior: url("/theme/sparda/style/pie.php");

behavior: url("/moodle24/theme/sparda/style/pie.php");

moodle24 is the root folder for our moodle 2.4.1 based instalation

These are our findings so far. 

I can provide a link to our test system by PM but cannot publish it in a forum. Client's policy smile

All my best wishes and have a great weekend

Michael

Average of ratings: -
In reply to Michael Kornowski

Re: USING PIE.htc CSS3 library in themes

by Melinda Rabenstein -

Another issue, I forgot to mention in my last post is that you should have the item you are trying to apply the css3pie to with an explicit position definition as I'm not sure inheritence will work properly. As such, try adding position:relative; to your span's css.

Average of ratings: -
In reply to Michael Kornowski

Re: USING PIE.htc CSS3 library in themes

by Jelena Terzic -

Hi,

I am having similar issues with CSS3PIE. I was wondering if anyone has managed to find a way of using it within Moodle Themes?

Thanks, Jelena

Average of ratings: -