Joomla Templates Club 406,261 posts

[imsleepy Friend imsleepyJoin date: January 2009Posts: 451Downloads:0Uploads:0 Thanks: 94 Thanked: 45 times in 1 posts]

#137502

Hello,

I hope someone can help me with this. I am using Sanidine II (the light one) and I need to make the header and footer background images or colors (whichever it is) liquid width. I am trying to emulate our current site which is all html.

What I would like is the header area backgrounds from the top to the tabbed menu to be liquid width (with the menu still constrained to the area it is in now) and the footer area from the bottom menu on down to be liquid width. I am sure this is a fairly easy change I just can’t figure out which file or files to change. Spent about 15 hrs on this so far. Really need help. :confused:

Thanks!

[rhand Friend rhandJoin date: November 2006Posts: 213Downloads:0Uploads:2 Thanks: 9 Thanked: 15 times in 1 posts]

#288197

Do you have the test site online where people can have a look? Normally you need to edit template.css. I haven’t checked out Sanidine, but I am quite sure it is that css file. In JA Olivine it is this piece of code:
#ja-header,
#ja-container,
#ja-footer {
width: 950px;
margin: 0 auto;
clear: both;
}


1 user says Thank You to rhand for this useful post

1. imsleepy

[rhand Friend rhandJoin date: November 2006Posts: 213Downloads:0Uploads:2 Thanks: 9 Thanked: 15 times in 1 posts]

#288204

In JA Sanidine II the width of the header and header background is determined by #ja-wrapper in template.css on line 550. That goes the same for the footer. Just change the wrapper width:

#ja-wrapper
background:transparent url(../images/wrapper-bg.png) repeat-y scroll center center;
clear:both;
margin:0 auto;
width:950px;
}

If you make the width:auto and adjust the width of the wrapper background images you get pretty far. Give it a shot.

1 user says Thank You to rhand for this useful post

1. imsleepy

[rhand Friend rhandJoin date: November 2006Posts: 213Downloads:0Uploads:2 Thanks: 9 Thanked: 15 times in 1 posts]

#288206

ja-botnav en ja-botsl will need fixing as well if you go for this option. But I still think it is better to go for a fixed width and adjust all other boxes and images accordingly.

[imsleepy Friend imsleepyJoin date: January 2009Posts: 451Downloads:0Uploads:0 Thanks: 94 Thanked: 45 times in 1 posts]

#288223

Thanks so much!!! I am off to give all of these suggestions a try. I’ll let you know the outcome.

[imsleepy Friend imsleepyJoin date: January 2009Posts: 451Downloads:0Uploads:0 Thanks: 94 Thanked: 45 times in 1 posts]

#288335

Well, I didn’t have much luck. Adjusting the wrapper made the entire page liquid width. It was a start, but after a lot of playing, I had to go back to the original. Apparently there are too many elements that need changed. Any other suggestions?

[rhand Friend rhandJoin date: November 2006Posts: 213Downloads:0Uploads:2 Thanks: 9 Thanked: 15 times in 1 posts]

#288337

If you want to go for a liquid wrapper I’m afraid you need to edit several elements (boxxes and background images).The wrapper decides how wide most inner elementsl. So some other elements need mending as well. I don’t see any other quicker way. Why do you want a liquid wrapper? To cover the entire page?

[imsleepy Friend imsleepyJoin date: January 2009Posts: 451Downloads:0Uploads:0 Thanks: 94 Thanked: 45 times in 1 posts]

#288338

Thank you for being so patient. I have never worked with a tableless design before. I built my original site in Notepad using HTML and lots of tables. Because it has grown so huge, I need something that is more organized and easier to edit. The left menu on the inner pages has to be updated on every page when I make a change. My Joomla site (just started it 2 days ago and hoping to complete it before the end of the month). I am hoping that when I am done it looks as much like the old one (the inner pages at least) as possible. Any help you can give would be appreciated.

