I don't know how Patrick or Navin are getting on with designing themes for Moodle 2.0, but I'm having a whale of a time after tentatively dipping my toe into the water, I've jumped in and making waves! I've totally changed Navin's beautiful OrangeMood theme and in so doing I've discovered some strange behavior with the CSS stylesheets. What's with this YUI combo.php? It's adding CSS I didn't write!
Hi Mary,
The YUI combo.php files (there should be two of them) are the first CSS files included in any page and are used to include the reset CSS from YUI version 3+ and the sam skin from YUI version 2+.
The reset CSS is a collection of rules that ensures that the playing field is level across all major browsers when you first start themeing. It does useful things like correcting default margins and setting a uniform font size.
The sam skin is more specific it is the CSS required by YUI widgets such as the hover panel, menu's, and the tree. It's worth noting that this is YUI2 specific and shouldn't affect anything else in a page other than the YUI2 components its' written for.
You can read more about the reset CSS here http://developer.yahoo.com/yui/3/cssreset/
Hope this helps
Sam
The YUI combo.php files (there should be two of them) are the first CSS files included in any page and are used to include the reset CSS from YUI version 3+ and the sam skin from YUI version 2+.
The reset CSS is a collection of rules that ensures that the playing field is level across all major browsers when you first start themeing. It does useful things like correcting default margins and setting a uniform font size.
The sam skin is more specific it is the CSS required by YUI widgets such as the hover panel, menu's, and the tree. It's worth noting that this is YUI2 specific and shouldn't affect anything else in a page other than the YUI2 components its' written for.
You can read more about the reset CSS here http://developer.yahoo.com/yui/3/cssreset/
Hope this helps
Sam
Thanks Sam. I did wonder what was happening after I put in simple css mark-up for an unordered list style as being none andwhile using FireBug I saw it was listed for all the various option for this including list-style-image, list-style-type, list-style-position and I wondered why!
Now I know, this make it easier to understand a little better.
Cheers
Mary
Now I know, this make it easier to understand a little better.
Cheers
Mary
Hello M,
It takes some time to get the hang of it but once you do, you ll find it systematic and simpler
Yuicombo.php is responsible for adding yui js related images. It also reduces the number of http requests by combining all similar filetypes(css and js) in one, which is required for caching.
You can try using jsenabled to false. Correct me if am wrong, there is some hardcoded css in js code. If am not wrong Petr removed all the hardcoded css in js code but there are still some in js template divs that are always hidden.
Cheers!!
--
Nave
It takes some time to get the hang of it but once you do, you ll find it systematic and simpler
Yuicombo.php is responsible for adding yui js related images. It also reduces the number of http requests by combining all similar filetypes(css and js) in one, which is required for caching.
You can try using jsenabled to false. Correct me if am wrong, there is some hardcoded css in js code. If am not wrong Petr removed all the hardcoded css in js code but there are still some in js template divs that are always hidden.
Cheers!!
--
Nave
H Nave,
Thanks for your replay, but now I have another problem!
I'm having some difficulty with IE8 today. My Moodle2.0 doesn't work in IE8, or rather it's not reading the CSS for the theme. Could this be because I have Developer Mode activated?
Have you tested your Moodle 2.0 theme in IE? Or is it just me?
By the way my website was hacked by some Turkish Hacker, I only noticed today, and it only shows up in IE8 and Safari. When I'm using Firefox/Opera/Chrome I see my website as it really is, and NOT the Hacker page!
This is VERY strange!
Thanks for your replay, but now I have another problem!
I'm having some difficulty with IE8 today. My Moodle2.0 doesn't work in IE8, or rather it's not reading the CSS for the theme. Could this be because I have Developer Mode activated?
Have you tested your Moodle 2.0 theme in IE? Or is it just me?
By the way my website was hacked by some Turkish Hacker, I only noticed today, and it only shows up in IE8 and Safari. When I'm using Firefox/Opera/Chrome I see my website as it really is, and NOT the Hacker page!
This is VERY strange!
Good Morning Mary,
I did check your website. It seems to open fine on chrome, opera and firefox for me. Did you manage to retrieve it back? May be you can consider looking at the source to figure out whats wrong with it. I hope you havent included any offsite js links? Have you? If you want, I can help you figure it out. Lets take it off-thread.
BTW, my theme was working fine in IE.
Cheers!!
--
Nave
I did check your website. It seems to open fine on chrome, opera and firefox for me. Did you manage to retrieve it back? May be you can consider looking at the source to figure out whats wrong with it. I hope you havent included any offsite js links? Have you? If you want, I can help you figure it out. Lets take it off-thread.
BTW, my theme was working fine in IE.
Cheers!!
--
Nave
I spent two hours this morning just trying to get a background color to work in a new 2.0 theme. It would only span 2/3 of the screen... (i'm including the base theme in the config.php and one additional new css file). It still won't work, I had to force the body height to some crazy height in order to get the color to cover the entire page...
I'm excited by the UI possibilities that now exist in the themes, but the learning curve will be steep.
I'm excited by the UI possibilities that now exist in the themes, but the learning curve will be steep.
Hi John,
Can I ask which theme you started off with as your basis for your custom theme?
It might be that you are coding the wrong element of your page if you are having to resize various componants just to fix a background color.
I'm using OrangeMood because of it's simplicity, it has a background gradient image running along the x-axis (top of the screen) which fades to a muted shade of orange which is solid color for the rest of the page.
It uses one simple stylesheet called screen.css - it could not be simpler!
Mary
Can I ask which theme you started off with as your basis for your custom theme?
It might be that you are coding the wrong element of your page if you are having to resize various componants just to fix a background color.
I'm using OrangeMood because of it's simplicity, it has a background gradient image running along the x-axis (top of the screen) which fades to a muted shade of orange which is solid color for the rest of the page.
It uses one simple stylesheet called screen.css - it could not be simpler!
Mary
Hi John,
Sorry I didn't connect the HTML and the body. I must admit I thought that odd too, but I haven't had the need to code the body element yet. But interestingly enough I was curious as to why body had not been included in the CSS. So I added body {border: 2px solid #bbb} and looked to see where the border was positioned in the browser, and was surprised to see it as a border around the page. which, in the theme I am working on has a margin of what looks like about 50px all round. Usually the body is on the outside edge of the screen.
"Curioser and curiouser", cried Alice!
Sorry I didn't connect the HTML and the body. I must admit I thought that odd too, but I haven't had the need to code the body element yet. But interestingly enough I was curious as to why body had not been included in the CSS. So I added body {border: 2px solid #bbb} and looked to see where the border was positioned in the browser, and was surprised to see it as a border around the page. which, in the theme I am working on has a margin of what looks like about 50px all round. Usually the body is on the outside edge of the screen.
"Curioser and curiouser", cried Alice!
Hi John,
Just as an idea if you are applying the background colour to the body tag try applying it to the HTML tag instead.
I have been working on a block to create theme's as of late and have had a few issues with the body tag extending only 2/3rds of the height of screen on small pages.
I found the solution to my problems was to start focusing on the HTML tag... sounds dumb but it worked for me ;)
Cheers
Sam
Just as an idea if you are applying the background colour to the body tag try applying it to the HTML tag instead.
I have been working on a block to create theme's as of late and have had a few issues with the body tag extending only 2/3rds of the height of screen on small pages.
I found the solution to my problems was to start focusing on the HTML tag... sounds dumb but it worked for me ;)
Cheers
Sam
Sam:
Should we code this differently now for Moodle 2.0 then???
Should we code this differently now for Moodle 2.0 then???
body { background-color: #abc++0.33333333}
Jesting apart, could this be a BUG? Does it need fixing?
Regards
Mary
Great job Petr - Many thanks from all of us!
Cheers!
Mary
Cheers!
Mary