Background colour for product listings [Archive]

View Full Version : Background colour for product listings

Nodge

28-03-09, 23:16

I'm trying to customise my Shop Window templates to give a black background. This is very much a trial & error process as my knowledge of php is zero. Basically I look for where the relevant parameter might be and change it and see what happens. By this method I have produced what you can see at www.timegentlemenplease.co.uk . The index page is getting close to what I want but if you enter something into the search box to bring up the product list page you'll see that the background for the products is white (and also the "filter by" box). Can anyone please tell me how to set these backgrounds to black?

One other question is that all the items listed in the Popular Searches box are shown in bold. This looks a little odd to me and I'd like them to be in normal text but again I can't see where to change this setting.

Thanks
John

GeorgeGaz

30-03-09, 10:26

Hello Nodge,

OK not 100% sure what background you mean.
Whether you mean the background of the whole site:

Navigate to templates/default/styles.css and change:

/* General styles */

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

To:

/* General styles */

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

Alternatively if you are just looking to change the background of the product entry in the productlist then please do the following in the same CSS file:

Change:

td.sw_productentry {
background-color: #ffffff;
vertical-align: top;
border: 1px solid #999999;
width: 50%;
padding: 10px;
margin: 10px !important;
}

To:

td.sw_productentry {
background-color: #000000;
vertical-align: top;
border: 1px solid #999999;
width: 50%;
padding: 10px;
margin: 10px !important;
}

Hope that helps.

Cheers

Nodge

30-03-09, 16:39

Thanks George,

I managed to change the background of the whole site by editing the body tag in index.tpl to read <body bgcolor="#000000">. Does your method have any advantages over this?

My question was referring to the background of the product entries. I'll try your suggestion once my quotas are reset. :mad:

Any suggestions on how too un-bold the text for the entries in the Popular Searches box?

Thanks again,

John

GeorgeGaz

30-03-09, 16:58

Hello,

My second example above will do as you require. As for which method is better, the CSS method (http://www.vordweb.co.uk/css/advantages-of-css.htm) allows you to keep all customisation (colours etc) in one file for ease of use.

Tag Cloud, change in styles.css:

/* Tag Cloud styles */

.sw_tagcloud {
padding: 10px;
border: 1px solid #000000;
margin-bottom: 10px;
font: bold 14px Trebuchet MS, Arial, Verdana, Helvetica, sans-serif;
position: relative;
overflow: hidden;
}

To:

/* Tag Cloud styles */

.sw_tagcloud {
padding: 10px;
border: 1px solid #000000;
margin-bottom: 10px;
font: 14px Trebuchet MS, Arial, Verdana, Helvetica, sans-serif;
position: relative;
overflow: hidden;
}

Cheers

Andy

30-03-09, 18:11

I managed to change the background of the whole site by editing the body tag in index.tpl to read <body bgcolor="#000000">. Does your method have any advantages over this?
That method is Old School html.
It works, but is delimited I believe.
For valid xHTML, you should make all stylings within your css stylesheet:
templates/your_template_name/css/style.css

The advantages of using style over inline tags are many, including:

Less code in the source (so less download time)
you can change the entire site in your stylesheet without having to edit each and every page
newer browsers as well as mobile devices (phones,PDAs etc) can read it easier
it works in all browsers
is the correct way to do it nowadays
Each element of the page will have either an ID or a CLASS assigned to it, eg:
<div id="container">
<span class="something">If you can find the name of the ID or CLASS, you can find its counterpart stylings in style.css. Once you find it, you can change it to anything you want it to be.

I whole heartedly recommend Web Developer Toolbar for Fiefox:
https://addons.mozilla.org/en-US/firefox/addon/60
It has alsorts of natty features, but I find the most useful for reverse engineering (which is kind of what you're doing) is "Outline Current Element"

This allows you to hover over any part of the page and it will tell you the element name as well as it's 'nesting' (you'll see). From there, it's pretty simple to change whatever style you want.

Nodge

30-03-09, 22:47

That method is Old School html.

Yep, that'll be me then :) I've only really done a couple of simple websites for myself with only one or two pages each so never really progressed beyond basic html. Always willing to learn though. I've incorporated George's suggestions which worked. This evening I installed firefox plus the web developer addon. That's going to be dead useful :) I've managed to edit the Refine By box colours myself.

I'd welcome some constructive criticism on what I've got so far at www.timegentlemenplease.co.uk (quotas permitting). I'm pretty thick skinned so don't hold back. I'm quite chuffed with what I've managed to achieve but I'm not entirely happy. I think the product photos with the white backgrounds rather jump out at you but not sure what to do about that.

Thanks again to Andy & George for your help so far.

John