Upgrading the Stylesheets
Note these upgrade additions are designed to add the new styles to your skin. If you have a customised skin, a lot of the changes in v4 that are not in v3 are not necessarily important to migrate as they will likely change the 'look and feel' of your store from what you want. Therefore, only new style 'classes' and 'ids' are noted.
Open 'skins/YOURSKIN/styleSheets'.
New files in v4.3.7
Copy 'index.php', 'ie.css' and 'lightbox.css' from 'skins/classic/styleSheets' to 'skins/YOURSKIN/styleSheets'.
layout.css
If the .latestProds code does not exist, there is no need to add it. If it does exist and is different to the text below, there is still no need to add it. In other words, the 'latestProds' bit is entirely optional.
/*BEGIN OPTIONAL*/
Find this at the end of the file...
.latestProds {
float: left;
text-align: center;
width: 131px;
height: 120px;
}
Change to...
div.latestProds {
text-align: center;
width: 131px;
height: 100px;
float: left;
overflow: hidden;
}
/*END OPTIONAL*/
Add this on the end...
#imgThumbSpace{
line-height: 0px;
}
#imgThumbSpace img {
padding-right: 3px;
padding-bottom: 3px;
}
/*
Start Cross-Browser DHTML Menu
*/
#mainmenu-nav {
list-style: none;
list-style-type: none;
width: 158px;
padding: 0px;
margin: 0px;
}
.li-nav a {
padding: 2px 1px;
background-color: #EBEDFE;
width: 148px;
display: block;
text-indent: 2px;
color: #070F72;
text-decoration: none;
margin: 0px;
}
.li-nav a:hover {
background-color: #FFFFFF;
color: #FF6600;
}
.ul-nav, .li-nav {
display: block;
list-style: none;
}
.ul-nav {
width: 150px;
padding: 0px;
}
.li-nav {
float: left;
}
.li-nav .ul-nav {
display: none;
position: absolute;
margin-left: 100px;
margin-top: -19px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 4px solid #0858B6;
z-index: 99;
}
a.hassubmenu {
background-image: url(../styleImages/more.gif);
background-repeat: no-repeat;
background-position: 143px 6px;
}
/*
End Cross-Browser DHTML Menu
*/
style.css
Add the following to the skin at the bottom
img {
border: none;
}
.cart_icon {
border: none;
margin: 12px 0px;
}
a.txtSelected:hover, a.txtSelected:active, a.txtSelected:link, a.txtSelected:visited {
color: #FF6600;
text-decoration:none;
}
a.flashBasket:active, a.flashBasket:link, a.flashBasket:visited, a.flashBasket:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #66CC33;
text-decoration: none;
font-weight: bold;
padding: 2px;
border: 1px solid #000000;
}
.addCoupon:hover, .addCoupon:active, .addCoupon:visited, .addCoupon:link {
font-weight: bold;
color: #000000;
text-decoration: none;
font-weight: bold;
}
.RatingTop {
border-top: 1px solid #070F72;
border-right: 1px solid #070F72;
border-left: 1px solid #070F72;
background-color: #EBEDFE;
padding: 3px;
}
.RatingMain {
border-right: 1px solid #070F72;
border-left: 1px solid #070F72;
background-color: #EBEDFE;
padding: 3px;
font-style:italic;
}
.ReviewBot {
border-right: 1px solid #070F72;
border-left: 1px solid #070F72;
background-color: #EBEDFE;
padding: 3px;
border-bottom: 1px solid #070F72;
}
.RatingBottom {
background-color: #070F72;
padding: 3px;
border-right: 1px solid #070F72;
border-left: 1px solid #070F72;
color: #FFFFFF;
/*font-size: 11px;*/
}
a.sortLink {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a.sortLink:hover {
text-decoration: underline;
}
#shipping-select {
width: 220px;
}
|