I got the chance to make some small changes to Anomaly this afternoon. I was able to add the nice curvy corners back to the theme, and I cleaned up the code in just a few places.
Since this theme is definitely slated to be included as a core theme in 2.0 and since it could be the new 2.0 "default" theme, it would be great if some who are more capable with themes could do some testing.
In fact, I think it's safe to say that this theme is stable enough that I'd love to see some use it on their production installations. Please post any questions or concerns here, but remember to add all serious bugs to the tracker so they don't get lost.
The download I've made available works with 1.9, but know that I am coding a separate version for 2.0 - I want it to use all of the 2.0 goodness that Tim recently finished. Testing the 1.9 version will still be helpful, though, since most of the code will go straight in.
That's all. Back to work.
Nice work Patrick,
I see more and more nice looking Moodle Themes coming out - it's great to see!
I like the "current section highlight" - I think it's a nice a nice feature; good attention to detail; I think I would make a lighter shade, or different colour or something - but it does what you want; makes it jump out.
I imagine a nice icon set with this theme would take it up another notch aesthetically; but personally I like sticking to the default moodle icons to for the sake of consistency with moodle how-to type documentation.
I see no alignment problems popping up in my browsing - that's great to see (I'm using FF3.5 on osx at the moment).
I see no "created by" type link at the bottom either - that's generous of you
!
Do you happen to know of a nice icon set for a dark coloured background with lighter coloured fonts?
Regards,
Leo Thiessen
http://bydistance.com/
I see more and more nice looking Moodle Themes coming out - it's great to see!
I like the "current section highlight" - I think it's a nice a nice feature; good attention to detail; I think I would make a lighter shade, or different colour or something - but it does what you want; makes it jump out.
I imagine a nice icon set with this theme would take it up another notch aesthetically; but personally I like sticking to the default moodle icons to for the sake of consistency with moodle how-to type documentation.
I see no alignment problems popping up in my browsing - that's great to see (I'm using FF3.5 on osx at the moment).
I see no "created by" type link at the bottom either - that's generous of you
!Do you happen to know of a nice icon set for a dark coloured background with lighter coloured fonts?
Regards,
Leo Thiessen
http://bydistance.com/
Thanks for the feedback, Leo.
Since this theme will be included in the core for 2.0, I'm sticking with default icons. We should have a updated (Tango?) set for that release also.
Can you specify (perhaps with a screenshot) to what you're referring to when you say you'd like the "current section highlight" to be a bit lighter. Are you referring to the current section on course pages?
Regarding the icons, I'd look at some of the icon sets currently available in the themes database. I know the Tango icon set works on a dark background, and I seem to recall Mauno edited the default set a while back to be more dark-background-friendly.
Regarding the link, I have snuck one in there on a couple of pages. However, it is very muted and since it is released as GPL, you can do with it whatever you'd like.
Since this theme will be included in the core for 2.0, I'm sticking with default icons. We should have a updated (Tango?) set for that release also.
Can you specify (perhaps with a screenshot) to what you're referring to when you say you'd like the "current section highlight" to be a bit lighter. Are you referring to the current section on course pages?
Regarding the icons, I'd look at some of the icon sets currently available in the themes database. I know the Tango icon set works on a dark background, and I seem to recall Mauno edited the default set a while back to be more dark-background-friendly.
Regarding the link, I have snuck one in there on a couple of pages. However, it is very muted and since it is released as GPL, you can do with it whatever you'd like.
Yes, I was talking about the course current section. Thanks for the icon tips.
- Leo
- Leo
Hi Patrick,
Have just downloaded Anomaly and will test it on my local Moodle 1.9 site. By the way, may I say again that I find the name "Anomaly" rather unfortunate, as it has negative connotations? See my post here. Am I alone to think that?
Joseph
Have just downloaded Anomaly and will test it on my local Moodle 1.9 site. By the way, may I say again that I find the name "Anomaly" rather unfortunate, as it has negative connotations? See my post here. Am I alone to think that?
Joseph
Thank you for your help, Joseph. You have a very discerning eye and I look forward to any feedback you could give.
Regarding the name, I agree. It stinks. However, my logic was sound:
anomaly:: something that deviates from what is standard, normal, or expected
I was going after something that deviated from the Standard.
Anyway, my assumption is that if this theme is to become the default theme for new Moodle installs, we could rename it to something boring, like "Default." Or, I could simply name it something else. Anyone have thoughts on any of this?
Regarding the name, I agree. It stinks. However, my logic was sound:
anomaly:: something that deviates from what is standard, normal, or expected
I was going after something that deviated from the Standard.
Anyway, my assumption is that if this theme is to become the default theme for new Moodle installs, we could rename it to something boring, like "Default." Or, I could simply name it something else. Anyone have thoughts on any of this?
lol,
Yes, I definitely have an opinion. Here's the thing, I could be wrong, but I think the name can do a tonne of selling. For example, check out the "Sunny Delight" drink - I don't know about other people, but I think that drink is absolutely terrible tasting!! Yet it sells... now if they called it Orange Juice Default, well, ok maybe that doesn't quite work, but... I'm trying to say a cool name can do a lot.
I kind of liked anomaly because it had a hint of... something... to it... my thesaurus has some funnier suggestions: oddity, peculiarity, abnormality, irregularity, inconsistency, incongruity, aberration
, quirk and rarity. Anything jump out at you?
Cheers,
Leo
Yes, I definitely have an opinion. Here's the thing, I could be wrong, but I think the name can do a tonne of selling. For example, check out the "Sunny Delight" drink - I don't know about other people, but I think that drink is absolutely terrible tasting!! Yet it sells... now if they called it Orange Juice Default, well, ok maybe that doesn't quite work, but... I'm trying to say a cool name can do a lot.
I kind of liked anomaly because it had a hint of... something... to it... my thesaurus has some funnier suggestions: oddity, peculiarity, abnormality, irregularity, inconsistency, incongruity, aberration
, quirk and rarity. Anything jump out at you?Cheers,
Leo
Hi Patrick,
I was all set to try out the Anomaly theme but... the online help says:
Problem is there are no styles_blue.css, styles_green.css, etc. files in the package I downloaded. Where are they?To assist you in making color changes, I have separated all color attributes into separate CSS documents named styles_[color].css where [color] is actually the name of the different color variants. The default color for this theme is green. To select a different color variant:
1. Remane styles_select.css to styles_green.css.
2. Rename the styles_[color].css variant that you would like to use to styles_select.css.
Joseph
BUMP. Patrick, what about those color CSS files?
BUMP.
I must have missed this post while away. Sorry about the trouble and thank you for the testing.
For some reason I put off adding the color variant stylesheets until now. The Anomaly download now includes four variants: blue, green, purple, and orange.
For some reason I put off adding the color variant stylesheets until now. The Anomaly download now includes four variants: blue, green, purple, and orange.
Thanks Patrick. In Anomaly the instructions for changing the color stylesheets read:
$THEME->sheets = array('styles', 'styles_select');
to
$THEME->sheets = array('styles', 'styles_blue');
This would be much easier in my opinion.
Joseph
Why not use the "normal" way of simply editing the theme's config.php file, e.g. for selecting blue, change:Changing Your Color Preference
To assist you in making color changes, I have separated all color attributes into four separate CSS documents named styles_[color].css where [color] is actually the name of different color variants. For example, the blue variant is called styles_blue.css, the orange variant is called styles_orange.css, etc.
The default color for this theme is green. To select a different color variant:
- Remane styles_select.css to styles_green.css.
- Rename the styles_[color].css variant that you would like to use to styles_select.css.
- That's it. Were you expecting something trickier?
$THEME->sheets = array('styles', 'styles_select');
to
$THEME->sheets = array('styles', 'styles_blue');
This would be much easier in my opinion.
Joseph
That makes sense for guys like you and me, who aren't afraid to dive into a config file to change stuff around. But, my experience supporting multi-variant themes has led me to believe that some users will never be comfortable editing these files, even when the documentation is very clear and straight-forward.
For the layman, changing the names of two files is simpler because it's something they've done before.
If you find editing the config.php file to be easier, then (as I do) feel free to switch between variants that way.
For the layman, changing the names of two files is simpler because it's something they've done before.
If you find editing the config.php file to be easier, then (as I do) feel free to switch between variants that way.
Point taken. But it depends how you define a "layman/laywoman". In my own definition such a person is not even able to rename a computer file.
ATB
Joseph
ATB
Joseph
Report for the Anomaly theme in Moodle 1.9.5
Generalities
Overall aspect is cool. I'm not a great fan of rounded corners, but they are well rendered here. I prefer Georgia to Times, but for the Web the choice font is Verdana (for Windows). Georgia and Times are really meant for print display, not for computer screens. I would recommend switching from Georgia to Verdana.
The medium green-grey color #697e55 used as a background color is OK for displaying white text, but black text on that background does not display enough contrast (for me).
Valuable screen estate is lost at the top, where the course name is displayed in too large font and there is a useless top margin above header (it looks nice, but means lost space).
Specific points
Calendar
In the montlhly view, the last column (Sat) overlaps the framed 'monthly view' box.
Glossary
Glossary hyperlinked words are on a grey background. I find this kind of highlighting too distracting when reading texts. I suggest using underlining instead ; for instance the dotted underlining we have at the moment on moodle.org is fine.
You are logged in as : at the top does not change color upon hovering - at the bottom, changes color.
Hi Joseph,
At last my opportunity to disagree with you ; ). Georgia is an excellent typeface for the screen. Sometimes designers will use Georgia for headings and Verdana for body text. However, Georgia can certainly be used for body text too.
The Georgia typeface was designed by the eminent typographer Matthew Carter specifically for display on screen. Incidentally he also designed the Verdana typeface.
http://www.will-harris.com/verdana-georgia.htm
~thomas
Hi Thomas,
Always glad to see people disagreeing with me - for good reasons. Thanks for the references to Georgia. Actually I printed my own phD thesis in Georgia, so I should own it is an excellent typeface. However, it starts being not so legible, I find, at font-sizes under 10 points, while Verdana remains legible.
Joseph
PS. This post entirely formatted in Georgia.
Joseph,
Thanks for the lovely serifs. You are right that the question of font-size is very important (particularly with serif fonts such as Georgia). At the smaller end of the range Verdana is easier to read than Georgia.
On the question of accessible/readable/user friendly font-sizes this a good article to read:
http://www.baekdal.com/articles/usability/new-minimum-font-size/
In summary (for those busy Moodlers ; ) Thomas Baekdal recommends the following:
- Base CSS font size: 76% (used to be 70%)
This is comparable to:
- 12px Arial
- 11px Verdana
- 12px Tahoma (Windows pre-vista default font)
- 12px Lucida Grande (Mac OS X Default font)
- 12px Segoe UI (Windows Vista default font)
~thomas
Hi Patrick,
Thanks for all of your excellent work in raising the standard of Moodle theme designs. I have been learning alot by looking at how you construct your themes. I also dream of the day where there is a more accessible / easier way to style the central content area within Moodle. Also find the navigation sometimes not to be ideal.
Anyway just a little bit of feedback on Anomaly. Looks excellent, very modern and stylish. One or two minor tweaks maybe possible, which I have highlighted below.
I am using Moodle 1.95. Screenshots are from Firefox.
Blue rectangle highlights how form fields cause a rectangle to pop out of the rounded box. Not sure if it is possible to fix this as it depends on the widith maybe of the items in the drop down boxes.
Green rectangle just shows elements which are centre aligned rather than left-aligned.
~thomas
Thanks for the feedback.
1.) This is a screenshot of my demo, which I'm sorry to say is running a previous version of Anomaly so might be a bit more buggy than the one currently available for download.
2.) The broken bubble is the result of the text strings I've entered into the dropdown menu being larger than the width of the sideblock. These sideblocks will not break like this in Moodle 2.0.
3.) The center alignment of the two blocks you highlight is default Moodle alignment and I see no reason to change that appearance.
1.) This is a screenshot of my demo, which I'm sorry to say is running a previous version of Anomaly so might be a bit more buggy than the one currently available for download.
2.) The broken bubble is the result of the text strings I've entered into the dropdown menu being larger than the width of the sideblock. These sideblocks will not break like this in Moodle 2.0.
3.) The center alignment of the two blocks you highlight is default Moodle alignment and I see no reason to change that appearance.
Hi Patrick,
2) Good to hear that the sideblocks will not break in Moodle 2.0.
3) With regard to the centre alignment of the blocks I would see two reason for changing the appearance:
- consistency (gestalt design principle), all of the other blocks seem to be left aligned
- with regard to the login box the text input fields look right aligned, the fields look squashed/condensed, users with long usernames will end up scrolling horizontally, plus all the negative space to the left looks disproportionate.
~thomas
Hi Thomas,
Totally agree with you (my turn
).
There are still a number of places in current Moodle interface where some text elements are middle- or right-aligned. This is not consistent: all text should be left-aligned (for left-to-right languages, of course, I expect for right-to-left languages this would be the reverse).
Joseph
I agree. Feel free to assign me the task in the Tracker.
Ah, see I prefer the 62.5% method. What ever you choose, for good web typorgraphy you need to understand a few principles and know what scale you are working to.
I usually set as follows:
body{
font-size: 62.5% /* 16px (browser default) * 0.625 = 10px. */
}
Then I have a base to use relative sizes from then on, so if I want 12px type for the site,
p{
font-size: 1.2em /* 10px * 1.20% = 12px */
}
Just not that you need to set a percentage on the body and not ems because of a bug in IE6. Also the 16px base, is a default 'normal' setting on most users screens. Those with a larger default setting will obviously be slightly higher but the ratios will still continue to work.
For more I would look at the following:
jeffcroft presentation (A must read)
Elements of typographic style applied to the web by Robert Bringhurst- Font sizing
The Whole 'Elements of...' TOC
alistapart.com consistancy test
I usually set as follows:
body{
font-size: 62.5% /* 16px (browser default) * 0.625 = 10px. */
}
Then I have a base to use relative sizes from then on, so if I want 12px type for the site,
p{
font-size: 1.2em /* 10px * 1.20% = 12px */
}
Just not that you need to set a percentage on the body and not ems because of a bug in IE6. Also the 16px base, is a default 'normal' setting on most users screens. Those with a larger default setting will obviously be slightly higher but the ratios will still continue to work.
For more I would look at the following:
jeffcroft presentation (A must read)
Elements of typographic style applied to the web by Robert Bringhurst- Font sizing
The Whole 'Elements of...' TOC
alistapart.com consistancy test
Thank you for your feedback, Jospeph.
1.) While I'm getting a bit sick of rounded corners myself, people do seem to like them.
2.) Georgia is the default font for this theme:
body, p, th, td, li,
.sideblock .content {
font-family:Georgia, Times, "Times New Roman", serif;
font-size:0.95em;
line-height:1.4;
}
3.) I've tried to only pick background colors that show both black and white text quite well. I'll have a look at these again.
4.) At the end of the day, we're talking about 117px of header space (counting the navbar). Unfortunately, I think reducing the 25px of margin at the top would negatively impact the display of the page.
5.) I have seen the calendar issue and will find a fix on my next update.
6.) The color does not change in the footer either with my newest update. However, there should be an underline when hovered.
1.) While I'm getting a bit sick of rounded corners myself, people do seem to like them.
2.) Georgia is the default font for this theme:
body, p, th, td, li,
.sideblock .content {
font-family:Georgia, Times, "Times New Roman", serif;
font-size:0.95em;
line-height:1.4;
}
3.) I've tried to only pick background colors that show both black and white text quite well. I'll have a look at these again.
4.) At the end of the day, we're talking about 117px of header space (counting the navbar). Unfortunately, I think reducing the 25px of margin at the top would negatively impact the display of the page.
5.) I have seen the calendar issue and will find a fix on my next update.
6.) The color does not change in the footer either with my newest update. However, there should be an underline when hovered.