Joomla Templates Club 406,261 posts

[ahmansini1 Friend ahmansini1Join date: August 2014Posts: 51Downloads:12Uploads:0 Thanks: 19]

#706543

how to make the template boxed not full width?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#706602

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#752519

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings

[ahmansini1 Friend ahmansini1Join date: August 2014Posts: 51Downloads:12Uploads:0 Thanks: 19]

#706620

i added my site data on the post info u should see it please i want to make only a template style a named “Magazine” to be boxed layout not all the template just “Magazine” style (a copy of JA SOCIAL II Template)

[ahmansini1 Friend ahmansini1Join date: August 2014Posts: 51Downloads:12Uploads:0 Thanks: 19]

#752537

i added my site data on the post info u should see it please i want to make only a template style a named “Magazine” to be boxed layout not all the template just “Magazine” style (a copy of JA SOCIAL II Template)

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

#752742

In order to have site in boxed, you need to add blocks into container div like you can see in the header block: http://prntscr.com/8vds04

[ahmansini1 Friend ahmansini1Join date: August 2014Posts: 51Downloads:12Uploads:0 Thanks: 19]

#718999

<em>@Saguaros 499270 wrote:</em><blockquote>In order to have site in boxed, you need to add blocks into container div like you can see in the header block: http://prntscr.com/8vds04</blockquote>
any tips and i’ll be very thankful

[ahmansini1 Friend ahmansini1Join date: August 2014Posts: 51Downloads:12Uploads:0 Thanks: 19]

#752836

<em>@Saguaros 499270 wrote:</em><blockquote>In order to have site in boxed, you need to add blocks into container div like you can see in the header block: http://prntscr.com/8vds04</blockquote>
any tips and i’ll be very thankful

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

#719261

Of course, I will take home page as an example.

This page use the ‘features-intro layout – you can check which layout the page is using via template manager section > Layout tab: http://prntscr.com/8w5q3t

This features-intro layout is loading a block called features-intro and you open the associated PHP file: /root/templates/ja_social_ii/tpls/blocks/features-intro.php

The default code inside this file contains this snippet of code:


<div id="t3-features-intro" class="features-intro">
<?php if ($this->countModules('section')) : ?>
<jdoc:include type="modules" name="<?php $this->_p('section') ?>" style="T3Section" />
<?php endif ?>
</div>


As my above suggestion, you will add container so that it will look like this:


<div id="t3-features-intro" class="features-intro">
<div class="container">
<div class="row">
<?php if ($this->countModules('section')) : ?>
<jdoc:include type="modules" name="<?php $this->_p('section') ?>" style="T3Section" />
<?php endif ?>
</div>
</div>
</div>


Now, on the front-end of your site, you will see that all modules in ‘features-intro’ position are not full-width but included in a container. You can control the width of this container via this less file: /root/templates/ja_social_ii/less/variables.less

Look for // Container sizes


// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet: ((740px + @grid-gutter-width));
@container-sm: @container-tablet;

// Medium screen / desktop
@container-desktop: ((960px + @grid-gutter-width));
@container-md: @container-desktop;

// Large screen / wide desktop
@container-large-desktop: ((1180px + @grid-gutter-width));
@container-lg: @container-large-desktop;

It declares container size for different view port and you can change to your desired value.

Notice that if your site is not running with Development Mode (you can check via Template Manager section), after changing value in less file as above, you will need to compile less to css to see the affect. However, before compiling less to css, REMEMBER to BACKUP all current css files first as when compiling, all css files will be overridden.

Hope this helps.

1 user says Thank You to Saguaros for this useful post

1. ahmansini1

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

#752994

Of course, I will take home page as an example.

This page use the ‘features-intro layout – you can check which layout the page is using via template manager section > Layout tab: http://prntscr.com/8w5q3t

This features-intro layout is loading a block called features-intro and you open the associated PHP file: /root/templates/ja_social_ii/tpls/blocks/features-intro.php

The default code inside this file contains this snippet of code:


<div id="t3-features-intro" class="features-intro">
<?php if ($this->countModules('section')) : ?>
<jdoc:include type="modules" name="<?php $this->_p('section') ?>" style="T3Section" />
<?php endif ?>
</div>


As my above suggestion, you will add container so that it will look like this:


<div id="t3-features-intro" class="features-intro">
<div class="container">
<div class="row">
<?php if ($this->countModules('section')) : ?>
<jdoc:include type="modules" name="<?php $this->_p('section') ?>" style="T3Section" />
<?php endif ?>
</div>
</div>
</div>


Now, on the front-end of your site, you will see that all modules in ‘features-intro’ position are not full-width but included in a container. You can control the width of this container via this less file: /root/templates/ja_social_ii/less/variables.less

Look for // Container sizes


// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet: ((740px + @grid-gutter-width));
@container-sm: @container-tablet;

// Medium screen / desktop
@container-desktop: ((960px + @grid-gutter-width));
@container-md: @container-desktop;

// Large screen / wide desktop
@container-large-desktop: ((1180px + @grid-gutter-width));
@container-lg: @container-large-desktop;

It declares container size for different view port and you can change to your desired value.

Notice that if your site is not running with Development Mode (you can check via Template Manager section), after changing value in less file as above, you will need to compile less to css to see the affect. However, before compiling less to css, REMEMBER to BACKUP all current css files first as when compiling, all css files will be overridden.

Hope this helps.

1 user says Thank You to Saguaros for this useful post

1. ahmansini1

[Author]

Posts