Clean theme layout

Clean theme layout

Rob Bussell -
回帖数：9

I am trying to create a new theme.  I am starting from Clean.  I am trying to make the side blocks smaller in width, but am having trouble.  I think I understand bootstrap, but I guess I am confused with some of the Moodle stuff.

In Clean, 3 column layout is such:

<div id="page-content" class="row-fluid">
<div id="<?php echo $regionbsid ?>" class="span9">
<div class="row-fluid">
<section id="region-main" class="span8 pull-right">
<?php
echo $OUTPUT->course_content_header();
echo $OUTPUT->main_content();
echo $OUTPUT->course_content_footer();
?>
</section>
<?php echo $OUTPUT->blocks('side-pre', 'span4 desktop-first-column'); ?>
</div>
</div>
<?php echo $OUTPUT->blocks('side-post', 'span3'); ?>
</div>

The side-pre and main content are in a span9 container and the side-post blocks are in a span3.  Trying to lessen the width with the span classes results in uneven side blocks.  I tried creating a three column layout that put side-pre blocks in a different container than the main, and the result worked, unless I put all of the blocks on one side, then they drop underneath.

 

Any help would be appreciated.

 

Rob

平均分： -
回复Rob Bussell

Re: Clean theme layout

Mary Evans -

It all hinges on the width you want the side blocks to be.

If you want them to be say 'span2' then you would need to change...

  1. span3 -> span2
  2. span4 -> span3
  3. span8 -> span9
  4. span9 -> span10

This is so that...

  • 1 + 4 = span12
  • 2 + 3 = span12

to keep the balance between the nested (span8 + span4)  within span9 match up to the nested (span3 + span9) within span10  in your new reworked layout.

At the end of the day it's all down to simple maths...so your new layout should look something like this...

<div id="page-content" class="row-fluid">
<div id="<?php echo $regionbsid ?>" class="span10">
<div class="row-fluid">
<section id="region-main" class="span9 pull-right">
<?php
echo $OUTPUT->course_content_header();
echo $OUTPUT->main_content();
echo $OUTPUT->course_content_footer();
?>
</section>
<?php echo $OUTPUT->blocks('side-pre', 'span3 desktop-first-column'); ?>
</div>
</div>
<?php echo $OUTPUT->blocks('side-post', 'span2'); ?>
</div>

平均分： -
回复Mary Evans

Re: Clean theme layout

Rob Bussell -

Mary,

 

Thank you for your reply.

I tried what you suggested before posting.  It results in different widths for the pre and post blocks.  This is because the pre and region-main are in a span9.  So a span3 inside of a span9 is larger than a span2 inside of the page-content div, which by default should be a span12.

I will keep playing with it and see what I can come up with.  I can make this as a straight bootstrap html/css layout with no problems.  It goes to hell when I start adding the Moodle elements.

 

Thanks again,

 

Rob

平均分： -
回复Rob Bussell

Re: Clean theme layout

Mary Evans -

The span9 and span3 in the new layout should be inside span10 which has a span2 along side it. Diagrammatically it should look like so...

|<--------------------------------span10--------------------------------->|span2(region-post) 2/12|
|span3 (region-pre) (3/12) x (10/12)| span9 (region-main) (9/12) x (10/12)|
平均分： -
回复Mary Evans

Re: Clean theme layout

Rob Bussell -

I did this:

 

<div id="page-content" class="row-fluid">
<div id="<?php echo $regionbsid ?>" class="span10">
<div class="row-fluid">
<section id="region-main" class="span9 pull-right">
<?php
echo $OUTPUT->course_content_header();
echo $OUTPUT->main_content();
echo $OUTPUT->course_content_footer();
?>
</section>
<?php echo $OUTPUT->blocks('side-pre', 'span3 desktop-first-column'); ?>
</div>
</div>
<?php echo $OUTPUT->blocks('side-post', 'span2'); ?>
</div>

 

Still get uneven width side blocks.

Did this:

<div id="page" class="container-fluid">
<div id="page-content" class="row-fluid">

<?php echo $OUTPUT->blocks('side-pre', 'span2 desktop-first-column'); ?>

<div id="region-main" class="span8 pull-left">
<div id="page-navbar" class="clearfix">
<div class="breadcrumb-nav"><?php echo $OUTPUT->navbar(); ?></div>
<nav class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></nav>
</div>
<h2 class="pagetitle"><span><?php echo $PAGE->title ?></span></h2>
<?php
echo $OUTPUT->course_content_header();
echo $OUTPUT->main_content();
echo $OUTPUT->course_content_footer();
?>
</div>

<?php echo $OUTPUT->blocks('side-post', 'span2 pull-right'); ?>
</div>
</div>

in CSS added this:

.empty-region-side-pre #region-main {
float:left;
width:80%;
}

.empty-region-side-post.used-region-side-pre #region-main.span8 {
  width:80%;
}

It seems to look alright with side blocks in both columns and if side blocks are in one column.

Anything wrong about this jump out at anyone?

 

Thanks,


Rob

 

平均分： -
回复Rob Bussell

Re: Clean theme layout

Mary Evans -

umm...looks odd to me.

Am just about to do some testing duh!!! on this now so will get back to you ASAP

平均分： -
回复Rob Bussell

Re: Clean theme layout

Mary Evans -

It does look really odd doesn't it?

平均分： -
回复Mary Evans

Re: Clean theme layout

Rob Bussell -

My code is doing whatI want it to do on every page I have tested so far.  Are you seeing it odd, or the other code as odd?

平均分： -
回复Rob Bussell

Re: Clean theme layout

Mary Evans -

The way I said to do it in the first place is odd. As you say the side blocks are markedly different.

If you have it working as you want it well that's OK.

平均分： -
回复Rob Bussell

Re: Clean theme layout

Gareth J Barnard -
Core developers的头像 Particularly helpful Moodlers的头像 Plugin developers的头像

Dear Rob,

In addition to what Mary is saying you may find this -> http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem <- useful.

Also if you want to learn more about columns / layouts etc. please look at MDL-40065.  If changing to use span9 instead of span8 etc. then it's worth looking at 'bootstrapbase/less/moodle/core.less' section at the top of '/** Page layout CSS starts **/' if things go odd with empty blocks etc.  If they do, then consider compiling your own version of the LESS files.  And if the blocks go really astray, then look at MDL-39824 and the Shoelace theme as I do something a little different.

Cheers,

Gareth

平均分： -