|
3. Make auto-links, such as links to modules and plugins database entries, more noticeable.
4. Add the "Moodle Docs for this page" link in the footer. 1-4 done
2. the first post header has a light orange background now. 3. the links are highlighted with "marker" yellow. How shall we handle wide forum content. The situation needs to be handled somehow because it breaks the page layout.
_1 Don't care _2 Use JavaScript to detect wide content and correct page width. _3 Keep the page width and offer scroll bars for wide content. No JS needed. I propose to implement 3.
Urs Hunkler made changes - 27/Aug/08 01:20 AM
Urs, thanks a lot for implementing my suggestions 1-4
Here are a few more (using Firefox on XP). Please let me know if you'd like screenshots to illustrate any of the points. 5. Ensure that the contents of the messaging window is centred. (Currently scrolling is necessary in order to view contacts list etc.) To Helen's topic 8. you may check the report pages.
9. Forum look _ The first posting got an orange background and the title is big an bold. The thread, the forum overview and the report pages use similar visuals. What do you think? Topic 5 and 6 I have solved.
For 7 I propose to use a similar look as the tables on the forum overview pages. Before I work on that you need to confirm that the proposed look is ok for you Helen and Martin.
If so the template CSS needs to be reworked. I could change the CSS when I get admin access to moodle.org. Hi Urs,
The full report of recent activity (point 8) looks much better, thanks I'm still getting used to your radical changes to the appearance of forum threads, but overall I like it, especially the way that threads are shown as one discussion rather than individual postings Perhaps titles of forum threads could be a little smaller though, and group icons a little bigger, and centred under the user's profile picture. (If a user has only one group icon it looks rather odd.) Alternatively, I could just get used to the way it is now Just noticed a problem with viewing parts of threads e.g. http://moodle.org/mod/forum/discuss.php?d=103683&parent=462060
 - the navigation bar is hidden by the menu bar. Long breadcrumbs have been hidden - also due to the from search taking space in the navbar. They are shown again.
The forum search doesn't need to be in the navbar - better would be to place it in the page. Probably visually connected to the orange line below the navbar in an orange area. This conflicting search in the navbar has always disturbed me and I asked myself why it has been placed here. Do you need a sketch how the search may be integrated for your decision Martin? Helen, great that you like the forum look. Please check if the smaller starter and the bigger group icons look better now.
Argh! Why are numbered lists being displayed with bullets, not numbers? Replying to http://moodle.org/mod/forum/discuss.php?d=104887
is going to be tricky! Hi Tim, are you exercising for "Speak like a pirate day"?
Thank you very much for taking the time to report this issue. Corrected. @ "Long breadcrumbs have been hidden"
because nobody spoke against an enhancement I created a solution. _ the navbar only shows the beadcrumb. There will be no more conflicts with other elements. _ all buttons, menus etc. having been shown in the navbar are shown below the navbar in the page in orange area. This solution works much better for me. I think that at the moment, it is too hard to see which forums you have unread posts in, and which posts in a thread are unread (If it is a long thread, and there are only a few unread posts, you want to be able to scroll down quickly, and see at a glance when an unread post goes by.)
Thanks, the theme is starting to look really good. Hi Urs,
Thanks for making titles of forum threads a little smaller and group icons a little bigger - they look much better now I think. However, I notice that large group icons are still displayed in forum search results. Here's a couple more suggestions: 10. Improve the layout of forum rating popup windows (for example in http://moodle.org/mod/forum/discuss.php?d=105902 @ Tim, Unread forum posts.
strange, I had written my answer immediately after you commented - but my answer has got lost ??? We have four pages showing forum postings or lists of posting headers. On which pages exactly do you see issues? Great that you like the theme. My question about topic 7 is still unanswered. Any aspects?
topic 11 - changed
Ok now Helen? Urs, thanks for improving the forum advanced search page - it looks good now
Would it be possible to move the "Search forums" button so that it's underneath the search fields, rather than off to the left? topic 10
After i have rewritten the header the 5th time now the pop-ups should work now. @ "Search forums" button so that it's underneath the search fields.
The last table row with the button only has one cell - so exact placement underneath the fields is not possible. But please have a look. The nearly exact placement with small differences for the different browsers looks ok for me. I get this weird right hand footer which seems out of place.
Dan Poltawski made changes - 19/Sep/08 09:05 PM
Dan, what do think is weird in the footer?
Urs Hunkler made changes - 22/Sep/08 09:49 PM
@ "Search forums" button so that it's underneath the search fields.
Moodle code is inconsistent regarding the last table row with buttons. In some tables to last row is built with 2 cells, in some with one. All rows with 2 cells will easily look the same. One cell rows look different and need extra work. Why do we need to investigate this extra work into the CSS to get a similar look? To investigate into making the code consistent and get an identical look without extra CSS work is definitely the better solution.
Martin Dougiamas made changes - 23/Sep/08 04:32 PM
Hi Urs,
You're doing a great job here, thanks. The theme is really starting to look slick. I've been intentionally trying to stay away and leave things here to you and Helen recently, sorry if I seemed distant. I did make a few small changes without mentioning them here before (whoops, sorry!) so I'll mention them now: 1) I made the groups icons in the forums smaller and controllable via CSS (code changes). Hmm, Martin you forgot to mention the autolink styling change you made, from highlighted yellow to an orange dotted underline. Whilst the yellow was extremely noticeable, I'm wondering whether the dotted underline is not noticeable enough!
Urs, thanks for repositioning the "Search forums" button. It looks perfect now
Ralf Hilgenstock made changes - 26/Sep/08 12:08 AM
Ralf Hilgenstock made changes - 26/Sep/08 12:08 AM
Hi Urs,
I added two screens with comments about inconsistent use of corners and rounded elements and visual contrasts and no distance between lines and text. Additional comment:
Forum: vertical yellow line of two forum comments to the same posting are confusing because there is no distance between the postings. On the right site of the posting is also no distance between text and vertical line.
Ralf Hilgenstock made changes - 27/Sep/08 08:40 PM
In 1024 resolution there are overlaying texts in the footer see: http://tracker.moodle.org/secure/attachment/15245/theme.png
 Hi Ralf,
