Template Modification

[laurence600]

Hi all,

I'm new to template editing and wonder if someone could help with a few things I want to change -

1) How do I change the overall width of the template, so that it dosent fit the full screen ?

2) How can I change the number of hot picks shown across the width i.e. i only want three wide instead of the standard four wide ?

3) How can I aslo increase the size of the hot picl picture on the home page?

Many thanks

Laurence

[ushop-online]

1) Surround the whole Shop Window with a fixed sized table of your choice.
2) http://www.shopwindowforum.com/showpost.php?p=395&postcount=28 here you will see a full description of this part of the script where the number of hot picks can be altered and category added.
3) The information comes from the merchants database so you can only force a size which would look terrible.

[laurence600]

Hi, thanks for the response, but how do I -

'Surround the whole Shop Window with a fixed sized table of your choice.'

Im a bit of a novice when it comes to tables.

Thanks

Laurence

[ushop-online]

Create a file called header.php and another called footer.php

In header place this code
<TABLE WIDTH=XXX CELLPADDING=0 CELLSPACING=0 BORDER=0><TR><TD>

In footer place this code
</TD></TR></TABLE>

Open the files in root of Shop Window -- category/index/product/search.php -- then where you find <?php at the top of the pages replace with
<?PHP
include("http://YOURDOMAIN/header.php");
?>
<?php
then find ?> at the bottom of the pages and replace with
?>
<?PHP
include("http://YOURDOMAIN/footer.php");
?>

Now you have an adjustable table surrounding your ShopWindow which you can adjust the width of by replacing WIDTH=XXX with WIDTH="90%" or WIDTH="800" whichever way you want it - flexible or fixed.

Also you can use the header and footer to add other content to your pages to surround your shop.

Remember to add the 'ALIGN=' tag to the '<TABLE' call so that you can centre it or locate to the right but not needed if you want it on the left because that is default.

The reason for giving the header and footer '.php' is so you can add php features into them if required.

[Donk]

A better way would be to edit the css stylesheet for the template you are using.

View your page source to find the path to your style sheet then edit it (in notepad)

Find #sw_frame and add a width attribute.

#sw_frame {
margin-right:auto;
margin-left:auto;
width:750;
padding:0px;
text-align:left;
}

[ushop-online]

I agree however laurence has shown that he doesn't have those skills and it would be easier later when, or if, he needs to add anything else outside of the shop.

[laurence600]

Hi your a star it works a treat, thanks a lot for your help.

[ushop-online]

Great -- whichever you used.

[laurence600]

Ok I may be pushing my luck now, but if I wanted to add a column on the right to include a long banner, code I just add the banner code to a file and if so which one?

Thanks in advance guys.

Laurence

[ushop-online]

which method above did you use?

[laurence600]

Your method, with the header and footer files.

[ushop-online]

ok - hang on

[ushop-online]

<TABLE>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>

Basic two column structure for table.

One will be your shop and one will be your ad

Add as before the table structure width etc to table then in the first td add width="100%" and the second td add width="120" or width of your banner

[laurence600]

Sorry to sound dim, but does -

<TABLE>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>

go in the header file I created ?

[ushop-online]

As before....
<TABLE> // same as you have now
<TR>
<TD> // <-- alter as instructed // </TD>
<TD> // <-- alter as instructed //
goes in header
</TD>
</TR>
</TABLE>
goes in footer

[laurence600]

Sorry, I getting myself confused now, I have the Header file as -

<TABLE>
<TR>
<table align=center TABLE WIDTH=75% CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD> TABLE WIDTH=100% </TD>
<TD> TABLE WIDTH=120 </TD>
</TR>
</TABLE>

But It doesnt work, so I'm guessing its wrong :(

Also where do I put the banner code.

PS Thanks for all your help !!!!!

[ushop-online]

<TABLE WIDTH=XXX CELLPADDING=0 CELLSPACING=0 BORDER=0> // same as you have now
<TR>
<TD width="100%"> // SHOP WINDOW HERE // </TD>
<TD width="120"> // BANNER HERE //

this is your header as before but with extra column [not add but replace]

the footer stays the same

Sorry trying to do too many things at same time forget above ^^^^^^^^^^^^^^^

