1. fabrix95
  2. Commercial Templates
  3. Thursday, 04 June 2015
  4.  Subscribe via email
Hi,

I'm using J51 Classic. If I open my website from mobile devices the first thing that I see is the right modules (Sidecol-B ), but I should be see first of all page content (article for example).

How can I put modules after content of pages in mobile version? Otherwise is very uncomfortable.

EDIT Sorry for my mistake, this topic should be in "Free Templates / Extensions" category
Accepted Answer Pending Moderation
0
Votes
Undo
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
I insert this code, but in mobile view is the same
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

An alternative solution is to replace the contents of your templates main.php (../templates/php/layouts/main.php) with the following (Joomla 3.x only)...


<!--Setting up Layout for MainContent and Side Columns. Check to see if modules are enabled or disabled in the sidecolumns-->
<?php
if($this->countModules('sidecol-a') == 0 || $this->countModules('sidecol-b') == 0) $contentwidth = '_full';
if($this->countModules('sidecol-a') >= 1 || $this->countModules('sidecol-b') >= 1) $contentwidth = '_remainder';
?>


<!-- Media Queries for Modules Stacking -->
<!-- Stack side columns under main content on mobile devices -->
<style type="text/css">

/* # - Small devices*/
@media only screen and (max-width: 767px) {

/*hide normal side column layout*/
.modules-stacked-normal{display: none !important;}
}

/* # - Medium and large devices*/
@media only screen and (min-width: 768px) {

/*stack side columns under content on Small devices*/
.modules-stacked-under{display: none !important;}
}
</style>


<div id ="main" class="block_holder">

<!--Sidecol & content background -->
<div class="backgrounds">
<?php if ($this->countModules( 'sidecol-a' )) : ?>
<div id="sidecol_a">
</div>
<?php endif; ?>

<?php if ($this->countModules( 'sidecol-b' )) : ?>
<div id="sidecol_b">
</div>
<?php endif; ?>

<div id="content<?php echo $contentwidth; ?>"></div>
</div>
<!--End Sidecol & content background -->


<div class="modules-stacked-normal"><!-- Default Stacking of side columns -->
<!--Side Columns Layout-->
<?php if ($this->countModules( 'sidecol-a' )) : ?>
<div id="sidecol_a" class="side_margins">
<div class="sidecol_block">
<jdoc:include type="modules" name="sidecol-a" style="mod_standard" />
</div>
</div>
<?php endif; ?>


<?php if ($this->countModules( 'sidecol-b' )) : ?>
<div id="sidecol_b" class="side_margins">
<div class="sidecol_block">
<jdoc:include type="modules" name="sidecol-b" style="mod_standard" />
</div>
</div>
<?php endif; ?>
<!--End Side Columns Layout-->
</div><!-- End Default Stacking of side columns -->

<!--Find Content width and show component area-->
<div id="content<?php echo $contentwidth; ?>" class="side_margins">

<?php if ($this->countModules( 'breadcrumb' )) : ?>
<div id ="breadcrumb" class="block_holder">
<div id="breadcrumb-1"><div class="module_margin">
<jdoc:include type="modules" name="breadcrumb" style="mod_standard" />
</div></div>
<div class="clear"></div>
</div>
<?php endif; ?>

<!--Modules ContentTop-->
<?php if($this->params->get('contenttop_auto') != '1') : ?>
<?php if ($this->countModules('contenttop-a') || $this->countModules('contenttop-b') || $this->countModules('contenttop-c')) { ?>
<div class="wrapper_contenttop">
<?php if ($this->countModules('contenttop-a')) { ?>
<div class="contenttop" style="width:<?php echo $contenttop_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-a" style="mod_standard"/></div></div><?php } ?>
<?php if ($this->countModules('contenttop-b')) { ?>
<div class="contenttop" style="width:<?php echo $contenttop_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-b" style="mod_standard"/></div></div><?php } ?>
<?php if ($this->countModules('contenttop-c')) { ?>
<div class="contenttop" style="width:<?php echo $contenttop_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-c" style="mod_standard"/></div></div><?php } ?>
<div class="clear"></div>
</div>
<?php }?>

<?php else : ?>

