How Wide Is The Top Banner In Protostar Template

Question:

How to customize layout width for templates developed with JA T3v2 framework and T3 framework.

Solutions:

For templates adult with T3v2 framework

From back-stop of your site, get to: Extensions >> Template Manager >> JA Template >> Profiles Tabs >> specified width as you wish.

customize layout width

For templates developed with T3 framework

#i: For templates developed with T3 Framework version i.4.x- and integrated Bootstrap 2

Here is the listing of templates adult with T3 Framework version 1.4.x- and integrated Bootstrap two.

JA Magz
JA Muzic
JA Fixel
JA Beranis
JA Smashboard
JA Hawkstore
JA Fubix
JA Argo
JA Mitius
JA Onepage
JA Mero
JA Brisk

Open the templates/ja_template/less/variables.less file, then find the lawmaking like this:

// Default 940px filigree // ------------------------- @T3gridWidth:             980px;  // T3 add together. For non-responsive layout. @gridColumns:             12; @gridGutterWidth:         4px; @gridColumnWidth:     	  floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns); @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - one));  // 1200px min @T3gridWidth1200:         980px;  // T3 add together @gridGutterWidth1200:     4px; @gridColumnWidth1200:     floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns); @gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - ane));  // 980px-1199px @T3gridWidth980:          980px;  // T3 add @gridGutterWidth980:      4px; @gridColumnWidth980:      floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - ane)) / @gridColumns); @gridRowWidth980:         (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));  // T3 Add: 768px-979px @T3gridWidth768:          740px;  // T3 add @gridGutterWidth768:      4px; @gridColumnWidth768:      floor((@T3gridWidth768 - @gridGutterWidth768 * (@gridColumns - 1)) / @gridColumns); @gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

At present customize size for responsive layouts as you wish.

Next, compile LESS to CSS. From dorsum-end of your site, get to: Extensions >> Template Manager >> JA Template then click Compile LESS to CSS push so that the changes will be compiled to CSS file.

compile less to css

#2: For templates adult with T3 Framework version two.x+ and integrated Bootstrap 3

Here is the listing of templates developed with T3 Framework version one.4.ten- and integrated Bootstrap 2.

JA Sugite
JA Decor
JA Biz
Purity III
JA Bookshop
JA Appolio
JA Obelisk
JA University (T3 version)

Open the templates/ja_template/less/variables.less file, so find the code like this:

// Media queries breakpoints // --------------------------------------------------  // Extra pocket-sized screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs:                  480px; @screen-xs-min:              @screen-xs; @screen-phone:               @screen-xs-min;  // Modest screen / tablet // Notation: Deprecated @screen-sm and @screen-tablet as of v3.0.1 @screen-sm:                  768px; @screen-sm-min:              @screen-sm; @screen-tablet:              @screen-sm-min;  // Medium screen / desktop // Note: Deprecated @screen-md and @screen-desktop as of v3.0.ane @screen-md:                  992px; @screen-md-min:              @screen-md; @screen-desktop:             @screen-md-min;  // Large screen / wide desktop // Notation: Deprecated @screen-lg and @screen-lg-desktop equally of v3.0.1 @screen-lg:                  1200px; @screen-lg-min:              @screen-lg; @screen-lg-desktop:          @screen-lg-min;

Layout width

Now customize the size for responsive layouts as you wish.

Next, compile LESS to CSS. From back-end of your site, go to: Extensions >> Template Manager >> JA Template then click Compile LESS to CSS push button and so that the changes volition exist compiled to CSS file.

compile less to css

Question:

I want to change size of a position (sidebar, primary content) in templates developed with T3 Framework.

Solutions:

#1: Bootstrap 2 and T3 Framework version ane.4.x-

This docs is for templates that developed with T3 Framework version 1.iv.10- and integrated Bootstrap ii.

Open the block file that you lot want to customize size of positions. By default, the block files are located in: templates/t3_bs3_blank/tpls/blocks/.

<!-- SPOTLIGHT Acme -->
              <?php if ($this->checkSpotlight('spl-top', 'top-1, top-2')) : ?>
              <div grade="wrap summit-header">
              <div class="container t3-sl spl-top">
              <?php              
              $this->spotlight ('spl-superlative', 'top-1, acme-2', array(
              'acme-1' => array(
              'default' => 'span10',
              'tablet'  => 'span8'
              ),                 			'top-2' => array(
                'default' => 'span2',
                'tablet'  => 'span4'
                )
                ))                
                ?>
                </div>
                </div>
                <?php endif ?>
                <!-- //SPOTLIGHT Elevation -->

