Afterburner 2.4 - fix centre column width

Afterburner 2.4 - fix centre column width

by Darren Bucknell -
Number of replies: 28

Hi,

I have just upgraded our Moodle 2.3.1 to 2.4.1 and decided to use the new afterburner theme rather than using our customised afterburner theme since 2.2!

I had set the old theme to use a fixed width of 1200px which happened to make the centre main column an optimal ~700px.

The new afterburner theme doesnt seem to follow the same rules and now the centre column expands and contracts depending on browser window size sad

Does anyone know how to fix the column widths as we use a standard layout which relies on this fixed sizing?

Many thanks,

D

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner 2.4 - fix centre column width

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

Yes set #page-wrapper {max-width: 1200px; min-width: 1200px;}

you can add this to the Custom CSS setting box to try it out before you add it to the pagelayout.css file for that theme.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Darren Bucknell -

That's brilliant - thank you Mary.

It set the page width fixed to 1200 but the two side columns seem to be fixed at 300px each - rendering the centre column to small.

Do you have a quick method to narrow these down to say 220px?

I noticed this in the afterburner_pagelayout.css file - does the region-pre and region-post width set at 25% (1200*.25 = 300) hold a clue? 

#region-main {
    float: left;
    overflow: hidden;
    position: relative;
    width: 50%;
    left: 100%;
    background-color: #fff;
}
#region-pre {
    float: left;
    overflow: hidden;
    position: relative;
    width: 25%;
    left: 25%;
}
#region-post {
    float: left;
    overflow: hidden;
    position: relative;
    width: 25%;
    left: 75%;

Many thanks again for your help,

Darren

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner 2.4 - fix centre column width

by Darren Bucknell -

Hmm, tried to set the width of both of these to 20% and changed the width of region-main to 60%.

It sort of changed the widths but with strange results - the left/right columns changed in width but the heading of the blocks remained at 300px!  Set it back to default for now...

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner 2.4 - fix centre column width

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

Try this...I have not tested it but will give you an idea...

#page-content {
    clear:both;
    float:left;
    overflow:hidden;
    position:relative;
    width:100%;
}
#region-main-box {
    float:left;
    right:22%;
    position:relative;
    width:100%;
}
#region-pre-box {
    float:left;
    right:56%;
    position:relative;
    width:100%;
}
#region-main {
    float:left;
    overflow:hidden;
    position:relative;
    width:42%;
    left:101%;
}
#region-pre {
    float:left;
    overflow:hidden;
    position:relative;
    width:20%;
    left:25%;
}
#region-post {
    float:left;
    overflow:hidden;
    position:relative;
    width:20%;
    left:83%;

}
#region-main .region-content,
#region-pre .region-content,
#region-post .region-content {
    overflow:hidden;
    padding:1em 0px;
}
#page-footer {
    clear:both;
    float:left;
    width:100%;
}


/** Only side pre **/

.side-pre-only #page-content #region-main-box {right: 0%;}
.side-pre-only #page-content #region-main-box #region-pre-box {right:78%;}
.side-pre-only #page-content #region-main-box #region-pre-box #region-main {left:101%; width:76%;}
.side-pre-only #page-content #region-main-box #region-pre-box #region-pre {left:3%; width:20%;}
.side-pre-only #page-content #region-main-box #region-pre-box #region-post {width:0%;}


/** Only side post **/

.side-post-only #page-content #region-main-box {right:0%;}
.side-post-only #page-content #region-main-box #region-pre-box {right:22%;}
.side-post-only #page-content #region-main-box #region-pre-box #region-main {left:23%; width:76%;}
.side-post-only #page-content #region-main-box #region-pre-box #region-pre {width: 0%;}
.side-post-only #page-content #region-main-box #region-pre-box #region-post {left:25%;width:20%;}
.has_dock.side-post-only .page-middle #region-main-box #region-pre-box #region-main {margin-left:22%;}


/** No blocks whatsoever **/

.content-only #page-content #region-main-box {right:0%;}
.content-only #page-content #region-main-box #region-pre-box {right:0%;}
.content-only #page-content #region-main-box #region-pre-box #region-main {left:1%; width:98%;}
.content-only #page-content #region-main-box #region-pre-box #region-pre {width:0%;}
.content-only #page-content #region-main-box #region-pre-box #region-post {width:0%;}
Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Darren Bucknell -

Hi Mary,

Thank you for your continued help.  Can I copy/paste this into the custom css under your 1200px page width fix?

Thanks again,

Darrem

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner 2.4 - fix centre column width

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

You would be better just printing it off and then make the changes to the existing code. There will only be a few places where you will need to change it in the afterburner_pagelayout.css

other wise it may cause confict with your theme.

You can try it in the Custom CSS, if you want to, if it does not work remove it and then do the alternative as suggested above.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Darren Bucknell -

Mary, you are a lady and a scholar!  I shall give this a try and edit the .css file first thing Monday morning.

