Public Forums 71,145 posts

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#187967

Hi

I change the width and move the blocks to the center of my web with css and It seems to work.But when I resize the window(more smaller),within the range of resolution parameters,It makes it more smaller(for instance,1280 to 1240 it makes more smaller)

The link to my web is testweb1.no-ip.biz,You have to click in the folder named CRIS.
I’am working with T3 Quickstart for Joomla! 2.5,blank template.
I want that blocks cover all dark blue area altough resize the window.How can I do that?

Thanks again

[tilovas Friend tilovasJoin date: February 2013Posts: 33Downloads:0Uploads:5 Thanks: 4 Thanked: 16 times in 9 posts]

#494714

Hi,

You need to read the documentation of how to change width of template.Template Width Customization Because you don’t need to change anythink in custom.css file for changing width of your site. In fact, I would suggest you read the entire documentation of T3-framework.
And for.. how to cover all dark blue area when you’re resizing.. there are several ways. One of them – you can use this code in custom.css:


body {
background: url(../images/fondo.jpg) no-repeat center top #000
background-size: 126%;
}


But I would suggest you to not use the img biger than you need. Resize your img and use “background-size: 100%;”

1 user says Thank You to tilovas for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#494716

Thanks again.I have read the documentation,but I didn’t know at all.I read it again.
I have to change width in variable.less,click compile less to css and this is it no?
For cover dark blue area,I don’t want to cover it making it more bigger.I want that blocks cover this zone.I keep trying.
To move the blocks,which propertie of css do you recomend?

Thanks

[tilovas Friend tilovasJoin date: February 2013Posts: 33Downloads:0Uploads:5 Thanks: 4 Thanked: 16 times in 9 posts]

#494722

Ok, I will show you how you can change one of the parameters. But remember.. when you changing one of the resolution parameters, you will have to change the other. I mean rezolution of mobile, tablet etc.
This code will help you to make a fixed width:

Firs you need change the size of img (background img), if you not done it yet, thant use this code:


body {
background: url(../images/fondo.jpg) no-repeat center top #000
background-size: 126%;
}


In fact, you already have this code in your custom.css file, just without “background-size: 126%;” So write it. Than you can make a fixed width for eg. footer. Code for fixed footer (this code is only suitable for your template):


.t3-footer {
width: 70.9%;
float: left;
margin-left: 12.3%;
}


Write it in custom.css file. Don’t forget this code only for footer, change the other blocks by using this params. And of course don’t forget the other rezolutions. Gl!

1 user says Thank You to tilovas for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#494723

I prove to change the width with variables.less.My computer has a resolution of 1280×800 so I decided to change this file

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

If I’am not wrong this is the width for resolution above 1200px.I changed @T3gridWidth1200 to 979.I save the file,and I click compile less to css.The width of template changes,but there’s a part that have the old width.I upload a photo(before/after)and mark the part I refer.
Why this part doesn’t change?

---

Attachments:

1. 
2. 

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#494727

<em>@tilovas 375316 wrote:</em><blockquote>Ok, I will show you how you can change one of the parameters. But remember.. when you changing one of the resolution parameters, you will have to change the other. I mean rezolution of mobile, tablet etc.
This code will help you to make a fixed width:

Firs you need change the size of img (background img), if you not done it yet, thant use this code:


body {
background: url(../images/fondo.jpg) no-repeat center top #000
background-size: 126%;
}


In fact, you already have this code in your custom.css file, just without “background-size: 126%;” So write it. Than you can make a fixed width for eg. footer. Code for fixed footer (this code is only suitable for your template):


.t3-footer {
width: 70.9%;
float: left;
margin-left: 12.3%;
}


Write it in custom.css file. Don’t forget this code only for footer, change the other blocks by using this params. And of course don’t forget the other rezolutions. Gl!</blockquote>

Many many many Thanks!!! It works very good!!

[tilovas Friend tilovasJoin date: February 2013Posts: 33Downloads:0Uploads:5 Thanks: 4 Thanked: 16 times in 9 posts]

#494743

<em>@il_bujia 375319 wrote:</em><blockquote>I prove to change the width with variables.less.My computer has a resolution of 1280×800 so I decided to change this file

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

If I’am not wrong this is the width for resolution above 1200px.I changed @T3gridWidth1200 to 979.I save the file,and I click compile less to css.The width of template changes,but there’s a part that have the old width.I upload a photo(before/after)and mark the part I refer.
Why this part doesn’t change?</blockquote>

Because almost all of the columns have their own backgrounds. And as the “body” background goes a full width the other backgrounds goes a full width too. Of course you can change it by using custom.css file. Just write for eg. code like this:


.t3-copyright {
margin: 0 100px;
}

or

.t3-copyright {
margin: 0 100px 0 80px;
}

or

.t3-copyright {
width: 70.9%;
float: left;
margin-left: 12.3%;
}


I don’t even know which is better. Probably I would use the first one. Of course the first code it’s not good for you, because that your dark blue area is not in the center. And this 100px just as an example, couse your site now is not working, so I can’t check. So when you’re resized the width of your site by using “variables.less” you’ve changed the widht of your site, but not your backgrounds. Gl!

1 user says Thank You to tilovas for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#494745

Thanks again tilovas,with the other css the site works fine.

[Author]

Posts