We use the span filigree of Boostrap 2 to adapt width of positions in each block. Y'all can customize size of position past changing the span width for position, just make sure that the total span width of all sections in the cake is 12 span.

Y'all tin can customize size of positions in responsive layouts such every bit tablet layout.

#three: Bootstrap iii and T3 Framework version two.x+

This docs is for templates that developed with T3 Framework version 2.10+ and integrated Bootstrap 3.

Nosotros apply filigree arrangement of Bootstrap 3 to conform size of positions in each block.

col-lg-: size on large devices Desktops
col-md-: size on medium devices Desktop
col-xs-: size on extra small-scale devices Phones
col-sm-: size on small devices Tablets

Know more about Bootstrap 3 filigree system: http://getbootstrap.com/css/#grid

Open up the cake file that you want to customize size of positions. By default, the cake files are located in: templates/t3_bs3_blank/tpls/blocks/.

<!-- Principal CONTENT -->
              <div id="t3-content" class="t3-content col-xs-12 col-doctor-6  col-physician-push-3">
              <?php if($this->hasMessage()) : ?>
              <jdoc:include type="message" />
              <?php endif ?>
              <jdoc:include blazon="component" />
              </div>
              <!-- //Main CONTENT -->                 	<!-- SIDEBAR 1 -->
                <div form="t3-sidebar t3-sidebar-one col-xs-6  col-md-3  col-md-pull-half dozen <?php $this->_c($vars['sidebar1']) ?>">
                <jdoc:include type="modules" name="<?php $this->_p($vars['sidebar1']) ?>" style="T3Xhtml" />
                </div>
                <!-- //SIDEBAR one -->
                               	<!-- SIDEBAR two -->
                <div class="t3-sidebar t3-sidebar-2 col-xs-6  col-md-3 <?php $this->_c($vars['sidebar2']) ?>">
                <jdoc:include blazon="modules" proper name="<?php $this->_p($vars['sidebar2']) ?>" mode="T3Xhtml" />
                </div>
                <!-- //SIDEBAR 2 -->

In the sample to a higher place, we take main content position, sidebar one and sidebar 2. The total grids is 12. In Medium devices, main content size is col-physician-6, sidebar 1 and sidebar 2 is col-doctor-3. In extra pocket-size devices, chief content size is col-xs-12, sizebar1 and sidebar 2 is col-xs-6.

To change size of the positions, but alter the grids for devices.

Question:

I want to change module size from the Joomla template director

Solution:

In back-end of Purity III template or whatever template developed with the new T3 framework, you tin alter the position of module and the number of position in spotlight cake and resize the positions.

change module width

Question:

Is it possible to get the "Side News-module" to show 3-4 news horizontally on JA Bookshop Template

JA Sidenews in JA bookshop

Solution:

Open the back-cease of JA SideNews module, add a Module Course suffix for the module - col-5.

Module class suffix

Now add way form rule to the custom.css file in templates/ja-template/css. Create such new file if it doesn't exist.

.col-5 .ja-sidenews-list, .col-four .ja-sidenews-list, .col-three .ja-sidenews-list, .col-2 .ja-sidenews-list {   margin: 0 -15px; }  .col-five .ja-slidenews-particular, .col-iv .ja-slidenews-detail, .col-three .ja-slidenews-item, .col-2 .ja-slidenews-detail {     clear: none;     padding: 0 15px; }  .col-5 .ja-slidenews-item {     width: 20%; }  .col-four .ja-slidenews-particular {     width: 25%; }  .col-3 .ja-slidenews-item {     width: 33.33%; }  .col-2 .ja-slidenews-item {     width: fifty%; }

Check front-folio

Module width front

Problem:

Is it possible to accept total width slideshow with JA Brisk template

Full width Slideshow in JA Brisk

Solution:

Add the CSS rule into this file: /templates/ja_brisk/css/custom.css

.ja-slideshow .container { padding: 60px 10px 0 10px; width: auto; }

Full width Slideshow

Question:

Does t3/Purity III have the ability to easily swap from total-width to boxed layout?

Solution:

With new T3 or Purity III template, information technology supports diverse layouts. And in admin panel of T3/Purity III, you can easily assign position to part of layout you want and modify the number of module position in spotlight cake. We implement Bootstrap into our framework, and so with a flake knowledge of LESS / Css you tin easily change to layout as y'all wish.

Question:

How to modify the main menu width 100% in JA Consequence template?

Solution:

Open the ex-header.php in the templates\ja_events\blocks folder, find and remove the code:

<style type="text/css">
            #ja-mainnav .main-inner2 {width: <?php echo $this->getColumnWidth('mw') ?>%;}
            </style>

Front-page after changing