Thank you smile

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner 2.4 - fix centre column width

by Darren Bucknell -

Hi Mary,

I made the changes to the .css file but unfortunately it did not work.

The side columns did change size but the content of the colums became distorted and unreadable as it was shifted off the section sad

The centre column also seemed to stay very narrow.

For now, I've loaded into 2.4.1, our customised 2.3.1 Afterburner theme which seems to work.

I know there have been some code changes to the themes to support Moodle's new code base and hope I can re-integrate the latest theme with some changes to meet our spec.

Thank you again for your help and support.

Darren

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner 2.4 - fix centre column width

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

Hi Darren,

That's OK to add your old theme back, it would be better if you renamed your theme to another name then it would be safe to leave it be when you upgrade next time.

I am planning an reworking Afterburner to add some extra setting so that Admins can set their own side block widths. In fact MDL-35217 has been set up to do this.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Darren Bucknell -

That would be great Mary as the general Afterburner theme fits well with our branding - give or take a tweak or two!

How easy is it to rename a theme?  I understand that all references to the theme's name have to be replaced with the new name and this involves digging into most of the theme code.

 

Cheers,

Darren

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner 2.4 - fix centre column width

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

The main places where you HAVE to rename are as follows...

FIRST - which I nearly forgot!!!

The afterburner folder name itself...

moodle/theme/afterburner

Where you see this afterburner change it to your theme's name, be sure to use lowercase letters.


/config.php
$THEME->name = 'afterburner';
$THEME->csspostprocess = 'afterburner_process_css';

Search and replace all instances (17) of afterburner with your theme's name

/lib.php (5)
/renderers.php (1)
/settings.php (9)
/version.php (2)

Last but not the least:

First you need to rename this file to read the name of your theme like so...

yourtheme/lang/en/theme_afterburner.php

Then in
yourtheme/lang/en/theme_yourtheme.php
change the following...

$string['configtitle'] = 'Afterburner Custom Settings';

$string['pluginname'] = 'Afterburner';

You can change the names on the CSS stylesheets but this is not a ptoblem. But if you do change these be sure to change afterburner/config.php too to reflect those changes you make.

See afterburner/style for all the CSS files

afterburner_blocks.css
afterburner_calendar.css
afterburner_dock.css
afterburner_menu.css
afterburner_mod.css
afterburner_pagelayout.css
afterburner_rtl.css
afterburner_settings.css
afterburner_styles.css  

And then change these to correspond to your changes

$THEME->sheets = array(
    'afterburner_pagelayout',   /** Must come first: page layout **/
    'afterburner_styles',   /** Must come second: default styles **/
    'afterburner_menu',
    'afterburner_blocks',
    'afterburner_mod',
    'afterburner_calendar',
    'afterburner_dock',
    'afterburner_rtl',
    'afterburner_settings',
);

HTH

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Darren Bucknell -

Superb - thanks Mary.

Half term coming up so will set asside some Moodle time smile

All the best,

Darren 

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Alan Hovden -

Hi Mary... I think when I first re-themed Afterburner back in 2.1 the instructions on moodle.org were much simpler for cloning a theme - or maybe I missed the page with all the changes you have written up here. I found a bit at the bottom of the this page http://docs.moodle.org/dev/Cloning_a_theme that looks like the instructions I read on moodle.org at the time I did the first re-theming. Here's the section copied from that page:

Recipe for the Impatient

For those who want a minimal set of instructions to semi-blindly blast through this:

1. Copy [moodleroot]/theme/boxxie to [moodleroot]/theme/foxxie

2. Rename [moodleroot]/theme/foxxie/lang/en/theme_boxxie.php to [moodleroot]/theme/foxxie/lang/en/theme_foxxie.php

3. In [moodleroot]/theme/foxxie/lang/en/theme_foxxie.php, replace any instances of "boxxie" with "foxxie", likewise for "Boxxie" and "Foxxie".

4. Edit [moodleroot]/theme/foxxie/config.php to replace instance(s) of "boxxie" with "foxxie".

You can see this is considerably simpler. It seems though, that the theme I developed using this more simplistic approach is working all the way up to Moodle 2.4. Should I be worried?

 

 

Average of ratings: -
In reply to Alan Hovden

Re: Afterburner 2.4 - fix centre column width

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

If you are happy with your theme, you dont need to worry.

Here's an updated version of my Tutorial, which is based on the Afterburner theme.

http://docs.moodle.org/dev/Themes_2.2_how_to_clone_a_Moodle_2.2_theme

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Alan Hovden -

Thanks Mary! One more thing if you don't mind... it says in your tutorial to update all the theme names in settings.php, renderers.php and lib.php. I have not done that in my theme but it seems to be working alright. Is it necessary to change these files? Is there a reason for changing them that will make a difference to how the theme performs?

Average of ratings: -
In reply to Alan Hovden

