Public Forums 71,145 posts

[mpurcell Friend mpurcellJoin date: March 2014Posts: 14Downloads:0Uploads:0 Thanks: 6 Thanked: 5 times in 2 posts]

#195470

In t3_bs3_blank – default template and default layout.

In the responsive layouts, the main body block has normal two sidebar layout for large and medium size, and for small and extra small size it has:
message
component
sidebar-1 sidebar-2
where the sidebars have half the width of the screen.

I would like to keep that layout for small, but change the extra small size layout to:
message
component
sidebar-1
sidebar-2
where each sidebar would have the full width of the screen.

I assume this would be a code edit, but I’m not sure which files need to be edited, and what code governs the position of the modules. A little guidance would be appreciated.

Thanks

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

#525411

Did you check documentation of T3 framework here? http://t3-framework.org/documentation/bs3-layout-system#layout-configuration

1 user says Thank You to Saguaros for this useful post

1. mpurcell

[mpurcell Friend mpurcellJoin date: March 2014Posts: 14Downloads:0Uploads:0 Thanks: 6 Thanked: 5 times in 2 posts]

#525508

<em>@Saguaros 414736 wrote:</em><blockquote>Did you check documentation of T3 framework here? http://t3-framework.org/documentation/bs3-layout-system#layout-configuration</blockquote>

I have previously read through most of the T3 Framework documentation and watched several of the videos, including the Layout Introduction page and two videos referenced. The problem is that I am just beginning to learn both Joomla 3.2 and the T3 Framework 2.1.2. I have a good grasp of html and css, a basic working knowledge of php, but less is completely new. I do not yet have a clear picture in my head of how the code is laid out and how the various files interact with each other, so it is hard for me to find the active code for specific items in the Template Manager in the back end.

I didn’t find the code that controls the behavior mentioned in my first post. I don’t see it in /tpls/default.php or in /etc/layout/default.ini or in /tpls/blocks/mainbody.php. I’d like to study the source code to learn how it works so I can make the customization myself. If someone could point me to the correct code files and code lines, it would be greatly appreciated.

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#525538

This is all from within /tpls and /tpls/blocks and /tpls/blocks/mainbody. The path you take depends on the layout you have chosen. So, for example, if you are using default-content-left, you would use:

/tpls/default-content-left.php -> /tpls/blocks/mainbody-content-left.php -> /tpls/blocks/mainbody/two-sidebar-right.php

Then in two-sidebar-right.php look at the sidebar sections:


<!-- SIDEBAR 1 -->
<div class="t3-sidebar t3-sidebar-1 col-xs-6 col-sm-12 col-md-6 <?php $this->_c($vars['sidebar1']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar1']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR 1 -->


The classes being applied here are what determine the widths at each size. So you can see a class of col-xs-6 for example, which says that in extra small mode, use a 6-wide (so 2 side-by-side columns). Change that class to col-xs-12 and I think you’ll get what you want for the x-small size.

Interestingly, it seems that the small version is set for col-sm-12, which should be stacked, not side by side. I’m not sure why you are seeing side-by-side on your small version – unless maybe it’s middle (md) size you are seeing.

I’m new to the bs3 version of the framework too, so I’m learning exactly what’s what, but I hope that at least leads you in the right direction.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

2 users say Thank You to Scott Lavelle for this useful post

1. mpurcell
2. Saguaros

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

#525599

Thanks Scott for your info 🙂
@mpurcell: If you’re not familiar with Less, you can customize with CSS. The first thing you need to do is disabling Development mode in template manager (since when Development mode is turned ON, your site will use Less files), then create a new file called custom.css in path: /templates/your_template_name/css and put your custom CSS code there: http://t3-framework.org/documentation/bs3-customization#custom-css

In case that you want to learn more about Less, check out this page for reference: http://lesscss.org/

1 user says Thank You to Saguaros for this useful post

1. mpurcell

[mpurcell Friend mpurcellJoin date: March 2014Posts: 14Downloads:0Uploads:0 Thanks: 6 Thanked: 5 times in 2 posts]

#525707

@scott, your answer is exactly what I was looking for. Thanks. I don’t think I would have found anything useful on this by searching, either here in the forum or via Google. So I want to add a little to your answer so that the information will be available here.

Positions load into the block in the order they are called in the php file, so in my example with a standard two sidebar layout, (assuming there is no message to show) first the component is loaded, and then sidebar1 followed by sidebar2. Depending on the widths they are assigned, they would load from left to right, or top to bottom, so for instance, if component is assigned a width of 6 and the sidebars are assigned a width of 3 each, then the component would load on the left with two sidebars on the right. In order to arrange the positions as desired, you have to either push to the right, or pull to the left using the correct class. So to get the standard layout, component would need to be pushed 3 and sidebar1 pulled 6.

If the positions are loaded at full width of 12, then they will load vertically in the order they are called. In my example, I wanted the x-small and small layouts to have the sidebar2 position at the bottom, but in the medium and full layouts, I want sidebar2 of the left, and sidebar 1 on the right. The solution is to push sidebar over 3 to put it to the right of the component, and pull the sidebar1 back 9 to put it on the left. In my layout the files are /tpls/default.php -> /tpls/blocks/mainbody.php -> /tpls/blocks/mainbody/two-sidebar.php. Here is the final code from two-sidebar.php:

<div id="t3-mainbody" class="container t3-mainbody">
<div class="row">

<!-- MAIN CONTENT -->
<div id="t3-content" class="t3-content col-xs-12 col-md-6 col-md-push-3">
<?php if($this->hasMessage()) : ?>
<jdoc:include type="message" />
<?php endif ?>
<jdoc:include type="component" />
</div>
<!-- //MAIN CONTENT -->

<!-- SIDEBAR 1 -->
<div class="t3-sidebar t3-sidebar-1 col-xs-12 col-md-3 col-md-push-3 <?php $this->_c($vars['sidebar1']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar1']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR 1 -->

<!-- SIDEBAR 2 -->
<div class="t3-sidebar t3-sidebar-2 col-xs-12 col-md-3 col-md-pull-9 <?php $this->_c($vars['sidebar2']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar2']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR 2 -->

</div>
</div>

In this example I want x-small and small layouts to be the same, so the sm classes are omitted so that it will load the same way as xs.

@saguaros, thanks to you as well. Yes, the goal is to learn more about less (I love saying that!) but I may take your advice to get my small responsive site up and running more quickly.

[Author]

Posts