Joomla Templates Club 406,261 posts

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#208872

I want this template be 100% width for footer, header, navhelper and spotlight. but i get an overflow.

Also the footer, banner and breadcrums are not in the center, maybe some part larger als the content-part. I like the header like it is. but it must be 100% and not an overflow, because then the buttons are not showing.

What must i change. The colors are not wright jet, but i always change it. So i can see what there is changing.

@media (min-width: 767px) {

#t3-header.container.t3-header {
background: none repeat scroll 0 0 #ff0000
border: medium none;
width:100%;
}

.container.t3-navhelper {
background: none repeat 0 0 #000
width:100%;
}

.t3-footer .container {
background: none repeat scroll 0 0 #ff0000
padding-top: 50px;
width: 100%;
}

.t3-sl {
background: none repeat scroll 0 0 #ff0000
padding-bottom: 20px;
padding-top: 20px;
padding-left:auto;
padding-right:auto;
width:100%;
}

}

Also a problem if i want to change the arrow of the breadcrums to another color. Photoshop cannot open the layer. I like the arrow to be another color, but it must be done in other way. How must i change that, so i can open the layer and the change is showing in the front.

Also the footer button will not become active in other color. It only got an hover.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#577751

Hello
Revert the custom changes and use THIS documentation to change the layout width .
Compile Less to css after change .
The breadcrumb uses a .gif image you need to change it or add your own image with same size and name /file extension and replace it .
path of image : /templates/ja_hawkstore/images/arrow-breadcrumbs-s.gif

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#577784

Hi

How does the math work and what much i change. So i get an larger layout for computer and tablet. I found the code, but i do not know how to change it

GRID
// ————————————————–

// Default 940px grid
// ————————-
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 0px;
@gridColumnWidth: floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns – 1));

// 1200px min
@T3gridWidth1200: 1000px; // T3 add
@gridGutterWidth1200: 0px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));

// 980px-1199px
@T3gridWidth980: 966px; // T3 add
@gridGutterWidth980: 0px;
@gridColumnWidth980: floor((@T3gridWidth980 – @gridGutterWidth980 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns – 1));

// T3 Add: 768px-979px
@T3gridWidth768: 740px; // T3 add
@gridGutterWidth768: 0px;
@gridColumnWidth768: floor((@T3gridWidth768 – @gridGutterWidth768 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns – 1));

// Fluid grid
// ————————-
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 980px-1199px
@fluidGridColumnWidth980: percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980: percentage(@gridGutterWidth980/@gridRowWidth980);

// T3 Extensed: 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#644078

Hi

How does the math work and what much i change. So i get an larger layout for computer and tablet. I found the code, but i do not know how to change it

GRID
// ————————————————–

// Default 940px grid
// ————————-
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 0px;
@gridColumnWidth: floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns – 1));

// 1200px min
@T3gridWidth1200: 1000px; // T3 add
@gridGutterWidth1200: 0px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));

// 980px-1199px
@T3gridWidth980: 966px; // T3 add
@gridGutterWidth980: 0px;
@gridColumnWidth980: floor((@T3gridWidth980 – @gridGutterWidth980 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns – 1));

// T3 Add: 768px-979px
@T3gridWidth768: 740px; // T3 add
@gridGutterWidth768: 0px;
@gridColumnWidth768: floor((@T3gridWidth768 – @gridGutterWidth768 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns – 1));

// Fluid grid
// ————————-
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 980px-1199px
@fluidGridColumnWidth980: percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980: percentage(@gridGutterWidth980/@gridRowWidth980);

// T3 Extensed: 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#742713

Hi

How does the math work and what much i change. So i get an larger layout for computer and tablet. I found the code, but i do not know how to change it

GRID
// ————————————————–

// Default 940px grid
// ————————-
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 0px;
@gridColumnWidth: floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns – 1));

// 1200px min
@T3gridWidth1200: 1000px; // T3 add
@gridGutterWidth1200: 0px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));

