Post by Marcel » Mon Jul 11, 2011 1:51 am

How can I get the footer to be full width. I imagine I will have to add an extra wrapper div around the container div and then make the new wrapper div 100% wide. Then do the same for the footer div. in the footer.tpl file.
I'm trying to figure out which template to edit for the container but there is no container.tpl file within the common template folder. Any help much appreciated.

OpenCart Newbie | Using v1.5.1.1


New member

Posts

Joined
Tue Mar 09, 2010 3:04 am
Location - Colorado

Post by SamNabz » Mon Jul 11, 2011 6:50 am

Marcel wrote:How can I get the footer to be full width. I imagine I will have to add an extra wrapper div around the container div and then make the new wrapper div 100% wide. Then do the same for the footer div. in the footer.tpl file.
I'm trying to figure out which template to edit for the container but there is no container.tpl file within the common template folder. Any help much appreciated.
Hi Marcel,

I would imagine that the home.tpl file that's in the common template folder would be your best bet as it ends with this:

Code: Select all

</div>
<?php echo $footer; ?> 

Cheers, Sam


Active Member

Posts

Joined
Wed Jul 06, 2011 7:32 am
Location - Sydney, Australia

Post by TheSponge » Mon Jul 11, 2011 3:01 pm

search for entries for footer in your CSS file, here you can change the width to 100%, I dont have access to the files at the moment but I think its #footer

User avatar
New member

Posts

Joined
Sat Mar 12, 2011 10:35 pm

Post by Marcel » Mon Jul 11, 2011 9:04 pm

Thanks for all the replies - I did try to make the footer 100% but the footer is inside the #container div which is set to 960px wide. When you make the container 100% wide all the page content fills the screen. I think the best way to do this is to place the #container div in another #container-wrapper div that can be set to 100% and leave the container at 960px. Do the same for the footer.

See the little layout pic below - I'm not sure where to add these wrapper divs

Thanks

Attachments

layout.png

layout.png (12.76 KiB) Viewed 7111 times


OpenCart Newbie | Using v1.5.1.1


New member

Posts

Joined
Tue Mar 09, 2010 3:04 am
Location - Colorado

Post by alin » Fri Jul 15, 2011 2:33 am

1. find the footer.tpl in ...\template\common.
if you wan like this
Capture.PNG

Capture.PNG (25.71 KiB) Viewed 7075 times

then cut this

Code: Select all

<div id="powered"><?php echo $powered; ?></div>
paste before this

Code: Select all

</body></html>
if you want to do like this
Capture1.PNG

Capture1.PNG (50.99 KiB) Viewed 7075 times

then cut

Code: Select all

</div>
before

Code: Select all

</body></html>
paste before

Code: Select all

<div id="footer">
Hope this can help
Thanks

GOLDEN LEOPARD SYSTEM SOLUTION
An ICT System Solution Company in Vietnam
Website: Store: http://opencart.goleo.vn or http://www.opencart.com/index.php?route ... rname=alin


User avatar
Active Member

Posts

Joined
Fri Jun 10, 2011 8:16 pm

Post by Marcel » Fri Jul 15, 2011 4:24 am

The second one is what I'm looking for. That kinda works but look what happens to the info inside the footer.

OpenCart Newbie | Using v1.5.1.1


New member

Posts

Joined
Tue Mar 09, 2010 3:04 am
Location - Colorado

Post by alin » Fri Jul 15, 2011 1:07 pm

Marcel wrote:The second one is what I'm looking for. That kinda works but look what happens to the info inside the footer.
The second one is what I'm looking for.
looking for </div> right before </body></html>
That kinda works but look what happens to the info inside the footer
open stylesheet.css in ..\yourtheme\stylesheet\
add this

Code: Select all

#footer #info{
	margin: 0 auto;
	width: 960px;
}
open footer.tpl in ..\yourtheme\template\common\
find

Code: Select all

<div id="footer">
add after

Code: Select all

<div id="info">
find

Code: Select all

        <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
      </ul>
    </div>
add after

Code: Select all

</div>
this is result
Capture4.PNG

Capture4.PNG (35.04 KiB) Viewed 7054 times

if you want to make header, menu.. to 100% also then edit stylesheet.css as following:

Code: Select all

#container {
    ...
    width: 100%;