<TABLE WIDTH=XXX CELLPADDING=0 CELLSPACING=0 BORDER=0> // same as you have now
<TR>
<TD width="100%"> // SHOP WINDOW HERE //

This is your header ^^^^

</TD>
<TD width="120"> // BANNER HERE // </TD>
</TR>
</TABLE>

This is your footer ^^^^

[ushop-online]

REMOVED LINK
Rough and ready but this shows how it works.

valign=top in td pulls the banner to top of page plus in this example I have set border to 1 so you can see it

[laurence600]

Hi,

Thanks for your help, the result is - www.gotchashopping.co.uk

My only problem is getting the top banner to be central to the logo?

Laurence

[ushop-online]

<!-- BEGIN ProvideSupport.com Graphics Chat Button Code -->
This support code is providing problem -- when removed everything lines up ok but breaks layout when added.

Too many <div> 's inside each other to my mind

You also seem to have gotchashopping js in twice

[laurence600]

It was more the top banner, by the logo, it doesnt allign with the logo? It needs to come up a bit, but dont see whats wrong?

[ushop-online]

All the coding added is a mess.

Remove it all but leave table intact.

Make blank images [solid colours] the size you want to include in your add on scripts and place them by the IMG tag -- then make your adjustments until it is looking right.

Now replace the images with your code and IF the code is right they will look right but if not then it is the banner code screwing your design.

By the way you put 80% width instead of 100% in the first TD

[laurence600]

I think it was the banner code for the header banner, I have moved it now and it seems ok. But doesnt look as good, as the header looks too bear now.

Thanks for all your help, I'll take another look tommorrow.

[ushop-online]

Singular coding is fairly easy but mix'n'match coding can be a pain getting all the handshaking working properly -- good luck!

[ushop-online]

Now it is looking very good :)

However just one small change required.....

<table align=center TABLE WIDTH=95% CELLPADDING=0 CELLSPACING=10 BORDER=0>

Should be....

<table align=center WIDTH=95% CELLPADDING=0 CELLSPACING=10 BORDER=0>

[arthomas]

Hi all,

Like the mod to the template

header.php/footer.php

but there is a problem with my hot picks flowting, in firefox it is fine but in ie it seems to come up weird... any suggestions

http://www.sassussex.com/savershandbook/index.php

It sits in an odd place, want to keep my page centered but cannot have the hot picks sitting like they are.

Thanks in advance

[ushop-online]

Sorry this is a race weekend which means very busy for me but it seems to me the css for hot picks.

Seems to be floating to the right - check your margins or widths etc otherwise seems fine.

The difference is how each browser interprets the info.

[arthomas]

Ok well when you or anybody get the time could you check my css configuration below and see if you can spot the problem in ie...

http://www.sassussex.com/savershandbook/index.php

/* Hot Picks styling */

.sw_hotpicks {
height: 1%;
min-height: 120px;
}

/* Style added as hack for IE6 which has issues with floated elements and images. IE ignores following style. */
html>body .sw_hotpicks {
height: auto;
}

.sw_hotpicks h2 {
font: bold 12px Arial, Verdana, Helvetica, sans-serif;
color: #333;
margin: 0;
padding: 0;
}

.sw_hotpicks h3 {
font-weight: bold;
font-size: 10px;
}


.sw_hotpicks li {
float: left;
width: 232px;
padding: 10px;
}

.sw_hotpicks span {
float: left;
width: 100%px;
height: 100px;
}

.sw_hotpicks img {
margin-right: 10px;
border: 1px solid #b8e0be;
}

.sw_hotpicks div {
clear: both;
height: 1px;
}

Thanks

[ushop-online]

.sw_hotpicks span {
float: left;
width: 100%px;
height: 100px;
}

I would start by removing one of the measures after 100 -- either % or px

[arthomas]

I did change that but there is no diffrence....

I have been playing around with the css and there is still a problem but it looks better.

I changed the div id
from - div id="sw_content"
Too - div id="sw_content4"

#sw_content4 {
margin: 0;
margin-left: 110px;
margin-right:auto
width: 95%;
}

By content4 in the css the the hot picks sit where they should but span across the whole page... any suggestions or am i making this way to complicated!!! dont want to mess up my shop, its live but not being used as of yet want to get it up as soon as possible please help.

