960 fixed-width theme

960 fixed-width theme

by Patrick Malley -
Number of replies: 8
I'm currently working on a 960px fixed-width theme for Moodle. I decided to start from scratch on my CSS and leave the standard theme behind. I'm having difficulty with the following:
  1. I can't get the left-column flush with the layout-table on the front page. However, it is flush on the course-pages. You can see this at http://mrmalley.com/nhs. I may have to get creative, but thought I would run this by the community first to see if any knows of why this is so.
  2. With CSS disabled, IE automatically centers content, while Firefox does not. This is a particular pain. If I set my margins to center content on the page for Firefox, it is no longer centered for IE. I am hoping that this is an amateur's mistake. Is there some CSS value that I am missing that will center content elements without centering text?
  3. My CSS rollovers won't work using IE. What am I missing to make this happen?
I know screenshots would be helpful, and I will add some later.

Other than that, what do you think? I would be grateful for feedback from others who have attempted or are attempting fixed-width themes. What considerations should I make?
Average of ratings: -
In reply to Patrick Malley

Re: 960 fixed-width theme

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Patrick

I've been to see your site. I like the overall design, except for one color problem (blue on black). I'll admit that I'm slightly color-blind (like a certain proportion of males in the world population), and I'm sure other visitors to your site will find it very hard to read the links which are in medium blue over dark background and, even worse, get dark-blue on dark background, which to me is totally invisible unreadable (see screen shot).

Other than that, there are several things I do not understand in your post.

>I can't get the left-column flush with the layout-table on the front page. However, it is flush on the course-pages.

What do you mean by that? A screen shot showing what you get and what you would like to get would be useful.

> With CSS disabled, IE automatically centers content, while Firefox does not.

Why would you want to disable CSS?

> My CSS rollovers won't work using IE. What am I missing to make this happen?

I can't see any CSS rollovers even using FF. Where are they?

If you can clarifly these points, I'm sure you will get help on this forum.

Joseph


Attachment Image1.jpg
Average of ratings: -
In reply to Joseph Rézeau

Re: 960 fixed-width theme

by Patrick Malley -
Joseph - I appreciate your quick reply.  Here are some screen shots of my frontpage problems:

>What do you mean by that? A screen shot showing what you get and what you would like to get would be useful.

This is the left-column on my front page:
front

This is the left-column that I want to see (which I do see on my course page):
coursepage
As you can see, the left-column matches up in my course page, but not on my front page.   I have tried moving the left-column for the front page only without success.  What - short of setting absolute values or altering my background jpeg - can I do to fix this?  I only wonder if you or others have experienced this same problem.

Thanks for the feedback on the blue-on-black links/background.  I will set all left-column 'a' values to white.

>Why would you want to disable CSS?

I don't want to!  My initial thought was that IE and FF were rendering the html differently before CSS were being read causing a layout nightmare.  After looking at my CSS, I was the problem - not IE or FF!  Sorry.

>I can't see any CSS rollovers even using FF. Where are they?

FF here and at my school shows the following rollover effect in my left-column:
rollover
When the curser passes over the 'li' in my left column, that 'li' turns from gray to blue as shown in FF.  However, this does not seem to work in IE.
Average of ratings: -
In reply to Patrick Malley

Re: 960 fixed-width theme

by David Scotson -

:hover only works on a tags in IE. There are two workarounds:

  • make the a link tag within the li display: block and width:100%. Now you can put the :hover on the link, but the link will take up all the space available and be the same size as the li. (You can read about the accessibility and usability benefits of this approach if you want, which also explains why your current rollover effect is a bit misleading.)

  • if the above doesn't apply (e.g. if there is no a tag) you can use javascript to rewrite the :hover into a combination of CSS/Javascript that Internet Explorer understands. See here for details, but bear in mind, that for this particular usage, and basically any with clickable links, the previous technique is better.

Average of ratings: -
In reply to David Scotson

Re: 960 fixed-width theme

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi David,

Thanks for pointing to an interesting link about Link Presentation.

By the way, my own orangechoc theme is the only Moodle theme (that I know of) which implements the display: block; link system.

I am still in the process of making orangechoc fully 1.6 compatible.

See screen shots below.

Joseph

Attachment Image1.jpg
Average of ratings: -
In reply to Joseph Rézeau

Re: 960 fixed-width theme

by Jeffery Watkins -
Joseph,

I like the ideas in that article and will follow your example with my themes.  Bigger target, easier navigation.

Jeff
Average of ratings: -
In reply to David Scotson

Re: 960 fixed-width theme

by Patrick Malley -
That is actually exactly what I would prefer (to essentially make the entire li a link).  Sometimes the easiest solution seems so difficult.  Thanks David.
Average of ratings: -
In reply to Patrick Malley

Re: 960 fixed-width theme

by David Scotson -

I filed a bug a while ago because the HTML being produced for the three coumns on the front page was subtly different from all other pages. I can't remember if it's been fixed. It caused this kind of issue.

It's bug 1908. I closed it recently because the main issue (about CSS id's for the columns) has been fixed but maybe the other iconsistencies haven't been changed. I'd need to look at the code to be sure.

Average of ratings: -
In reply to David Scotson

Re: 960 fixed-width theme

by Patrick Malley -
Thanks David - this is helpful.  Knowing this, I can stop looking through my CSS for the problem!  smile
Average of ratings: -