// 980px-1199px
@T3gridWidth980: 966px; // T3 add
@gridGutterWidth980: 0px;
@gridColumnWidth980: floor((@T3gridWidth980 – @gridGutterWidth980 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns – 1));

// T3 Add: 768px-979px
@T3gridWidth768: 740px; // T3 add
@gridGutterWidth768: 0px;
@gridColumnWidth768: floor((@T3gridWidth768 – @gridGutterWidth768 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns – 1));

// Fluid grid
// ————————-
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 980px-1199px
@fluidGridColumnWidth980: percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980: percentage(@gridGutterWidth980/@gridRowWidth980);

// T3 Extensed: 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#577789

Hello
JA Hawkstore template is using Bootstrap style, thus you need to define width by pixel first. For instance:

<blockquote>Width is 980px and it is equal span12</blockquote>

You don’t need to change px in bootstrap span as total width(px) will be divided per each span(px) and it works fine with mobile layouts (responsive)

You can see define width of JA Hawkstore Template in the templates/ja_Hawkstore/less/variables.less file

@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@T3gridWidth1200: 990px; // T3 add
@T3gridWidth980: 940px; // T3 add
@T3gridWidth768: 740px; // T3 add

You can easily define total width in the variables.less file. Once done, click compile LESS to CSS button from admin of JA HawkstoreTemplate (Make sure you backup all old customised css files because this action will override those files).

Hope it help you.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#644083

Hello
JA Hawkstore template is using Bootstrap style, thus you need to define width by pixel first. For instance:

<blockquote>Width is 980px and it is equal span12</blockquote>

You don’t need to change px in bootstrap span as total width(px) will be divided per each span(px) and it works fine with mobile layouts (responsive)

You can see define width of JA Hawkstore Template in the templates/ja_Hawkstore/less/variables.less file

@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@T3gridWidth1200: 990px; // T3 add
@T3gridWidth980: 940px; // T3 add
@T3gridWidth768: 740px; // T3 add

You can easily define total width in the variables.less file. Once done, click compile LESS to CSS button from admin of JA HawkstoreTemplate (Make sure you backup all old customised css files because this action will override those files).

Hope it help you.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#742718

Hello
JA Hawkstore template is using Bootstrap style, thus you need to define width by pixel first. For instance:

<blockquote>Width is 980px and it is equal span12</blockquote>

You don’t need to change px in bootstrap span as total width(px) will be divided per each span(px) and it works fine with mobile layouts (responsive)

You can see define width of JA Hawkstore Template in the templates/ja_Hawkstore/less/variables.less file

@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@T3gridWidth1200: 990px; // T3 add
@T3gridWidth980: 940px; // T3 add
@T3gridWidth768: 740px; // T3 add

You can easily define total width in the variables.less file. Once done, click compile LESS to CSS button from admin of JA HawkstoreTemplate (Make sure you backup all old customised css files because this action will override those files).

Hope it help you.

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#577820

// GRID
// ————————————————–

// Default 940px grid
// ————————-
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 0px;
@gridColumnWidth: floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns – 1));

// 1200px min
@T3gridWidth1200: 2500px; // T3 add
@gridGutterWidth1200: 0px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));

// 980px-1199px
@T3gridWidth980: 1199px; // T3 add
@gridGutterWidth980: 0px;
@gridColumnWidth980: floor((@T3gridWidth980 – @gridGutterWidth980 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns – 1));

// T3 Add: 768px-979px
@T3gridWidth768: 979px; // T3 add
@gridGutterWidth768: 0px;
@gridColumnWidth768: floor((@T3gridWidth768 – @gridGutterWidth768 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns – 1));

I change it into the above. But know it to large. I lost my main menu top en als the others are to large, like the footer etc.. Can you give a full example

I ALSO look on my smart tv. And then it is more then 1200px.

thanks!

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#644114

// GRID
// ————————————————–

// Default 940px grid
// ————————-
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 0px;
@gridColumnWidth: floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns – 1));

// 1200px min
@T3gridWidth1200: 2500px; // T3 add
@gridGutterWidth1200: 0px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));

