A series of probs re. customisation

A series of probs re. http://www.smallworldmusic.com/catalog/

1. I can't get rid of the space beneath the logo:
   I tried the "delete the clearBoth break" solution which didn't work

2. I want to get rid of the redundant categories nav along the top.

3. Is there a way to move the 'home, log in' nav at the very top to where the redundant categories nav is now?

4. How do I get the left hand-column to snug up to the left hand edge of the main container?

5. How do I get the 'breadcrumbs bar and the 'New products' bar to stretch to the right hand edge of the main container (without losing the margin that the CDs need)?

6. How can I insert a background image behind the 'categories'. 'search', 'manufacturers', 'information' headers?

7. When I open the site in Firefox I get a crazy green colour for all the categories links, which is nowhere in the CSS. What's that about??

I've attached my .css file.

Apologies for what might amount to a whole series of posts, but I've spent a good while trying to figure these out.

Many thanks in advance for any help with any of these issues.

I've attached my .css file.

NIk

Well, I'm way too new at this to answer your questions though I think most is on the stylesheet.

I wanted to say though I like how you have the color scheme on your site and the way you used only the columns on the left. I'm still working out the design for my site so this was helpful for me to check out.

From my little experience, I think most of what you are asking about can be done without too much trouble. I'm sure someone who knows how to do it will help you out.

Good luck,
Cheryl

A few random answers:

2: This is the Categories-Tabs menu, and you can turn it off in admin > Layout Settings.

3: You can move the header navbar in /includes/templates/your_template/common/tpl_header.php. Find the block of code enclosed between <!-- bof whatever --> and <!-- eof whatever --> and move the entire block to the location you desire - in this case, after <!-- eof branding display -->.

4 & 5: These will be CSS issues. You have undesired margins or padding applied to various elements. You need to use Firefox with the Web Developer extension and see what id's, classes etc. apply, and then find those in your stylesheet.css and change them. (Try the CSS > Edit CSS button in Web Developer - it lets you see the effects of edits instantly.)

6: You can do this in the stylesheet by finding the id or class that applies to each of those headers, and editing or inserting their declararions. Add

     background-image: url(../images/your_image_path);