here is my css:

/* General styles */

body {
font: normal 12px Arial, Verdana, Helvetica, sans-serif;
color: #333;
text-align: left;
}

td {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #666;
text-align: left;
}

th {
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}

a:link, a:visited {
text-decoration: none;
color: #060;
}

a:hover {
text-decoration: underline;
color: #393;
}

h2 {
font: bold 14px Arial, Verdana, Helvetica, sans-serif;
color: #333;
margin-top: 0;
}

img {
border: none;
}

form {
display: inline;
}

#sw_breadcrumb {
margin: 10px 0;
clear: both;
}

#sw_breadcrumb a {
text-decoration: underline;
color: #333;
}

#sw_frame {
margin-right:auto;
margin-left:auto;
padding:0px;
text-align:left;
position: relative;
}

/* the following styles position the navigation to the left and content on the right */

#sw_nav {
float: left;
width: 180px;
position: relative;
}

#sw_container {
float: right;
vertical-align: top;
width: 100%;
margin: 0;
margin-left: -180px;
}

#sw_content {
margin: 0;
margin-left: 190px;
}

#sw_content2 {
margin: 0;
margin-left: 195px;
width: 95%;
font: bold 14px Arial, Verdana, Helvetica, sans-serif;
color: #333;
}

#sw_content3 {
margin: 0;
margin-left: 195px;
margin-right:auto
width: 95%;
font: bold 12px Arial, Verdana, Helvetica, sans-serif;
}
#sw_content4 {
margin: 0;
margin-left: 110px;
margin-right:auto
width: 95%;
}

/* Shared elements. All main components use this formatting*/

.sw_hotpicks, .sw_featuredmerch, .sw_cats {
clear: both;
background: #ffffff url(../images/box_bg.gif) repeat-x top;
border: 1px solid #b8e0be;
padding: 10px;
margin-bottom: 10px;
position: relative;
}

.sw_hotpicks ul, .sw_featuredmerch ul, .sw_cats ul {
list-style-type: none;
margin: 0;
margin-left: 0;
padding-left: 0;
}

/* Search box styling */

.sw_searchbox {
clear: both;
background: #ffffff url(../images/box_bg.gif) repeat-x top;
border: 1px solid #b8e0be;
padding: 10px;
margin: 0px;
margin-bottom: 10px;
}

.sw_searchbox select {
height: 18px;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #999;
}

#sw_searchform {
vertical-align: top;
display: inline;
}

#sw_searchbox h2 {
font: bold 14px Arial, Verdana, Helvetica, sans-serif;
color: #333;
margin: 0;
padding: 0;
}

#sw_searchform select {
height: 18px;
width: 210px;
font: normal 12px Arial, Verdana, Helvetica, sans-serif;
color: #666;
padding: 0;
margin: 0;
margin-right: 8px;
}


input#sw_searchterm {
width: 278px;
height: 20px;
font: normal 12px Arial, Verdana, Helvetica, sans-serif;
color: #666;
display: inline;
}

.sw_searchsuggestion {
border: 1px dashed #ccc;
padding: 8px;
margin: 6px 0;
font-size: 12px;
font-weight: bold;
}

.sw_searchsuggestion h3 {
margin: 0;
display: inline;
color: #c00;
font-size: 12px;
}

.sw_searchsuggestion p {
margin: 0;
display: inline;
}

.sw_searchsuggestion ul {
margin: 6px 0;
padding: 0;
}

.sw_searchsuggestion ul li {
display: inline;
margin: 0;
margin-right: 10px;
padding: 0;
}

.refineby {
margin: 10px 0;
position: relative;
width: 100%;
}


.refineby h3 {
margin: 0;
margin-top: 10px;
font-size: 14px;
}

.refineby table {
border-collapse: collapse;
width: inherit;
}


.refineby td, .refineby th {
border: 1px solid #b8e0be;
background-color: #fff;
padding: 6px;
font-size: 12px;
vertical-align: top;

}

.refineby th {
background-color: #e3f3e6;
}

.refineby a#clear {
font-size: 10px;
color: #666;
}


/* Hot Picks styling */

