I've been working on a new theme for the Moodle 2.0 release, and I'm at the point where it's ready for testing.
I want to share it now, though, as a beta release.
So, meet Anomaly 0.8:
Here's the scoop:
I'm sure I'll think of more. Generally speaking, I'd appreciate any feedback and criticism you have.
Oh, there is one known problem:
The redirect pages are not rendering properly (the page you see when you post to a forum, etc.), and I won't be fixing this anytime soon. It was an oversight on my part that I thought I was taking care of at the start, but I was not. It's frustrating. Now that I'm this far in, to recode would be a bother. I will add this to my someday list of things to do:
Please post any issues you have to this forum and if you don't have a solution I will gladly try to find one.
- I've added the theme to the database for download. Here's a direct link.
- It was built on Moodle 1.9 and looks great in Safari!
Here's my todo list for anyone who wants to volunteer time to testing:
- Install, test, and optimize on Moodle 2.0.
- Test in IE6, IE7, Opera, Chrome and Firefox.
- Add alternative color options.
- Add an alternative header for use with a logo.
- Check all popups to ensure proper padding and eliminate background images.
- Test the gradebook with actual data.
- Consolidate background images to reduce load.
I'm sure I'll think of more. Generally speaking, I'd appreciate any feedback and criticism you have.
Oh, there is one known problem:
The redirect pages are not rendering properly (the page you see when you post to a forum, etc.), and I won't be fixing this anytime soon. It was an oversight on my part that I thought I was taking care of at the start, but I was not. It's frustrating. Now that I'm this far in, to recode would be a bother. I will add this to my someday list of things to do:
- Recode header.html to render redirect pages correctly, OR find hack that works using negative margins or some other form of trickery.
Please post any issues you have to this forum and if you don't have a solution I will gladly try to find one.
I've had the chance this evening to test Anomaly on Moodle 2.0.
The only thing that really didn't work well were the course pages, which appear to have shed the layout tables - a good thing, BTW.
I also fixed the one item on my someday list that I never planned on fixing. Although the cost of fixing this was that I've had to get rid of the neat shadow effect around the theme's wrapper, making it look a little flat on the page.
To all my imaginary test subjects, I will update the download file to reflect these changes in just a second.
Two down, six to go.
The only thing that really didn't work well were the course pages, which appear to have shed the layout tables - a good thing, BTW.
I also fixed the one item on my someday list that I never planned on fixing. Although the cost of fixing this was that I've had to get rid of the neat shadow effect around the theme's wrapper, making it look a little flat on the page.
To all my imaginary test subjects, I will update the download file to reflect these changes in just a second.
Two down, six to go.
That's a tough question to answer since I never specifically stated what my problem was! What same problem are you having?
Have a look at the styles_layout.css file in the new Standard theme. You'll notice the use of
.weeks-format #left-column,
.weeks-format #right-column,
.topics-format #left-column,
.topics-format #right-column {
width: 12.5em;
}
.weeks-format #middle-column ,
.topics-format #middle-column {
margin: 0 12.5em 0 12.5em;
}
Well, if you have set your sideblock widths to a fixed width, as I have, these relative values will screw you up. So, I've changed these as follows:
.weeks-format #left-column,
.weeks-format #right-column,
.topics-format #left-column,
.topics-format #right-column {
width: 200px;
}
.weeks-format #middle-column ,
.topics-format #middle-column {
margin: 0 210px 0 210px;
}
Have a look at the styles_layout.css file in the new Standard theme. You'll notice the use of
.weeks-format #left-column,
.weeks-format #right-column,
.topics-format #left-column,
.topics-format #right-column {
width: 12.5em;
}
.weeks-format #middle-column ,
.topics-format #middle-column {
margin: 0 12.5em 0 12.5em;
}
Well, if you have set your sideblock widths to a fixed width, as I have, these relative values will screw you up. So, I've changed these as follows:
.weeks-format #left-column,
.weeks-format #right-column,
.topics-format #left-column,
.topics-format #right-column {
width: 200px;
}
.weeks-format #middle-column ,
.topics-format #middle-column {
margin: 0 210px 0 210px;
}
Hi,
I just installed the latest 0.8.5 theme on a Moodle 1.9.3 installation and came up against a few layout errors, specifically in IE7, the calendar only displays 6 rather then 7 columns (the last is partially visible) and in both IE7 and FF3, some of the admin blocks corners are misaligned.
I've attached some screen grabs to highlight what I mean. I'm, at best, a tinkerer with the code (though the screen grabs are from a pristine install of the theme), so not sure if I can resolve this myself.
An alternative header for use with a logo would be great! Apologies for not being able to help out with this myself, but would be happy to test out anything you have and report back!
I just installed the latest 0.8.5 theme on a Moodle 1.9.3 installation and came up against a few layout errors, specifically in IE7, the calendar only displays 6 rather then 7 columns (the last is partially visible) and in both IE7 and FF3, some of the admin blocks corners are misaligned.
I've attached some screen grabs to highlight what I mean. I'm, at best, a tinkerer with the code (though the screen grabs are from a pristine install of the theme), so not sure if I can resolve this myself.
An alternative header for use with a logo would be great! Apologies for not being able to help out with this myself, but would be happy to test out anything you have and report back!
I have had a look at the issues with the sideblock styling and have decided to go with a more simplified look and feel. I know people like curvy corners, but since this theme doesn't use custom corners, this is the more versatile way to go.
Hopefully the change isn't too ugly to throw people off.
Hopefully the change isn't too ugly to throw people off.
Hi Patrick,
Thank you for the very, very nice theme that you provided. I really appreciate your effort and time that you invested in it. Because I like it, I added a logo and the automatic menu from Chen. I use the gradebook in my online class, which seems to be fine. The display looks good.
I hope you do not mind my following observations:
Recently I observed that the drop down menu in quiz/manual grading (of essay questions) goes beyond the right border. (see attachment)
On the front page in add/edit course I saw something similar that some of the categories also go beyond the right border. This depends on which sub category level they are. (see attachment in next post)
Perhaps you intended it this way which is fine with me.
With kind regards,
Hartmut
Thank you for the very, very nice theme that you provided. I really appreciate your effort and time that you invested in it. Because I like it, I added a logo and the automatic menu from Chen. I use the gradebook in my online class, which seems to be fine. The display looks good.
I hope you do not mind my following observations:
Recently I observed that the drop down menu in quiz/manual grading (of essay questions) goes beyond the right border. (see attachment)
On the front page in add/edit course I saw something similar that some of the categories also go beyond the right border. This depends on which sub category level they are. (see attachment in next post)
Perhaps you intended it this way which is fine with me.
With kind regards,
Hartmut
Hello Hartmut,
First of all, thank you for your kind words. Anomaly is proving to be a pretty strong theme and I look forward to its future in the Moodle core.
Regarding your issue, there is nothing I can do about this since the problem is being caused your your choice of long quiz category names and extended hierarchies. You may want to consider shortening your names a bit. For example:
Spring 2009 and before/Undergraduate/Bible, Mission, and Theology
could be shortened to something like:
pre-Sp 09/undergrad/B, M, T
I'm sure you see where I'm going with this.
If you're interested in a software fix to the problem, you might want to consider reducing the size of the page margin by editing the following lines of code in styles.css:
#page {
margin:25px 4%;
}
You can reduce the left and right margins by editing the 4% value to something smaller. But, alas, even that would be surpassed at some point.
First of all, thank you for your kind words. Anomaly is proving to be a pretty strong theme and I look forward to its future in the Moodle core.
Regarding your issue, there is nothing I can do about this since the problem is being caused your your choice of long quiz category names and extended hierarchies. You may want to consider shortening your names a bit. For example:
Spring 2009 and before/Undergraduate/Bible, Mission, and Theology
could be shortened to something like:
pre-Sp 09/undergrad/B, M, T
I'm sure you see where I'm going with this.
If you're interested in a software fix to the problem, you might want to consider reducing the size of the page margin by editing the following lines of code in styles.css:
#page {
margin:25px 4%;
}
You can reduce the left and right margins by editing the 4% value to something smaller. But, alas, even that would be surpassed at some point.
As usual, I would expect that themes that inherit from the standard theme would go on working. If you have a theme that does everything from scratch, you will probably need to scrutinise the differences between theme/standard in 1.9 and 2.0, and see if you need to make corresponding changes to your own theme.
I've used this Anomaly on Moodle 2.0 beta and our current Moodle 1.9, works great on both. We really like it, however I've been asked to see if I can change some of the colors around... Namely the blackboard color at the top header. We want to change this to a blue to more closely match our web site colors. I know I can change a lot of the color elements in the styles_select.css, but cannot find the header entry there. I found the header_l, header_r, and header_t jpg's in the images directory, but editting these only changes the corners and a strip at the top, leaving the bulk of the header its original color.
Anyone know where the color for the header block is set? Thanks!!
Anyone know where the color for the header block is set? Thanks!!
Sorry I let this one slip by. Nick is right. Here is all of the code responsible for the color of the black header:
#header-t {
background:url(images/header_t.jpg) repeat-x 0 0;
}
#header-r {
background:url(images/header_r.jpg) no-repeat 100% 0;
}
#header-l {
background:url(images/header_l.jpg) no-repeat 0 0;
padding:11px 0 0;
}
#header-m {
background:#222;
padding:0 10px;
}
Note that #header-t is a repeating image across the top of the page, #header-r is the right corner, and #header-l is the left. #header-m defines the color of the rest of the header.
The images will have to be edited, and the color value for #header-m will have to be changed to match.
#header-t {
background:url(images/header_t.jpg) repeat-x 0 0;
}
#header-r {
background:url(images/header_r.jpg) no-repeat 100% 0;
}
#header-l {
background:url(images/header_l.jpg) no-repeat 0 0;
padding:11px 0 0;
}
#header-m {
background:#222;
padding:0 10px;
}
Note that #header-t is a repeating image across the top of the page, #header-r is the right corner, and #header-l is the left. #header-m defines the color of the rest of the header.
The images will have to be edited, and the color value for #header-m will have to be changed to match.
Hi Patrick,
This is a really nice theme from what I have seen of it so far. I'm really happy with the ideas that it might come with the install of of Moodle 2.0. (It might provide some stiff competition for the wood theme
)
I have a suggestion about the header section. I think you have a really interesting opportunity here. I like the large rectangle and rounded corners. It would be nice if you were able to use transparency in the corners so that the whole header was basically a shaped window. A background image or banner could then be put in, which would make it easy for people to customize and perhaps even lead to a plug-in that allowed students to upload and customize their own header image. The image would have to be taller than the header to allow for expansion when the type is enlarged (or a repeating pattern). Some food for thought. I like the banners and theme ideas I'm seeing in igoogle these days. I seem to remember hearing that PNG transparency is finally going to work in IE (not sure)?
I noticed a display error in Firefox (3.0.8 mac) today. I have attached a screen below.
Regards,
Ian
This is a really nice theme from what I have seen of it so far. I'm really happy with the ideas that it might come with the install of of Moodle 2.0. (It might provide some stiff competition for the wood theme
I have a suggestion about the header section. I think you have a really interesting opportunity here. I like the large rectangle and rounded corners. It would be nice if you were able to use transparency in the corners so that the whole header was basically a shaped window. A background image or banner could then be put in, which would make it easy for people to customize and perhaps even lead to a plug-in that allowed students to upload and customize their own header image. The image would have to be taller than the header to allow for expansion when the type is enlarged (or a repeating pattern). Some food for thought. I like the banners and theme ideas I'm seeing in igoogle these days. I seem to remember hearing that PNG transparency is finally going to work in IE (not sure)?
I noticed a display error in Firefox (3.0.8 mac) today. I have attached a screen below.
Regards,
Ian
Hello Ian,
A couple of thoughts:
1.) The issue you're experiencing is the result of the course name pushing the login info down and the theme isn't accommodating for the shift. This is fixable and is a bug. Can you add this as its own issue to the Moodle Tracker?
2.) My summer task list includes adding alternate style options to the theme and an alternative header.html that calls a blank image called logo.jpg. This image can be edited to include a custom logo.
3.) Since this theme will be included in Moodle 2.0, I'd rather not yet move to transparent PNG backgrounds since IE6 is still being used by some users and that browser does not display transparent backgrounds without tricks.
A couple of thoughts:
1.) The issue you're experiencing is the result of the course name pushing the login info down and the theme isn't accommodating for the shift. This is fixable and is a bug. Can you add this as its own issue to the Moodle Tracker?
2.) My summer task list includes adding alternate style options to the theme and an alternative header.html that calls a blank image called logo.jpg. This image can be edited to include a custom logo.
3.) Since this theme will be included in Moodle 2.0, I'd rather not yet move to transparent PNG backgrounds since IE6 is still being used by some users and that browser does not display transparent backgrounds without tricks.
Can you add this to the Moodle Tracker so that I don't miss it?
I added it to the tracker (hopefully I did the settings correctly).
There is also another small issue when viewing a user profile, there is a horizontal scroll bar when there shouldn't be, I don't think. This happens in IE7, but not Firefox.
View image here (it's really wide)
Should I add this to the tracker as well?
There is also another small issue when viewing a user profile, there is a horizontal scroll bar when there shouldn't be, I don't think. This happens in IE7, but not Firefox.
View image here (it's really wide)
Should I add this to the tracker as well?
.
Just wanted to ask if a problem I'd run into was down to the theme or possibly something else... (not asking to make any changes)
When I use Heading tags (e.g. H1 - H3) in the editable part of a topic box, I see the fonts display as you would expect, but when I add a Label and apply the same heading tags, the sizes changes. Looking at the source, both lines of text are under the same H3 tag.
Could this be a result of the H3 tag being defined in different ways in different areas?
Thanks in advance for your help
When I use Heading tags (e.g. H1 - H3) in the editable part of a topic box, I see the fonts display as you would expect, but when I add a Label and apply the same heading tags, the sizes changes. Looking at the source, both lines of text are under the same H3 tag.
Could this be a result of the H3 tag being defined in different ways in different areas?
Thanks in advance for your help
Hi Kenji,
As you may be aware, h1, h2, h3, ..., are all set to different font sizes by default, but they can be changed by using CSS. The problem is knowing which H3 you need to change.
Using FireFox plugin Firebug is useful for this. Otherwise if your Moodle site is accessable then just leave a link here, then I can take a look and see if I can help you with this problem.
Mary
As you may be aware, h1, h2, h3, ..., are all set to different font sizes by default, but they can be changed by using CSS. The problem is knowing which H3 you need to change.
Using FireFox plugin Firebug is useful for this. Otherwise if your Moodle site is accessable then just leave a link here, then I can take a look and see if I can help you with this problem.
Mary
Hi Mary,
I think you're right though the problem seems to be inherited - I did use Firebug to check out the CSS and was (very much) guessing that the problem might be something to do with a relative setting - i.e. text being resized to 0.95 of the original, but then when placed into a label, it being further reduced 0.95 of 0.95 (and so on).
Lists also seem to be affected, which might be a result of the activities, labels, etc. actually being part of a list within a topic.
Unfortunately it's not an open course (I'm doing some work for a college) and don't have access to the theme itself (other than playing around with Firebug and the IE editor). My next step will be to download a copy of Anomaly and plug it into a local Moodle and see if I can replicate the error.
I was just wondering if anyone had run into similar problems when using the theme (and then come up with a fantastically simple solution, which would have been nice!)
Kenji
I think you're right though the problem seems to be inherited - I did use Firebug to check out the CSS and was (very much) guessing that the problem might be something to do with a relative setting - i.e. text being resized to 0.95 of the original, but then when placed into a label, it being further reduced 0.95 of 0.95 (and so on).
Lists also seem to be affected, which might be a result of the activities, labels, etc. actually being part of a list within a topic.
Unfortunately it's not an open course (I'm doing some work for a college) and don't have access to the theme itself (other than playing around with Firebug and the IE editor). My next step will be to download a copy of Anomaly and plug it into a local Moodle and see if I can replicate the error.
I was just wondering if anyone had run into similar problems when using the theme (and then come up with a fantastically simple solution, which would have been nice!)
Kenji
Hi Kenji,
This theme is now one of the Themes picked to be used as a base for theming in Moodle 2.0. How it works on your version of Moodle might be the fact that you are using 1.9.3. so one might expect a few glitches which in the latest version of Moodle 1.9.8 have been ironed out.
I've tried using Anomaly on Moodle 2.0 but just can't get to grips with all the various files associated with the theme. In fact I can't get any of the themes to do as I want...it is so frustrating.
To fix the problem, you might like to try adding a an inline style to your header at the same time you are typing it. In the Text Area of the Editor type your header as normal, highlight it and set it to H3 and then turn on HTML editing indicated on the menu bar as <> This will allow you to add an inline style which will override the theme css.
<h3 style="font-size: 85%; color: red;">Some Meaningful Header Title</h3>
Hope this helps?
Mary
This theme is now one of the Themes picked to be used as a base for theming in Moodle 2.0. How it works on your version of Moodle might be the fact that you are using 1.9.3. so one might expect a few glitches which in the latest version of Moodle 1.9.8 have been ironed out.
I've tried using Anomaly on Moodle 2.0 but just can't get to grips with all the various files associated with the theme. In fact I can't get any of the themes to do as I want...it is so frustrating.
To fix the problem, you might like to try adding a an inline style to your header at the same time you are typing it. In the Text Area of the Editor type your header as normal, highlight it and set it to H3 and then turn on HTML editing indicated on the menu bar as <> This will allow you to add an inline style which will override the theme css.
<h3 style="font-size: 85%; color: red;">Some Meaningful Header Title</h3>
Hope this helps?
Mary
Hello,
Thank you for the theme. I am noticing that tables with a lot of rows appear outside of the inside container. When I try to specify the width of the table manually, it does not change, it appears something is overriding it. Once the table extends beyond the printable area, it seems that it might "break" everything else and allow other areas to print beyond the middle also. Any help would be GREATLY appreciated, I have included a screenshot.
Hello John,
There are a few problems with this theme which we are, at present, addressing.
If you would like to send me you email address, in a private message, I'll forward an amended copy of Anomaly for you to test. There are a few new features which will help with the page-layout as you are describing.
Thanks
Mary