Thread

Hi

I want to modify a website that built with the template “logical blocks”.

All i need is the template width to be 100% of the page instead of 752px.

Appreciate any help

Sol

I used a theme once, but in the end did so many modifications that it was better to copy the content of the theme files to the templates of EE and then I could do with it what I liked.

But then again you can also modify the files directly in the folder themes of course

If you want to see how it looks like on 100% you could use the web-dveloper plugin for Firefox (if it is done through CSS that is). That might also give you an idea of the issues.

noregt thank you for the reply,

the website is running with the template logical blocks..i want to keep it with that template but i want to modify that the width of the website will be 100% meaning that it will us the whole page and not only the center like now.

is that very hard for me to do by myself or do i need a web designer for it.

ty

Sol

Well I just had a quick go at the template and set the wrapper to 100%. See attachment.

It’s a bit more then just setting the wrapper to the full width, as you can see you have to set other boxes as well. It can be done, by adjusting the CSS file from the template, but acquires some more work.

Edit-Add: I see we were responding at the same time 😊

You can change it, the widths are all in the CSS and they are all fixed widths. You’ll have to go through that and find the widths…they look like this…
—————
#wrapper {
      width: 752px;
#header {
      width: 750px;
#about_site {
      width: 483px;
#blog {
      width: 483px;
—————

You’ll probably need to go through the whole CSS and make a little diagram of all the parts and widths. Some are probably dependent on others. Currently they all add up and fit within the overall fixed width. You will also need to modify the header graphic if you want that to fill 100% also.

It’s probably easier to stay with a fixed width (wider) by changing the values. If you want to have it as 100%, you’ll probably need to use percentage values for all the widths or set some as fixed (sidebar?) and some as flexible. Or, you may be able to set some percentages and let the others default to fill. Without studying the template I can’t be sure.

noregt ty very much i will work on it later and try it.

Sol

Edit-Add: I see we were responding at the same time 😊

You can change it, the widths are all in the CSS and they are all fixed widths. You’ll have to go through that and find the widths…they look like this…
—————
#wrapper {
      width: 752px;
#header {
      width: 750px;
#about_site {
      width: 483px;
#blog {
      width: 483px;
—————

You’ll probably need to go through the whole CSS and make a little diagram of all the parts and widths. Some are probably dependent on others. Currently they all add up and fit within the overall fixed width. You will also need to modify the header graphic if you want that to fill 100% also.

It’s probably easier to stay with a fixed width (wider) by changing the values. If you want to have it as 100%, you’ll probably need to use percentage values for all the widths or set some as fixed (sidebar?) and some as flexible. Or, you may be able to set some percentages and let the others default to fill. Without studying the template I can’t be sure.

Thank You, that answer give me an idea what i have to do.

Appreciate your help.

Sol

I agree with PXLated on the screen width. Wouldn’t set it to 100% myself, I sometimes get sites like that on my 1650 px wide screen… Unreadable!

Currently your best bet is 950 px wide, which is wide enough for most screens without getting very long text lines

This site uses 925 pixels for instance. If you want the design to look wider, you normally do that with a repeating background image. This site does this with grey black header for instance

Anyone is interested in doing it on the original template and i will copy and modify bymyself the website and the images. And if yes how much will you charge for it?

Please PM if interested.

Thank You in advance

Sol

I love liquid designs but they are tricky unless you mix some fixed width (or percentages) with the overall 100%. As noregt mentions, the width of text blocks can become unreadable if the visitor has their browser window opened up. Throw in the fact that graphic elements are fixed width, unless they are repeating background images, and you can have a mess.

I love liquid designs but they are tricky unless you mix some fixed width (or percentages) with the overall 100%. As noregt mentions, the width of text blocks can become unreadable if the visitor has their browser window opened up. Throw in the fact that graphic elements are fixed width, unless they are repeating background images, and you can have a mess.

So its not an easy as i thought so 😊

TY PXLated

Sol

Hiya,

Sorry to pop in on the end like this but if you are doing a fluid layout then you can set everything that you need to set to :

width: 100%;

and then to make sure that it doesn’t look odd on really large monitors use the following in conjunction with it :

.my-box-css-name {
width: 100%
max-width: 1000px;
}

The 1000px can be anything you specify but basically it won’t ever be able to stretch past that value. Can sometimes help.

Best wishes,

Mark

Ya, but max-width and min-width aren’t cross-browser compatible (looking at you IE)
;-(

Well I just ignore IE anyway.

I’m currently trying to find a way of hacking into Microsoft and deleting every trace of it anyway so people won’t ever use it again!! 😊

Best wishes,

Mark

Mark…If you could write a virus, trojan horse or something that would infect all Windows machines, wipe out their current IE install and install IE7 we’d make a little progress. 😉