Hi there,
I am using Moodle 2.1 and have edited the non-zero theme (changed the banner, moved text a bit, etc). All worked perfectly fine using IE on the server and even testing with FireFox while at Home.
I have arrived back at work today however, and the internal system causes the theme to push banners across the page and it looks a right mess!
Does anybody have any suggestions please?
Thank you!
Hi,
When you say the internal system causes the theme to push banners across the page? Can you send me a link to the site? Is is viewable to the public? Failing that can you set me up with a guest ID & Password? It sounds like it's probably the CSS which needs tweaking, which will be dificult if you don;t have server access or have to go through a third party to get this fixed!
Cheers
Mary
Hi,
the site is: vle.huntington-ed.org.uk/moodle
this link should work perfectly fine - I have tested it off the Schoolsite and all is well.
Thanks
Phil
Hi Phillip,
The only problem I got was when I switched from IE9 to compatibility mode as Richard has mentioned. See image below:
Compatibility Mode takes you into IE7 view, and IE7 does not know how to interpret CSS3 background-size and background-origin.
Of course it all depends on what YOU are seeing on Campus.
Cheers
Mary
Hi Mary,
so everything changed when you "activated" compatibility mode to use the site with older browser versions?
Thank you very much.
Phil
We have just tested this on site - compatibility mode causes the problem, which I assume means the site looks bad on anybody using the old IE version.
Oh dear, do you know how I could adjust the CSS to work with older web browsers please?
Hi,
There are a couple of ways. One is do something similar to this site where the background image for the pictorial view is a repeatable image, and the logo on the left is a separate image which is fixed. Both images are coded into the CSS...so this makes it easier to manage.
The other way is just have a bigger banner say 100px high by 1280px wide and fix it in place and have a background color for those sites that use a wider screen resolution.
I prefer the first solution, especially with the image you have.
I can certainly give you the code to do this.
Mary
Hi Mary,
wow ok. Sorry if I'm being a bit ignorant - is there not code I could insert to alter the designs for IE7, etc?
Otherwise the banner & a background color sounds like a great idea!! I was trying to make the site universal before (so I used percentages to lay out the graphics rather than fixed px's).
Could you help with some of the code for this please?
Thank You
Phil
Hi,
Yes you can add IE specific code. adding the class .ie6 or .ie7 infront of the selector...for example
.ie7 #page-header { ... }
but it is much easier to make the banner simple, and that uses a method which is tried and tested. I learnt all I know about webdesign using IE6, so I tend to do things in the same way I have done for years.
And yes I will try this out and let you have the code.
Mary
Thank you very very much!
(if I duplicated my CSS code but added ".ie7" to elements & tested this in IE7, it would change as I updated the code)?
Phil
Only if you have Theme Designer Mode enabled.
Login as Admin and go to Theme settings (Settings > Site Administration > Appearance > Themes > Theme settings page ) You need to enable Theme designer Mode by clicking the 'tick box' then SAVE settings.
But make sure the new css you add is at the very bottom of the CSS file. (core.css)
Mary
When you say at the bottom - you mean literally the bottom of the "core.css" file inside of the theme I have modified ("nonzero" in this instance)?
Thanks
Phil
err...yep!
Thank You
Hi Mary,
I'm having some difficulty with the ".ie7" tags. I have managed to move the body of text down the page slightly. The problem I'm having is that I wish to resize the banner across the top of the site.
This is the website link again: http://vle.huntington-ed.org.uk/moodle
I have also attached the "core.css" for the nonzero theme in the hope you may be able to point me in the right direction please.
Thank You
Phil
Hi Phil,
That's right, literally at the bottom of your css in your ammended theme. Because of the way css cascades this will ensure that your new lines are the last and will overwrite any others that may be above them.
Hope Mary's code sorts it out for you
Richard
Thank You
Does the system you are now viewing the site on have IE compatability mode enabled? If so, try toggling this off.
Richard
Hi
unfortunately this did not work.
Thanks
Phil
OK - but then you say in your other post that compatability mode DID cause the problems???
In response to that other post - I would suggest actually testing it in the other browsers (ie. other versions of IE - sorry no pun intended! :D) rather than relying on compatability mode and trying to adjust css to make compatability mode work.
Rich
Yes sorry, compatibility mode did cause issues with it. The site it seems has been designed around IE9 and does not display properly in older version.
Thanks
Phil
Easily done Phil
As a Linux user, I have (until recently) been doing most of my developing on Firefox and then trying to recode for earlier IE versions - bad practice I'm sure, but I've learned a lot (and still am!!!). I'm now trying to 'retrain' myself to do it with an IE7 browser open on an old laptop at the same time, rather than trying to rewrite/edit later (still prefer to do the actual editing on my Linux machine though, lol!). Never have got my head around IEs compatibility mode which sometimes seems to me to break things that work in IE7 and 8.
Enjoy Moodling
Richard
Hi,
thanks, I've done very little CSS coding before & I was so happy that I got it working with IE9 and the latest Firefox.
Unfortunately I can't expect parents/students to have the latest technology available to them so I'm trying to fix the compatibility to help them.
Thanks
Phil