thanks for your feedback. _ Please tell me more what you mean on your imgae theme.png. I don't understand what your marks mean. _From which page did you take http://tracker.moodle.org/secure/attachment/15245/theme.png? _ From theme2.png I can follow only that the text posting text distance to the left border is too narrow and that autolinked text is not very good visible. All other aspects are intentional. Please give additional information that I can solve the issues. Hi Urs,
From the weirdfooter.png the bottom right box on the right of Dan Poltawski (logout) and undernearth the E-learning design tool tip there is a textured box which seems out of place to me. thanks,
Urs Hunkler made changes - 01/Oct/08 03:39 AM
Urs, just a quick note to say that I think the thicker dotted underline autolink styling looks just right - thanks a lot
Another small change: the dark part of the background gradient goes further down. The "Search forum" orange background now separates better from the background.
@text posting text distance:
With Martin's code change ( @autolinked text: new: ratings and the commands I placed in one row beside each other. The postings are closer together and give a better "one thread" view. @ weirdfooter.png
Dan, what you spot as weird is intended. Probably it's just new and you are used to the old look? Hi Urs,
the theme is looking great! Congrats! I've attached one file (minorglitches1.png) with some things for your consideration: 1) is it possible to try the new menu bar to have a "more similar" orange (like the background one?) 2) The breadcrumb... could use also some orange? Perhaps gradient too. That will diference it more from the rest of the page. 3) The space between the breadcrumb line and the text below seems to be really small. Can it be moved down a bit in general (not affecting blocks that look perfect IMO). 4) Under FF, set to 1024x768, I can see an 1-point blank space in the right between the blocks and the background. Just a little detail, in case it can be fixed. Only some minor things, as said. Thanks!
Eloy Lafuente (stronk7) made changes - 02/Oct/08 05:37 PM
Hi again, here it's the minorglitches2.png attachment, just to comment:
5) The "button bar" showed for admins/teachers and so... to display buttons/navigation menus.. wouldn't be better if it's white, instead of orange? Just a suggestion. 6) I've detected that some special pages in moodle.org (like the stats one) will require some special CSS-ing too (or perhaps, once the theme is finished...) edit the pages themselves to use the existing styles. Just for your consideration, re-thanks! Ciao P.S.: Note I'm the author of some themes without taste at all like the wood ones... so please don't take these 6 points very seriously! :-D
Eloy Lafuente (stronk7) made changes - 02/Oct/08 05:42 PM
Hi Urs,
Thinking more about how we indicate unread forum posts, can the same styling which is used on the course page e.g. http://moodle.org/course/view.php?id=5
The theme is looking pretty smooth. I'd really like to switch over to it on October 28th!
admin block is not showing in moodle2 (it's there in the old theme). Tried resetting my theme, tried turning on/off editing. This change appeared in the last day or so.
Hi Michael,
The reason why the admin block is not showing is because Martin set it to display only one column for demonstrating the new theme. By reading: "If you have any feedback about the new theme, please use MDLSITE-496" in http://docs.moodle.org/en/Developer_meeting_September_2008
I arrived here. Sorry if I didn't see you before. May I ask why do moodle2 horizontal menus are javascript dependent? http://www.cssmenumaker.com/builder/menu_info.php?menu=003 Try them to believe. That's amazing, Daniele. Yes, good idea to do it that way, though if it doesn't work on old browsers then it may not be the best idea.... I'll try it out when I get back home.
What I always think every time I get inside moodle.org is that the text displaying the unread posts should be aligned. I believe this is a good time to fix this aspect.
By adding to moodle2 theme this my "user style sheet", this morning I got the result shown in the attached picture "alignment.gif". The content of my "user style sheet" is only: .unread { I don't like negative position so, if you agree with my suggestion, correct it. I was not able to find a better solution.
Daniele Cordella made changes - 24/Oct/08 03:18 PM
Just a consideration.
Starting by the assumption that new theme will be equipped with a menubar, why do the language drop down menu is not included in that menubar? Why it has to be a separate menu? the background colour used for usability reasons is not respected in each cell of the same row. See attachment "Immagine 1.png"
Daniele Cordella made changes - 06/Nov/08 09:34 PM
1) Daniele, I agree we should put the lang menu somewhere in the header on every page, perhaps the best place is in the menu after all (I can try that).
2) After some discussion and reading I'm also convinced we need to put a global search box in the top-right of every page, doing the same kind of Google search of *.moodle.org sites as we have on the front page of http://moodle.org/ 3) The image at the top-right and at the bottom right are nice at first but after a while they just take up valuable screen space ... I wouldn't mind if we lost those and just kept changing images within the content of the pages. About the global search box... did you see this example?
http://www.opencube.com/sampleit_im.asp?samples/qm2/sample18/sample.html The search field is inside menu bar and it not so ugly!! My +1 to remove images from page corners. one more reason to dispose of pictures. See attached: overlap.png
Daniele Cordella made changes - 07/Nov/08 04:14 PM
Maybe the "Home" link in the menu bar is useless, sometimes.
Something has to be reviewed! See attached: two_ways.gif
Daniele Cordella made changes - 12/Nov/08 11:12 PM
pure orange/white - no more images.
site search integrated in the nav menu. good proposal Daniele, thanks.
Martin, what menu are you going to use?
The search looks really good to me in the nav bar! - I fixed up the search page too (actually had to create a new page for it to get the full menu effect). We can improve the search results by creating site maps for Google. http://googlewebmastercentral.blogspot.com/2008/05/sitemaps-offer-better-coverage-for-your.html
http://moodle.org/public/search After starting on the lang menu I now think it doesn't belong in there as it's not a navigation thing .. it's a setting. Could be confusing to have menus that behaved differently but looked the same? I would vote for leaving lang menus how they are now and POSSIBLY extending them to show on just the top-level pages (which is the only place that content will change according to current language anyway). As for the menu technology, the OpenCube stuff looks pretty amazing! Is it cross-platform and accessible enough? @ global search. the search page looks good.
@ lang menu. Yes Martin, users won't use the lang menu for navigation and so it must not go into the nav bar. And on 1024 px wide screens it doesn't even fit. @ OpenCube. Looking at their website I didn't find any information about accessibility. And you can't tab through their menu on the website. They only claim to be browser and system independent. And that you don't need JS. No accessibility statements in their claims. Tabbing through menus is always build with JavaScript. So you need a menu system working without JS on one hand and with JS added only for tabbing on the other hand. In your actual menu you need to tab through all sub-menus to get to the last ones. Better would be an implementation with "skip tos" on the main menu entries. @ the background colour used for usability reasons is not respected in each cell of the same row. See attachment "Immagine 1.png"
Right Daniele. The developer decided to give both column cells the same class "replies". When the developer may change the class in the unread column to "unread" for example this column colour can be alternated too. There may be an additional "Group" column in forum entry lists.
So we need either cell numbers "c0", "c1" etc. for those tables or I will remove the alternating column colours. In the present situation alternating column colours don't really help. I prefer the cell numbers to be able to keep the colours. I don't really know any law interpretation forcing developers to change the background color of columns. I knew it only for rows.
@ What I always think every time I get inside moodle.org is that the text displaying the unread posts should be aligned.
Done. Tim, do you have any objections? Urs, many thanks for your latest improvements to the moodle2 theme
A small issue which I guess is related to the moodle2 theme, since it is not an issue with the old theme, is that font size tags are ignored in forum posts and elsewhere e.g. http://moodle.org/mod/forum/discuss.php?d=110274
Helen Foster made changes - 14/Nov/08 11:06 PM
Urs, for the forum discussion listing on mod/forum/view.php I just added c0, c1, c2, c3 ... I've done it dynamically so that they are always sequential, is that best for you? So sometimes Unread replies will be c4, sometimes c5 depending on whether group column is present.
Great Martin, based on even/odd cell numbers we now have alternating column colours.
@font-sizes: you call it a small issue - it's quite a serious one. An actual search in Moodle code gives 1.319 places where the depreciated and not validating "font" tag is used
Part of the reset.css used in the moodle2 theme is to reset those font-sizes to 100% as a base to be able to consciously set the sizes within the moodle2 CSS. It's easier to reset all font tags than to correct hundreds of pages in the theme. The culprit is that the Moodle HTMLEditor producesg these font tags too and the reset sizes all HTMLEditor set font-sizes. We have some options: 2) Use a filter I created for my theme work to change the HTMLEditor font sizes to inline style. It's focused on correcting only some HTMLEditor XHTML issues and therefore works faster than the Moodle integrated "htmlcleaner" function. 3) Activate the Moodle "htmlcleaner" function for all user input and inform people that their code may be changed after they saved. On user input processing time for the text does not play that big role - it's only one text. 4) another option? We work with 2). Which solution do you prefer? Martin, good, you have removed the "home" link in the menu. The link in the logo and "Home" in the breadcrumb are enough.
@ indicate unread forum post
As Helen proposed I have set all unread information to yellow background with dotted underline. Also the header of unread postings. The signal is now consistent everywhere. Eloy, minorglitches2.png shows a Firefox 2.x bug. The bar with the edit buttons is much narrower and floats right. I can't find a fast fix. Because the browser share of FF 2.x is very low I won't investigate further.
Ok? @ Eloy :: 6) I've detected that some special pages in moodle.org (like the stats one) will require some special CSS-ing too (or perhaps, once the theme is finished...) edit the pages themselves to use the existing style.
I propose to check the pages carefully. Probably optimizing the pages will benefit all Moodle themes. @ Eloy :: 4) Under FF, set to 1024x768, I can see an 1-point blank space in the right between the blocks and the background. Just a little detail, in case it can be fixed.
Can you pleas check if you still see the issue. I couldn't reproduce it. Thank you. continue with Eloy's proposals tomorrow ...
P.S.: Note I'm the author of some themes without taste at all like the wood ones... so please don't take these 6 points very seriously! :-D Nonsense! Eloy, your proposals are very wealthy and helpful. They prove you've good eyes and you see details. To make a theme good you need to care about details. Thank you very much for taking the time to contribute and to provide such good screenshots and comments - as always. @Eloy :: 3) The space between the breadcrumb line and the text below seems to be really small. Can it be moved down a bit in general (not affecting blocks that look perfect IMO).
Space is bigger now. @Eloy 1+2) menu and breadcrumb
To the menu and the navbar I have added a gradient background. Both are visually better connected now. Thanks Eloy for the hint. Better now? Eloy? Helen? Martin? I repeat my question a third time here:
How shall we handle wide forum content. The situation needs to be handled somehow because it breaks the page layout. _1 Don't care _2 Use JavaScript to detect wide content and correct page width. _3 Keep the page width and offer scroll bars for wide content. No JS needed. I propose to implement 3. This issue list gets long. I went through all comments and I think I changed or answered every issue. May somebody please help and check the list too if I have overseen an aspect.
Thank you very much. When I am right there are some open questions in the moment:
_ How to handle wide postings? _ Is the menu/breadcrumb look ok now? _ Can Eloy still have white 1 px line issue on the the right side of the page? _ What menu will Martin decide to use? And we are open to new issues .... Of course I am not the right person to provide you the answers you are waiting for but... in the main time, I can share with you all some sites talking about accessibility for menus. THEY ALL REQUIRE JS!!!!
http://www.udm4.com/ http://www.smartmenus.org/site/accessibility/ http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp The next URL refers to the only menu I was able to navigate between levels using only arrows keys. http://www.cssdrive.com/index.php/news/resources-search/eddfa553a551b5f72a71b71560df5f21/ http://www.capitol.state.tx.us/resources/accessibility.aspx Two more links I am finding useful:
http://webdev.entheosweb.com/2008/08/04/css-menus-and-508-accessibility-compliant/
I was able to use menus of this page without the mouse too. Maybe by adding command key... I think the menus look fantastic, and the glitch seems resolved.
This bug IS getting long and hard to follow. I've created subtasks of this bug for the other two things (wide posts and CSS menus) so let's discuss them there (and create new subtasks for new issues). Just a note about the <font> tags ... yes, we shouldn't have any in our code, though I count less than you: 136 left in Moodle 1.9 and 155 in HEAD.
I used this to remove some of the 3rd party code that is out of our control: grep -r '<font ' * | grep -v lib/adodb | grep -v lib/typo3 | grep -v admin/mysql | grep -v lib/soap | grep -v lib/overlib | grep -v lib/smarty | grep -v lang/ | wc -l @ <font> tags
I had just let Eclipse count all "<font" occurrences. Your numbers look much better. Important is that no "font" tags show up in Moodle pages. What I find interesting is the increasing number of "font" tags in Moodle 2.0. The goal for years is to decrease the number. This example looks like a prove for my proposition to let (web) developers develop code and (web) designers design templates and bring both parts together leading to validating pages. So here again my vote - separate code and presentation and use templates in Moodle in the form of simple XHTML includes. useless vertical gray column on the top right corner of the page!! See atachment: greycolumn.png
Daniele Cordella made changes - 21/Nov/08 02:16 AM
Sorry: top left corner!!
(I WANT THE EDIT BUTTON AGAIN!!!!!!!!) My vote to keep the gray/blue image in the top-left. It's not getting in the way!
The small dotted line that appears around links that have been selected no longer appear in the new theme. See "dotted lines.odg" above.
Michael Blake made changes - 21/Nov/08 04:53 PM
Michael Blake made changes - 21/Nov/08 04:54 PM
Michael, the link changes colour on mouseover now. I am not sure why the dotted box may be necessary for active links? Can you please explain why it's needed.
The dotted line thing is quite useful if you're hitting a bunch of links (eg in a list) to pop them up in tabs, for example, because it helps you remember what you were up to. I actually thought this was a standard browser feature because it seems to work everywhere, I was surprised when Michael pointed out it was missing. Can it be disabled with CSS?
Michael and Martin, the outlines are even more important when you navigate with the keyboard.
The outline was reset by CSS. I have activated the outline again. Thanks a lot Michael for pointing at this important issue.
Helen Foster made changes - 28/Nov/08 12:02 AM
Outline around links is now working well. Thanks.
Martin Dougiamas made changes - 01/Dec/08 01:04 PM
On forum pages like http://moodle.org/mod/forum/view.php?f=33
, on my macbook, all the blurb at the top takes up so much space that you can just see the
Discussion Started by Replies Unread headings, and you have to scroll down to actually see any posts. I think we could usefully save some space at the top and bottom of the introductory text, and above the start new discussion button, so you can actually see some discussions. why do one top corner was rounded and one was not rounded?
See attachment: corners.jpg Was this wanted?
Daniele Cordella made changes - 09/Dec/08 04:26 AM
not sure if you can do much with this - the user has posted a massively wide image - major issue is that it screws with the header of the post - the title and name of the user is hidden behind the image of the user(smiley cake)
http://moodle.org/mod/forum/discuss.php?d=112336 I'm using Firefox 3 @ Daniele
why do one top corner was rounded and one was not rounded? See attachment: corners.jpg Was this wanted? No that's a bug. Can you please post the link. Then I can check and solve the isuue. To Urs: send a message from a thread. Then before the 30 minutes of delay, edit it and save it again. You will get the message "Your post was updated" (in my picture "Il tuo intervento è stato aggiornato"). The window with the massage is the one I showed in the attachment.
 Urs, one more issue that, IMHO, could have a relation with this new theme is explained in the message in http://moodle.org/mod/forum/discuss.php?d=112353
