Moving block columns

Moving block columns

by Oliver Stearn -
Number of replies: 5

Hi all,

Ive been working on this theme which uses overlay as its base. Overlay is a 3 column theme where both block columns appear on the right. This wasnt a problem because I applied a small tweak courtesy of Mary Evans here which removed one of the blocks.

Anyway, It was later decided that we need 3 columns on course pages at least, which is achievable through config.php... you can have 2 columns site-wide and have 3 columns on course pages.

Ive got the theme as I want it, logos and all but the 2 columns appearing on the right is once again an issue. Id ideally like to move sidepre (the left column block) back over to the left of the page. Does anyone know if this is possible how to do this?

Using CSS and targeting #region-pre I moved the content of the column but not the background oddly enough. Im sure there will be a way of doing it with a layout script.

 

Any help much appreciated,

Oliver

Average of ratings: -
In reply to Oliver Stearn

Re: Moving block columns

by Oliver Stearn -

ok, in case anyone is remotely interested in this or, like me, thinks that having your blocks two deep is vile, i managed to move sidepre to the left of the page with css alone.

I will briefly outline the areas I targeted:

firstly in the themes config file (config.php) I got rid of 'side-post' from all page layouts except for 'course' and 'incourse'. This means that the only time I get a 3 column layout is when Im on a course page or in a course resource etc.

Then, within the theme style folder I had a bit of a fiddle with pagelayout.css. Firstly the page content itself needs to shift over to make room for the column, I simply commented out the negative margin on #region-main-box. I then went and changed the position of the column content (not including the background colour), side-pre needed to shift 800px to the left while side-post needed to shift into side-pres position (200px left).

The content is now over to the left of the page, it is however a little bit high and in a white void with no background (although side-post is looking sexy with its grey background + fade effects). Luckily this, and many other themes come with a little widget designed to extend the header (as you and I know it, not moodle). This is called #newheaderleft, I added some custom css to the theme field extending its width over the top of side-pre as it now stands and positioniong it.

 

This is where Im at, the only problem Ive still got after a small fiddle is that I need to add some padding to side-pre only when it appears to the left and not when it is the only block column. In retrospect move side-post, that way the only time you see it is when its in its left hand position, therefore you can add whatever css rules you want to perfect its position etc.

Average of ratings: -
In reply to Oliver Stearn

Re: Moving block columns

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

Oliver - I'd recommend taking a look at Dietmar's layout tool here to be able to do it properly. You may still need to fiddle a little bit as, from memory Overlay uses a slightly different structure, particularly around the header itself.

http://dwagner.eu/moodle20tools/

Richard

(from someone who actually quite likes both block sidebars on one side and doesn't think its 'vile'!!!)

Average of ratings: -
In reply to Richard Oelmann

Re: Moving block columns

by Oliver Stearn -

Thanks Richard, Ive come across this tool before and it does do the job of getting the block back over to the left but it also gets rid of all the block styles, which I quite like. I thought that if I was going to re-impliment all the styles into a blank (generated) pagelayout.css file, I might aswell just alter the positions in the original.

 

In retrospect all I did was make some very basic positioning tweaks (finding the proper handles was what I really wanted help with) to a copy of the original file. Am I missing something, is this not doing it 'properly'?

Tbh I like the cleanness of a 2 column layout and was a bit put out by having to change back to 3 :p Weve got some staff who still use a 1024 SW and having 2 columns of blocks doesnt leave them much width for content in some cases. Vile may have been an overstatement, I just thought it could get very messy over that side of the page and it would affect the ease of support (saying "click 'question bank' over to the left of the page")

Oli.

Average of ratings: -
In reply to Oliver Stearn

Re: Moving block columns

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

Well, all I meant by doing it properly is that your post is full of things like the changes you have made not taking the background colour across, it sitting a bit high and then having to fiddle the header as well, while Dietmar's tool should sort all that quite easily.

In terms of your comment that Dietmar's tool removes all the styles I'm not sure what you mean -- it implements position, margin and padding but doesn't apply or override any colour scheme or graphic styles at all. While your existing pagelayout file may do within the same selectors, there is nothing to prevent you copying the layout bits from Dietmar's tool in place of the layout bits of the current file, or copying and pasting the style elements into the generated one.

Personally I always try to separate the layout structure from the style anyway to avoid such issues - makes it much easier if your staff do change their mind about the layout after you've done all the work, you just swap out the layout file smile

Alternatively I would recommend looking at one of the responsive themes (Zebra/Krystle/or any of the bootstrapbase themes) which can be set to use 3 column for wide screens, 2 column for smaller (Zebra and Krystle allow you to set the breakpoints in the settings page) and 1 for mobile/tablet.

Average of ratings: -
In reply to Oliver Stearn

Re: Moving block columns

by Mary Evans -

Hi, to get a normal three column page it would have been easier just copying Canvas themes general.php and adapt it to suit your own theme style.  Adding that and then see how Canvas styles it then adjust it.

Average of ratings: -