Hi Everyone,
This work is based on the work of Julian Ridden and the person who designed the Kubrick theme.
Moodle does not do a very good job of presenting tables in terms of spacing and presentation for readability. You might find this helpful.
I have attached a folder to this post with some CSS and images. Inside your Moodle theme folder, put the folder called "table_images" into your "pix" folder. The file "styles_tables.css" goes with your other CSS like "style_fonts.css", etc...
In your config.php add the styles_tables file name, note the lack of spaces.
$THEME->sheets = array('gradients','styles_tables','styles_color');
That's it! We've been using this for a few years at Athabasca University and it has worked well for us. I imagine that things might change with Moodle 2.0, but we'll see then.
Note, there is also a style in "styles_tables.css" which has been commented out. It makes the forums a great deal more attractive, but we're not using it because the background images block the Moodle function that highlights new posts with an orange colour. We decided that functionality was more important than appearance in this case. But, if you would like to try it then just remove the comment tags around the CSS.
I hope this is helpful.
Cheers,
Ian
Looking at the CSS, I'm guessing a lot of trial and error testing went into this. Thank you for sharing. I look forward to trying it out.
My pleasure Patrick, I hope that it is useful. I should probably give a basic overview of what it does.
Tables
It key's into the tags put into Moodle tables that affect rows and columns so that the table have stripes to help the eye travel across and read a single line in a large table. It also adds a little more space so that they are not so cramped up against the edges of the borders. Table borders are lighter and the heading section of a table is given the moodle gradient as a background image which makes the whole thing look better. Kudos to the programers that put such a fine collection of tags into tables to allow this detailed of a change to be made. It was nice foresight.
Calendar
I gave the calendar a much more subtle colour treatment and affected the spacing of the cells and highlight colours.
User picture
Just carried on a nice effect from the Kubrick theme.
Columns
The left column has a more attractive heading style added which adapts to long titles for the blocks automatically. The right column is left alone. I like the contrast that this creates. One of the things that bothers me about Moodle is that everything sits in a box and looks the same. That's ok for my lunch time bento box, but I would rather have more air and breath and contrast in the Moodle interface. So the center column info is removed from its boxes and only has a line on the top.
---I'l come back here once I get to work and add the code that hides some of the elements from the "topic" course format. We're a mostly non-semester based university with continuous enrollment so the topic format suits us best. We hide the topic numbers preferring to put in our own number if needed. We also remove the title "Topic Outline" on the pages because it is basically a title that conveys no needed information.
Forums
I discussed this above and there may be a way to get the unread post highlighting working. I should explore it more. http://moodle.org/mod/forum/discuss.php?d=121985
regards,
Ian
Tables
It key's into the tags put into Moodle tables that affect rows and columns so that the table have stripes to help the eye travel across and read a single line in a large table. It also adds a little more space so that they are not so cramped up against the edges of the borders. Table borders are lighter and the heading section of a table is given the moodle gradient as a background image which makes the whole thing look better. Kudos to the programers that put such a fine collection of tags into tables to allow this detailed of a change to be made. It was nice foresight.
Calendar
I gave the calendar a much more subtle colour treatment and affected the spacing of the cells and highlight colours.
User picture
Just carried on a nice effect from the Kubrick theme.
Columns
The left column has a more attractive heading style added which adapts to long titles for the blocks automatically. The right column is left alone. I like the contrast that this creates. One of the things that bothers me about Moodle is that everything sits in a box and looks the same. That's ok for my lunch time bento box, but I would rather have more air and breath and contrast in the Moodle interface. So the center column info is removed from its boxes and only has a line on the top.
---I'l come back here once I get to work and add the code that hides some of the elements from the "topic" course format. We're a mostly non-semester based university with continuous enrollment so the topic format suits us best. We hide the topic numbers preferring to put in our own number if needed. We also remove the title "Topic Outline" on the pages because it is basically a title that conveys no needed information.
Forums
I discussed this above and there may be a way to get the unread post highlighting working. I should explore it more. http://moodle.org/mod/forum/discuss.php?d=121985
regards,
Ian
Add this to your theme if you want to.
/* Hide the "Topic Outline" text and the topic numbers */
.outline {
display: none !important;
}
.topicNumber {
display: none !important;
}
/* Hide the "Topic Outline" text and the topic numbers */
.outline {
display: none !important;
}
.topicNumber {
display: none !important;
}
I found an error in my CSS that cropped up in Moodle 1.9 but wasn't there in 1.7. Sorry about that.
Change the first class name from "#middle-column h2" to "h2.headingblock".
I have attached an image below that shows how some of the tables are affected with this style sheet. I think they are improved in terms of spacing and general appearance, even though there is still quite a bit that could be done with the font sizes. (sorry the jpeg is so compressed, file size limit...)
Change the first class name from "#middle-column h2" to "h2.headingblock".
I have attached an image below that shows how some of the tables are affected with this style sheet. I think they are improved in terms of spacing and general appearance, even though there is still quite a bit that could be done with the font sizes. (sorry the jpeg is so compressed, file size limit...)
Here's one more comparison between the standard white theme and this new table adjustment. It's commented clearly in the CSS if you just want to use these table display changes and not the rest of the CSS.
