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
Hi Marcel,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.
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
See the little layout pic below - I'm not sure where to add these wrapper divs
Thanks
Attachments
layout.png (12.76 KiB) Viewed 7111 times
OpenCart Newbie | Using v1.5.1.1
if you wan like this then cut this
Code: Select all
<div id="powered"><?php echo $powered; ?></div>
Code: Select all
</body></html>
Code: Select all
</div>
Code: Select all
</body></html>
Code: Select all
<div id="footer">
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
Marcel wrote:The second one is what I'm looking for. That kinda works but look what happens to the info inside the footer.
looking for </div> right before </body></html>The second one is what I'm looking for.
open stylesheet.css in ..\yourtheme\stylesheet\That kinda works but look what happens to the info inside the footer
add this
Code: Select all
#footer #info{
margin: 0 auto;
width: 960px;
}
find
Code: Select all
<div id="footer">
Code: Select all
<div id="info">
Code: Select all
<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
</ul>
</div>
Code: Select all
</div>
Code: Select all
#container {
...
width: 100%;
edit or add
Code: Select all
width: 960px;
margin-right: auto;
margin-left: auto;
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
Hi,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
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; ?>
Code: Select all
<div id="contentwrapper">
Code: Select all
<?php echo $content_bottom; ?></div>
Code: Select all
</div>
now edit your stylesheet.css
add
Code: Select all
#contentwrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
Code: Select all
#content {
Code: Select all
#contentwrapper #content {
Code: Select all
#column-left + #column-right + #content, #column-left + #content {
Code: Select all
#contentwrapper #column-left + #column-right + #content, #contentwrapper #column-left + #content {
Code: Select all
#column-right + #content
Code: Select all
#contentwrapper #column-right + #content
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
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.
--------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.looking for </div> right before </body></html>The second one is what I'm looking for.
open stylesheet.css in ..\yourtheme\stylesheet\That kinda works but look what happens to the info inside the footer
add thisopen footer.tpl in ..\yourtheme\template\common\Code: Select all
#footer #info{ margin: 0 auto; width: 960px; }
findadd afterCode: Select all
<div id="footer">
findCode: Select all
<div id="info">
add afterCode: Select all
<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li> </ul> </div>
this is result if you want to make header, menu.. to 100% also then edit stylesheet.css as following:Code: Select all
</div>
for other ID like #head, #menu, #content (which you want it be 960px and center it)Code: Select all
#container { ... width: 100%;
edit or addThanksCode: Select all
width: 960px; margin-right: auto; margin-left: auto;
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
Users browsing this forum: No registered users and 34 guests