// 980px-1199px
@T3gridWidth980: 1199px; // T3 add
@gridGutterWidth980: 0px;
@gridColumnWidth980: floor((@T3gridWidth980 – @gridGutterWidth980 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns – 1));

// T3 Add: 768px-979px
@T3gridWidth768: 979px; // T3 add
@gridGutterWidth768: 0px;
@gridColumnWidth768: floor((@T3gridWidth768 – @gridGutterWidth768 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns – 1));

I change it into the above. But know it to large. I lost my main menu top en als the others are to large, like the footer etc.. Can you give a full example

I ALSO look on my smart tv. And then it is more then 1200px.

thanks!

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#742749

// GRID
// ————————————————–

// Default 940px grid
// ————————-
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 0px;
@gridColumnWidth: floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns – 1));

// 1200px min
@T3gridWidth1200: 2500px; // T3 add
@gridGutterWidth1200: 0px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));

// 980px-1199px
@T3gridWidth980: 1199px; // T3 add
@gridGutterWidth980: 0px;
@gridColumnWidth980: floor((@T3gridWidth980 – @gridGutterWidth980 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns – 1));

// T3 Add: 768px-979px
@T3gridWidth768: 979px; // T3 add
@gridGutterWidth768: 0px;
@gridColumnWidth768: floor((@T3gridWidth768 – @gridGutterWidth768 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns – 1));

I change it into the above. But know it to large. I lost my main menu top en als the others are to large, like the footer etc.. Can you give a full example

I ALSO look on my smart tv. And then it is more then 1200px.

thanks!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#577821

Dear Sir You have changed the width to
// 1200px min
@T3gridWidth1200: 2500px; // T3 add

it mean meas the width of the container is 2500px when screen size is 1200px or high so it look like this .
You need to use decrease the size for all so it will fit in your device screen size .
Do the same for other values
just think it simply your screen size is 1200px and u set width 2500px so its out of screen .

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#644115

Dear Sir You have changed the width to
// 1200px min
@T3gridWidth1200: 2500px; // T3 add

it mean meas the width of the container is 2500px when screen size is 1200px or high so it look like this .
You need to use decrease the size for all so it will fit in your device screen size .
Do the same for other values
just think it simply your screen size is 1200px and u set width 2500px so its out of screen .

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#742750

Dear Sir You have changed the width to
// 1200px min
@T3gridWidth1200: 2500px; // T3 add

it mean meas the width of the container is 2500px when screen size is 1200px or high so it look like this .
You need to use decrease the size for all so it will fit in your device screen size .
Do the same for other values
just think it simply your screen size is 1200px and u set width 2500px so its out of screen .

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#577824

If did that at first. But then it is not 100% width. What is after 1200px is not 100%. My screen larger as 1200px, also my smart tv.

I have white blocks in the left and in the right footer, menu, breadcrumbs etc.I want the footer 100%, the breadcrums and also the banner

Also a part is not good responsive tablet and small computer screen. I saw this on my computer. Mobile is correct.

I like to have100% width of screen.

// GRID
// ————————————————–

// Default 940px grid
// ————————-
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 0px;
@gridColumnWidth: floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns – 1));

// 1200px min
@T3gridWidth1200: 1200px; // T3 add
@gridGutterWidth1200: 0px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));

// 980px-1199px
@T3gridWidth980: 1199px; // T3 add
@gridGutterWidth980: 0px;
@gridColumnWidth980: floor((@T3gridWidth980 – @gridGutterWidth980 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns – 1));

// T3 Add: 768px-979px
@T3gridWidth768: 979px; // T3 add
@gridGutterWidth768: 0px;
@gridColumnWidth768: floor((@T3gridWidth768 – @gridGutterWidth768 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns – 1));

// Fluid grid
// ————————-
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 980px-1199px
@fluidGridColumnWidth980: percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980: percentage(@gridGutterWidth980/@gridRowWidth980);

// T3 Extensed: 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

[Author]

Posts