0
Welcome Guest! Login
0 items Join Now

[HOWTO] Add additional content-top/content-bottom modules

  • [HOWTO] Add additional content-top/content-bottom modules

    Posted 11 years 1 month ago
    • Basically there is a great documentation on the gantry-framework.org website for customizing your template. A special thing is how to add custom/additional content-top or content-bottom modules, which is not clear enaugh for everyone.

      So, here is a little tutorial on how to add more module positions around the content. Here i'll explain on how to add 2 more module positions after the content-bottom module positions without hacking the core code...

      Preparing:
      Add Module positions to your templateDetails.xml file located in your template folder.

      In order to my post here , there is a problem with similar named module positions, so as a little workaround we have to rename the "content-bottom-2" to "contentbottom2" and "content-bottom-3" to "contentbottom3".

      Note: You have to do this for all module positions, if you want to add more on other positions like "header-top", "header-bottom", and so on... But for now, we only add those two for content bottom
          .....snip.....
          <position>content-top-b</position>
          <position>content-top-c</position>
          <position>content-bottom-a</position>
          <position>content-bottom-b</position>
          <position>content-bottom-c</position>
          <position>contentbottom2-a</position>
          <position>contentbottom2-b</position>
          <position>contentbottom2-c</position>
          <position>contentbottom3-a</position>
          <position>contentbottom3-b</position>
          <position>contentbottom3-c</position>
          <position>mainbottom-a</position>
          <position>mainbottom-b</position>
          .....snip.....


      To have full control over it, add the positions to the template-options.xml right after the mainbody position
          .....snip.....
          <field name="mainbodyPosition" type="positions" default="6,3,3" label="MAINBODY_POS" description="LAYOUT_POS_DESC">
              <schemas>1,2,3,4</schemas>
      			<words>sa,sb,sc,mb</words>
      			<type>custom</type>
      		</field>
      
              <fields name="contentbottom2" type="position" label="CONTENTBOTTOM2_POS" description="LAYOUT_POS_DESC">
                  <field name="layout" type="positions" default="4,4,4" label="">
                      <schemas>1,2,3</schemas>
                      <words>2,3,4,5,6,7,8,9,10</words>
                  </field>
                  <field name="showall" type="toggle" default="0" label="FORCE_POS"/>
                  <field name="showmax" type="showmax" default="3" label="POS_COUNT"/>
              </fields>
      
              <fields name="contentbottom3" type="position" label="CONTENTBOTTOM3_POS" description="LAYOUT_POS_DESC">
                  <field name="layout" type="positions" default="4,4,4" label="">
                      <schemas>1,2,3</schemas>
                      <words>2,3,4,5,6,7,8,9,10</words>
                  </field>
                  <field name="showall" type="toggle" default="0" label="FORCE_POS"/>
                  <field name="showmax" type="showmax" default="3" label="POS_COUNT"/>
              </fields>
          .....snip.....


      Open up your template language file (/templates/[TEMPLATE]/language/en-GB/en-GB.tpl_[TEMPLATE].ini) and add the following in the custom section
      .....snip.....
      ;-----------------
      ; Custom language strings can go here, core strings are in Gantry
      ;-----------------
      
      CONTENTBOTTOM2_POS = "ContentBottom2"
      CONTENTBOTTOM2_POS = "ContentBottom3"
      
      TEXT_SIZE="Text Size"
      DEC_FONT_SIZE="Decrease Font Size"
      .....snip.....


      Now copy the file /libraries/gantry/html/layouts/body_mainbody.php to /templates/[TEMPLATE]/html/layouts/body_mainbody.php


      Now adding module positions to the copied body_mainbody.php file.
      PLEASE NOTE: We can't use the "normal" way of rendering modules as described in the gantry docs. For new added module positions above and below the content we have to push the current scheme of the mainbody grid. Therefore we add the "$fparams->schema" var to the $gantry->displayModules() method for getting the correct rt-grid size of each enabled/published module related to the current sidebar

      Locate that code with the id="rt-content-bottom"
          .....snip.....
                  </div>
              </div>
              <?php endif; ?>
              <?php if (isset($fparams->contentBottom)) : ?>
              <div id="rt-content-bottom">
                  <?php echo $fparams->contentBottom; ?>
              </div>
              <?php endif; ?>
          </div>
          <?php echo $fparams->sidebars; ?>
          .....snip.....

      and edit as follows
          .....snip.....
                  </div>
      		</div>
              <?php endif; ?>
              <?php if (isset($fparams->contentBottom)) : ?>
              <div id="rt-content-bottom">
                  <?php echo $fparams->contentBottom; ?>
              </div>
              <?php endif; ?>
      		<?php if ($gantry->countModules('contentbottom2')) : ?>
      			<div id="rt-content-bottom2">
      				<?php echo $gantry->displayModules('contentbottom2','standard','standard', $fparams->schema['mb']); ?>
      			</div>
      		<?php endif; ?>
      		<?php if ($gantry->countModules('contentbottom3')) : ?>
      			<div id="rt-content-bottom3">
      				<?php echo $gantry->displayModules('contentbottom3','standard','standard', $fparams->schema['mb']); ?>
      			</div>
      		<?php endif; ?>
          </div>
          <?php echo $fparams->sidebars; ?>
          .....snip.....


      After all you could style your new module positions. To avoid customizing the core less files, you could simply add a custom css file. To create a custom CSS file, you just have to create a new css file at /templates/[TEMPLATE]/css/ and name it [TEMPLATE]-custom.css. The new custom CSS file will automatically get loaded by the Gantry framework.

      Add for example the following code:
      .....snip.....
      #rt-contentbottom2, #rt-contentbottom3 {
          background: green;
          font-size: 10px;
          color: yellow;
      }
      .....snip.....


      NOTE: Don't forget to backup your files, BEFORE you start to changing/modifying/editing....


      Below is a screenshot of what it would look like after following this mini tut :)

      That's all... enjoy...


      This image is hidden for guests.
      Please log in or register to see it.
    • The following users have thanked you: David Goode, Who?, Ivica Suran, Kat05, Henning

    • Why i am doing what i do? Sometimes it simply came over me!

      Don't forget to hit the THANKS button for those who helped you and for those who need this for their alter ego :)
    • Who?'s Avatar
    • Who?
    • Preeminent Rocketeer
    • Posts: 25562
    • Thanks: 613
    • Joomla freelancer

    Re: [HOWTO] Add additional content-top/content-bottom modules

    Posted 10 years 9 months ago
    • Thank you for this tutorial. I am sure that other members will be glad to follow it
    • Check my services at: Mihha-Vision

Time to create page: 0.074 seconds