How to make Theme body dynamically full-width

How to make Theme body dynamically full-width

by John Fitchett -
Number of replies: 6

I am using a theme based on the standard theme, but I want to make the main body content column width dynamic - so if there is a side bar (right, left or both) the central body content will change to fit these in, but if there are no sidebars, then the central body content be full page width.

As an example, here is the main page of my moodle site (which has no side bars, but the central body is still not full width): LINK REMOVED

And on this page I have a left side bar and no right side bar, but the main content still leaves a space on the right: LINK REMOVED

Any thoughts would be much appreciated.

(Edited by Mary Evans - original submission Wednesday, 13 May 2015, 9:45 AM)

Average of ratings: -
In reply to John Fitchett

Re: How to make Theme body dynamically full-width

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

HI,

This is all done using CSS. The CSS for this theme comes from Base theme.

moodle/base/style/pagelayout.css

So the CSS you are looking for is already there unless you have excluded it?

All the layouts for these theme are based on 'bodyclasses' that are triggered depending on the state of the layout when blocks are added or removed. These 'bodyclasses' play a big part in the page layout. so as I said earlier if you have excluded the CSS from the parent theme, then you need to add it back.

If, on the other hand, you have restyled your theme and removed these bodyclasses from the original code, then I am sorry we cannot help.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: How to make Theme body dynamically full-width

by John Fitchett -

Hi Mary

Many thanks for your reply.

Yes I do have moodle/base/style/pagelayout.css on my server.

Here is what it has in it. What do I need to edit to make the central content full page width, if there are no side bars?:

body {margin:auto 0px;width:auto;}
#page {width:100%;position:relative;}
#page-header {float:left;width:100%;}
#page-content {clear:both;float:left;overflow:hidden;position:relative;width:100%;min-width:900px;}
#page-content #region-main-box {float:left;left:200px;position:relative;width:200%;}
#page-content #region-post-box {float:left;left:50%;margin-left:-400px;position:relative;width:100%;}
#page-content #region-main-wrap {float:right;position:relative;right:100%;width:50%;}
#page-content #region-main {margin-right:0px;margin-left:400px;overflow:hidden;}
#page-content #region-pre {float:left;left:200px;overflow:hidden;position:relative;width:200px;margin-left:-50%;}
#page-content #region-post {float:left;left:0px;overflow:hidden;position:relative;width:200px;}
#page-content .region-content {overflow:hidden;padding:10px;}
#page-footer {clear:both;float:left;width:100%;}


Thanks again for your help. Also, I assure you, I am not posting this question (or the links that were to my site) to advertise it. I just want some advice to get my site working properly, and I do appreciate your advice.

Average of ratings: -
In reply to John Fitchett

Re: How to make Theme body dynamically full-width

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

Nothing! It should do it if it was built as a Moodle theme.

If someone has altered the layout html/php then who knows...only the person who built the theme.

Cheers

Mary

Average of ratings: -
In reply to John Fitchett

Re: How to make Theme body dynamically full-width

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

Hi John,

Look in your themes config.php and see if you have excluded the parent pagelayout file.

The reason being if you exclude the parent pagelayout.css file and do not have an equivalent then your site will not work correctly.

If that is the case, either remove that exclusion or add the pagelayout.css from base theme into your theme style folder.

The do a Purge all cache

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: How to make Theme body dynamically full-width

by John Fitchett -

Thanks for your help Mary.

I have found another theme work much better with my site, so I am going to change the theme to fix the issue.

Thanks again.

John


Average of ratings: -
In reply to John Fitchett

Re: How to make Theme body dynamically full-width

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

I have removed the links to your site because I consider them to be advertising which is strictly forbidden.

Thanks

Mary

Average of ratings: -