Hi all,
There has been a lot of questions on how to modify the CSS of the 'Clean' theme, so here is a quick video that shows you how:
Cheers,
Gareth
Gareth, I enjoyed your videos and it gave me the incentive to dig into fix some of the ugly font sizes in the Clean theme. I am sharing my changes with you (and everyone) as one way of making this theme look better on my iPhone.
h1 {
font-size: 175%;
line-height: 120%;
}
h2 {
font-size: 150%;
line-height: 120%;
}
h3 {
font-size: 130%;
line-height: 120%;
}
As you can see, I used percentages because I think that this is supposed to be the way to make webpages be "responsive." Of course, I am not an expert at this, but it seems to work.
I was trying to fix some of the odd course title word-wrapping by applying some code that Mary provided for fixing this problem on my regular computer screen theme (see below), but Clean didn't like this at all.
Might you or Mary provide other ways to fix the short line word-wrapping?
(Here is Mary's code)
/* To make the course titles have more space on the frontage
Courses and categories lists, from Mary Evans
----------------------------*/
.coursebox .content .summary,
.coursebox .content .coursecat {
width: 100%;
float: left;
}
.coursebox > .info > .name {
width: auto;
}
.coursebox .content .teachers,
.coursebox .content .courseimage,
.coursebox .content .coursefile {
width: 100%;
}
#page-course-index-category .generalbox.info {
margin: 1em 0;
padding: 0 5px;
}
Thanks.
Dear Rick,
Interesting, thank you - I wonder if the changes are worth putting into Bootstrapbase in core - Mary / David?
But perhaps without the 'float: left;' unless there was a RTL selector too.
Cheers,
Gareth
Hi Gareth,
I added that fix to Afterburner a couple of weeks back and was integrated into Moodle 2.5/2.6.
I was really waiting to see if the FRONTEND team were going to change the fonts and the way that course list/category list/combo list but they seem to have gone off on another tack.
If you want to test it and add it to Bootstrapbase can you give me credit for the idea?
Cheers
Mary
Dear Mary,
I'm still waiting on two Bootstrapbase fixes to be peer reviewed and go in. But what I'll do is test them in Shoelace (as soon as I can) and give you credit. If all is ok, then I may have a bash at core. Are they an improvement or as they went into Afterburner could be considered as keeping Bootstrapbase in line with other core themes?
Cheers,
Gareth
These simple changes really improved the appearance of Clean on my phone, and they worked fine with Collapsed-Topics.
I found it odd that I had to make these changes. On my own webpages (www.rjerz.com), I recently modified them to be "responsive" (they will automatically change depending upon the screen size of the viewing device). I didn't have to mess with these redefinitions of h1, h2, etc. It just worked.
So I am not sure what should be done with "core." In general, I learned that making webpages responsive should involve always using %'s instead of fixed px's sizing.
Using % shouldn't be any different from using px *unless* the the body size itself (which the other fonts are the scaled from) is changing based on screen size.
If I visit http://www.rjerz.com/feedback/feedback.html and resize my browser window then the h2 text doesn't change size, so I'm not sure what it is you're intending to happen.
My personal approach to the "big headings" problem is that if it looks like http://twitter.github.io/bootstrap/base-css.html#typography then it's not a bug. That doesn't mean people aren't free to change it, Bootstrap provides tools for doing exactly that, but if you claim to have a Bootstrap theme and when people compare it with Bootstrap all the headings are different sizes (or other abitrary differences from the source) they are likely to assume *that* is a bug.
This is complicated by the fact that there are almost certainly places in Moodle that need the headings resized in Clean even if you intend it too look like Bootsrap, but the people who don't want it to look like Bootstrap confused matters because it's difficult to tell one "the heading is too big" from another "the heading is too big" even if the underlying complaint has a radically different cause, particularly when the comments are made in general and without accompanying screenshots.
If I visit http://www.rjerz.com/feedback/feedback.html and resize my browser window then the h2 text doesn't change size, so I'm not sure what it is you're intending to happen.
My personal approach to the "big headings" problem is that if it looks like http://twitter.github.io/bootstrap/base-css.html#typography then it's not a bug. That doesn't mean people aren't free to change it, Bootstrap provides tools for doing exactly that, but if you claim to have a Bootstrap theme and when people compare it with Bootstrap all the headings are different sizes (or other abitrary differences from the source) they are likely to assume *that* is a bug.
This is complicated by the fact that there are almost certainly places in Moodle that need the headings resized in Clean even if you intend it too look like Bootsrap, but the people who don't want it to look like Bootstrap confused matters because it's difficult to tell one "the heading is too big" from another "the heading is too big" even if the underlying complaint has a radically different cause, particularly when the comments are made in general and without accompanying screenshots.
HELLO RICK,
I AM TRYING TO MAKE THE LIST TEMPLATE OF A DATABASE ACTIVITY IN THE CLEAN THEME IN VERSION 2.8 LEFT ALIGN SINCE THERE ARE NO BLOCKS ADDED TO THE PAGE, BUT IT CENTERS AUTOMATICALLY. I WAS READING SOME FORUMS WHERE YOU ADDED SOME CSS CHANGES TO THE THEME. CAN YOU PLEASE LET ME KNOW WHAT TO ADD IN ORDER TO BRING ALL MY CONTENT FROM THE MAIN SECTION TO THE LEFT AS FAR AS POSSIBLE.
THANK YOU,
JEREMY
Firebug or Chrome developer tools are your friend for adding CSS.
However, I believe for the database lists, you can define templates within the database plugin itself and you should be able to format the layout of your lists there and ensure they are left aligned.
One other polite reminder - All Caps is generally regarded as shouting in internet communications and is not necessary within the forum.
Richard
Hi Richard,
Thanks for your reply. Sorry about the ALL CAPS. I didn't realize it was on until I was done with most of the message. I used Firebug and the links posted here to find a suitable answer. The trick lies in using the CSS Template within the Database Activity, and not the CSS modification field for the theme in general. This is what I added to the Database's CSS template:
.row-fluid .span8 {
width: 100.0%;
}
.row-fluid .span3 {
width: 0.0%;
}
.row-fluid .span4 {
width: 0.0%;
}
It brought the content from the LIST TEMPLATE all the way to the left margin in the CLEAN theme.
Thanks again to all who replied!
Jeremy
Hi,
Just as tip when defining values in CSS. Percentages only relate to a value greater than zero. So the values you added as width: 0.0% is pointless as you only needed to add width: 0; As for width: 100.0% should just be width:100%.
Cheers
Mary
Hi,
If there are NO blocks on the page then the content of the page should fill the whole of the page. So when you say the Database activity list 'centers automatically' can you show a screen shot of this so that we can see what is being centered? I ask because I am wondering if you mean that the blocks are leaving gaps either side of the main content, which can be described as centered, in that the content is in the center of the page and nothing either side.
Cheers
Mary
I cannot, because I do not use the Database activity. Maybe others can provide some help.
I have been part of another discussion about Moodle's appearance. I provided some of my CSS and methods that I add to my MORE theme. These might be helpful to you.
Rick the % is the right way to go about changing the font sizes.
See this Demo which uses a similar method.
Yep, Mary. You can see this with my own webpages (www.rjerz.com), by simply changing the width of your browser window. You will see that my navigation buttons will move around when viewed at cellphone width.
Hi there,
I thought this might help some one who wants to change the font sizes with % by adding media queries in Custom CSS in Clean theme. You can change the percentage as per your need.
/* Large screens */
@media (min-width: 980px) {
body {
font-size: 100%;
}
h1, h2, h3 {
font-size: 100%;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
body {
font-size: 100%;
}
h1, h2, h3 {
font-size: 100%;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body {
font-size: 100%;
}
h1, h2, h3 {
font-size: 100%;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
body {
font-size: 90%;
}
h1, h2, h3 {
font-size: 90%;
}
}
I believe that you'll find 'em' or 'rem' to be even better for responsive design:
http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/
you can also use the CSS3 word-wrap/overflow-wrap to address word break:
Rick, do you know which DIV to make the middle content move over to the left (see image)? I've tried every DIV in the area, and nothing I do makes the middle content move over to the left content.
There's too many DIVs to know which ones to customize.
No, but maybe Mary or Gareth will know.
I am not using "Clean" as my main theme, I am using Formal White. I have told my Moodle to use "Clean" as my mobile theme. So I had not noticed the spacing issue like you, nor will I.
I am not sure if watching Gareth's video might help. I am still new to all of this myself.
Dear Jim,
Ok, I think I know what is going on as it's sort of related to MDL-40204 - all to do with the 'spanX' CSS classes. What exact version of Moodle are you using? Have you made any changes to the layout?
The specific tag in question is the 'section' tag with the 'span8'. But given both blocks on either side this should be correct as you should have an 8+4 two column inside a 9+3 two column layout - note they always add up to 12.
Can you do a screen shot with FireBug or Chrome developer tools showing the 'section' html please.
Cheers,
Gareth
Dear Jim,
Thank you. It looks like the up to date layout. What I really need to know is the width attribute of the 'section' tag. So if you could highlight that one for me please - plus expand to show the 'span3' on the 'aside' tag for 'side-pre'.
Cheers,
Gareth
Thanks, Gareth. Here's another screen shot. I've played around with changing some of those CSS, but it doesn't make the middle section move closer to the left. I think it has something to do with "span4 desktop-first-column" but if I change that width, the middle section still remains.
Dear Jim,
Sorry still not enough - I need to know that the 'section class="span8...' is around 74%. Ok, what should be happening is that the 'section span9' and span4 'aside' for the pre block should be in a div container with a span9 followed by an 'aside' of span3 which is in a 'row-fluid' div. Have you purged all caches? Are there any new margins? Is the side on the web so I could see from my end?
Cheers,
Gareth
.span8 is set at 65%, but increasing it only messes up the page/column layout.
No, I'm running a localhost version of Moodle 2.5 and testing things before we implement in our organization.
Hi Jim,
You really need to move away from changing the values of the grid spans like span8 etc., as these are KEY to the way the pages work.
The reason your centre page is wrong is more to do with either margins or padding. So using FireBug is the best option and see what is making that container move so far from the left side bar.
You really do need to have some knowledge of the way Bootstrap works, so reading about it is the first requirement.
http://twitter.github.io/bootstrap/
checkout the section in the menu bar in that linked page.
Cheers
Mary
Gareth, I changed the .row-fluid .span8 to a width of 71% and it seems to help a little.
There's a bit of CSS that actually adds 20px to the left margin. So I suggest to track that down in the less files and change it.
The problem with Moodle/Bootstrap themes like Clean is that they carry with them a whole lot of PHP that destroys the simplicity of Bootstrap.
If you are HTML/CSS savy and want to make a Moodle theme for yourself without all the added PHP, but just the required minimum, then you can.
You just need to be aware of which bits you need.
Here is what I would call the minimum.
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<?php echo $OUTPUT->blocks('side-pre'); ?>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<?php echo $OUTPUT->main_content(); ?>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
People are forgetting the basics of HTML...come on it's not rocket science.
Be creative. Buy a book learn something new.
Oh, and I'm using Moodle 2.5
On my test server Clean doesn't look like that (I assume we're talking about the white margin being bigger on the left of the content than the right). The size of the course titles and the layout of the course description text differ too. What (exact) version of Moodle are you taking that screenshot on?
I've adjusted the header text size, and I've made some other CSS adjustments.
/* Custom CSS Settings
-------------------------*/
setting:customcss
h1 {
font-size: 175%;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 130%;
}
.coursebox .content .summary,
.coursebox .content .coursecat {
width: 100%;
}
.coursebox > .info > .name {
width: auto;
}
.coursebox .content .teachers,
.coursebox .content .courseimage,
.coursebox .content .coursefile {
width: 100%;
}
#page-course-index-category .generalbox.info {
margin: 1em 0;
padding: 0 5px;
}
.no-overflow {
margin-left: 4%;
}
#page-header {
margin-bottom: 1%;
}
#region-pre {
width: 80%;
}
I think setting #region-pre to 80% width might be the problem here.
Jim, I used your CSS from ".coursebox" down, and it seems to work fine. You might have noticed that my h1, h2, h3 settings are slightly different, but still similar to yours.
All of these modifications really clean up the "Clean" theme for mobile.
There's a bug in the tracker with a patch that makes similar changes to the course listings but it seems to have got stuck in the pipeline:
https://tracker.moodle.org/browse/MDL-39242
https://tracker.moodle.org/browse/MDL-39242
Thank you, it was really usefull!!!
Hi all,
Can anyone tell me the required steps to make the Clean theme 3 column for the front page?
If I go into one of our courses it appears in 3-column layout but I need this for the front page too.
Any ideas would be much appreciated!
Cheers,
Paul
Dear Paul,
Which layout files do you have - general.php or columnsX.php? as this has recently changed in M2.5.
Cheers,
Gareth
Hi Gareth,
I have ColumnsX.php layout files.
Cheers,
Paul
Dear Paul,
Sorry for the delay been working on MDL-40065.
Ok, make a copy of 'columns3.php' and call it something like 'frontpage.php' then remove all references to the course then change 'config.php' to use it. As an example, Shoelace in development has an example: https://github.com/gjb2048/moodle-theme_shoelace/blob/MOODLE_25/layout/frontpage.php - you will need to remove 'region-main-shoelace' etc. and 'shoelaceblocks' but it does show you the differences (sort of) between it and the standard columns3.php layout.
Cheers,
Gareth
Hi Gareth,
It looks like Mary was right and Clean does by default show three columns on the homepage. I installed a fresh copy of Moodle for Windows (XAMP, MySQL) and Clean does indeed show with 3 columns. There must be a problem with institutions copy of Clean. I have asked our hosting provider to check this out for me.
I also have some strange issues with the Clean theme not inverting the navbar when I've told it to and not displaying the logo I uploaded and displaying the full site name instead.
Dear Paul,
There have been a few changes recently with the Clean layouts and fixing them - hence the apparent disparity. Also with the Navbar and logo not showing - all depends what version you are running. Please give it a few weeks for things to get fixed.
Cheers,
Gareth
Actually Gareth ballsed it up...with the logo and such...not sure about the navbar...but I am not blaming him as he has done a terrific job cleaning up the layout code and making them work correctly...it was a hard slog but it all paid off in the end.
I am following up with dustpan and brush and hope to get it all fixed by Sunday ready for next round of integrating/merging of fixes/patches into Moodle core. It's all exciting stuff.
I am hoping to introduce some new features too, if I get the go ahead. More about this at a later date.
Cheers
Mary
Hi guys,
I have been following the MDL bugs regarding this theme and Gareth is indeed doing brilliant work with the theme and layouts. I cannot seem to get my institutions Clean theme to show 3 columns on the front page however. Like I mentioned I've copies the latest Clean theme folder from a Moodle for Windows installation over to the FTP containing my institutions Moodle and replaced entire folder and purged all themes but still can't get the 3 columns to show.
It just seems very strange that it works when I install the Moodle for Windows but not on my institutions Moodle. Could the reason for this be the bootstrapbase theme upon which Clean is built on top of? Is it possible my institution's version is older than the latest Moodle for Windows version and this is causing the problem?
Can I safely overwrite the bootstrapbase folder from my institutions Moodle with the latest one from the Moodle for Windows folder?
Mary, can you share a couple of the features you are hoping to add? Do any of them involve the ability to change the order of the breadcrumbs and logo/ site name? It seems a little odd that the logo /site name appears below the breadcrumbs in the current version of Clean.
Thanks,
Paul
I seem to recall there was a bug in Bootstrapbase that mean the layouts were not set up to have 3 columns on the frontpage. This would be within the config.php file of the Bootstrapbase theme. You might want to compare the two with a diff tool and see if there's a change there.
Dear all,
Being professional I was going to publish a corrected version temporarily here until MDL-40316 was fixed but then just updated my branches to discover that when Sam had applied the patch (MDL-40204) it appears that my changes went in without removing the logo and footer code - please see attached.
My changes went public twelve hours ago (Moodle 2.5+ (Build: 20130627) - version 2013051400.08) so if you had the problem before that then it will be something else. Therefore I think MDL-40316 is redundant.
So if you update to the very latest version then all should be fine. I'll double check though.
Cheers,
Gareth
David, I fixed theme/boostrapbase/config.php a while back in MDL-39697 so that now Frontpage uses both side-pre & side-post.
Cheers
Mary
Hi Paul,
First off I want to take back what I said about the login and footer being missing off the latest fixes. which have only just been released. The fact is there have been changes to the way the layout works and also to some respect, in the way it looks too from a coding point of view.
I totally missed the way the logo and footnote where added.
Both the logo and footer work. So apologies to Gareth, if he is reading this.
OK...some new changes on the way for how Clean theme works.
- ALL the layouts will be in Bootstrapbase, so NO layouts in Clean theme
- The CSS for the logo will also be in bootstrapbase but can be overridden in Clean theme's Admin GUI (custom settings).
New Moodle 2.6 features (pending):
- Option to have Logo above or below breadcrumb navigation
- Branding Icon in top navbar.
- Optional colour-swatch switcher.
As for your schools Moodle site clean theme, you would need to upgrade to the latest Moodle 2.5 to see the benefits, as much of the work was in Moodle core.
Cheers
Mary
Dear Mary,
No problem.
RE:
OK...some new changes on the way for how Clean theme works.
- ALL the layouts will in Bootstrapbase so NO layouts in Clean theme
- The CSS for the logo will also be in bootstrapbase but can be overridden in Clean theme's Admin GUI (custom settings).
....
Is there a document / tracker that relates to this? On MDL-40065 there is some discussion over design decisions being lost / not documented. This is not a criticism but an offer to support documentation to reduce the confusion I had because I was unaware of the nature of certain Moodle components.
And a few questions:
1. With the logo / navbar / footer settings being in bootstrapbase they will have the 'bootstrapbase' setting post fix, so will this be confusing?
2. If 'Bootstrapbase' and Clean will be one of the same entity with a split personality should we just ditch 'Bootstrapbase' and 'Clean' and call it 'Bootstrap Standard' or just 'Moostrap' etc?
3. As the 'theme_clean_get_html_for_settings' is in the 'lib.php' file is there now a reason to make this OO like the course format's 'lib.php' file with 'format_base' and have an overrideable method 'get_html_for_settings'?
I consider if '3' is done then this would open up a whole new world of possibilities and reduce repetition of code. The excellent course format work Marina Glancy and Dan Poltawski have done with 'lib.php' and 'renderer.php' has brought lots of benefits.
Cheers,
Gareth
MDL-39777 AND EVERYTHING SEEMS TO BE WORKING FINE...
oops caps lock!!!
Hi Gareth, I was half hoping that with the new settings that Clean would work OK, which it does. But as soon as you go anywhere near Bootstrapbase it throws a Fatel Error because of the settings, which is what you were querying.
A theme needs the layouts unless they are generic like embedded or static and in some respects report and print. All the others need to be in the theme. The alternative is to have a generic setting php that picks up and uses the custom setting in the child theme. Some sort of inheritance factor. I am sure it can be done. Probably needs to be set in a bootstrapbase/lib.php
I was thinking of something like ...
Dear Mary,
I have thoughts, so will post on MDL-39777.
What was the fatal error as that would help to understand the problem and what needs to be done about it?
Cheers,
Gareth
It was to do with this line which is in each of the layout files in Clean
$html = theme_clean_get_html_for_settings($OUTPUT, $PAGE);
which in turn is set in theme/clean/lib.php
Might it not be easier to create some renderers to add the logo and footer perhaps?
Nope! 'theme_clean_get_html_for_settings' is a good concept and matches 'settings.php' so have a 'theme_bootstapbase_get_html_for_settings' in 'bootstrapbase/lib.php' as also relates to moving the logo, inversion and footer code into the layout. Then migrate to OO as suggested on MDL-39777.
As the layout files are the primary instigator of the functionality and the settings and lib files are there to serve the layout files.
Dear Mary
Please keep this: '.... but can be overridden in Clean theme's Admin GUI (custom settings).'
And please help me to: ' ...have Logo above or below breadcrumb navigation'
I understand this in 'Pending', but I have several Moodle2.6 sites already, they are required to have the logo ABOVE the breadcrumb bar.
Would you please tell me how to modify the code, if it is not available in GUI before the school term start.
Thank you very much
William
Hi William,
OK...here s the code from Clean theme's layout that you need to change...
From this...
<header id="page-header" class="clearfix">
<div id="page-navbar" class="clearfix">
<nav class="breadcrumb-nav"><?php echo $OUTPUT->navbar(); ?></nav>
<div class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></div>
</div>
<?php echo $html->heading; ?>
<div id="course-header">
<?php echo $OUTPUT->course_header(); ?>
</div>
</header>
To this...in ALL of the layout files for your theme/s
<header id="page-header" class="clearfix">
<?php echo $html->heading; ?>
<div id="page-navbar" class="clearfix">
<nav class="breadcrumb-nav"><?php echo $OUTPUT->navbar(); ?></nav>
<div class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></div>
</div>
<?php echo $html->heading; ?>
<div id="course-header">
<?php echo $OUTPUT->course_header(); ?>
</div>
</header>
Cheers
Mary
Thank you very much Mary, your answer always comes promptly.
it is the expert like you keep the Moodle outstand from all of other CMS.
I followed your instruction and it works exactly like what I want:
There are 6 files in moodle/theme/clean/layout folder.
Only 3 files need to be changed: /columns1.php; /columns2.php; /columns3.php;
It will be good if these changes can be done in admin theme Clean GUI.
Cheers
William
First of all you need to Purge all cache after which you should see the blocks in your 3 column layout which, by the way, is already set for the Clean theme. There is no need to make a Frontpage unless you want to have a separate frontpage to customise.
But I thought a 'Purge All Caches' only affected CSS / JS etc. PHP file changes appear on a page refresh without a 'Purge All Caches'.
The Clean theme modification instructions here http://docs.moodle.org/dev/Clean_theme doesn't even change the look at all of my theme. I've changed all references from "clean" to my theme name. My theme name shows up, but when I select it, the theme stays as it was before. Any ideas?
Dear Jim,
You can now modify your theme by adding CSS to 'custom.css' and adding other css files by changing 'config.php'.
Cheers,
Gareth
Thanks, Gareth!
Oh, nevermind... it's working now. I had to unset a previous theme and I also Purged theme cache.
I have favicon.ico in the pix folder, but it's still defaulting to the moodle icon somehow. Any ideas on fixing that?
Umm, clear your browsers cache (client end) so it downloads the new version of the file.
Just installed a local version of Moodle 2.5 and had a look at the Clean theme, I like the idea and general layout, however not liking how hard it is to edit, as in literally having to search elements in firbug or chrome to find the css values. Is there a version which has the css files before utilising LESS?- would be good just as a reference to enter into the 'custom_css' box.
Or is shoelace easier to customize?
Ive only ever really used the Aardvark themes in the past- highly customizable (easily labeled css files)
Kind of new to bootstrap if you hadn't guessed already!
Dear Chris,
Shoelace is just as difficult or easy (depending on your perspective) to edit as 'Clean'. There is no difference between them in the CSS sense.
It is possible to use the less files instead of the css by using 'Client-side usage' - see http://lesscss.org/. Another way of getting a new look is to change the 'variables.less' file in the 'bootstrap' folder of 'bootstrapbase' to get a new 'moodle.css' file to use either directly for 'Clean' or as a replacement as used in 'Shoelace'. Please see my other post https://moodle.org/mod/forum/discuss.php?d=230921.
Cheers,
Gareth
thanks for the reply, looks fairly simple once I get the cmd working, will have a look into it at some point when im not busy!. have installed buckle which gives me a little more css control, but I will have a look at LESS as it does seem the way forward!
Cheers
Hi Chris,
One of the things I did with buckle, which may help you when looking at other bootstrapbase themes, was to create an unminified version of the bootstrapbase css at the time (It has moved on from there but as Buckle uses bootstrapbase as a parent it will have inherited those changes), which made it much easier to see what was happening.
Minified code may be the way to go for finished themes (it's faster for one thing), but I personally find it easier to work with the unminified version while developing and for themes which I intend to build onto. You can do this with some of the options when processing the less files - if you are using less files for your theme. You can then reprocess them as minified when you are happy that everything is fine.
The other thing to bear in mind, which may be good or not depending on your view (I obviously think it is ) and what you want, is that the buckle theme uses the same layout/css for responsive layouts as krystle and zebra, rather than the grid framework used by bootstrapbase and other bootstrap themes.
Hope you like Buckle though
Hi Richard,
Have you ever had an issue with uncompressed Bootstrap css on Buckle and IE as I seem to remember David mentioning something about a 4096 line limit?
Cheers,
Gareth
Have you ever had an issue with uncompressed Bootstrap css on Buckle and IE as I seem to remember David mentioning something about a 4096 line limit?
Cheers,
Gareth
It's not a line limit, it's the number of "selectors" so
classname,
classname div a,
classname > table.th {
counts as 3 selectors towards the 4096 per stylesheet limit. Moodle sends parent stylesheets, the module stylesheets and the theme stylesheets seperately to IE browsers, so the only one you need to worry about is you theme's moodle.css which currently in Bootstrapbase sits just over the limit, so a few of the styles at the end get ignored in IE9. Low impact styles are intentionally placed near the end to limit this effect.
It worth noting that IE8 and IE9 count these selectors differently. IE8 simply ignores any inside media queries (as used for responsive layouts) since it doesn't understand them. IE9 supports them so they count towards the 4096 limit in that case.
Minification of CSS shouldn't have any impact on this.
classname,
classname div a,
classname > table.th {
counts as 3 selectors towards the 4096 per stylesheet limit. Moodle sends parent stylesheets, the module stylesheets and the theme stylesheets seperately to IE browsers, so the only one you need to worry about is you theme's moodle.css which currently in Bootstrapbase sits just over the limit, so a few of the styles at the end get ignored in IE9. Low impact styles are intentionally placed near the end to limit this effect.
It worth noting that IE8 and IE9 count these selectors differently. IE8 simply ignores any inside media queries (as used for responsive layouts) since it doesn't understand them. IE9 supports them so they count towards the 4096 limit in that case.
Minification of CSS shouldn't have any impact on this.
No I didn't Gareth, but I didn't do it for actual use or even testing on IE, I was more than happy to actually use the minified css that was in bootstrapbase - the only reason I did it and what I was suggesting as a useful tip for someone trying to explore the css, was to create it in a readable form for when I was trying to work out what css was where. And for development like that I was using Firefox on Linux - by the time I got around to testing Buckle on IE (or proper testing on any browser) it was with the proper parent theme as it is in core, with minified css. But also, as David points out, minification or not should not affect the limits in IE as they are related to number of selectors rather than lines of code anyway.
@David - if bootstrapbase sits just over that limit, would there be any benefit in processing the less files into 2 separate css files rather than the one big one? e.g. bootstrap core and moodle specific ? Then it wouldn't be an issue of putting 'lower impact' rules to the end incase they are ignored by IE.
Given this IE limit, what are the benefits of a single css file to overweigh both this and the difficulty that you can no longer exclude a specific style sheet in a child theme as everything is in one? Or is it the single output css file simply a limitation of less?
Richard
This issue isn't really related to LESS at all. If you split the Bootstrap CSS into multiple files, then Moodle would stitch them back together again.
It's the output of Moodle that the browsers get to see, not the way the files are organised within the theme. Moodle already had something that sent IE the parent theme CSS, mod style CSS and theme CSS as 3 seperate files for this reason (where normally they are turned into one big file). Moodle 2.5 has improved on this by actively splitting the files on roughly the 4096 limit (and not bothering to do it for IE10, as it doesn't need this).
So mostly, it's all under control and there's no real need to do anything further as Moodle is taking care of deliver the CSS in the fastest way possible to the various browsers. But it did just catch me out today when looking at something for a 2.4 related Bootstrap theme as I added a quick fix to the end of the CSS and wondered why IE9 wasn't seeing it.
It's the output of Moodle that the browsers get to see, not the way the files are organised within the theme. Moodle already had something that sent IE the parent theme CSS, mod style CSS and theme CSS as 3 seperate files for this reason (where normally they are turned into one big file). Moodle 2.5 has improved on this by actively splitting the files on roughly the 4096 limit (and not bothering to do it for IE10, as it doesn't need this).
So mostly, it's all under control and there's no real need to do anything further as Moodle is taking care of deliver the CSS in the fastest way possible to the various browsers. But it did just catch me out today when looking at something for a 2.4 related Bootstrap theme as I added a quick fix to the end of the CSS and wondered why IE9 wasn't seeing it.
Excellent, thanks David
Hi all
How to make clean theme blocks dynamic as if like shoelace theme blocks i.e need to place clean theme blocks even in footer please help me out
In reply to haritha mullapudi
Re: How to modify the 'Clean' theme using 'CSS'.
by Gareth J Barnard -
Look at the publicly available code in Shoelace and work out how it does it.