Splash Theme - Cross Browser Compatiable

Splash Theme - Cross Browser Compatiable

by Samantha Ashton -
Number of replies: 11

Hi,

I am just making some amendments to my splash theme, and noticed that there is only 1 IE CSS file. However, I need to create a CSS file for the different IE versions.

Does anyone know where I can add the sufficient line:
"<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]-->"

Any help would be very much appreciated.

I'm guessing that once I have added this line to the relavent area, all I need to do is go into the config.php file and add

$THEME->sheets = array(
'sl',
'green',
'blue',
'orange',
'ie6',
'ie7',
'ie8',
);

Thank you in advance,

Sam


Average of ratings: -
In reply to Samantha Ashton

Re: Splash Theme - Cross Browser Compatiable

by Mary Evans -

You can add .ie6 or .ie7 or .ie8 or .ie9 before any CSS you want to target a specific IE browser for, as this special class it's built into Moodle automatically. I think the only reason that IE css file is added into this theme is because it was originally a Moodle 1.9 theme which listed the extra IE css stylesheets in the header.

Fortunately Moodle does not work like that now. So you could in actual fact add .ie to your span.com like so...

.ie span.com { margin-left: 25px; color: #ff0000;}

as the .ie targets ALL ie browsers.

This CSS rule can be added to this theme's Custom CSS settings found at...

Site Administration > Appearance > Themes -> at this point where 'Theme settings', and 'Theme selector' are listed you will also see a list of theme names. These are all the Custom settings pages for individual themes. By clicking on the 'Splash' link you will get the Splash Custon Settings' page. In that page is a CSS text area specifically designed to add CSS so that it overrides other CSS that has already been processed.

It is important to have Theme Designer Mode enabled in Theme settings before your changes to the CSS will be seen.

Hope this helps?

Mary

Average of ratings: -
In reply to Samantha Ashton

Re: Splash Theme - Cross Browser Compatiable

by Rajnish Rao -

Hi Samantha Bailey,

Now no need to include conditional css file in moodle 2.x

In moodle 2.x, class automatially generate  in body like ie, ie7, ie7, ie8, ie9. ie will be availabele in all internet explorer and ie6, ie7 and ... will change with internet explorer version.

See Example:

 

<body class="ie ie.x">

You can write your css like this for all version of internet explorer:

 

#wrapper .wrapper-inner {
 /** normal rules */
}
.ie6#wrapper .wrapper-inner {
 /** broken rules */
}
.ie7#wrapper .wrapper-inner {
 /** broken rules */
}
.ie8#wrapper .wrapper-inner {
 /** broken rules */
}
...and so on.


Average of ratings: -
In reply to Rajnish Rao

Re: Splash Theme - Cross Browser Compatiable

by Samantha Ashton -

Thank you both very much. I am actually off work tomorrow, so I will give it a try first thing on Monday morning and let you know how I get on.

Sam

Average of ratings: -
In reply to Rajnish Rao

Re: Splash Theme - Cross Browser Compatiable

by Ruth Canton -

Thanks for this post, it was most clear to follow. I tried adding the suggested extra bit to my style sheet. But it doesn't appear to work sad

I'm just testing on ie8 at the moment. What might I have got wrong with this style?

.ie8.navbar {
background: #FC0;   !important;
margin-bottomm: 10px;
border-rightt: 1px solid rgb(150, 150, 150);
border-rightt: 1px solid rgba(229, 229, 229, 0.19);
}

Average of ratings: -
In reply to Ruth Canton

Re: Splash Theme - Cross Browser Compatiable

by Mary Evans -

CSS syntax and spelling are you main problem here...

You may like to read this article about the RGB bug in IE8

.ie8.navbar {
background: #FC0;   !important;
margin-bottomm: 10px;
border-rightt: 1px solid rgb(150, 150, 150);
border-rightt: 1px solid rgba(229, 229, 229, 0.19);
}

This is how the CSS should be written, but I am not certain the RGB border will work, as I have not tested it.

.ie8.navbar {
background-color: #FC0;
margin-bottom: 10px;
border-right: 1px solid rgb(150, 150, 150);
border-right: 1px solid rgba(229, 229, 229, 0.19);
}

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Splash Theme - Cross Browser Compatiable

by Ruth Canton -

Whoops, i wasn't meant to post the snippit like that, sorry. That code was after I had tested the properties else where, to see what they were doing.

This is actually the only bit code I can't make work and really need to:

.ie8.navbar {
background-color: #FC0;
}

If I just put:

.navbar {
background-color: #FC0;
}

The style sheet it sits in is loading as the normal .navbar works.

Maybe there's something more I need to do to make it recognise '.ie8' ?

Average of ratings: -
In reply to Ruth Canton

Re: Splash Theme - Cross Browser Compatiable

by Mary Evans -

Why change the navbar color in IE8 ONLY?

Surely, if you want the navbar color changing it should be done globally so that the site looks the same on ALL browsers.

Where exactly are you making these changes to the CSS? Also given that there were some errors in your previous post, you do need to take care that you don't make any mistakes in the actual CSS otherwise it wont work.

If it is your intention to change your theme so that it looks different in IE8 then you need to make sure all the CSS for IE8 is at the bottom of the stylesheet you are modifying. Also, and this is important for Splash theme, as I am assuming you ARE using Splash theme, then there are different stylesheets for the various colors that the theme uses. So if you make changes to one you need to change it for them all.

Another point to consider is that whatever changes you make to a theme, you really need to enable Theme Designer Mode in Site Administration > Appearance > Themes > Theme settings.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Splash Theme - Cross Browser Compatiable

by Ruth Canton -

Theme designer Mode has a tick next to it. I guessed that meant enabled (I have read up on that bit)

Also, I don't actually want the nav bar yellow. I just chose that to see if the '.ie8' bit would work. Once I can make it work, I'll add various padding, margin ... fixes for these browsers (not the yellow navbar). But I can't get it to work at all :'-(

I use an ie.css, that appears in the header - below core, pagelayout and menu css's. 

What have I not done, what else can I look at? All I can think, is the '.ie8' addition is not being recognised.

Average of ratings: -
In reply to Ruth Canton

Re: Splash Theme - Cross Browser Compatiable

by Mary Evans -

try this instead...

.ie8 .navbar { background: red;}

this puts a space between the .ie8 class and the navbar class. If you chackout theme/anomaly/style/browser.css that has some IE8 specific CSS

HTH

Mary

Average of ratings: -
In reply to Mary Evans

Re: Splash Theme - Cross Browser Compatiable

by Ruth Canton -

OK, style is now working. I think my final error was that my ie browser was telling me it was version 8 when it was infact version 7. 

Why does that not suprise me for ie!

Thanks for your help approve

Average of ratings: -
In reply to Samantha Ashton

Re: Splash Theme - Cross Browser Compatiable

by Danny Wahl -

Another option is to use the browser class to serve the ie stylesheet conditionally - because it's not fair to make your FF users load up and not use IE specific rules sad

Here's how I did it for IE specific JavaScripts: http://iyware.com/browser-detection-in-moodle/

Average of ratings: -