, that seems to be out of the interest of all. I think the theme is good enough to make the switch, so I'm doing that now. It's been long enough! So Merry Christmas!
The icons on the front page are barely tolerable but we have some good new ones coming shortly. We can of course continue tweaking everything! And now we'll have a lot more testers. In IE6 Login page is shrunken which makes filling the fields impossible - styles_ie6.css issue?
Mauno Korpelainen made changes - 23/Dec/08 09:57 PM
... I ment if you want to login as a guest using IE6 - login block works ok in IE6
@In IE6 Login page is shrunken which makes filling the fields impossible - styles_ie6.css issue?
Fixed. Thanks for the fast report Mauno. I think I'm with Daniele on the gray stripe in the header. The rest of the page has a nice clean look to it that the gray seems out of place. My preference would be just to have it be white but perhaps an orange gradient would look OK. Peace - Anthony
p.s. - Just adding that I think the reason the gray stripe stands out is because I'm a big fan of symmetry. That said, I don't have a strong objection to it, it just strikes me as different. I've come across a small problem with activity links on course pages e.g. http://moodle.org/course/view.php?id=5
being much longer than the text (apart from forum links).
According to Eloy: width: 95%; in the selector: .section .activity a that affects to all activities. But forum has one custom style (.section .forum a) that reverts it: width: auto; IMO the 95% is wrong perhaps the 95% should be applied to ".section .activity" (without the "a"). Just a suggestion. Here are some minor suggestions on the layout of forum messages sent out from moodle. See the attached "forummailmessage.jpg" file which I refer to.
1. the breadcrumb links are a little too high in my opinion within the bar area. I suggest centering them within that bar. 2. the user photo should be part of the title/user/date horizontal bar. Now it appears to be part of the bottom background area. I suggest realigning it to match the title/user/date bar and use the same background. Referred to by Don Hinkelman below...
Don Hinkelman made changes - 08/Jan/09 09:07 AM
One more very little problem for you Urs.
See attachment: bg_round-corner.gif
Daniele Cordella made changes - 02/Feb/09 08:33 PM
One more very hidden problem in the theme.
Go to moodle.org Push the "Search moodle.org" botton. Look at the middle of the page while changing the horizontal size of your browser window. You will find that a white <div> appears on the right of the moodle page as shown in the very big attchment: "div_knocking".
Daniele Cordella made changes - 12/Feb/09 07:27 PM
I think I'm with Daniele and Anthony on the grey stripe in the header. I posted my solution here: http://tracker.moodle.org/browse/MDLSITE-132?focusedCommentId=70236&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#action_70236
If it's design, it must have some function. And there are no elements which are bound to that virtual vertical line - not even the drop-down-boxes, starting with "About" (s. attached "header_lines") IMO, it would be much nicer, if the moodle-logo starts at the same vertical "helpline" as the rest of the navigation does (s. attached screenshot design_top_left) and the gray should be changed into white. If there is a function, please let me know
Dennis Meyer made changes - 13/May/09 02:23 PM
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Improvement
Open
Critical
New moodle.org theme improvements
 |
|
Just adding Martin as a watcher.