Having read and posted the odd comment in Moodle 2.0 Column Width thread, I thought it an idea to start a discussion about Moodle 2.0 Page Layout to deal with the ever growing need to get some clear direction on the way forward with CSS Selector Notation so that when designing a theme, the need to have to refer to a chart of the layout comparing one sysytem with another, is lessened by the simplified naming of CSS selectors in Page Layout, since this is the crux of the tableless structure of Moodle for the future.
I propose that the CSS Selector notation for Page Layout, given by Urs Hunkler (See Demo Page) should be a starting point, at least, to get this moving towards some kind of conclusion.
Mary
Hey all,
Mary reminded me that this should be done sooner than later so I've gone ahead committed Urs's recommended changes in the selector names for the base theme wrapper DIVs.
MDL-22180
Please let me know as soon as possible if anything additionally needs to be changed.
Of course, theme developers don't have to use this naming scheme. They can very easily create their own page layouts and use whatever wrapper system they'd like. I'm confident that these changes will make it easier for theme developers to understand.
Any volunteers to alter the documentation to reflect these changes?
Mary reminded me that this should be done sooner than later so I've gone ahead committed Urs's recommended changes in the selector names for the base theme wrapper DIVs.
MDL-22180
Please let me know as soon as possible if anything additionally needs to be changed.
Of course, theme developers don't have to use this naming scheme. They can very easily create their own page layouts and use whatever wrapper system they'd like. I'm confident that these changes will make it easier for theme developers to understand.
Any volunteers to alter the documentation to reflect these changes?
Hi Patrick, that was quick work! Thanks for taking the initial lead on this, at least it will pave the way for others to have a go at theming Moodle 2.0 with more confidence.
I wouldn't mind having a go at updating the documents to reflect these changes. Just point me in the right direction!
Mary
I wouldn't mind having a go at updating the documents to reflect these changes. Just point me in the right direction!
Mary
I'm not sure of all the places, but you could start with these:
http://docs.moodle.org/en/Development:Themes_2.0
http://docs.moodle.org/en/Development:Themes_2.0_creating_your_first_theme
Thanks!
http://docs.moodle.org/en/Development:Themes_2.0
http://docs.moodle.org/en/Development:Themes_2.0_creating_your_first_theme
Thanks!
Just spent a little time this morning getting to know my way round the Moodle Docs in editing mode. There are a few things I'm not quite sure of, but I am sure I will find out soon enough!
One important finding, when updating the Page-Layout in the Moodle Doc - Creating Your First Theme, was when adding the notation Urs gives for the new layout...see below...notice the one I have highlighted, I think it sould read... region-pre-box and NOT region-post-box as Urs has written it! since it is referring to the LEFT column NOT the right column!
Why not just write left or right why has it to be pre and post? I know it means before and after, so I suppose it's logical, but it does use up more brain power!
Anyway, I've written it into the doc as REGION-PRE-BOX hope this is OK? !!!
should read...
* | #regions-mask :: colleft :: region-pre-box
Mary
One important finding, when updating the Page-Layout in the Moodle Doc - Creating Your First Theme, was when adding the notation Urs gives for the new layout...see below...notice the one I have highlighted, I think it sould read... region-pre-box and NOT region-post-box as Urs has written it! since it is referring to the LEFT column NOT the right column!
Why not just write left or right why has it to be pre and post? I know it means before and after, so I suppose it's logical, but it does use up more brain power!
Anyway, I've written it into the doc as REGION-PRE-BOX hope this is OK? !!!
* #page * #page-header * #page-content :: colmask :: page-content * | #regions :: colmid :: region-main-box* | #regions-mask :: colleft :: region-post-box
should read...
* | #regions-mask :: colleft :: region-pre-box
* | #region-main :: col1wrap :: region-main-wrap * | | #region-main-mask :: col1 (middle) :: region-main * | | .region-content * | #region-pre :: col2 (left) :: region-pre * | | .region-content * | #region-post :: col3 (right) :: region-post * | | .region-content * #page-footerCheers
Mary
It is not left and right because of right-to-left languages.
If you have a site available in both Hebrew and English, say, then some blocks should go before the main content, and other after it, where before and after depends on which language the user has selected. (And pre and post seemed shorter than before and after.)
Moodle has always been very good about flipping everything properly for rtl languages - including, in Moodle 1.9, displaying the 'right' blocks on the left, and vice versa. That if just confusing. Hence the change of name.
I think it is still the case that themes have a rtl.css file, which is included only if the current language is rtl, to make this all work.
If you have a site available in both Hebrew and English, say, then some blocks should go before the main content, and other after it, where before and after depends on which language the user has selected. (And pre and post seemed shorter than before and after.)
Moodle has always been very good about flipping everything properly for rtl languages - including, in Moodle 1.9, displaying the 'right' blocks on the left, and vice versa. That if just confusing. Hence the change of name.
I think it is still the case that themes have a rtl.css file, which is included only if the current language is rtl, to make this all work.
Yes I can appreciate the need to distinguish the pre and post in respect of language differences in the way they are read and displayed on the page, however, this should not stop the overall framework of the page itself being set out with column-left, column-right, when that is actually where they are, column-left is on the LEFT and column-right is on the RIGHT. You can still have rtl in the left-hand column, just as you can have ltr in the right- hand column of the main page layout.
Mary, I stumbled over the "colleft" named div several times in the "Holy Grail" and I am still not sure if the name is correct or not.
What I am sure about is that you set the background color for the right/region-post box on this div. So I decided to name it "region-post-box" because you know from the name that you need to set the background color for the "region-post-box" here. I find it confusing when I would have to set the background color for the "region-post-box" on the div called "region-pre-box".
You may check the situation with my Page Layout demo.
Hi Urs,
I think you have fallen into the same trap I fell into when trying to figure page-layout which was set out originally. My first instinct was to colour the backgrounds of the boxes as you have in your online-demo. But in actual fact, it's the three columns (region-main, region-pre, region-post) which sit on top of the three box framework below which should hold the background colours. So naming col-left to region-post-box is, to my mind, incorrect.
Does this make sense?
Mary
I think you have fallen into the same trap I fell into when trying to figure page-layout which was set out originally. My first instinct was to colour the backgrounds of the boxes as you have in your online-demo. But in actual fact, it's the three columns (region-main, region-pre, region-post) which sit on top of the three box framework below which should hold the background colours. So naming col-left to region-post-box is, to my mind, incorrect.
Does this make sense?
Mary
Ah, that way you are thinking. Have you tried what you propose?
When you add the background color to region-main, region-pre and region-post you get different hight colored columns. Divs shrink to the hight of their content.
The trick with the "Holy grail" approach is to use three divs within each other as boxes. And then add three divs for the content besides each other - within the inner container box. This way the highest of the three content divs will make all three outer container divs be the same max height.
You need to add the background color to the outer "box" divs to get equal hight column backgrounds. That's their job.
Yep, I see what you mean about the individual columns. I did try what I had suggested and it does not work, as you have pointed out, however, I went back to the Holy Grail (Percentage layout) and have now got My Moodle theme to work as it should with columns middle, left, and right, coloured in the right place. (See CSS attached)
I did away with #regions-main-wrap as it looks like it's not needed, at least going by Matt's 3 Column layout using percentages. Having said that I'm not sure how important it is in the scheme of things though?
Sorry if I have caused you un-necessary worries!
Mary
PS: (Edit) The CSS should work with Base theme providing selector names are changed in General.PHP
In reply to Mary Evans
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
Hi Dietmar,
All I did was copy Matt's Holy Grail CSS from the page source of his webpage for the Percent Layout and pieced it together with Base Page-Layout.css changed the selector names and dropped one of the DIVs as suggested in the documentation on Matt's pages. It could not have been simpler. It was fun watching it all come together.
I've attached the html page I worked from.
And YES! the conclusion is basically the same, which means I'm on the right road at last!
Mary
All I did was copy Matt's Holy Grail CSS from the page source of his webpage for the Percent Layout and pieced it together with Base Page-Layout.css changed the selector names and dropped one of the DIVs as suggested in the documentation on Matt's pages. It could not have been simpler. It was fun watching it all come together.
I've attached the html page I worked from.
And YES! the conclusion is basically the same, which means I'm on the right road at last!
Mary
I extended my Page Layout demo to allow to set the background colors on the outer box divs or on the content divs. One can now experience the differences.
Hope that helps.
This is a very good learning tool, Urs. Is there any chance you could add a further set of CSS rules? I was thinking of the the Page-Layout.css I added in a previous post in this thread. It is a copy of the CSS from Matt's Holy Grail (percentage layout) page, which I then translated to Moodle Page-Layout notation, and as such might be interesting to see how that works also?
Is it possible?
Mary
Is it possible?
Mary
Urs, I have a question for you.
The page layout in Base theme uses notation as follows...
#page-content
#region-main-box
#region-post-box
This layout when seen in Base theme works from Right to Left like screens...
#page-content - full screen
#region-main-box - 2/3rds screen
#region-post-box - 1/3rd screen
And yet Matt's Holy Grail actually works Left to Right if you use the values he uses
My Question:
Is it a Moodle design feature to work Right to Left (RTL) if so then this would account for the way css files are read from the config.php, and also account for the strange way the pages render themselves in my FlowerPower theme as I use the css values from Matt's Holy Grail (percentage) page.
Thanks
Mary
The page layout in Base theme uses notation as follows...
#page-content
#region-main-box
#region-post-box
This layout when seen in Base theme works from Right to Left like screens...
#page-content - full screen
#region-main-box - 2/3rds screen
#region-post-box - 1/3rd screen
And yet Matt's Holy Grail actually works Left to Right if you use the values he uses
My Question:
Is it a Moodle design feature to work Right to Left (RTL) if so then this would account for the way css files are read from the config.php, and also account for the strange way the pages render themselves in my FlowerPower theme as I use the css values from Matt's Holy Grail (percentage) page.
Thanks
Mary
Mary, you keep me busy working on my Moodle 2.0 layout demo page.
I added a page visualizing Matt's Holy Grail flexible percentage based layout ported to the Moodle naming scheme.
You mentioned differences in the creation and naming especially building the structure from left to right and vice versa. The flexible and fixed layout work different - they need to fulfill different needs.
Naming
- In fixed the third box sets the background for the right column
- In flexible the third box sets the background for the left column
Creation
- In fixed the columns are moved to the right
- In flexible the columns are moved to the left
CSS and places where you need to change column width values
- In fixed you have some few easy values
- In flexible you need to change more values and you need more calculation for width and margins
I hope the visualization helps.
A question to Sam or who created "pagelayout.css".
When I worked on the "flexible" version of the page layout I found it very disturbing how the CSS rules are build.
#page-content #region-main-box #region-pre-box #region-main-wrap #region-main {margin-right:0px;margin-left:460px;overflow:hidden;}
Why are all the ids used in the page structure listed in the rules?
When working on alternative layouts building the rules this way is very time consuming and error prone. Therefore on the visualization page I only use the base id "#page-content" and the id for the column. To apply the rule using one single id would be enough.
If the list of ids shall help people map the rules to the page structure I do not understand why all CSS properties are set in one line. This is the most difficult way for people to read and understand the content of the rule.
And why has been decided to set redundant properties like "position" or "overflow" in each rule instead of defining them once in grouped rules? Understanding the rules is again made more difficult this way.
The way the CSS is set up in "pagelayout.css" is against many recommendations to build well structured and fast rendering CSS. What advantages do we/Moodle gain from this way to write CSS?
I totally agree with your observations about the structure of pagelayout.css, it sort of goes against the grain of how I was first taught!
Hi Urs,
My apologies for not having replied earlier, I have been focusing on the push to get the preview release out and haven't frequented the forums for the last couple of days.
All of the applicable ID's certainly don't need to be there, they are only there as that was my personal preference when I was sorting out the base theme as I could see the structure of the page clearly in the CSS and it helped me gain a proper understanding of how the structure functioned and what limitations I could expect to be bound by.
If the consensus is that it is easier to understand then I have no objection to them being shortened to a single id.
The single line CSS format is an interesting one, and certainly something that I don't expect to go down with everyone's personal preferences.
The first thing I did when starting out with the theme's was to convert all CSS files to the single line format and then by script combine all of the CSS and structure by rules, this allowed be to remove the hundreds of redundant/duplicate styles and rules that existed. I then proceeded to work with the single line format for several weeks while I finished off the other theme tasks. At the end the final thing I was going to do was convert it all back, however upon talking with a couple of people in the office including Martin it was decided to leave the CSS in a single line format. Hence today we have single line CSS rules within Moodle's base and standard theme's.
By no means do people have to write single line CSS rules that is just how it has been done for those two theme's.
The CSS for the standard and base theme's could certainly be optimised more than they currently are, in this case it is a lack of time on my behalf.
In regards to styles being included within each element rather than intelligently being grouped by well organised classes, this was done when splitting CSS files into the structure that they are in now + the removal of redundant/duplicate styles as noted above and simply has not been re-optimised.
I've just created MDL-22351 to track this and Patrick I've added you as a watcher, feel free to take control of the issue or help out if you find a bit of free time.
Hopefully this answers a few of the questions above, by all means I'm open to discussion and change for the better
Cheers
Sam
My apologies for not having replied earlier, I have been focusing on the push to get the preview release out and haven't frequented the forums for the last couple of days.
All of the applicable ID's certainly don't need to be there, they are only there as that was my personal preference when I was sorting out the base theme as I could see the structure of the page clearly in the CSS and it helped me gain a proper understanding of how the structure functioned and what limitations I could expect to be bound by.
If the consensus is that it is easier to understand then I have no objection to them being shortened to a single id.
The single line CSS format is an interesting one, and certainly something that I don't expect to go down with everyone's personal preferences.
The first thing I did when starting out with the theme's was to convert all CSS files to the single line format and then by script combine all of the CSS and structure by rules, this allowed be to remove the hundreds of redundant/duplicate styles and rules that existed. I then proceeded to work with the single line format for several weeks while I finished off the other theme tasks. At the end the final thing I was going to do was convert it all back, however upon talking with a couple of people in the office including Martin it was decided to leave the CSS in a single line format. Hence today we have single line CSS rules within Moodle's base and standard theme's.
By no means do people have to write single line CSS rules that is just how it has been done for those two theme's.
The CSS for the standard and base theme's could certainly be optimised more than they currently are, in this case it is a lack of time on my behalf.
In regards to styles being included within each element rather than intelligently being grouped by well organised classes, this was done when splitting CSS files into the structure that they are in now + the removal of redundant/duplicate styles as noted above and simply has not been re-optimised.
I've just created MDL-22351 to track this and Patrick I've added you as a watcher, feel free to take control of the issue or help out if you find a bit of free time.
Hopefully this answers a few of the questions above, by all means I'm open to discussion and change for the better
Cheers
Sam
I've been styling CSS one way for a while, but I decided to try your method for formfactor and canvas. I'm not convinced that it's better, but I'm still testing. I understand why you drill down through the code. Once get one or two themes I'll probably clean things up.
Hi Sam,
never mind with taking the time you need to answer. For me fast answers are worth nothing - valuable answers are the ones that count. And your answer is of much value.
You shed a bit of light on the painful process to clean up Moodle 1.9 CSS - and be sure I appreciate the huge amount of work you have done in this process and the great result.
One way to read your answer is: the series of id- and classnames, one line rules, redundant CSS properties helped you in the process. And then Moodle developers decided to stop you after 3/4 of your way and that's what we have now.
With this explanation I understand the contradictional state and want to encourage you to continue your process to the end. And I want to encourage the Moodle developers to rethink their decision to leave the CSS files in a 3/4 ready state.
My proposals are:
_1 create machine optimized one line style rules without redundant CSS properties for fast transfer.
_2 create human optimized CSS which can be easily understood and can work as an example how to write good and fast CSS.
My preference is _2. In my projects I will start to write CSS with one information per line because I found out that this is the best way to work. And to use white space for the eye and brain to recognize structures and the meaning of the information. One information per line gives me the very valuable opportunity to duplicate lines and move lines around without the need to modify these lines too much. In good editors you have key strokes for these tasks. After many years working with CSS I found this the most productive way to work with CSS - both for understanding and for creating.
I am going to write CSS rules like:
#page-content,
#regions,
#regions-mask
{
float: left;
position: relative;
}
#page-content
{
clear: both;
overflow: hidden;
width: 100%;
}
Hi Urs,
Would just like to add my support to what you said below:
_2 create human optimized CSS which can be easily understood and can work as an example how to write good and fast CSS.
I also write my CSS across multiple lines in a human centred way : )
~thomas
Urs - I'm in full support of option 2 and will start this cleanup at the end of my process as well. CSS in the way that you've presented it is the way I'm accustomed to reading and writing CSS.
Doesn't #1 already exist though? Isn't Moodle stripping out the white space in CSS before presenting it to the browser?
Doesn't #1 already exist though? Isn't Moodle stripping out the white space in CSS before presenting it to the browser?
JFTR
Object Oriented CSS contains some pointers to articles on best practices for writing CSS, especially CSS Systems for writing maintainable CSS.
And Developer notes: Markup & Theming could serve as a permanent place for best practices developed in this thread.
Object Oriented CSS contains some pointers to articles on best practices for writing CSS, especially CSS Systems for writing maintainable CSS.
And Developer notes: Markup & Theming could serve as a permanent place for best practices developed in this thread.
After I left my last message here I started looking at the other pages of Matt's website (Pixel & No Quirk Mode) and realised, as you too have discovered, that the flexible (%) page-layout and the fixed (px) page-layout present differently. This is why I questioned you originally in another thread about the #regions-post-box. In my mind I was convinced you had it wrong, but it was because I was reading from a different page-layout (%), where as you were reading from the the fixed (px) page-layout.
Thank you for working so hard on your Moodle Demo! And thanks too for your explaination about the differences between Fixed and Flexible page-layouts here.
Many, many thanks!
Mary
Thank you for working so hard on your Moodle Demo! And thanks too for your explaination about the differences between Fixed and Flexible page-layouts here.
Many, many thanks!
Mary
You are welcome Mary!
To think about a straight forward way to visualize the complex page structure and CSS was a nice task. Creating the interface was a nice challenge too.
The main focus needed to be on the simple aspect "Stepping through the single CSS rules" to let the user experience and understand the changes. Additional gradual enhancements which are not visible first hand and therefore not disturbing the main task shall support understanding: the collapsible settings offer a more detailed insight.
Showing both the "fixed" and the "flexible" page version offers a helpful overview over the different CSS rules and "box" div names needed to create a flexible width page based on percentage width and a fixed width page based on pixel width.
I hope the Moodle 2.0 layout demo helps people to understand the page structure and to change the layout to their needs without much trail and error.
These pages I designed and created with "Progressive Enrichment" for a great page experience. Dan Cederholm calls the way to use CSS3 and JavaScript to create a more appealing experience in modern browsers without breaking the pages in the other browsers "Progressive Enrichment". See Dan's book Handcrafted CSS.
And while workig with modern web techniques I also used the nice Webfont "Graublau Sans Web regular/bold" from fonts.info for the headlines.
Thanks for the Handcrafted CSS book link, Urs, also the fonts too. The book looks very interesting, I shall put it on my wish list, and the fonts...well fonts are my one weakness!
Is your Moodle 2.0 layout demo styles still working with the latest version of 2.0? I tried using the styles from it to do some testing and they did not work at all. Just curious if I was doing something wrong, or if it had not been updated...
Which part of Urs's page layout Demo is different from Base theme in Moodle 2.0? Last time I looked it was the same. Although there have been some changes recently. It would be good to know where exactly to look though.
Thanks
Mary
Thanks
Mary
I don't know if there were changes, or what part isn't working. I just used the code in a blank 2.0 template (on the most recent release of 2.0, including the base theme into the testing template) and it was really messed up.
I wanted to see if I should look further (i.e., it is my issue) or if there is something wrong with the code from the layout demo. Can anyone else test?
I wanted to see if I should look further (i.e., it is my issue) or if there is something wrong with the code from the layout demo. Can anyone else test?
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
Didn't seem to have an effect. This is what I get with his css (see attached).
Maybe I have something messed up...
Maybe I have something messed up...
Figured it out. The base theme style was doing this. If I stopped including the base style sheet, (i.e., set $THEME->parents = array();) it works fine... I'd rather not do that though. Any ideas?
I don't mean to keep replying to myself, but maybe someone else will see this when they search. Anyway,
if you set:
$THEME->parents = array('base');
$THEME->parents_exclude_sheets = array('base'=>array('pagelayout'));
You can include the base, but also still use the layout generator above.
if you set:
$THEME->parents = array('base');
$THEME->parents_exclude_sheets = array('base'=>array('pagelayout'));
You can include the base, but also still use the layout generator above.
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
Hi Dietmar,
I've been thinking about what we were talking about in the Blog Layout thread, about the need to perhaps rename #region-post-box to something like #region-side-box to stop the confusion. But it has occurred to me since, that rather than rename #region-post-box we should think about introducing a new selector ID #region-pre-box so that that both selectors could be used but in different situations, thus making it easy for designers to keep tabs on the page-layouts they are styling.
We both noticed that although the Blog Layout looks similar to Base theme page-layout, it differs in the way it's styled. It is in the styling that we need to make things clearer.
Once we have all the layouts templates in place we can think about different ways of styling them which in turn creates the theme.
Am I making sense? LOL
Mary
I've been thinking about what we were talking about in the Blog Layout thread, about the need to perhaps rename #region-post-box to something like #region-side-box to stop the confusion. But it has occurred to me since, that rather than rename #region-post-box we should think about introducing a new selector ID #region-pre-box so that that both selectors could be used but in different situations, thus making it easy for designers to keep tabs on the page-layouts they are styling.
We both noticed that although the Blog Layout looks similar to Base theme page-layout, it differs in the way it's styled. It is in the styling that we need to make things clearer.
Once we have all the layouts templates in place we can think about different ways of styling them which in turn creates the theme.
Am I making sense? LOL
Mary
In reply to Mary Evans
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
Hi Dietmar,
In a nutshell...Yes! I was thinking Weltanschauunge...
Mary
In a nutshell...Yes! I was thinking Weltanschauunge...
Mary
In reply to Mary Evans
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
yeah, i caught that and added those classes into my theme... My problem now is that the side-pre-only and side-post-only classes do not work with Urs' rules... I spent a good deal of time trying to fix them to no avail.
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
(bookmarked) Works very well, thanks!
edit- doesn't work well in IE7... Darn. Looks great elsewhere though.
I'm starting to want to just use a separate layout for the the side-pre only and side-post only.
I could put the php in the body (between the header/footer) and serve up a real two column layout for just those instances. Won't be as clean or simple but will work better...
edit- doesn't work well in IE7... Darn. Looks great elsewhere though.
I'm starting to want to just use a separate layout for the the side-pre only and side-post only.
I could put the php in the body (between the header/footer) and serve up a real two column layout for just those instances. Won't be as clean or simple but will work better...
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
Actually, when I used your pre only and post only code with Urs code (from his generator), it magically worked cross-browser. I added a little padding to the pre-only code but other than that, it just worked...
Here it is:
#page-content {clear:both;float:left;overflow:visible;position:relative;width:100%;}
#page-content #region-main-box {float:left;right:23%;position:relative;width:100%;}
#page-content #region-post-box {float:left;right:54%;position:relative;width:100%;}
#page-content #region-main {float:left;left:101%;overflow:visible;position:relative;width:52%;}
#page-content #region-pre {float:left;left:26%;overflow:visible;position:relative;width:21%;}
#page-content #region-post {float:left;left:82%;overflow:visible;position:relative;width:21%;}
#page-content .region-content {overflow:visible;padding:10px 0;}
#page-content {overflow:hidden}
/** Only side pre **/
.side-pre-only #page-content #region-main-box {right: 0%;}
.side-pre-only #page-content #region-main-box #region-post-box {right:77%;}
.side-pre-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main {left:100%; width:77%;}
.side-pre-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main .region-content {overflow:hidden;padding:20px 10px;}
.side-pre-only #page-content #region-main-box #region-post-box #region-pre {left:1%; width:22%;}
.side-pre-only #page-content #region-main-box #region-post-box #region-post {width:0%;}
/** Only side post **/
.side-post-only #page-content #region-main-box {right:23%;}
.side-post-only #page-content #region-main-box #region-post-box {right:77%;}
.side-post-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main {left:100%; width:77%;}
.side-post-only #page-content #region-main-box #region-post-box #region-post {left:100%;width:23%;}
.has_dock.side-post-only .page-middle #region-main-box #region-post-box #region-main-wrap #region-main {margin-left:200px;}
Here it is:
#page-content {clear:both;float:left;overflow:visible;position:relative;width:100%;}
#page-content #region-main-box {float:left;right:23%;position:relative;width:100%;}
#page-content #region-post-box {float:left;right:54%;position:relative;width:100%;}
#page-content #region-main {float:left;left:101%;overflow:visible;position:relative;width:52%;}
#page-content #region-pre {float:left;left:26%;overflow:visible;position:relative;width:21%;}
#page-content #region-post {float:left;left:82%;overflow:visible;position:relative;width:21%;}
#page-content .region-content {overflow:visible;padding:10px 0;}
#page-content {overflow:hidden}
/** Only side pre **/
.side-pre-only #page-content #region-main-box {right: 0%;}
.side-pre-only #page-content #region-main-box #region-post-box {right:77%;}
.side-pre-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main {left:100%; width:77%;}
.side-pre-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main .region-content {overflow:hidden;padding:20px 10px;}
.side-pre-only #page-content #region-main-box #region-post-box #region-pre {left:1%; width:22%;}
.side-pre-only #page-content #region-main-box #region-post-box #region-post {width:0%;}
/** Only side post **/
.side-post-only #page-content #region-main-box {right:23%;}
.side-post-only #page-content #region-main-box #region-post-box {right:77%;}
.side-post-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main {left:100%; width:77%;}
.side-post-only #page-content #region-main-box #region-post-box #region-post {left:100%;width:23%;}
.has_dock.side-post-only .page-middle #region-main-box #region-post-box #region-main-wrap #region-main {margin-left:200px;}
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
I only noticed an issue in IE7 when I wrapped your generated code (flexible layout) in a container div (with a % width). This only occurs in three column mode. In IE7, the third column gets dropped down below the middle column.
It probably has something to do with the fixed padding in your generated code and being in a container.
It probably has something to do with the fixed padding in your generated code and being in a container.
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
I mean, it was wrapped in a div. Like
div
your divs
/div.
This was done to center it.
div
your divs
/div.
This was done to center it.
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
I too would certainly like to see the page-layout that John has created which is behaving in such an unruly manner!
Do share, please John...a zip file would be a good start.
Mary
Do share, please John...a zip file would be a good start.
Mary
I converted it back to using Urs' css. I don't have access to 2.0 to use until Monday so I will re-convert back to dietmar's css then and add a zip.
The wrapper div was centered and set at 90% width to provide some margin. It is just a testing theme, and can be downloaded here (not finished or cleaned up yet): http://stabinger.us/moodle/orangepop.zip
Like I said, I will need to remove Urs' css and add in Dietmars on Monday...
The wrapper div was centered and set at 90% width to provide some margin. It is just a testing theme, and can be downloaded here (not finished or cleaned up yet): http://stabinger.us/moodle/orangepop.zip
Like I said, I will need to remove Urs' css and add in Dietmars on Monday...
Dietmar,
When I use the code you have above, it works fine. However, the code below, which is directly from your generator, breaks in three column view in IE7:
#page {width:100%;overflow:hidden;}
#page-header {background:#00a08a;float:left;width:100%;}
#page-content {background:#4479d4;clear:both;float:left;overflow:hidden;position:relative;width:100%;}
#page-content #region-main-box {background:#ff6100;float:left;right:24%;position:relative;width:100%;}
#page-content #region-main-box #region-post-box {background:#ffa400;float:left;right:52%;position:relative;width:100%;}
#page-content #region-main-box #region-post-box #region-main-wrap { }
#page-content #region-main-box #region-post-box #region-main-wrap #region-main {float:left;overflow:hidden;position:relative;margin-right:0px;left:100%;width:52%;}
#page-content #region-main-box #region-post-box #region-pre {float:left;overflow:hidden;position:relative;left:24%;width:24%;}
#page-content #region-main-box #region-post-box #region-post {float:left;overflow:hidden;position:relative;left:76%;width:24%;}
#page-content #region-main-box #region-post-box #region-main-wrap #region-main .region-content {overflow:hidden;padding:20px 1px;}
#page-content #region-main-box #region-post-box #region-pre .region-content,
#page-content #region-main-box #region-post-box #region-post .region-content {overflow:hidden;padding:20px 5px;}
#page-footer {background:#00a08a;clear:both;float:left;width:100%;}
Here is a link to a theme using the code above. Try in IE and let me know how it looks: http://stabinger.us/moodle/op2.zip
When I use the code you have above, it works fine. However, the code below, which is directly from your generator, breaks in three column view in IE7:
#page {width:100%;overflow:hidden;}
#page-header {background:#00a08a;float:left;width:100%;}
#page-content {background:#4479d4;clear:both;float:left;overflow:hidden;position:relative;width:100%;}
#page-content #region-main-box {background:#ff6100;float:left;right:24%;position:relative;width:100%;}
#page-content #region-main-box #region-post-box {background:#ffa400;float:left;right:52%;position:relative;width:100%;}
#page-content #region-main-box #region-post-box #region-main-wrap { }
#page-content #region-main-box #region-post-box #region-main-wrap #region-main {float:left;overflow:hidden;position:relative;margin-right:0px;left:100%;width:52%;}
#page-content #region-main-box #region-post-box #region-pre {float:left;overflow:hidden;position:relative;left:24%;width:24%;}
#page-content #region-main-box #region-post-box #region-post {float:left;overflow:hidden;position:relative;left:76%;width:24%;}
#page-content #region-main-box #region-post-box #region-main-wrap #region-main .region-content {overflow:hidden;padding:20px 1px;}
#page-content #region-main-box #region-post-box #region-pre .region-content,
#page-content #region-main-box #region-post-box #region-post .region-content {overflow:hidden;padding:20px 5px;}
#page-footer {background:#00a08a;clear:both;float:left;width:100%;}
Here is a link to a theme using the code above. Try in IE and let me know how it looks: http://stabinger.us/moodle/op2.zip
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
Deitmar, could it be the fact John uses a Mac that is causing the difference in browser views?
Edit: I would test John's theme if only I had IE7.
Mary
Edit: I would test John's theme if only I had IE7.
Mary
In reply to Mary Evans
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
bizarre! I tried it in two different installs of xp with ie7 and in both that darn third column kept jumping down. I'll keep testing. I found a happy medium that seems to work in all cases using the code I posted above which was a combo of Urs and yours (that sounds funny).
Thanks for your help on this. I'm working on a simple template that can be modified online through an online editor so I'd to eventually add in the ability to edit the column sizes.
Thanks for your help on this. I'm working on a simple template that can be modified online through an online editor so I'd to eventually add in the ability to edit the column sizes.
John,
Have you tried to put CSS through W3C Validator? It picks up anomilies like spelling, parse errors and the like.
I ran a check thru CSS Validator for you and found two important errors amongst the 78 which were mainly Moz and CSS3 that are not recognised as valid CSS2 by the Validator.
The two I found are as follows, in order of appearance...
@Line 464
.2block .calendar-controls {
margin-left: 20px;
}
In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make "2block" a valid class, CSS2 requires the first digit to be escaped ".\32 block" [2block .calendar-controls]
@Line 840
ul.tabrow1, ul.tabrow2{
display: block !important;
height: 30px;
postition: relative; left: -1px;
}
Property postition doesn't exist Typo!
These may well be the problem.
Mary
Have you tried to put CSS through W3C Validator? It picks up anomilies like spelling, parse errors and the like.
I ran a check thru CSS Validator for you and found two important errors amongst the 78 which were mainly Moz and CSS3 that are not recognised as valid CSS2 by the Validator.
The two I found are as follows, in order of appearance...
@Line 464
.2block .calendar-controls {
margin-left: 20px;
}
In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make "2block" a valid class, CSS2 requires the first digit to be escaped ".\32 block" [2block .calendar-controls]
@Line 840
ul.tabrow1, ul.tabrow2{
display: block !important;
height: 30px;
postition: relative; left: -1px;
}
Property postition doesn't exist Typo!
These may well be the problem.
Mary
John,
I've been looking at the theme you zipped and noticed you have used $CFG->wwwroot a few times. As far as I am aware this notation is obsolete in Moodle 2.0
Also, if you are using the flexible mode layout (using %) you don't actually need the #regions-main-wrap.
See this page...you can view the CSS with View Source in your browser.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Mary
I've been looking at the theme you zipped and noticed you have used $CFG->wwwroot a few times. As far as I am aware this notation is obsolete in Moodle 2.0
Also, if you are using the flexible mode layout (using %) you don't actually need the #regions-main-wrap.
See this page...you can view the CSS with View Source in your browser.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Mary
I already found some of the old standbys to no longer work. I was not aware of the wwwroot one, but figured it might happen.
Is there a suitable replacement, or should all similar calls be made in the theme config?
Is there a suitable replacement, or should all similar calls be made in the theme config?
In reply to John St
This forum post has been removed
The content of this forum post has been removed and can no longer be accessed.
This seems to me to be a grey area John...there are times which it is used, and others not, as in the case for inserting images directly in the layout pages. See the last couple of comments in this thread HERE
If the jquery scripts are being read then its working. If they are not then it may be something to do with folder names...see files and folder HERE
I can't get your theme to load at all in the Theme Selector...makes me think it's the config.php which is not quite right. It's different than mine but I didn't want to alter it incase I'm wrong in my assumptions.
Until next
Mary
If the jquery scripts are being read then its working. If they are not then it may be something to do with folder names...see files and folder HERE
I can't get your theme to load at all in the Theme Selector...makes me think it's the config.php which is not quite right. It's different than mine but I didn't want to alter it incase I'm wrong in my assumptions.
Until next
Mary
Sorry, you were right as well. #region-pre-box should be #region-post-box is 100% correct.
There is a debate going on which might, in the end, change the name of #region-post-box as it is confusing when using different layouts. Base theme uses the No Quirks mode of the original Holy Grail layout. So #regions-post-box is on the right. If you use the Flexible (percentage mode) layout #regions-post-box actually ends up on the opposite side of the page. That's why I marked it up as #regions-pre-box. Which is why it is called that in the Demo. It was at my request that Urs included it in his Demo page. The Demo, is after all just that, a Demo. its aim is to show the various ways the page-layouts work.
But technically Dietmar is correct in saying that you need to change #regions-pre-box to read #regions-post-box to keep it in line with current CSS selector names until such time they are changed officially.
Anyway, the aim is not to use Base theme as a parent but to use (eventually) a parent theme which, at this moment in time,is being developed by Patrick Malley, at least I think that's his current aim!
Hope this explains it?
Cheers
Mary
But technically Dietmar is correct in saying that you need to change #regions-pre-box to read #regions-post-box to keep it in line with current CSS selector names until such time they are changed officially.
Anyway, the aim is not to use Base theme as a parent but to use (eventually) a parent theme which, at this moment in time,is being developed by Patrick Malley, at least I think that's his current aim!
Hope this explains it?
Cheers
Mary
I have just bumped this discussion as I thought it quite and enligtening piece of work from lots of contibuters which has made what Moodle Themes are today!
It's really interesting reading, especially now as one of the theme layouts I was working on last year, that people kept telling me I had it all wrong, I am trying to get into Moodle 2.2 because of the way it renders in a RTL Language in IE7 of all things!
Thanks all,
Mary
Bumping this for David to see...as I think this is possibly the discussion he was talking about.
Mary