Re: Afterburner 2.4 - fix centre column width

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

It all depends on which version of Afterburner you cloned, and also if your theme is inheriting the Afterburner theme. In other words is Afterburner your custom theme's parent theme?

Afterburner was added to Moodle core in Moodle 2.1.

In Moodle 2.2 some custom settings were added to Afterburner. So if this is the version you copied, then you should be renaming the settings.php, and lib.php otherwise you will not be able to use the custom settings for your theme.

In Moodle 2.3 the layout was changed to a fluid layout and specific functions added to enable the swapping of the side blocks for RTL (Right to Left) languages. So layout/default.php changed as did a lot of the CSS particularly the pagelayout.css

In Moodle 2.5 Afterburner will have a file-picker in the Custom setting page so that you can now upload a logo rather than just add the URL.

All these changes will make it necessary for you to rename these files if you choose to clone the 2.5 version. It's quite complex, but still achievable if you take care with the renaming .

Hope this answers your questions?

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Oscar Fudalan Jr. -

Hi Mary, we installed Moodle in a test server and it ran fine. I've always chosen Afterburner because of its Minimalist feel. I "liked" how the side columns appear -- they were just the right size. Now that we installed a later version of Moodle in our virtual server - for production/formal use, I was wondering why the side bars/columns now appear to be fat. Where do I edit that?

Average of ratings: -
In reply to Oscar Fudalan Jr.

Re: Afterburner 2.4 - fix centre column width

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

The best thing to do is reduce the width of the page-wrapper by adding:

#page-wrapper { width: 1024px;} in the Custom CSS box in the Afterburner settings page.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Oscar Fudalan Jr. -

Mary, you're a hero! This worked for the side columns however the "middle main" column has also reduced its size. Is there a script I can add to retain the mid-column's width, as in the original?

Average of ratings: -
In reply to Oscar Fudalan Jr.

Re: Afterburner 2.4 - fix centre column width

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Oscar,

If you look further up this thread, Mary has posted some css for the pagelayout for Darren that you could try - alternatively, look at Dietmar's useful tool for calculating the pagelayout you want http://dwagner.eu/moodle20tools/index.php

Richard

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Chris Elkin -

Hi Mary

Im also interested in reducing the width of my left and right columns within the afterburner 2.4 theme.

Is it possible to apply some comments to your code in order that I can bend my head around it.

Thanks 

Chris

Average of ratings: -
In reply to Chris Elkin

Re: Afterburner 2.4 - fix centre column width

by Andrew Gasiorowski -

Please can someone assist me with reducing the left and right column widths on the Afterburner theme. I want to reduce the left and right columns by 50%.

When editing the page_layout.CSS I don't get the results I need. I've tried all of the steps posted above to no avail.

I would appreciate any assistance as I have a very tight deadline on this project.

 

Average of ratings: -
In reply to Andrew Gasiorowski

Re: Afterburner 2.4 - fix centre column width

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

This is not an easy theme to change. As the calculations are based on a few factors and there for do not follow the normal pattern for a three column theme as described in this thread. Also the naming convention of the layout is slightly different too.  So all in all it is a bit complex.

If you could tell me what is the preferred width of the side blocks I'll recalculate the css style sheet for you, if that helps?

Cheers

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

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

Further to my last comment try adding this to your Custom CSS settings page. Be sure to enable Theme Designer Mode first. Let me know how it looks and I can adjust it if its not right.

#page-wrapper {
    max-width: 960px;
}
#region-main-box {
    right: 20%;
    width: 100%;
}
#region-pre-box {
    right: 60%;
}
#region-main {
    width: 60%;
    left: 100%;
}
#region-pre {
    width: 20%;
    left: 20%;
}
#region-post {
    width: 20%;
    left: 80%;
}

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Andrew Gasiorowski -

Hi Mary,

 
The page looks great with the custom css you provided me, the two side columns are exactly the size I want them to be. Is it possible to increase the page wrapper whilst maintaining the current size of the side columns? If that makes sense?
 
Cheers
Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Andrew Gasiorowski -

I would like to give it a similar layout to the formal white theme in terms of column sizes. But I don't know how to do that. Is this possible to do?

 

Cheers Mary smile

Average of ratings: -
In reply to Andrew Gasiorowski

Re: Afterburner 2.4 - fix centre column width

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

Yes it is possible but it's not as straightforward as you might imagine. It would be easier to make Formal White look like Afterburner which you could do quite easily, then you would have the best of both worlds.

Average of ratings: -
In reply to Mary Evans

Re: Afterburner 2.4 - fix centre column width

by Andrew Gasiorowski -

On the formal_white theme, how do I change the custom menu bar to red (similar to the screenshot I uploaded previously)?

And one last and final question, on the formal_white theme is it possible to make your site logo link to the homepage like in the afterburner theme?

Sorry for all of the questions.

Andy

Average of ratings: -