Moodle
  1. Moodle
  2. MDL-26893

theme sky_high: right column disappears in .side-post-only layout

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.0.5, 2.1.2, 2.2
    • Fix Version/s: 2.0.6, 2.1.3
    • Component/s: Themes
    • Labels:
    • Environment:
      all browsers
    • Testing Instructions:
      Hide

      1. Before selecting Sky High in Theme Selector make sure ALL blocks are on the right-hand side (side-post).
      2. Select Sky High theme in normal way taking particular note of the SCREENSHOT of what the theme should look like when side-pre is visible.
      3. Once selected CHECK page layout, especially "Side Post ONLY". Is it consistent throughout, including when side blocks are docked?
      4. Now enable EDITING and attempt to MOVE a block or two. You should be able to move a block from SIDE-POST (right) to SIDE-PRE (left).
      5. With blocks in position (left and right) disable editing, and test for consistency, when docking Side-Pre (left) and then Side-Post (right). Normally when all blocks from Side-Pre have been docked the page reverts to a side-post-only layout. This is true also when Side-Pre is still in place and Side-Post is docked.
      6. FURTHER TESTING IF TIME PERMITS: Start by going to "Sky High" Custom Settings page (Site Administration > Appearance > Themes -> CLICK the link Sky High to bring you to the custom settings page for this theme. Here you can change the width settings for both side-pre and side-post. Choose different settings. Save changes and test as per 1 to 5 above.

      Show
      1. Before selecting Sky High in Theme Selector make sure ALL blocks are on the right-hand side (side-post). 2. Select Sky High theme in normal way taking particular note of the SCREENSHOT of what the theme should look like when side-pre is visible. 3. Once selected CHECK page layout, especially "Side Post ONLY". Is it consistent throughout, including when side blocks are docked? 4. Now enable EDITING and attempt to MOVE a block or two. You should be able to move a block from SIDE-POST (right) to SIDE-PRE (left). 5. With blocks in position (left and right) disable editing, and test for consistency, when docking Side-Pre (left) and then Side-Post (right). Normally when all blocks from Side-Pre have been docked the page reverts to a side-post-only layout. This is true also when Side-Pre is still in place and Side-Post is docked. 6. FURTHER TESTING IF TIME PERMITS: Start by going to "Sky High" Custom Settings page (Site Administration > Appearance > Themes -> CLICK the link Sky High to bring you to the custom settings page for this theme. Here you can change the width settings for both side-pre and side-post. Choose different settings. Save changes and test as per 1 to 5 above.
    • Affected Branches:
      MOODLE_20_STABLE, MOODLE_21_STABLE, MOODLE_22_STABLE
    • Fixed Branches:
      MOODLE_20_STABLE, MOODLE_21_STABLE
    • Pull Master Branch:
    • Rank:
      16521

      Description

      As well as adding the following CSS rule to pagelayout.css

      .side-post-only #page-content #region-main-box #region-post-box #region-pre

      { left: 0; width: 0;}

      The position of right column in the file pagelayout.css must be changed from

      .side-post-only #page-content #region-main-box #region-post-box #region-post

      { left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]];}

      to

      .side-post-only #page-content #region-main-box #region-post-box #region-post

      { left: [[setting:regionwidth]]; width: [[setting:regionwidth]];}

      The "header" should be changed from

      /*********************************************************************************************

      left column: 230px
      right column: 330px
      padding left/right column: 10px
      padding center column: 30px

      **********************************************************************************************/

      to

      /*********************************************************************************************

      column width: [[setting:regionwidth]]

      **********************************************************************************************/

      In the attachment you can find my proposal for a new pagelayout.css!

      1. pagelayout.css
        4 kB
        Dietmar Wagner
      1. sky1.jpg
        17 kB
      2. sky2.jpg
        30 kB
      3. sky3.jpg
        23 kB
      4. sky4.jpg
        33 kB

        Issue Links

          Activity

          Hide
          Mary Evans added a comment -

          Thanks Dietmar, I'll do a bit of testing old(original) compared to new(improved), and if all goes smoothly will put in a Pull-Request. After that it's out of my hands and into the lap of the Gods!

          Thanks for the pagelayout.css this will make my job much easier now!

          Cheers
          Mary

          Show
          Mary Evans added a comment - Thanks Dietmar, I'll do a bit of testing old(original) compared to new(improved), and if all goes smoothly will put in a Pull-Request. After that it's out of my hands and into the lap of the Gods! Thanks for the pagelayout.css this will make my job much easier now! Cheers Mary
          Hide
          Mary Evans added a comment -

          I think I've found the fix for the displaced columns in this theme. It's been a real pain to do...but like all things Moodle, you don't half learn something! So in effect all the hard work pays off in the end. Let's hope the Pull-Request is simple this time

          /* @end */

          /*******************/
          /** side pre only **/
          /*******************/
          .side-pre-only #region-main

          {left: 100%; width: 73.5%; background: white;}

          .side-pre-only #region-pre

          {left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]];}

          .side-pre-only #region-post

          {width:0%; left:0%;}

          .has_dock_left_vertical.side-pre-only #region-main

          {left: 100%; width: 73.5%; background: white;}

          .has_dock_left_vertical.side-pre-only #region-pre

          {left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]];}

          .has_dock_left_vertical.side-pre-only #region-post

          {width:0%; left:0%;}

          /********************/
          /** side post only **/
          /********************/
          .side-post-only #region-main

          {left: 100%; width: 73.5%; background: white;}

          .side-post-only #region-pre

          {width:0%; left:0%;}

          .side-post-only #region-post

          {left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]];}

          .has_dock_left_vertical.side-post-only #region-main

          {left: 100%; width: 73.5%; background: white;}

          .has_dock_left_vertical.side-post-only #region-pre

          {width:0%; left:0%;}

          .has_dock_left_vertical.side-post-only #region-post

          {left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]];}

          /*******************************/
          /** no side blocks whatsoever **/
          /*******************************/
          .content-only #region-main

          { left: 100%; width: 100%; background: white;}

          .content-only #region-pre

          {width:0%; left:0%;}

          .content-only #region-post

          {width:0%; left:0%;}
          Show
          Mary Evans added a comment - I think I've found the fix for the displaced columns in this theme. It's been a real pain to do...but like all things Moodle, you don't half learn something! So in effect all the hard work pays off in the end. Let's hope the Pull-Request is simple this time /* @end */ /*******************/ /** side pre only **/ /*******************/ .side-pre-only #region-main {left: 100%; width: 73.5%; background: white;} .side-pre-only #region-pre {left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]];} .side-pre-only #region-post {width:0%; left:0%;} .has_dock_left_vertical.side-pre-only #region-main {left: 100%; width: 73.5%; background: white;} .has_dock_left_vertical.side-pre-only #region-pre {left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]];} .has_dock_left_vertical.side-pre-only #region-post {width:0%; left:0%;} /********************/ /** side post only **/ /********************/ .side-post-only #region-main {left: 100%; width: 73.5%; background: white;} .side-post-only #region-pre {width:0%; left:0%;} .side-post-only #region-post {left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]];} .has_dock_left_vertical.side-post-only #region-main {left: 100%; width: 73.5%; background: white;} .has_dock_left_vertical.side-post-only #region-pre {width:0%; left:0%;} .has_dock_left_vertical.side-post-only #region-post {left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]];} /*******************************/ /** no side blocks whatsoever **/ /*******************************/ .content-only #region-main { left: 100%; width: 100%; background: white;} .content-only #region-pre {width:0%; left:0%;} .content-only #region-post {width:0%; left:0%;}
          Hide
          Dietmar Wagner added a comment - - edited

          Hi Mary, your pagelayout.css + config.php works only on the frontpage with a little bit too much margin on the right side of main-region, if side-pre is docked. In the course-view the side-post does not appear, unless you turn editing on!? We should take time for further testings!

          Cheers
          Dietmar

          Show
          Dietmar Wagner added a comment - - edited Hi Mary, your pagelayout.css + config.php works only on the frontpage with a little bit too much margin on the right side of main-region, if side-pre is docked. In the course-view the side-post does not appear, unless you turn editing on!? We should take time for further testings! Cheers Dietmar
          Hide
          Dietmar Wagner added a comment -

          Hi Mary,

          I found two options (let me say: I hope so) to solve our problem. I think our problem are the .side-post-only course-views (although I don't know why):

          1) If you take the original pagelayout.css and overwrite the .side-post-only rules with the following everything seems to be fine:

          /* @group Post Side Only */

          .side-post-only #page-content #region-main-box

          { margin-left: 0px; }

          .side-post-only #page-content #region-main-box #region-post-box

          { margin-left: -[[setting:regionwidth]]; }

          .side-post-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main

          { margin-left: [[setting:regionwidth]]; }

          .pagelayout-frontpage.side-post-only #page-content #region-main-box #region-post-box #region-post,
          .editing.side-post-only #page-content #region-main-box #region-post-box #region-post

          { left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]]; }

          .side-post-only #page-content #region-main-box #region-post-box #region-post

          { left: [[setting:regionwidth]]; width: [[setting:regionwidth]]; }

          .has_dock.side-post-only .page-middle #region-main-box #region-post-box #region-main-wrap #region-main

          { margin-left: 200px; }

          2) Change some lines in the config.php of sky_high:

          from

          'course' => array(
          'file' => 'general.php',
          'regions' => array('side-pre', 'side-post'),
          'defaultregion' => 'side-post'
          ),

          to

          'course' => array(
          'file' => 'general.php',
          'regions' => array('side-pre'),
          'defaultregion' => 'side-pre'
          ),

          Let me know your opinion!

          Cheers
          Dietmar

          Show
          Dietmar Wagner added a comment - Hi Mary, I found two options (let me say: I hope so) to solve our problem. I think our problem are the .side-post-only course-views (although I don't know why): 1) If you take the original pagelayout.css and overwrite the .side-post-only rules with the following everything seems to be fine: /* @group Post Side Only */ .side-post-only #page-content #region-main-box { margin-left: 0px; } .side-post-only #page-content #region-main-box #region-post-box { margin-left: -[[setting:regionwidth]]; } .side-post-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main { margin-left: [[setting:regionwidth]]; } .pagelayout-frontpage.side-post-only #page-content #region-main-box #region-post-box #region-post, .editing.side-post-only #page-content #region-main-box #region-post-box #region-post { left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]]; } .side-post-only #page-content #region-main-box #region-post-box #region-post { left: [[setting:regionwidth]]; width: [[setting:regionwidth]]; } .has_dock.side-post-only .page-middle #region-main-box #region-post-box #region-main-wrap #region-main { margin-left: 200px; } 2) Change some lines in the config.php of sky_high: from 'course' => array( 'file' => 'general.php', 'regions' => array('side-pre', 'side-post'), 'defaultregion' => 'side-post' ), to 'course' => array( 'file' => 'general.php', 'regions' => array('side-pre'), 'defaultregion' => 'side-pre' ), Let me know your opinion! Cheers Dietmar
          Hide
          Mary Evans added a comment - - edited

          I haven't tested this yet, but reading it, it makes sense. I don't much care for there being a specific layout for the frontpage as this should not need to happen. Although there are several similar views in the css, which suggests that these are fixes for odd looking pages.

          I think the real problem is that there should a 'blogstyle' base theme in Moodle core for this 'blog style' layout. Then all of this could be sorted out, leaving the theme designer free just to style the theme.

          If you follow this Blog style in http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm you get a complete picture of the layout, which makes it easier to visualise and work with.

          I'll get back to you after I've tested your latest fix.

          Cheers
          Mary

          Show
          Mary Evans added a comment - - edited I haven't tested this yet, but reading it, it makes sense. I don't much care for there being a specific layout for the frontpage as this should not need to happen. Although there are several similar views in the css, which suggests that these are fixes for odd looking pages. I think the real problem is that there should a 'blogstyle' base theme in Moodle core for this 'blog style' layout. Then all of this could be sorted out, leaving the theme designer free just to style the theme. If you follow this Blog style in http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm you get a complete picture of the layout, which makes it easier to visualise and work with. I'll get back to you after I've tested your latest fix. Cheers Mary
          Hide
          Mary Evans added a comment -

          Seems to work OK Dietmar!
          I think we have a winner!

          Mary

          Show
          Mary Evans added a comment - Seems to work OK Dietmar! I think we have a winner! Mary
          Hide
          Dietmar Wagner added a comment - - edited

          And the winner is ...
          ... the moodle community!

          I'm glad that we can get it work. But it somehow gives little satisfaction.

          Cheers
          Dietmar

          Show
          Dietmar Wagner added a comment - - edited And the winner is ... ... the moodle community! I'm glad that we can get it work. But it somehow gives little satisfaction. Cheers Dietmar
          Hide
          Mary Evans added a comment -

          @Dietmar let's hope this fixes the little critter!

          Show
          Mary Evans added a comment - @Dietmar let's hope this fixes the little critter!
          Hide
          Dietmar Wagner added a comment -

          Hi Mary,
          thanks for coming back to this issue.
          I fear it's not the fix we are looking for :'-(.
          If you turn editing on the right column jumps to the left and hides part of the content!?
          That's what I mean when I said that the body classes aren't compatible.
          I think we should hope that only a few of the sky-high users like post-only courses .

          Cheers
          Dietmar

          ... and again thanks for your great work here and in the themes forum!

          Show
          Dietmar Wagner added a comment - Hi Mary, thanks for coming back to this issue. I fear it's not the fix we are looking for :'-(. If you turn editing on the right column jumps to the left and hides part of the content!? That's what I mean when I said that the body classes aren't compatible. I think we should hope that only a few of the sky-high users like post-only courses . Cheers Dietmar ... and again thanks for your great work here and in the themes forum!
          Hide
          Sam Hemelryk added a comment -

          Hi guys,

          I've just been looking at this now - a quick bit of testing and the changes in pagelayout make sense.
          However why are you changing the definition of the course layout?
          That change makes me nervous - why change it there but no where else (how is that one page different)?

          If there is a good reason behind it then I think we can consider it however it would be unlikely to be applied to the STABLE branches as people will have come to expect the two block regions on a courses front page and designed there courses around it.

          One last thing - is there any chance of getting better testing instructions, perhaps even screenshots illustrating the different problems.
          I've noticed that things jump around considerably depending upon whether editing is on or off, and what browsers does this need to be tested in?

          Cheers
          Sam

          Show
          Sam Hemelryk added a comment - Hi guys, I've just been looking at this now - a quick bit of testing and the changes in pagelayout make sense. However why are you changing the definition of the course layout? That change makes me nervous - why change it there but no where else (how is that one page different)? If there is a good reason behind it then I think we can consider it however it would be unlikely to be applied to the STABLE branches as people will have come to expect the two block regions on a courses front page and designed there courses around it. One last thing - is there any chance of getting better testing instructions, perhaps even screenshots illustrating the different problems. I've noticed that things jump around considerably depending upon whether editing is on or off, and what browsers does this need to be tested in? Cheers Sam
          Hide
          Dietmar Wagner added a comment -

          Hi Sam,
          Mary and I are thinking about this issue (that affects somehow all themes with a blog layout - nonzero, overlay) for several months. I'm sorry for the confusion.

          Here again the testing instructions:

          1. Take theme standard, go to normal course (topics, weekly) and push all blocks to the very right column. Turn editing off!

          2. Change to theme sky_high as it is in the actual moodle-latest-21.

          [pagelayout.css >> .side-post-only #page-content #region-main-box #region-post-box #region-post

          { left: [[setting:regionsumwidth]]; width: [[setting:regionwidth]]; }

          ]

          The right column (region-post) disappears completely. (sky1)

          4. Turn editing on! The right column jumps into it's normal position! (sky2)
          [Docking blocks is ok!]

          5. Turn moving blocks on! You will see, that there is no chance to move a block to a region-pre. (sky3)
          But if you dock a block in this situation (that means before really move a block), a gap opens and you are able to move blocks to region-pre. [Really funny] (sky4)

          6. If you change the line mentioned above according to Marys idea to

          .side-post-only #page-content #region-main-box #region-post-box #region-post

          { left: [[setting:regionwidth]]; width: [[setting:regionwidth]]; }

          the course layout looks fine if you have turned editing off. But if you turn editing on the right column jumps towards the middle of the page!

          This confusing behaviour seems to be browser independent.

          Cheers
          Dietmar

          Please forget the silly idea to change course layout in config.php!

          Show
          Dietmar Wagner added a comment - Hi Sam, Mary and I are thinking about this issue (that affects somehow all themes with a blog layout - nonzero, overlay) for several months. I'm sorry for the confusion. Here again the testing instructions: 1. Take theme standard, go to normal course (topics, weekly) and push all blocks to the very right column. Turn editing off! 2. Change to theme sky_high as it is in the actual moodle-latest-21. [pagelayout.css >> .side-post-only #page-content #region-main-box #region-post-box #region-post { left: [[setting:regionsumwidth]]; width: [[setting:regionwidth]]; } ] The right column (region-post) disappears completely. (sky1) 4. Turn editing on! The right column jumps into it's normal position! (sky2) [Docking blocks is ok!] 5. Turn moving blocks on! You will see, that there is no chance to move a block to a region-pre. (sky3) But if you dock a block in this situation (that means before really move a block), a gap opens and you are able to move blocks to region-pre. [Really funny] (sky4) 6. If you change the line mentioned above according to Marys idea to .side-post-only #page-content #region-main-box #region-post-box #region-post { left: [[setting:regionwidth]]; width: [[setting:regionwidth]]; } the course layout looks fine if you have turned editing off. But if you turn editing on the right column jumps towards the middle of the page! This confusing behaviour seems to be browser independent. Cheers Dietmar Please forget the silly idea to change course layout in config.php!
          Hide
          Mary Evans added a comment -

          @Sam

          Might be an idea NOT to let this go through. In fact, in light of what Dietmar has said, I hope it does not get through!
          I changed the course page to look more like the admin page, to give more room when editing, however I did not take into account how people expect a course page to look.

          @Dietmar
          Thanks for the detailed instructions, this make me understand now how you managed to see something I didn't.
          As a matter of interest, can you list all the possibilities I need to check, before I submit this again?
          Does this same behaviour occur in other themes too?

          By the way, there is a set layout for a 2 Column Blog Style in the Matthew James Taylor site, I'll reread that article again and see if there are any changes I can add to this theme's page layout to make it work better.

          Cheers

          Show
          Mary Evans added a comment - @Sam Might be an idea NOT to let this go through. In fact, in light of what Dietmar has said, I hope it does not get through! I changed the course page to look more like the admin page, to give more room when editing, however I did not take into account how people expect a course page to look. @Dietmar Thanks for the detailed instructions, this make me understand now how you managed to see something I didn't. As a matter of interest, can you list all the possibilities I need to check, before I submit this again? Does this same behaviour occur in other themes too? By the way, there is a set layout for a 2 Column Blog Style in the Matthew James Taylor site, I'll reread that article again and see if there are any changes I can add to this theme's page layout to make it work better. Cheers
          Hide
          Dietmar Wagner added a comment -

          Hi Mary,

          I think all blog-style themes have similar problems (sky_high, nonzero, overlay). And as it was me who wrote pagelayout.css, lib.php and settings.php for nonzero one year ago I'm eagerly interested on understanding the strange behaviour of those themes .

          What should be tested?

          All combinations of the body classes editing, blocks-moving, has_dock in a side-post-only course (e.g. topics) and on a side-post-only frontpage (yes, sometimes it makes a difference) should be investigated.

          And - what makes things more complicated - it makes a difference in which order you turn on or off these body classes.
          Example for sky_high: side-post-only course, turn editing on, turn blocks-moving on without moving a block, turn has_dock on (dock a block)> gap opens, turn has_dock off (undock the block))>gap stays.

          A special issue with nonzero: If you turn editing on the body class side-post-only disappears. Perhaps it's not important, but it's astonishing. I worked some hours on this issue but can't find the culprit. So I tried to transform nonzero to a version that uses percentages for the column widths and all works fine so far!?
          [You may have it if you like.]

          Let me know if and how I can help you.

          I will take a look again at Taylors site (3 and 2 column blog style) as well.

          Cheers
          Dietmar

          Show
          Dietmar Wagner added a comment - Hi Mary, I think all blog-style themes have similar problems (sky_high, nonzero, overlay). And as it was me who wrote pagelayout.css, lib.php and settings.php for nonzero one year ago I'm eagerly interested on understanding the strange behaviour of those themes . What should be tested? All combinations of the body classes editing, blocks-moving, has_dock in a side-post-only course (e.g. topics) and on a side-post-only frontpage (yes, sometimes it makes a difference) should be investigated. And - what makes things more complicated - it makes a difference in which order you turn on or off these body classes. Example for sky_high: side-post-only course, turn editing on, turn blocks-moving on without moving a block, turn has_dock on (dock a block) > gap opens, turn has_dock off (undock the block)) >gap stays. A special issue with nonzero: If you turn editing on the body class side-post-only disappears. Perhaps it's not important, but it's astonishing. I worked some hours on this issue but can't find the culprit. So I tried to transform nonzero to a version that uses percentages for the column widths and all works fine so far!? [You may have it if you like.] Let me know if and how I can help you. I will take a look again at Taylors site (3 and 2 column blog style) as well. Cheers Dietmar
          Hide
          Mary Evans added a comment -

          Hi Dietmar,

          This is indeed a phenomena which needs taming

          I have thought many times that it might be a time saver if there were a set of child theme templates based on BASE theme, where each template uses a specific type of pagelayout: 3 column (default), 2 column (blog-style-left), 2 column (blog-style-right), 3 column (blog-style-left), 3 column (blog-style-right). These distinct child theme templates would themselves only contain the minimum of files such as: template-zyx/config.php, template-zyx/lang/en/theme_template-zyx.php, template-zyx/style/template-zyx.css only. The TEMPLATES could then be employed in any theme which wanted to base its structure on one of the pagelayouts, thus leaving the styling of the 'SKIN' to the theme designer.

          We seem to be going around in circles since last year, and keep coming back to page layout.

          Do you remember this discussion thread? http://moodle.org/mod/forum/discuss.php?d=148688#p652362

          It keeps coming back to haunt us! LOL

          Back to the drawing board as they say.

          Cheers
          Mary

          Show
          Mary Evans added a comment - Hi Dietmar, This is indeed a phenomena which needs taming I have thought many times that it might be a time saver if there were a set of child theme templates based on BASE theme, where each template uses a specific type of pagelayout: 3 column (default), 2 column (blog-style-left), 2 column (blog-style-right), 3 column (blog-style-left), 3 column (blog-style-right). These distinct child theme templates would themselves only contain the minimum of files such as: template-zyx/config.php, template-zyx/lang/en/theme_template-zyx.php, template-zyx/style/template-zyx.css only. The TEMPLATES could then be employed in any theme which wanted to base its structure on one of the pagelayouts, thus leaving the styling of the 'SKIN' to the theme designer. We seem to be going around in circles since last year, and keep coming back to page layout. Do you remember this discussion thread? http://moodle.org/mod/forum/discuss.php?d=148688#p652362 It keeps coming back to haunt us! LOL Back to the drawing board as they say. Cheers Mary
          Hide
          Mary Evans added a comment - - edited

          Hi Dietmar,

          Further to my last comment.
          In the pagelayout.css you attached here in our last effort to fix "Sky High", you suggested two changes:-

          1. to change the CSS header
          2. change the following CSS for .side-post-only
          {code}
           .side-post-only #page-content #region-main-box #region-post-box #region-post {
             left: [[setting:regionwidthdouble]]; 
             width: [[setting:regionwidth]]; } 
          to
           .side-post-only #page-content #region-main-box #region-post-box #region-post { 
             left: [[setting:regionwidth]];
             width: [[setting:regionwidth]];} 
          {code}
          

          Both of which I submitted in this current Integration Review. However, there is one other CSS item I also added which was to make

           .side-post-only #page-content #region-pre {width: 0;} 
          

          I'm going over this all again now and thought I just better get this clear just in case you had missed that.

          Thanks

          Show
          Mary Evans added a comment - - edited Hi Dietmar, Further to my last comment. In the pagelayout.css you attached here in our last effort to fix "Sky High", you suggested two changes:- 1. to change the CSS header 2. change the following CSS for .side-post-only {code} .side-post-only #page-content #region-main-box #region-post-box #region-post { left: [[setting:regionwidthdouble]]; width: [[setting:regionwidth]]; } to .side-post-only #page-content #region-main-box #region-post-box #region-post { left: [[setting:regionwidth]]; width: [[setting:regionwidth]];} {code} Both of which I submitted in this current Integration Review. However, there is one other CSS item I also added which was to make .side-post-only #page-content #region-pre {width: 0;} I'm going over this all again now and thought I just better get this clear just in case you had missed that. Thanks
          Hide
          Sam Hemelryk added a comment -

          Hi guys,

          Thanks for the instructions and the continued discussion and investigation.
          I'm sending this back this week - lets be 100% sure about the problem and the solution.

          Cheers
          Sam

          Show
          Sam Hemelryk added a comment - Hi guys, Thanks for the instructions and the continued discussion and investigation. I'm sending this back this week - lets be 100% sure about the problem and the solution. Cheers Sam
          Hide
          Dietmar Wagner added a comment -

          Hi Mary,
          I read your (and Sam's) comments. I'm a little bit short of time during this week. So I'll be back as soon as possible!

          Cheers
          Dietmar

          Show
          Dietmar Wagner added a comment - Hi Mary, I read your (and Sam's) comments. I'm a little bit short of time during this week. So I'll be back as soon as possible! Cheers Dietmar
          Hide
          Dietmar Wagner added a comment -

          Hi Mary,

          yes, I remember the first exiting weeks with the new theme engine and our discussion thread. And you are right with your idea according to 5 (or 10: pixel/percentage) basic templates. Things would be easier! We can talk about that later again.

          Back to sky_high!

          I found some time for experimenting with sky_high. And I think/hope successfull.

          If we take your ideas and

          1. change the the value for .side-post-only #page-content #region-main-box #region-post-box #region-post

          { left ...}

          2. add

          .side-post-only #page-content #region-main-box #region-post-box #region-pre

          {width: 0;}

          the body classes turn editing on/off, docking are working fine. My compliments! I was not able to see that the rule for #region-pre was missing!

          But if you turn blocks-moving on you are not able to move blocks to side-pre. You are prisoned in side-post-only. Ok, you can change to standard ... and ..., oops. (You should have a look at this, Mary!)

          My proposal for sky_high:

          3. Add (below .has_dock.side-post-only .page-middle) a set of rules for .blocks-moving (the same rules as for normal layout only with a selector "prefix")

          .blocks-moving.side-post-only #page-content #region-main-box

          { float: left; margin-left: -[[setting:regionwidth]]; position: relative; width: 200%; right: 100%; }

          .blocks-moving.side-post-only #page-content #region-main-box #region-post-box

          { float: left; margin-left: -[[setting:regionwidth]]; width: 100%; border-right: 2px solid #98bcd6; background: url([[pix:theme|top_bg]]) repeat-x top #fff; }

          .blocks-moving.side-post-only #page-content #region-main-box #region-post-box #region-main-wrap

          { float: left; width: 50%; }

          .blocks-moving.side-post-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main

          { overflow: hidden; position: relative; margin-left: [[setting:regionwidthdouble]]; left: 100%; }

          .blocks-moving.side-post-only #page-content #region-main-box #region-post-box #region-pre

          { float: right; position: relative; left: [[setting:leftregionwidthmargin]]; width: [[setting:regionwidth]]; background: transparent; }

          .blocks-moving.side-post-only #page-content #region-main-box #region-post-box #region-post

          { float: right; position: relative; left: [[setting:rightregionwidthmargin]]; width: [[setting:regionwidth]]; background: transparent; }

          and a gap will open on side-pre if you want to move a block and e v e r y t h i n g looks fine - in a course a n d on the frontpage.
          [I know we don't need all these selectors and rules. But that can be done later. Remark: It's important to have the full path for the selectors - I think!?!]

          Mary, it's your turn again.

          Cheers
          Dietmar

          Show
          Dietmar Wagner added a comment - Hi Mary, yes, I remember the first exiting weeks with the new theme engine and our discussion thread. And you are right with your idea according to 5 (or 10: pixel/percentage) basic templates. Things would be easier! We can talk about that later again. Back to sky_high! I found some time for experimenting with sky_high. And I think/hope successfull. If we take your ideas and 1. change the the value for .side-post-only #page-content #region-main-box #region-post-box #region-post { left ...} 2. add .side-post-only #page-content #region-main-box #region-post-box #region-pre {width: 0;} the body classes turn editing on/off, docking are working fine. My compliments! I was not able to see that the rule for #region-pre was missing! But if you turn blocks-moving on you are not able to move blocks to side-pre. You are prisoned in side-post-only. Ok, you can change to standard ... and ..., oops. (You should have a look at this, Mary!) My proposal for sky_high: 3. Add (below .has_dock.side-post-only .page-middle) a set of rules for .blocks-moving (the same rules as for normal layout only with a selector "prefix") .blocks-moving.side-post-only #page-content #region-main-box { float: left; margin-left: -[[setting:regionwidth]]; position: relative; width: 200%; right: 100%; } .blocks-moving.side-post-only #page-content #region-main-box #region-post-box { float: left; margin-left: -[[setting:regionwidth]]; width: 100%; border-right: 2px solid #98bcd6; background: url([[pix:theme|top_bg]]) repeat-x top #fff; } .blocks-moving.side-post-only #page-content #region-main-box #region-post-box #region-main-wrap { float: left; width: 50%; } .blocks-moving.side-post-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main { overflow: hidden; position: relative; margin-left: [[setting:regionwidthdouble]]; left: 100%; } .blocks-moving.side-post-only #page-content #region-main-box #region-post-box #region-pre { float: right; position: relative; left: [[setting:leftregionwidthmargin]]; width: [[setting:regionwidth]]; background: transparent; } .blocks-moving.side-post-only #page-content #region-main-box #region-post-box #region-post { float: right; position: relative; left: [[setting:rightregionwidthmargin]]; width: [[setting:regionwidth]]; background: transparent; } and a gap will open on side-pre if you want to move a block and e v e r y t h i n g looks fine - in a course a n d on the frontpage. [I know we don't need all these selectors and rules. But that can be done later. Remark: It's important to have the full path for the selectors - I think!?!] Mary, it's your turn again. Cheers Dietmar
          Hide
          Mary Evans added a comment -

          @Sam
          Many thanks
          We will get this right yet!

          @Dietmar

          Thanks for this...I will look at this again later today.

          Mary

          Show
          Mary Evans added a comment - @Sam Many thanks We will get this right yet! @Dietmar Thanks for this...I will look at this again later today. Mary
          Hide
          Dietmar Wagner added a comment -

          Hi Eloy,
          thanks for sharing your pagelayout.css.
          As I saw you altered the "header" and the width of .side-post-only #page-content #region-main-box #region-post-box #region-post.
          Please test the following:
          Go to a side-post-only course (everything is ok) and turn editing on. As you can see #region-post "jumps" to the left.
          If you add .side-post-only #page-content #region-main-box #region-post-box #region-pre

          {width: 0}

          in addition, you get problems if you try to move blocks to #region-pre.
          And that it is what's driving us nuts.

          Cheers
          Dietmar

          Show
          Dietmar Wagner added a comment - Hi Eloy, thanks for sharing your pagelayout.css. As I saw you altered the "header" and the width of .side-post-only #page-content #region-main-box #region-post-box #region-post. Please test the following: Go to a side-post-only course (everything is ok) and turn editing on. As you can see #region-post "jumps" to the left. If you add .side-post-only #page-content #region-main-box #region-post-box #region-pre {width: 0} in addition, you get problems if you try to move blocks to #region-pre. And that it is what's driving us nuts. Cheers Dietmar
          Hide
          Mary Evans added a comment -

          Hi Dietmar,

          Just letting you know I have no broadband connection since Thursday...it is driving me mad! Hopefully the problem will be fixed tomorrow.

          I have used the css you offered and tried it in Sky High, Nonzero and Overlay. Did you know there are errors in the CSS in Nonzero or Overlay (i cant remember now) there are duplicate ;; at the end of some lines.

          Now we know that the CSS works with the added class for moving blocks...that seems to fix the problem.
          However the Standard side-post-only problem when moving is the same! Can't MOVE any blocks to Side Pre! So looks like ALL themes will need the moving blocks class adding to pagelayout in base and canves.

          If I get access to www tomorrow I'll add the changes to GIT.

          This is turning out to be a bigger job than I first thought. But I think we have cracked it!

          Cheers
          Mary

          Show
          Mary Evans added a comment - Hi Dietmar, Just letting you know I have no broadband connection since Thursday...it is driving me mad! Hopefully the problem will be fixed tomorrow. I have used the css you offered and tried it in Sky High, Nonzero and Overlay. Did you know there are errors in the CSS in Nonzero or Overlay (i cant remember now) there are duplicate ;; at the end of some lines. Now we know that the CSS works with the added class for moving blocks...that seems to fix the problem. However the Standard side-post-only problem when moving is the same! Can't MOVE any blocks to Side Pre! So looks like ALL themes will need the moving blocks class adding to pagelayout in base and canves. If I get access to www tomorrow I'll add the changes to GIT. This is turning out to be a bigger job than I first thought. But I think we have cracked it! Cheers Mary
          Hide
          Dietmar Wagner added a comment -

          Hi Mary,
          no internet connection? That's the worst case for a web developer. Hope your problem is fixed soon.

          @sky_high:
          We seem to have a solution. But for me it is somehow unsatisfying. I succeded in making a percentage version of sky_high and it works absolutely fine without any extra rules ... and I don't know why .

          One additional proposal: I would take out the right margin in
          .course-content ul.topics li.section,
          .course-content ul.weeks li.section

          { border: 1px solid #ccc; margin-right: 20px; }

          (core.css)

          @nonzero:
          Yes, I found the ;;-bug in nonzero pagelayout.css. And I found some more in the declaration of bodyclasses (first 20 lines) in general.php. We can fix them if you are through with sky_high.

          Cheers
          Dietmar

          Show
          Dietmar Wagner added a comment - Hi Mary, no internet connection? That's the worst case for a web developer. Hope your problem is fixed soon. @sky_high: We seem to have a solution. But for me it is somehow unsatisfying. I succeded in making a percentage version of sky_high and it works absolutely fine without any extra rules ... and I don't know why . One additional proposal: I would take out the right margin in .course-content ul.topics li.section, .course-content ul.weeks li.section { border: 1px solid #ccc; margin-right: 20px; } (core.css) @nonzero: Yes, I found the ;;-bug in nonzero pagelayout.css. And I found some more in the declaration of bodyclasses (first 20 lines) in general.php. We can fix them if you are through with sky_high. Cheers Dietmar
          Hide
          Mary Evans added a comment -

          Hi Dietmar,

          I'm back! It turned out there was a fault at the local telephone exchange, a faulty wire. 5 days without internet...I was tearing my hair out!

          @Sky High
          I have not checked this out yet, but what is the advantage of taking out the margins for .course-content ul.topics li.section,.course-content ul.weeks li.section? Is this purely aesthetic or does it help the situation with regards the proposed 'FIX' for this theme?

          @Nonzero

          I'll set up a new MDL issue for Nonzero and fix those coding errors and apply the patch to the CSS

          @Overlay

          I'll do the same here too for the patch.

          Thanks

          Mary

          Show
          Mary Evans added a comment - Hi Dietmar, I'm back! It turned out there was a fault at the local telephone exchange, a faulty wire. 5 days without internet...I was tearing my hair out! @Sky High I have not checked this out yet, but what is the advantage of taking out the margins for .course-content ul.topics li.section,.course-content ul.weeks li.section? Is this purely aesthetic or does it help the situation with regards the proposed 'FIX' for this theme? @Nonzero I'll set up a new MDL issue for Nonzero and fix those coding errors and apply the patch to the CSS @Overlay I'll do the same here too for the patch. Thanks Mary
          Hide
          Dietmar Wagner added a comment -

          Hi Mary,
          I'm glad you are back ... and I hope your internet connection is robust now.

          To our issues:

          @sky_high+margin: only cosmetics

          @nonzero: In addition to your suggestion it is important to repair general.php (declaration of body classes). Otherwise a side-post-only course looses the body class side-post-only (really!):

          By the way: I reported this issue in Moodle Tracker (MDL-26953) some months ago. But the discussion had no final result at that time. Now I think we are able to fix it. Perhaps you/we can use this for further discussions!?

          @overlay: I will try out our trick this evening.

          Cheers
          Dietmar

          Show
          Dietmar Wagner added a comment - Hi Mary, I'm glad you are back ... and I hope your internet connection is robust now. To our issues: @sky_high+margin: only cosmetics @nonzero: In addition to your suggestion it is important to repair general.php (declaration of body classes). Otherwise a side-post-only course looses the body class side-post-only (really!): By the way: I reported this issue in Moodle Tracker ( MDL-26953 ) some months ago. But the discussion had no final result at that time. Now I think we are able to fix it. Perhaps you/we can use this for further discussions!? @overlay: I will try out our trick this evening. Cheers Dietmar
          Hide
          Mary Evans added a comment -

          @Anyone out there!

          I am always concious of timing when working on any CORE theme changes, and then uploading these changes to GIT.
          I would hate to be in a situation that I work at getting things done and then find I am working on the wrong version of master or MOODLE_21_STABLE etc and end up having to re-base at some point, which is a real pain.

          I am in the process of updating all branches on my GIT-HUB and after 'Fast Forwarding' just now I find that master is 2.2dev (Build: 20111009).

          So my question is this:
          If I work on this version and submit my changes in the next 24hrs am I likely to be in that feared position of having to wait and then re-base my branches for next week's PULL?

          Cheers
          Mary

          Cheers
          Mary

          Show
          Mary Evans added a comment - @Anyone out there! I am always concious of timing when working on any CORE theme changes, and then uploading these changes to GIT. I would hate to be in a situation that I work at getting things done and then find I am working on the wrong version of master or MOODLE_21_STABLE etc and end up having to re-base at some point, which is a real pain. I am in the process of updating all branches on my GIT-HUB and after 'Fast Forwarding' just now I find that master is 2.2dev (Build: 20111009). So my question is this: If I work on this version and submit my changes in the next 24hrs am I likely to be in that feared position of having to wait and then re-base my branches for next week's PULL? Cheers Mary Cheers Mary
          Hide
          Sam Hemelryk added a comment -

          Hi Mary,

          The next weekly release will be happen in the next 24 - 48 hours, if you make changes now you will potentially need to rebase your work.
          However I don't think there have been any changes to the sky high theme so I don't imagine you will end up in a position where rebasing will cause conflicts.
          What you can always do to minimise your work is only make the changes on the master branch, then after the release rebase your branch and cherry-pick your changes to the other branches you want it applied to.

          Cheers
          Sam

          Show
          Sam Hemelryk added a comment - Hi Mary, The next weekly release will be happen in the next 24 - 48 hours, if you make changes now you will potentially need to rebase your work. However I don't think there have been any changes to the sky high theme so I don't imagine you will end up in a position where rebasing will cause conflicts. What you can always do to minimise your work is only make the changes on the master branch, then after the release rebase your branch and cherry-pick your changes to the other branches you want it applied to. Cheers Sam
          Hide
          Mary Evans added a comment -

          Thanks Sam...will do...

          Show
          Mary Evans added a comment - Thanks Sam...will do...
          Hide
          Mary Evans added a comment -

          @Dietmar

          I was just reading through all the dialogue here before doing the updates for Sky High, and smiled at the comment you made the other day when you thanked Eloy for adding 'pagelayout.css'! If you had not noticed it, it is YOUR pagelayout.css which you added way back in March.

          Show
          Mary Evans added a comment - @Dietmar I was just reading through all the dialogue here before doing the updates for Sky High, and smiled at the comment you made the other day when you thanked Eloy for adding 'pagelayout.css'! If you had not noticed it, it is YOUR pagelayout.css which you added way back in March.
          Hide
          Dietmar Wagner added a comment -

          @Mary
          Ooooops?! :-7
          D.

          Show
          Dietmar Wagner added a comment - @Mary Ooooops?! :-7 D.
          Hide
          Mary Evans added a comment -

          Well that was straight forward enough. Let's hope I got it right! LOL

          GIT HUB has changed too...It took me ages to find the tab for the branches!

          Show
          Mary Evans added a comment - Well that was straight forward enough. Let's hope I got it right! LOL GIT HUB has changed too...It took me ages to find the tab for the branches!
          Hide
          Sam Hemelryk added a comment -

          Thanks guys - was absolutely spot on this time! good work!

          Cheers
          Sam

          Show
          Sam Hemelryk added a comment - Thanks guys - was absolutely spot on this time! good work! Cheers Sam
          Hide
          Rossiani Wijaya added a comment -

          This is working great.

          Test passed.

          Show
          Rossiani Wijaya added a comment - This is working great. Test passed.
          Hide
          Julian Ridden added a comment -

          Now that all the work has been done fixing up my crappy code I can stick my head in. That's not realy true by the way. Sadly Mary only just pointed me to this issue.

          Thank you all for working together to find the crappy bug in the code and making this theme stronger. This is what makes Moodle work and why I am so proud to be part of the community.

          Peace love and mungbeans to all of you

          Julian

          Show
          Julian Ridden added a comment - Now that all the work has been done fixing up my crappy code I can stick my head in. That's not realy true by the way. Sadly Mary only just pointed me to this issue. Thank you all for working together to find the crappy bug in the code and making this theme stronger. This is what makes Moodle work and why I am so proud to be part of the community. Peace love and mungbeans to all of you Julian
          Hide
          Mary Evans added a comment -

          @Julian,

          Thanks! But we haven't finished yet as there is come crappy code in BASE theme which needs fixing as it is related to this BUG! ROFL

          Love, peace and mungbeans to you too

          Show
          Mary Evans added a comment - @Julian, Thanks! But we haven't finished yet as there is come crappy code in BASE theme which needs fixing as it is related to this BUG! ROFL Love, peace and mungbeans to you too
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Many thanks for all the hard work. This is now part of Moodle, your favorite LMS.

          Closing as fixed, ciao

          Show
          Eloy Lafuente (stronk7) added a comment - Many thanks for all the hard work. This is now part of Moodle, your favorite LMS. Closing as fixed, ciao
          Hide
          Mary Evans added a comment -

          A BIG THANK YOU to EVERYONE who has had some input in this issue theme designers/developers/testers whoever!!!
          So good to see it working as it should.

          Cheers
          Mary

          Show
          Mary Evans added a comment - A BIG THANK YOU to EVERYONE who has had some input in this issue theme designers/developers/testers whoever!!! So good to see it working as it should. Cheers Mary

            People

            • Votes:
              2 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: