Can I change the width of every moodle page like this?

Can I change the width of every moodle page like this?

by Fei Yang -
Number of replies: 19

I just wanna make moodle cover only central part of browser like attached picture.

Is there anyway to implement this?

Thanks in advance

By the way, the picture is not from real website but made by painter.  

Attachment sample.JPG
Average of ratings: -
In reply to Fei Yang

Re: Can I change the width of every moodle page like this?

by Stuart Young -
yes of course, you can do anything!

easiest way is to use a table - the top half of the table needs to be at the top of header.html and bottom half of the table needs to be at the bottom of footer.html. e.g.

OPEN
header.html

FIND ...

<body<?php
echo " $bodytags";
if ($focus) {
echo " onload=setfocus()";
}
echo " bgcolor="$THEME->body">";
?>

AFTER, ADD ...

<center>
<table width="80%"><tr><td>

SAVE AND CLOSE

OPEN
footer.html

FIND ...

</body>

BEFORE, ADD ...

</td></tr></table>
</center>

SAVE AND CLOSE

cheers
In reply to Stuart Young

Re: Can I change the width of every moodle page like this?

by Stuart Young -
Actually if you want a white background colour for the outside part then make the top of header.html be ...

<body<?php
echo " $bodytags";
if ($focus) {
echo " Xonload=setfocus()";
}
echo " bgcolor=\"#FFFFFF\">";
?>
<center>
<table width="80%"><tr><td <?php
echo " bgcolor=\"$THEME->body\">";
?>

i.e. move the Moodle background colour out of the body tag and into the table (or td) tag.

That code has been tested BTW, the forum kept removing the \ character before the " in the echo statements, but I have got it working properly...

cheers
In reply to Stuart Young

Re: Can I change the width of every moodle page like this?

by Fei Yang -

Thanks so much, mate!

You looks so handsome smile

In reply to Fei Yang

Re: Can I change the width of every moodle page like this?

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
It's funny how many people I've run into lately who want to do this ... I don't understand it at all ... why would you deliberately not use available screen space and force people with large screens to scroll more than they have to?

Anyway, that's the beauty of themes, admins can make the decision for themselves (even wrong ones! wink)
In reply to Martin Dougiamas

Re: Can I change the width of every moodle page like this?

by Bill Burgos -
I guess to match other existing homepages. mixed The other is to have somewhat a frame around their 'work'.

One client I know seems to still use 800x600 format for their designs, all left aligned. surprise

In reply to Martin Dougiamas

Re: Can I change the width of every moodle page like this? [flag: Usability]

by Urs Hunkler -
Picture of Core developers

Hi Martin,

it's nice that you started the discussion about legibility here wink

Many tests - also scientific ones - document, that it's hard to read long lines. The eye doesn't find the beginning of the next line as easily as with short lines. So Media which gets read fast like newspapers use very narrow columns. Books use medium wide textblocks, which are evaluated over hundreds of years. Software like wikis and forums etc. display text in wide lines.

Reading on a monitor is even harder than on paper. Why do those historically seen young computer people neglect the long time experiences of reading?

I don't. So I will try to give the reader as my customer the best reading experience I can. Additionally for me as a designer white space is an important "member" in the design toolbox for page layout. With it's help it becomes much easier to organize and structure information - allways having easy access to "Content" in mind.

Urs

Average of ratings: Useful (1)
In reply to Urs Hunkler

Re: Can I change the width of every moodle page like this? [flag: Usability]

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
See the bottom right corner of your window?  That's called the "resize" control.  wink
In reply to Martin Dougiamas

Re: Can I change the width of every moodle page like this? [flag: Usability]

by Urs Hunkler -
Picture of Core developers

I like juggling with balls much more than juggling with "resize" controls every time I go on to a page with different content. wink

Giving as much control as possible to the user in digital media IMO is a must. But letting him do "unnecessary" work I would like to avoid.

In reply to Martin Dougiamas

Re: Can I change the width of every moodle page like this? [flag: Usability]

by N Hansen -
But not all pages will resize so that you can still read everything on the page-on some pages, parts will disappear.
In reply to N Hansen

