Joomla Templates Club 406,261 posts

[jonlb Friend jonlbJoin date: April 2007Posts: 6Downloads:0Uploads:0]

#129009

Hi all,

Just thought i’d post here and hopefully someone could help.

I’d love to use the Helio template on my Ecommerce site but i’m having a few problems.

I really want to stretch the website to fluid width on the users screen. e.g. have the sidebars left and right at the sides of the screen..

Is there any “EASY” way to do this? because if I could do that this template is definately a keeper for me!!!

Hope someone can help. Thankyou in advance!

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#250931

Open the template.css file and find this line here:

#ja-header, #ja-mainnav, #ja-container, #ja-botsl, #ja-footer {
clear:both;
margin:0 auto;
width:920px;
}
Try to change what i marked in red to 98%,, that should give you a fluid template, but make sure you check all imags/graphics that they are wide enough to handle a wide screen, the slideshow needs to go away.

[jonlb Friend jonlbJoin date: April 2007Posts: 6Downloads:0Uploads:0]

#251025

Hi menalto. I changed that option and absolutely nothing changed :-/ I had already previously changed it to 100% and it did nothing. nothing moves at all.

Would you happen to have any more suggestions pleaaase? 😀

Thanks!

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#251026

Check your css file if it looks like this:
#ja-header,
#ja-mainnav,
#ja-container,
#ja-botsl,
#ja-footer {
width: 920px;
margin: 0 auto;
clear: both;
}

#ja-header,
#ja-mainnav,
#ja-container,
#ja-botsl,
#ja-footer {
width: 920px;
margin: 0 auto;
clear: both;
}

.narrow #ja-header,
.narrow #ja-mainnav,
.narrow #ja-container,
.narrow #ja-botsl,
.narrow #ja-footer {
width: 750px;
}


[jonlb Friend jonlbJoin date: April 2007Posts: 6Downloads:0Uploads:0]

#251028

Hey menalto, here is the snippet of css from my file, including the 98% change you told me to make.

#ja-header,
#ja-mainnav,
#ja-container,
#ja-botsl,
#ja-footer {
width: 98%;
margin: 0 auto;
clear: both;
}

#ja-header,
#ja-mainnav,
#ja-container,
#ja-botsl,
#ja-footer {
width: 920px;
margin: 0 auto;
clear: both;
}

.narrow #ja-header,
.narrow #ja-mainnav,
.narrow #ja-container,
.narrow #ja-botsl,
.narrow #ja-footer {
width: 750px;
}

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#251029

Delete this one:

#ja-header,
#ja-mainnav,
#ja-container,
#ja-botsl,
#ja-footer {
width: 920px;
margin: 0 auto;
clear: both;
}
And give me your site url

[jonlb Friend jonlbJoin date: April 2007Posts: 6Downloads:0Uploads:0]

#251030

oh BOY! i’m getting there Menalto ! 😀 The only problem now is that it stretches the size of the side menus. I’d really like to hard limit the sidebars to 180px all the time, and fluid width the rest of the site. Is this within reasonable requirements of the template?

the site im working on at the moment is http://www.justshopok.com/vm11 – it’s still a shell, i’m trying to configure it before going live as a replacement on my main site.

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#251031

Play around with the width value on this here:
template.css line 537:


#ja-col1 {
float:left;
overflow:hidden;
width:27%;
}

And template.css line 524:


#ja-content {
clear:both;
display:block;
float:right;
width:69%;
}


[jonlb Friend jonlbJoin date: April 2007Posts: 6Downloads:0Uploads:0]

#251034

hmm, yeah i tried that, and it gets SO screwed up. I tried that on another template that didnt have fluid width support.

if your still ont he site, looks “ok” when it’s full screened, soon as you stretch the site in i lose the side bar down below and all sorts.

Is there a reason why so many theme designers have stopped giving fluid width options? I know sites look really nice when they’re kinda, centered in the middle of the page with side shadows etc etc, but i just need a really standard template that has contained sidebar items, and i need the sidebars at the sides of the pages with a nice big central stage.

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#251035

Thats beacouse you have set the left position to a fixed width: 180px;
If you gonna have fluid width you cant have anything at a fixed width, some way on that road it will crash.

[jonlb Friend jonlbJoin date: April 2007Posts: 6Downloads:0Uploads:0]

#251043

oh ****, thats really tricky :-/ problem is I have little banner adverts that i create to 180px, and if the sidebar doesn’t stay at a static width they will look terrible.. i’m sure i’ve seen sites that are fluid width without sidebars that are % width 🙁

play.com for instance, they have static sidebars and a fluid width with a min-width of about 950px.
is there no way you know that i can get around this? just simply need a full width padge that scales with the window and 2x 180px sidebars that don’t change size.

[Author]

Posts