.sw_hotpicks {
height: 1%;
min-height: 120px;
}

/* Style added as hack for IE6 which has issues with floated elements and images. IE ignores following style. */
html>body .sw_hotpicks {
height: auto;
}

.sw_hotpicks h2 {
font: bold 12px Arial, Verdana, Helvetica, sans-serif;
color: #333;
margin: 0;
padding: 0;
}

.sw_hotpicks h3 {
font-weight: bold;
font-size: 10px;
}


.sw_hotpicks li {
float: left;
width: 232px;
padding: 10px;
}

.sw_hotpicks span {
float: left;
width: 100px;
height: 100px;
}

.sw_hotpicks img {
margin-right: 10px;
border: 1px solid #b8e0be;
}

.sw_hotpicks div {
clear: both;
height: 1px;
}

/* Featured Merchants */


.sw_featuredmerch h3 {
font: bold 14px Arial, Verdana, Helvetica, sans-serif;
margin-top: 0;
}

.sw_featuredmerch li {
margin-bottom: 10px;
border-bottom: 1px dotted #b8e0be;
padding-bottom: 8px;
}

.sw_featuredmerch img {
border: 1px solid #b8e0be;
}

#sw_featuredtext {
margin: 0;
}

#sw_featuredtext h4 {
margin: 0;
font: bold 12px Arial, Verdana, Helvetica, sans-serif;
}

/* Category listing styles */


.sw_cats li {
margin-bottom: 6px;
}

.sw_cats h3 {
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0;
}

.sw_cats h4 {
color: #000000;
font-size: 10px;
font-weight: normal;
margin: 0 0 4px 0;
}

/* styles for product listing pagination */

#sw_resultsheader {
text-align: center;
font-weight: bold;
margin: 20px 0;
clear: both;
}

#sw_resultsheader select {
color: #333;
background-color: #b8e0be;
border: 1px solid #ccc;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;

}

#sw_prodsperpage {
float: left;
margin-right: 20px;
}

#sw_sortby {
float: right;
margin-left: 20px;
}

#sw_pagination {
font-weight: bold;
text-align: center;
}


/* product listing styles

ul.productlist {
list-style-type: none;
margin: 0;
margin-left: 0;
padding-left: 0;
}*/

.sw_productlist ul {
list-style-type: none;
margin: 0;
margin-left: 0;
padding-left: 0;
position: relative;
}

.sw_productlist h3, .sw_productdesc h3 {
font: bold 12px Arial, Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

.sw_productdesc p {
font: normal 12px Arial, Verdana, Helvetica, sans-serif;
}

li.sw_productentry {
background: #ffffff url(../images/product_bg.gif) repeat-x top;
position: relative;
clear: both;
height: 1%;
min-height: 100px;
width: auto;
vertical-align: top;
border: 1px solid #e3f3e6;
padding: 10px;
margin-bottom: 10px;
}

/* Style added as hack for IE6 which has issues with floated elements and background images. IE ignores following style. */
html>body li.sw_productentry {
height: auto;
}

.sw_productphoto {
display: block;
float: left;
margin-right: 10px;
border: 1px solid #e3f3e6;
}

.sw_productdesc {
margin: 0;
}

.sw_productdesc ul {
list-style-type: square;
margin: 0;
}

.sw_productdesc ul li {
background: none;
margin-left: 18px;
padding-left: 2px;
}

.sw_productcat {
font-size: 10px;
}

.sw_productcat a {
text-decoration: underline;
}

.sw_productlogo {
display: block;
float: right;
}

.sw_productdivider {
clear: right;
display: block;
height: 1px;
}

.sw_productbuy {
float: right;
font: bold 14px Arial, Verdana, Helvetica, sans-serif;
vertical-align: top;
}

.sw_productbuy img{
margin-left: 10px;
}

.sw_error {
clear: both;
background: #fff url(../images/warning_icon.gif) no-repeat top left;
padding-left: 60px;
height: 50px;
font-size: 12px;
margin: 18px 0;
}


.sw_error h3 {
font-size: 12px;
color: #f00;
margin: 0;
}


/* footer */

#sw_footer {
clear: both;
margin: 10px 0;
padding: 6px 0;
border-top: 1px solid #b8e0be;
}