1. Amentis
  2. Commercial Templates
  3. Thursday, 08 May 2014
  4.  Subscribe via email
Hi Ciaran

In responsive view (smartphones) the sidecol module is above the content area. I would like to have it below the content (but above the bottom modules).

I tried to change the module order in the main.php file, but doesen't get it to work correctly.

I would also like to have the same module order on ipad portrait view.

Is it possible to make these changes?

Thanks in advance for your support and kind regards,
Nicole
Accepted Answer Pending Moderation
0
Votes
Undo
Actually, I have just realised that was my mistake, not yours! I read it wrong. :blush: Apologies but thank you for your prompt reply. I have put it in the correct place now. Will check on the ipad later.

Thanks again Ciarán.
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Sorry.. my fault. I meant to say the Custom Code field not the Custom CSS field!!

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for the stacking order code for the sidebar module, Ciarán. I put that in the custom css field (removing the hyphens) but it knocked the last menu item off the main menu bar above the slideshow module and dropped it to the next line so it was overlapping the slideshow. I have taken it back out for now, is there a tweak I can do to stop that happening, do you think?

Thanks for your help.

Have added the ipad code for the imagelinkhover, will need to check on the ipad later, so thank you for that too.
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To change the stacking order of your side column modules try adding the following to the Body Custom Code field of your templates parameters...


<script type="text/javascript">
jQuery(document).load(jQuery(window).bind("resize", listenWidth));

function listenWidth( e ) {
if(jQuery(window).width()<959)
{
jQuery("#sidecol_b").remove().insertAfter(jQuery("#content_remainder"));
} else {
jQuery("#sidecol_b").remove().insertBefore(jQuery("#content_remainder"));
}
if(jQuery(window).width()<959)
{
jQuery("#sidecol_a").remove().insertAfter(jQuery("#content_remainder"));
} else {
jQuery("#sidecol_a").remove().insertBefore(jQuery("#content_remainder"));
}
}
</script>


For the linkhover module issue try adding the following to the Custom CSS field of your templates parameters...


@media only screen and (max-width: 959px) {
.module .j51imagelinkhover .j51button a {
font-size: 12px;
padding-left: 20px;
text-align: left;
}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
I have the same problem, when I added this code, it messed things up a bit in a similar way to the previous poster, so I took it back out. I would like the side bars of my Pianoforte template to display below the main content too, on portrait tablets, if possible. Please can you help?

I have one other question regarding portrait tablet displays. My image link hover module works fine for landscape tablet views but the text gets cut off in portrait view. I found another post which i thought was relevant and added the code suggested to my custom css but that hasn't stopped the text from being cropped. This was the code I added:
.j51imagelinkhover .j51container {
background-position:50% center !important;
}

Is there anything I can do with custom css to stop the text being cut in half, or if not, can I stop the imagelinkhover module from displaying in portrait tablet views?

The site is http://www.hintonarms.co.uk
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
This code works fine, except for 1 tiny detail, although very important. In the code above the added styles have the line:

<s-tyle type="text/css">

so it starts with "s-tyle". But the real code should start with "style". It seems the forum software breaks the posted code and adds a hyphen.
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Sorry to say there is no customisation to place the top modules below the content on mobile devices. This post details how to place the sidecol modules below the content which is the only option available.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks. However, when I sent the email with the credentials, I requested the following order for the modules / content: I want the slideshow, then content, then top and sidebar modules. Currently the top modules are still above the content.

Also the font size changer appears twice in the responsive layout.

Please advise.

Also please tell me your hours so I can respond and get a quicker response.

Thanks
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Lisa

The above code is now working correctly for you.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
If there is any way to get a response today it would be awesome. I'm trying to wrap this up for a client and this is the last element they need fixed.
  1. more than a month ago
  2. Commercial Templates
  3. # 11
Accepted Answer Pending Moderation
0
Votes
Undo
I copied the code you have in this thread and replaced it in the main.php file and it royally messed everything up.
  1. more than a month ago
  2. Commercial Templates
  3. # 12
Accepted Answer Pending Moderation
0
Votes
Undo
Hi bluedove

Yes this same code should work for your Letterpress template.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 13
Accepted Answer Pending Moderation
0
Votes
Undo
I would like to do the same for my template - Letterpress - to have the modules appear at the bottom except for the image slideshow. Will the same code you posted work? I only want the order changed for the portrait views on the iPad / tablet and the portrait and landscape views on the iPhone.
  1. more than a month ago
  2. Commercial Templates
  3. # 14
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán

Works like a charm, thank you very much! :)

Kind regards,
Nicole
  1. more than a month ago
  2. Commercial Templates
  3. # 15
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Nicole

Could you try replacing the contents of your 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>


Note: Replace s-tyle with style

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 16
  • Page :
  • 1


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

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.