Re: Can I change the width of every moodle page like this? [flag: Usability]

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
No no, not with a "stretchy" design, that's my point. Resize this very page for example.

Anyhow, I'm not going to get into another debate about it...  you do what you like on your themes and I'll keep making stretchy accessible designs that let the user decide how they want to view the web. smile
In reply to Martin Dougiamas

Re: Can I change the width of every moodle page like this? [flag: Usability]

by John Gone -
I've seen some sites lately that have been perfect except for the fact that they waste a large amount of my browser space. I don't get it? Why would you punish a user that doesn't use 800X600?

All sites will, eventually, break if the text size is increased by too much. Please visit one of my sites at http://windowcapping.com and re-size text and page size. It will break for sure, eventually. Anyone who has to frequently increase text size will be used to broken sites unfortunately. I could provide two or three versions of the same site I guess, each customized for different circumstances. That wouldn't really be that difficult as I would only have to change the CSS for each site.

On the other hand whether you arrive at http://windowcapping.com with an 800X600 or larger browser with "normal" text size active you'll get a decent idea of what I had in mind when I built it. After that you're welcome to customize for your needs and hopefully still be able to use the site.
In reply to Urs Hunkler

Re: Can I change the width of every moodle page like this? [flag: Usability]

by N Hansen -
Urs-Couldn't agree with you more. I hacked the resource width on my own Moodle so that all of the resources are a comfortable line length.

Here's some information about this issue:

http://www.webstyleguide.com/type/lines.html

In fact, the entire site is good a good resource for information on these kinds of issues, at least in my opinion. I've been using this site as a guide myself for years.

Maybe I should do the same with the forums...
In reply to N Hansen

Re: Can I change the width of every moodle page like this? [flag: Usability]

by Urs Hunkler -
Picture of Core developers

I am using an "elastic layout" for all pages with much text. This layout keeps the line length even when you change the fontsize.

In reply to Urs Hunkler

Re: Can I change the width of every moodle page like this? [flag: Usability]

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
It looks very nice too,  until you make the font size large and the screen 800x600.  wink
In reply to Fei Yang

Re: Can I change the width of every moodle page like this?

by John Papaioannou -
Interesting discussion about widths there! smile

For the record, I tend to agree with Urs here. My latest website was specifically developed to be narrow (and take up all the screen in 800x600).

Fei Yang, you can also try this simpler CSS solution:

body {
    margin: 0px 10%;
}

The 0px is the top and bottom margin; the 10% is for left and right.
In reply to John Papaioannou

Re: Can I change the width of every moodle page like this?

by Bill Burgos -

Interesting discussion from my point of view as well.

On one hand, I can understand where Urs is coming from in regards to the design of the screen to allow for faster, easier reading. I am sure that there are well documented studies that confirm this. The point being is that humans, at least in most cultures, read in a portrait format, not landscape. This could be attested to the volumes of books we have in our shelves. Most of them are in portrait format. Newspaper 'columns', etc.

The rub is that computer monitors are, for the most part, designed in landscape format, not really suited for reading. For graphic images and movies, they are great.

I can also understand where Martin is coming from by allowing the user to adjust their screen to the size they want and not have it decided by the site designer.

However, what is interesting is that the design of Moodle and most popular sites on the web is that there are at least two, if not three, columns creating portrait format viewing areas. The central area approximates the portrait format flanked by two columns of information. At least in the major viewing areas, opening screens, etc.

So one reason why people would want to have their site set to a lesser width is approximate the portrait format.

One place to get a laugh about web design is:

http://www.webpagesthatsuck.com/

It was a lot better a few years ago, but it is still funny and informative.

In reply to John Papaioannou

Re: Can I change the width of every moodle page like this?

by Fei Yang -
Thanks, manwide eyes
In reply to Fei Yang

Re: Can I change the width of every moodle page like this?

by Stuart Young -
P.S. Fei Yang, Stop using IE 6 it's dangerous and in-efficient.

Use Firefox...

http://www.mozilla.org/
In reply to Stuart Young

Re: Can I change the width of every moodle page like this?

by Fei Yang -

Hoho, I have to consider IE. Cause I'm a Java web app developer. Our main customers use IE. Personally, I like Netscape and Firefox better than IE.

Thankswink