Joomla Templates Club 406,261 posts

[montgomeryr Friend montgomeryrJoin date: June 2017Posts: 72Downloads:14Uploads:38 Thanks: 10]

#1048726

For regular computers the location and position of this Sidebar-2 works just fine.

But for mobile devices such as an iPhone the Sidebar-2 is below the main page content. How do I get the Sidebar-2 to display above the page content for mobile devices?

[montgomeryr Friend montgomeryrJoin date: June 2017Posts: 72Downloads:14Uploads:38 Thanks: 10]

#1048997

??

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1049211

Hi,

You can try opening the file: [root]/ja_fixel (your default template)//tpls/blocks/mainbody.php

and swap the snippet of code which renders the main content part and the sidebars:

<!-- MAIN CONTENT -->
<div id="t3-content" class="t3-content <?php echo $this->getClass($layout, $col) ?>" <?php echo $this->getData ($layout, $col++) ?>>
  <div class="main-content">
    <jdoc:include type="message" />
    <jdoc:include type="component" />
  </div>
</div>
<!-- //MAIN CONTENT -->

<?php if ($this->countModules($sidebar1)) : ?>
<!-- SIDEBAR 1 -->
<div class="t3-sidebar t3-sidebar-1 <?php echo $this->getClass($layout, $col) ?><?php $this->_c($sidebar1)?>" <?php echo $this->getData ($layout, $col++) ?>>
  <jdoc:include type="modules" name="<?php $this->_p($sidebar1) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR 1 -->
<?php endif ?>

<?php if ($this->countModules($sidebar2)) : ?>
<!-- SIDEBAR 2 -->
<div class="t3-sidebar t3-sidebar-2 <?php echo $this->getClass($layout, $col) ?><?php $this->_c($sidebar2)?>" <?php echo $this->getData ($layout, $col++) ?>>
  <jdoc:include type="modules" name="<?php $this->_p($sidebar2) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR 2 -->
<?php endif ?>

Remember to backup this file first.

Regards

[montgomeryr Friend montgomeryrJoin date: June 2017Posts: 72Downloads:14Uploads:38 Thanks: 10]

#1049283

Not sure what you mean by this. Am I suppose to copy the code you shared and replace it with the code in my file?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1049290

For example, if you want to place the sidebar2 before the main content, just move this code:

<?php if ($this->countModules($sidebar2)) : ?>
<!-- SIDEBAR 2 -->
<div class="t3-sidebar t3-sidebar-2 <?php echo $this->getClass($layout, $col) ?><?php $this->_c($sidebar2)?>" <?php echo $this->getData ($layout, $col++) ?>>
  <jdoc:include type="modules" name="<?php $this->_p($sidebar2) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR 2 -->
<?php endif ?>

to above the main content section above.

[montgomeryr Friend montgomeryrJoin date: June 2017Posts: 72Downloads:14Uploads:38 Thanks: 10]

#1049586

That really messed up my page and applied it to the desktop version.
I only want the sidebar-2 like it is to be displayed before the main content for mobile devices only. I want it to remain like it is for computers.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1049688

That’s only way to change via layout.

Another way is that you create position (or use existing positions) which display before the main content and duplicate modules in sidebar 2 positions and assign to created position.

Then use class suffix to hide these modules in desktop view but show in mobile view only.

http://getbootstrap.com/css/#responsive-utilities

[Author]

Posts