Width 100%

Width 100%

by Raul Lopez -
Number of replies: 12

Hello Community,

I been trying to change the width of my moodle view, specifically my resources view. Right now I have it set at 100% can I change this to say 80%? if so, what templates I should change?

Thank you! 

Average of ratings: -
In reply to Raul Lopez

Re: Width 100%

by Samuli Karevaara -
Add the following to the theme CSS file:

#mod-resource-view #content .generalbox { width: 80%; }
In reply to Samuli Karevaara

Re: Width 100%

by Raul Lopez -

Thank you Samuli very much for your help!!!

I added the code to the them css file but nothing happened...is there an exact place where I whould add this code?

Thanks again

Regards,

In reply to Raul Lopez

Re: Width 100%

by Patrick Malley -
You will receive more precise help if you include a sreenshot or longer description of the location of the page that you're trying to reduce to 80%.

For instance, I would be helping you now if I knew what page you wanted to reduce the width of. smile
In reply to Raul Lopez

Re: Width 100%

by Samuli Karevaara -
If you are certain that you edited the right CSS file, then try doing a Ctrl+F5, a forced refresh. Linked CSS files usually don't update right away.
In reply to Samuli Karevaara

Re: Width 100%

by Raul Lopez -

Hello Patrick and Samuli!

Patrick: What I want to do is to fix the width of the moodle view. Sometimes is difficult to read a real long line, for instance users with 1440x900 resolution see a very large line which makes it difficult to read. So I want to fix the width of my moodle resources (I wouldnt mind fixing all moodle pages) to a certain percentage like 80% or say 900 pixels. Please let me know if this clears up a little bit.

Samuli: Just tried that and didnt work either. Just to make sure: this is where I put the code:

<?php

require_once('../../../config.php');
require_once('../config.php');


if (empty($THEME->chameleonenabled)) {
    die('CHAMELEON_ERROR Editing this theme has been disabled');
}


$chameleon_id = isset($_GET['id']) ? (int) $_GET['id'] : 0;
if ($chameleon_id != 0 && !empty($CFG->allowcoursethemes) && !empty($THEME->chameleonteachereditenabled)) {
    if (!isteacheredit($chameleon_id)) {
        die('CHAMELEON_ERROR Either you are not logged in or you are not allowed to edit this theme');
    }
} else if (!isadmin()) {
    die('CHAMELEON_ERROR Either you are not logged in or you are not allowed to edit this theme');
}
#mod-resource-view #content .generalbox {
    width: 80%;
}

require_once('ChameleonCSS.class.php');
require_once('ChameleonFileBrowser.class.php');

I appreciate your help! thank you

Regards,

In reply to Raul Lopez

Re: Width 100%

by Patrick Malley -
The CSS code needs to go into the file in your selected theme folder labeled styles_layout.css.

I don't advocate fixing width. I have created a fixed-width theme and must admit that it is not very easy and takes considerable time and effort.

What I would recommend is adding margins to the page id.

For example, adding:

#page {
margin: auto 75px;
}

to styles_layout.css in my Autumn theme produced the following:
Attachment Scaled_Image_1.png
In reply to Raul Lopez

Re: Width 100%

by Mauno Korpelainen -

...and if you are using theme Chameleon all you need to do is press SHIFT & mouse left click, select Free Edit, paste

DIV#page {
  MAX-WIDTH: 900px;
  MARGIN-RIGHT: auto;
}

and Save Server

or open user_styles.css from folder theme/chameleon and paste previous code there & upload user_styles.css to your server.

If you want to center content on page, paste

DIV#page {
  MAX-WIDTH: 900px;
  MARGIN-LEFT: auto;
  MARGIN-RIGHT: auto;
}

If you want to use 80% then max-width is of course  MAX-WIDTH: 80%;

In reply to Mauno Korpelainen

Re: Width 100%

by Raul Lopez -

Thank you Mauno, Patrick and Samuli!!!

I really appreciate your help, finally got what I was looking for.

To give you an Idea of my technical knowledge, I dont even know what Chameleon is...seems like an important feature, but your clear explanations helped me achieved what I wanted.

Thanks again!

Regards,

In reply to Mauno Korpelainen

Re: Width 100%

by Rocky S -

Was facing a similar problem, using the Formal_white theme on moodle 1.9, which is a fluid theme, need to set the width to something around 1200px.

Did this but with no success? any clues?

Thanks

In reply to Rocky S

Re: Width 100%

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Well first of all you need to check what the width is in the theme already.

Try this...

#page { width: 1200px; margin: 0 auto; padding: 0;}

If you need some space top and bottom of the screen then you would need this code instead.

#page { width: 1200px; margin: 20px auto; padding: 0;}

HTH

Mary

In reply to Rocky S

Re: Width 100%

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Rocky,

Which version of Moodle are you asking about? Moodle 1.9 or Moodle 2.0?

I deleted your other comment because it did not relate to the discussion I was refering to. Your question here is what I answered, so can you please keep your replys relative to this discussion?

If you are using Formal White in Moodle 1.9 then you need to add the CSS I gave in my lst comment into the styles_layout.css in that theme.

Thanks

Mary

In reply to Raul Lopez

Re: Width 100%

by J C -

I am going to echo Raul's comments about scrolling. Since the 'death of the scroll' some time ago, it is increasingly inconvenient to scroll any web pages.

What do I mean by 'death of the scroll?'

When you go to many websites, you cannot simply scroll with the arrow keys or pgup/pgdn any more. The site captures the cursor, so you have to find somewhere on the screen to click before scrolling. Now, since there are often different components (frames etc) to many sites, you have to find the exactly item you want to scroll.

With so many sites having hidden hot links (in addition to standard hyperlinks), clicking on a spot on the page isn't always a simple task, as you may inadvertently trigger a link- or popup ads (ugh!)

Pages with embedded media (flash, videos, etc)? Sometimes it's hard to find a blank area to click. The keys often are captured to adjust the volume(?!?!)

The proliferation of laptops with touchpads have made this more of an issue. No easily controlled middle mouse click and scroll wheel for scrolling. Scrolling often jumps several lines and can be inconsistent- the user has to glance around to find their place to continue reading. (This can be adjusted to scrolling even one line at a time, but then the scroll speed can be very s-l-o-w)

Providing users with a 'complete thought' (images, text, paragraph, etc) on a single page IMHO is better than snippets and 3 sentence screens.

[steps off soapbox]

We are using aardvark-postit. We keep our visible blocks on the right side only and recommend our users to dock the left side blocks for navigation, settings, etc.

This way users have a choice during use of 1/3 or 2/3 width.

FYI. Take this forum for example. Since the threads are indented, after a few replies the post is only a few words wide and (on my editor, 2 separate machines) typed words can run off the right side of the editor (minimum editor width of some sort?), so about 2 or 3 words are hidden until a word wrap.

I dock the settings and navigation blocks- every time (the settings aren't saved?) so it is easier to follow the discussions and make replies.

I do agree that breaking up text into 3 or less sentences per 'paragraph' makes it easier to read, but that should be the author's choice, not a restriction on the reader via narrow columns.

Hope this helps with your request, Raul, and I hope others also make an effort to design their content to allow keyboard scrolling to work wink

- John