[rhand Friend rhandJoin date: November 2006Posts: 213Downloads:0Uploads:2 Thanks: 9 Thanked: 15 times in 1 posts]

#288341

No problem I’m sleepy. Will be going offline soon. Getting sleepy myself 🙂 I see that your old site (all in notepad? Impressive!) has a header that covers the entire page.
You could let the wrapper cover all except the header. Then give the header a second wrapper #wrapper-2 with width:auto; in template.css
#wrapper-2 {width:auto;}
Then the header covers the page and the rest remains the same…

[imsleepy Friend imsleepyJoin date: January 2009Posts: 451Downloads:0Uploads:0 Thanks: 94 Thanked: 45 times in 1 posts]

#288345

I’ll give that a try. Do you happen to know how many files I will need to edit to make this happen? I assume the index.php for the template and the template.css, haven’t looked yet. Anything else?

Sleep time huh? I have been up for only 2 hrs. We are either on different sides of the globe or you have been up all night. 😀

Thanks again. I will update with results… if I have any. Not real good with php and css tableless designs. :confused:

[rhand Friend rhandJoin date: November 2006Posts: 213Downloads:0Uploads:2 Thanks: 9 Thanked: 15 times in 1 posts]

#288391

Two files you need to edit.: index.php and template.php. You will need to edit boxes in index.php and change their size and style in the css file. I think you’ll have to do some reading or get some hired help. I can recommend Joomla.org has a lot of documentation as well as Howtojoomla and I am for hire

P.S. I just got up. Modifying this post at )9:29 local time. Guess where I’m @ …..

[imsleepy Friend imsleepyJoin date: January 2009Posts: 451Downloads:0Uploads:0 Thanks: 94 Thanked: 45 times in 1 posts]

#288521

Yesterday I played with the index.php and the template.css pages until the wee hours this morning… currently 11:50am my time. I got pretty handy and figuring out the module placement and adding new modules. I found that if I move the ja-wrapper down a bit, I can get the top to expand without affecting any of the main content. That’s good. What I can’t figure out is getting the darn menu to stay where I want it.

When I do things like this, I always back up the original files first to prevent disaster. Reverted back to the original when I was done playing around.

I guess my biggest problem is the fact that I really do love the layout of my HTML site and I am not going to really be happy until I figure out how to make the new one as close as possible. I am doing this out of need. I need to be able to make easier updates. Sometimes just a simple color change can be a pain. I do use css in my HTML site, but there are some things that just aren’t a simple change.

Still working on it. I will post an update as to what I have done when I get someplace that looks good. So far it all looked pretty funky.

Where are you? Hmmmm. First I have to post this to find out what the time zone for this forum is. I did notice it’s 3 hrs off from your post.

[imsleepy Friend imsleepyJoin date: January 2009Posts: 451Downloads:0Uploads:0 Thanks: 94 Thanked: 45 times in 1 posts]

#288522

<em>@rhand 108463 wrote:</em><blockquote>

P.S. I just got up. Modifying this post at )9:29 local time. Guess where I’m @ …..</blockquote>

Well, I was leaning toward London for the location of this forum… might be close (time zone anyway) You could be in Egypt , South Africa, or Iraq even. We really are in the global age aren’t we. I never get used to the idea that people aren’t right in my area. I tend to work in the wee hours quite a bit and generally wind up talking to people from NZ and Australia.

So where am I? It is now nearly noon my time.

[rhand Friend rhandJoin date: November 2006Posts: 213Downloads:0Uploads:2 Thanks: 9 Thanked: 15 times in 1 posts]

#288572

You’re at the end of a continent there. Alaska, right? I am @ GMT+3 so London + 3, Russian capital. Home country is Holland, but that’s another story….
Keep up the good work. It’s like a jigsaw puzzle. You’ll slowly get the pieces together. It’s often layers/boxes and positioning them with css that takes time. And then not all browsers work the same. I love Firefox and always struggel with Internet Explorer 6&7

[Author]

Posts