for other ID like #head, #menu, #content (which you want it be 960px and center it)
edit or add

Code: Select all

width: 960px;
margin-right: auto;
margin-left: auto;
Thanks

GOLDEN LEOPARD SYSTEM SOLUTION
An ICT System Solution Company in Vietnam
Website: Store: http://opencart.goleo.vn or http://www.opencart.com/index.php?route ... rname=alin


User avatar
Active Member

Posts

Joined
Fri Jun 10, 2011 8:16 pm

Post by Marcel » Fri Jul 15, 2011 2:46 pm

Thanks Alin much appreciated!

OpenCart Newbie | Using v1.5.1.1


New member

Posts

Joined
Tue Mar 09, 2010 3:04 am
Location - Colorado

Post by Marcel » Sat Jul 16, 2011 11:33 am

Works fine on the home page but the other pages break. The left and right columns align with the edges of the screen

OpenCart Newbie | Using v1.5.1.1


New member

Posts

Joined
Tue Mar 09, 2010 3:04 am
Location - Colorado

Post by alin » Mon Jul 18, 2011 2:09 am

Marcel wrote:Works fine on the home page but the other pages break. The left and right columns align with the edges of the screen
Hi,
You need change some more in stylesheet and \catalog\view\theme\yourtheme\template\*.tpl
for example home.tpl:
find

Code: Select all

<?php echo $column_left; ?>
add before

Code: Select all

<div id="contentwrapper">
find

Code: Select all

<?php echo $content_bottom; ?></div>
add after

Code: Select all

</div>
do the same for other .tpl file which included side columns

now edit your stylesheet.css

add

Code: Select all

#contentwrapper {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}
find

Code: Select all

#content {
replace with

Code: Select all

#contentwrapper #content {
find

Code: Select all

#column-left + #column-right + #content, #column-left + #content {
replace with

Code: Select all

#contentwrapper #column-left + #column-right + #content, #contentwrapper #column-left + #content {
find

Code: Select all

#column-right + #content
replace with

Code: Select all

#contentwrapper #column-right + #content
this work for me, let take alook my site http://goleo.vn
Hope this work for you also, good luck

GOLDEN LEOPARD SYSTEM SOLUTION
An ICT System Solution Company in Vietnam
Website: Store: http://opencart.goleo.vn or http://www.opencart.com/index.php?route ... rname=alin


User avatar
Active Member

Posts

Joined
Fri Jun 10, 2011 8:16 pm

Post by SpoonIsBad » Thu Nov 03, 2011 6:43 am

Does anyone have any ideas on to have your footer be placed behind your container? I've tried messing around with z-index but no luck :(!

www.asprintshop.com/PSBA/upload

I'd like the footer to look like the header, where it bleeds into the container some, but I achieved the look of the header by changing the body BG, so I'm having a hard time figuring out a way to do the same with footer.

www.happybeavertees.com


Newbie

Posts

Joined
Fri Aug 19, 2011 12:52 am

Post by remcofaasse » Fri Jan 06, 2012 12:25 am

alin wrote:
Marcel wrote:The second one is what I'm looking for. That kinda works but look what happens to the info inside the footer.
The second one is what I'm looking for.
looking for </div> right before </body></html>
That kinda works but look what happens to the info inside the footer
open stylesheet.css in ..\yourtheme\stylesheet\
add this

Code: Select all

#footer #info{
	margin: 0 auto;
	width: 960px;
}
open footer.tpl in ..\yourtheme\template\common\
find

Code: Select all

<div id="footer">
add after

Code: Select all

<div id="info">
find

Code: Select all

        <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
      </ul>
    </div>
add after

Code: Select all

</div>
this is result
Capture4.PNG
if you want to make header, menu.. to 100% also then edit stylesheet.css as following:

Code: Select all

#container {
    ...
    width: 100%;
for other ID like #head, #menu, #content (which you want it be 960px and center it)
edit or add

Code: Select all

width: 960px;
margin-right: auto;
margin-left: auto;
Thanks
--------
Hi Alin,
The above works for me. But I have a problem on a product page; because than the footer shrinks to the size of the product page, while on the home page is fine (complete page with). Do you have a solution for this?
Thanks for the reply, Remco

New member

Posts

Joined
Mon Dec 05, 2011 2:20 am
Who is online

Users browsing this forum: No registered users and 34 guests