T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (1)

Resolved Layout positions

0
Votes
Undo
  1. Elias
    Elias
  2. General Discussion
  3. Thursday, 24 September 2015
  4.  Subscribe via email
Hello,
please guide to me to add more positions into a block. My current layout "takes only one" module as I understand. I read the instructions and they said "Based on Bootstrap Grid, you can add up to 6 module positions to a spotlight area which can be resized by adjusting the resizer bar to the left/right.
You can change the module position by clicking on the configuration icon on the top right."
I can't find the resizer bar!:(

I start reading but I don't speak very well english. I learn though;)

So what should I do to add more positions at the layout. As you can see in the pic, all blocks are 12. How can I make them diffirent? 6+6 or 4+4+4...etc?
Attachments (1)
t3.JPG t3.JPG
Comment
There are no comments made yet.
Responses (1)
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

To add new position to a block, please open the .php file of the block and define new position using the following format:

<jdoc:include type="modules" name="<?php $this->_p('your_module_position_name') ?>" />


If you want to add multiple module positions and fix the width of the position as you mentioned in your message, you could use:

<div class="row">

	<div class="col-md-6 col-xs-12">

		<jdoc:include type="modules" name="<?php $this->_p('position-1') ?>" />

	</div>

	<div class="col-md-6 col-xs-12">

		<jdoc:include type="modules" name="<?php $this->_p('position-2') ?>" />

	</div>

</div>


In the above code, you have 2 positions: position-1 and position-2 and its width is 6 + 6 on normal layout (laptop and desktop) and full width (12 columns) in mobile. col-md is to define width in normal layout, col-sm is to define width in small layout (tablet) and col-xs is to define width in extra small layout (mobile)

To understand more about this, you should understand the bootstrap responsive grid system: http://getbootstrap.com/css/#grid

Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.