``` to the appropriate declarations.

HI Glenn.

Many thanks for the responses!

2. I knocked off the Categories-Tabs menu (mahvelous!)

3. Misread your note and moved the block of code before the <!-- eof branding display --> which, needless to say, didn't work - then got it right.
   Not sure if I should keep it that way though, but the main thing is, now I know how to move it about!

I'll get back at the CSS for the other questions.
What is the Firefox Web Developer's Extension?

Thanks very very much, Glen. Super helpful. Great to get some results after banging my head for a while.

All the best

Nik

I did pick up the Firefox Developers Extension - wish I had known about it before!

Still, for the life of me, can't figure out how to get rid of the space to the left of the left column, and to the right of the main content.
It's like a padding or border or margin (did a search on each word) set in a wrapper somewhere, but I've gone through every possible marging and padding in the CSS and can't find it.

I also cannot figure out why the Category links persist in showing up in a sickly green.
I've set the links colour to a bright orange/salmon.

Once again, I've searched through every possible colour in the CSS and can find no # setting telling the colour to be green.
However, in the CSS that the Firefox Developers Extension displayed, it showed the colour setting as an rgb value (not as a hex # which I
've used). Dropeed those numbers into Fireworks and it came out as a blue, much like the blue that I'm seeing in 'New Products', 'All Products'.

Wierd.

Should I stick to rgb values??

What is the CSS value which controls the colours of the Categories and the 'New Products', 'All Products' display??

Gracias in advance for any help!

Nik

PS - am pasting in my Stylesheet - below

/**

• Main CSS Stylesheet
• @package templateSystem
• @copyright Copyright 2003-2005 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
• @version $Id: stylesheet.css 3215 2006-03-20 06:05:55Z birdbrain $
  */

body {
width: 100%;
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-image: url(http://www.smallworldmusic.com/images/back-store.gif%29;
background-color: #fff;
}

a img {border: 0px; }

a:link, #navEZPagesTOC ul li a {
color: #FF0000;
text-decoration: none;
}

a:visited {
color: #FF6666;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FF0000;
}

a:active {
color: #FF6666;
}

h1 {
font-family: helvetica, arial, sans-serif;
font-size: 1.5em;
}

h2 {
font-family: helvetica, arial, sans-serif;
font-size: 1.4em;
}

h3 {
font-family: helvetica, arial, sans-serif;
font-size: 1.3em;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}

.biggerText {
font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
margin: 0.1em;
}

CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}

FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
margin: 0.1em;
}

TEXTAREA {
float: left;
margin: auto;
display: block;
width: 100%;
}

input:focus, select:focus, textarea:focus {
background: #FFCCFF;
}

FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 0px solid #cccccc;
}

LEGEND {
font-weight: bold;
padding: 0.3em;
}

LABEL, h4.optionName {
line-height: 1.5em;
padding: 0.2em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em;
}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

LABEL.inputLabel {
width: 11em;
float: left;
}

LABEL.inputLabelPayment {
width: 15em;
float: left;
}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 12em;
float: left;
}

P, ADDRESS {
padding: 0.5em;
}

ADDRESS {
font-style: normal;
}

.clearBoth {
clear: both;
}

HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #9a9a9a;
}

/warnings, errors, messages/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #000000;
}

.messageStackWarning, .messageStackError {
background-color: #ff0000;
color: #ffffff;
}

.messageStackSuccess {
background-color: #999999;
color: #000000;
}

.messageStackCaution {
background-color: #FFFF66;
color: #000000;
}

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 800px;
margin: 0em;
vertical-align: top;
}

#logoWrapper {
width:750px;
height:60px;
background-image:url(../images/logo.gif);
background-repeat:no-repeat;
}

#headerWrapper{
background-color: #FF5353;
margin: 0em;
padding: 0em;
}

#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#tagline {
color:#000000;
font-size: 2em;
text-align : centre;
vertical-align: middle;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}

.wrapperAttribsOptions {
margin: 0em 0em;
}

/navigation/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #CCC;
font-weight: bold;
color: #000000;
height: 1%;
width: 100%;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.3em 0em;
list-style-type: none;
text-align: center;
line-height: 1em;
background-color: #CCC;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
white-space: nowrap;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.4em;
margin: 0;
color: #000000;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000000;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

#navBreadCrumb {
background-color: #CCC;
}

#navEZPagesTop {
background-color: #FFFFFF;
}

#navBreadCrumb, #navEZPagesTop {
font-size: 0.90em;
font-weight: ;
margin: 0em;
padding: 0.5em;
text-align: left;

}

#navColumnOne {
background-color: #FFFFFF;
border: 1px solid #999999;
text-align: left;
font-weight: bold;

}

#navColumnTwo {
background-color: #FFFFFF;
border: 1px solid #999999;
}

/The main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

/.content,/ #productDescription, .shippingEstimatorWrapper {
/font-size: 1.2em;/
padding: 0.5em;
}

.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.4em;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}

/Shopping Cart Display/
#cartAdd {
float: right;
text-align: center;
margin: 0em 2em 5em 0em;
border: 1px solid #000000;
padding: 1px;
}

.tableHeading TH {
border-bottom: 1px solid #cccccc;
}

.tableHeading, #cartSubTotal {
background-color: #e9e9e9;
}

#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}

.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}

.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}

#scUpdateQuantity {
width: 2em;
}

.cartQuantity {
width: 4.7em;
}

.cartNewItem {
color: #FF6666;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartOldItem {
color: #666666;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartBoxTotal {
text-align: right;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

#cartAttribsList {
margin-left: 1em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #000000;
}

#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}

.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}

.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}

.amount {
width: 5.5em;
}

/Image Display/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 3em 2em 2em 1em;
}

.categoryIcon {margin: 0em 2em 3em 1em;}
#cartImage {
margin: 2em 4em;
}

/Attributes/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}

.attributesComments {}

/list box contents/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

/sideboxes/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
font-size: 14px;
color: #000000;
font-family: helvetica, arial, sans-serif;
}

.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: #FF8C8C;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
border: 0.2px solid #FF5353;
margin-top: 0em;
}

.sideBoxContent {
background-color: #FFFFFF;
padding: 0.3em;
}

h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 14px;
color: #000000;
}

.rightBoxHeading {
margin: 0em;
background-color: #FF5353;
padding: 0.2em 0em;
}

h3.leftBoxHeading a:hover {
color: #000000;
text-decoration: none;
}

h3.rightBoxHeading a:hover {
color: #000000;
text-decoration: none;
}

.rightBoxContent {
background-color: #FFFFFF;
margin-bottom: 1em;
}

.rightBoxContainer {
border: 1px solid #FF5353;
margin-top: 0em;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: left;

}

#siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, {
text-align: center;

}

.rightBoxHeading, {
text-align: right;

}

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

#bannerboxHeading {
background-color: #666666;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/misc/
.back {
float: left;
}

.forward {
float: right;
}

.bold {
font-weight: bold;
}

.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}

.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;
}

CAPTION {
/display: none;/
}

#myAccountGen li, #myAccountNotify li {
margin: 0;
}

.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/vertical-align: top/
}

.accountQuantityDisplay {
width: 10%;
vertical-align: top
}

TR.tableHeading {
background-color: #cacaca;
height: 2em;
}

#siteMapList {
width: 90%;
float: right;
}

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
background-color: #ffffff;
}

In the Web Developer Tool there is an option to turn on the element names of each object (don't quote me on the correct terms here as I'm not a techie). This will tell you the sidebox code to search for to change the font color. I've changed mine already but it's been several days and many changes ago so exact location escapes me at the moment.

I also use Aardvark along with the Web Developer Tool. Aardvark puts red boxes around as you move the cursor. Each works well depending what I'm looking for so I use both. Web Developer keeps the labels up; Aardvark turns off if I click something, so...

Ardvark says: id:CategoriesContent, class: sideBoxContent

Look for this is the stylesheet, then look for the font color attributes; watch as this ID may show up in more than 1 place.

I also use Color Picker to get a quick look at color codes and it will also eyedropper a color & tell you the code. Sometimes I search for the 6 digit color code in the stylesheet if I'm having trouble finding the object/element id.

I hope this is helpful. I'm on my way out so writing quickly. It is a big stylesheet. The Developer edit CSS tool is great to see the changes.

Good luck,

Oh, BTW: here is what you want I think you want to change:

/* categories box parent and child categories */

A.category-top, A.category-top:visited {
color: #00ffff;
text-decoration: none;
}

I believe it is that color option to change. I forgot that this box seemed to be very elusive to find and change the font color. Maybe this will be more helpful for this particular item.

Sorry about that,

Hi Cheryl.

You're a genius.

Thanks for taking the time to post that.
I was still a little confused for a while as I searched and searched for that code in my css doc, not realising that I had to add it (insert forehead smack).

The tip re. the Firefox Web Dev tool has been invaluable too.

Now I'm making a little more progress....

best

Nik

Cheryl! You've been Zenned! :D

Good luck and Happy Zenning, Nik! :yes:

afo:

Cheryl! You've been Zenned! :D

:rotflmao:
Happening while I sleep . . . :shocking:

http://208.109.193.212/index.php?main_page=index&cPath=1

I managed to get rid of the space at either side (I had forgotten that months ago I had set the width of the table of the main page to 90% - so it wan't in the css but in the html).

I also took the tag that you sent Cheryl and applied it.
Here's the wierdness: the 'hover' and 'visited' tags are working, but the link tag is not.

If you check out: http://smallworldmusic.com/catalog/; you can see that wierd green in the catalog links + the wierd blue links beneath. If you roll-over the links you get the #CCCCCC that I selected, and if you visit the link it goes to the 'salmon/orange' that I selected.

Here's the tags:

/* categories box parent and child categories */

A.category-top, A.category-links {
color: #FF0000;
text-decoration: none;

}

A.category-top:hover, A.category-links:hover {
color: #999999;
text-decoration: none;
}

A.category-top:visited, A.category-links:visited {
color: #FF6666;
text-decoration: none;

}

Any suggestions anyone??

gracias!

NIk

Get rid of stylesheet_original.css. Simply delete it from your server. When stylesheets are loaded, later ones "overwrite" previously loaded ones, so the colors in stylesheet_original.css are replacing the colors you selected in stylesheet.css.

Hallelujah!

Instant gratification!

How often does that happen!

Thanks Afo, that was decidedly sweet.

Thanks, Cheryl and Afo, for the great advice.

Nik

If you don't already have the Firefox browser, you should download a copy (it's free) and get the webdeveloper add-on. It'll allow you to look at (and play with) the stylesheet on the fly.

Thanks afo.

I have been using Firefox, and Cheryl told me about the web developer suite, which has already been very useful.

nik