<?php if ($this->countModules('contenttop-a') || $this->countModules('contenttop-b') || $this->countModules('contenttop-c')) { ?>
<div class="wrapper_contenttop">
<?php if ($this->countModules('contenttop-a')) { ?>
<div class="contenttop" style="width:<?php echo $contenttop_a_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-a" style="mod_standard"/></div></div><?php } ?>
<?php if ($this->countModules('contenttop-b')) { ?>
<div class="contenttop" style="width:<?php echo $contenttop_b_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-b" style="mod_standard"/></div></div><?php } ?>
<?php if ($this->countModules('contenttop-c')) { ?>
<div class="contenttop" style="width:<?php echo $contenttop_c_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contenttop-c" style="mod_standard"/></div></div><?php } ?>
<div class="clear"></div>
</div>
<?php }?>
<?php endif; ?>
<!--End Modules ContentTop-->

<div class="maincontent">
<div class="message">
<?php if ($this->getBuffer( 'message' )) : ?>
<jdoc:include type="message" />
<?php endif; ?>
</div>
<jdoc:include type="component" />
</div>

<!--Modules ContentBottom-->
<?php if($this->params->get('contentbottom_auto') != '1') : ?>
<?php if ($this->countModules('contentbottom-a') || $this->countModules('contentbottom-b') || $this->countModules('contentbottom-c')) { ?>
<div class="wrapper_contentbottom">
<?php if ($this->countModules('contentbottom-a')) { ?>
<div class="contentbottom" style="width:<?php echo $contentbottom_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-a" style="mod_standard"/></div></div><?php } ?>
<?php if ($this->countModules('contentbottom-b')) { ?>
<div class="contentbottom" style="width:<?php echo $contentbottom_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-b" style="mod_standard"/></div></div><?php } ?>
<?php if ($this->countModules('contentbottom-c')) { ?>
<div class="contentbottom" style="width:<?php echo $contentbottom_width ?>;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-c" style="mod_standard"/></div></div><?php } ?>
<div class="clear"></div>
</div>
<?php }?>

<?php else : ?>

<?php if ($this->countModules('contentbottom-a') || $this->countModules('contentbottom-b') || $this->countModules('contentbottom-c')) { ?>
<div class="wrapper_contentbottom">
<?php if ($this->countModules('contentbottom-a')) { ?>
<div class="contentbottom" style="width:<?php echo $contentbottom_a_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-a" style="mod_standard"/></div></div><?php } ?>
<?php if ($this->countModules('contentbottom-b')) { ?>
<div class="contentbottom" style="width:<?php echo $contentbottom_b_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-b" style="mod_standard"/></div></div><?php } ?>
<?php if ($this->countModules('contentbottom-c')) { ?>
<div class="contentbottom" style="width:<?php echo $contentbottom_c_manual ?>%;"><div class="module_margin"><jdoc:include type="modules" name="contentbottom-c" style="mod_standard"/></div></div><?php } ?>
<div class="clear"></div>
</div>
<?php }?>
<?php endif; ?>
<!--End Modules ContentBottom-->


<div class="modules-stacked-under"><!-- Stacking of side columns on small devices under main content -->
<!--Side Columns Layout-->
<?php if ($this->countModules( 'sidecol-a' )) : ?>
<div id="sidecol_a" class="side_margins">
<div class="sidecol_block">
<jdoc:include type="modules" name="sidecol-a" style="mod_standard" />
</div>
</div>
<?php endif; ?>

<?php if ($this->countModules( 'sidecol-b' )) : ?>
<div id="sidecol_b" class="side_margins">
<div class="sidecol_block">
<jdoc:include type="modules" name="sidecol-b" style="mod_standard" />
</div>
</div>
<?php endif; ?>
<!--End Side Columns Layout-->
</div><!-- End Stacking of side columns on small devices under main content -->


</div>
<div class="clear"></div>
<!--End Content width and show component area-->

</div>
<div class="clear"></div>


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Appears this code in the website (I think there's an error)

@media only screen and (max-width: 767px) {

/*hide normal side column layout*/
.modules-stacked-normal{display: none !important;}
}

/* # - Medium and large devices*/
@media only screen and (min-width: 768px) {

/*stack side columns under content on Small devices*/
.modules-stacked-under{display: none !important;}
}
  1. more than a month ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!