adding image links to categories on main page

[gjh42]

Install Firefox if you don't have it yet, then get Web Developer from www.chrispederick.com (its author).

In the Web Developer toolbar, the Information > Display Element Information button will show you lots of CSS-relevant information about any element you click on.

The CSS > Edit CSS button will let you try out styling with the classes/ids that the info button shows you, and see the results instantly.

To learn what kinds of changes to make, you should know something about CSS - it will be useful to you in any other web design work you ever do as well. Look at www.w3schools.com, and look at your stylesheet too - you can learn some things about styling from what is already there.

[mike1234]

Thanks I have firefix and infact figured out the addon i now can view the calls/id but still im not sure where to change ir what to change
Im specifically wanting to change the category NAMES font and style as they appear in the main page center not the side boxes the only things i see in that area under the id/class is
#productDescription
.categoryListBoxContents
.clearBoth

any suggestions ? wen i search those areas i dont see anything to change heres what i see

if i search product description -
*.content,*/ #productDescription, .shippingEstimatorWrapper {
/*font-size: 1.2em;*/
padding: 0.5em;
}

.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}


if i search .categoryListBoxContents
-
/*The main content classes*/
.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 {}


thanks

[gjh42]

The specific element you want does not yet have its own font declaration, so you can add what you want. Make a new rule, since you don't want to change the font on that whole list of elements. If you want to change .categoryListBoxContents, try this:

.categoryListBoxContents {
    font-size: 1.2em;
    font-weight: bold;
    font-family: georgia, serif;
    }

Add and adjust properties as you wish.

[mike1234]

very nice that worked )))) how can i add or change the color thanks so much you have been a great help
Also can I use any font ? or is it best to use common fonts I noticed the websiye above has a different font thanks agin
)

[gjh42]

You can specify any font you want, but it will only display if it is installed on the viewer's computer. Therefore, it is best to use common fonts, and you can call for a series of similar fonts to increase the chances of getting one you want to display. When you call out a font-family, start with the most preferred, and end with something generic that is guaranteed to be on every computer, like serif or sans-serif.

color: #0399ff;

will control the text color for an element, usually stated in hexadecimal notation as shown.

background-color: #aabbcc;
will give a color on the whole background of the element, and
background-color: none;
will make it transparent so you see what is behind it.

[RiverCity]

Thanks for the information above on how to show main category images on the main page. Is it possible to adjust the image size of just these images without changing images throughout the site? I'm only wanting to adjust the size of the main category images showing on my main page.

Thanks for all the help,

Jim

[jlcaudio]

i can not get my catagories to list on the main page i haved tried everything i keep getting this There are no products to list in this category, anybody know what to do please my site is www.sounddestroyermat.com

[gjh42]

You can add #indexHomeBody to any selector in your stylesheet to only affect its styling on the home page.

#indexHomeBody .categoryListBoxContents {
    height: 200px !important;
    width: 250px !important;
    }