Resizing Sidebox Images

[kobra]

In the admin > config > images

[shinigami]

Thank you for your help,

I have tested all the options and I cannot see anything changing.
if I cannot change the image width and height, how can I change the sideboxes (left) background?


Here is my stylesheet.css
I am testing in localhost so I have no way to show live url.

Thank you

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 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 4387 2006-09-04 13:54:28Z drbyte $
 */

.testimonial {
color: #000;
padding: 0 5px 5px 5px;
text-align:left;
}
.testimonial p {
margin: 0; padding: 5px 0;
}
.testimonial span {
float:right;
}

body
{
    margin: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    color: #000000;    
    background-color: #000000;
}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #004F4C;
	text-decoration: none;
	}
 
a:visited {
	color: #004F4C;
	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: #BB0000;
	}

a:active {
	color: #333333;
	}

h1 {
	font-size: 1.0em;
	color: #9a9a9a;
	}

h2
{
    font-size: 13px;
}

h3
{
    font-size: 13px;
}

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

.biggerText {
	/*font-size: 1.2em;*/
	}

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

/*  Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
	position: relative;
	}
*html .centerColumn {
	height: 1%;
	}
*/

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: 95%;
	}

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

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px 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: 9em;
    float: left;
    font-size: 12px;
}

LABEL.inputLabelPayment {
	width: 14em;
	float: left;
	padding-left: 2.5em;
	font-size: 12px;
	}

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

#checkoutPayment LABEL.radioButtonLabel
{
    font-weight: bold;
    font-size: 12px;
}

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 #9a9a9a;
	}

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

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

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

/*wrappers - page or section containers*/
#mainWrapper {
/*	background-color: #ffffff; */
	text-align: left;
	width: 1000px;
	vertical-align: top;
	/*border: 1px solid #9a9a9a;*/
	}

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

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height:75px;
	}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 
#navColumnOneWrapper, #navColumnTwoWrapper {
	margin-left: 0.5em;
	margin-right: 0.5em;
	}
	
#tagline {
	color:#000000;
	font-size: 2em;
	text-align : center;
	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: 0.3em 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: #abbbd3;
	background-image: url(../images/tile_back.gif);
	*/
    padding: 0.5em 0.2em;
    font-weight: bold;
    color: black;
    height: 1%;
}

#navCatTabsWrapper {
	background-color: #ffffff;
	color: #9a9a9a;
	background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
	margin: 0;
	padding: 0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: black;
	white-space: nowrap;
	}

#navCatTabs ul li a {
	color: #555555;
	}

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

#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 {
	padding: 0.5em 0.5em;
	margin: 1px;
	background-color: #ffffff;
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	}

#navEZPagesTop {
	background-color: #abbbd3;
	
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding: 0.5em;
	}

#navColumnOne, #navColumnTwo {
	background-color: transparent;
	}

/*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.8em;
	}

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

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

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

.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: #33CC33;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartOldItem {
	color: #660099;
	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;
	background-color: #E4FEf5;
	border: 1px solid #003D00;
	}
.mediaTitle {

	float: left;

	}

.mediaTypeLink {

	float: right;

	}

.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

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

.orderHistList {
	margin: 1em;
	padding: 0.2em 0em;
	list-style-type: none;
	} 

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

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

#cartBoxEmpty, #cartBoxVoucherBalance {
	font-weight: bold;
	}

.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: 0em 1em 1em 0em ;
	}

.categoryIcon {}

#cartImage {
	margin: 0.5em 1em;
	}

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

.attributesComments {}

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

.centerBoxWrapper {
	border: 1px solid #9a9a9a;
	height: 1%;
	margin: 1.1em 0;
	}

h2.centerBoxHeading {
	font-size: 1.3em;
	color: #000000;
	}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.rightBoxHeading, h3.rightBoxHeading a
{
    font-size: 1em;
    color: black;
    font-weight: bold;
	background: #3287FE;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
	font-size: 0.9em;
	color: #000000;
	
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading
{
    margin: 0em;
    background: #3287FE;
    padding: 0.5em 0.2em;
    font-weight: bold;
    font-size: 12px;
    color: black;
    /*border-right: #a8a8a8 1px solid;
    border-top: #a8a8a8 1px solid;
    border-left: #a8a8a8 1px solid;*/
    border-bottom: #a8a8a8 1px solid;
}

.leftBoxContainer, .rightBoxContainer {
	margin: 0em;
    border-right: #a8a8a8 1px solid;
    border-top: #a8a8a8 1px solid;
    border-left: #a8a8a8 1px solid;
    border-bottom: #a8a8a8 1px solid;

	margin-top: 1.5em;
	}

.sideBoxContent 
{
	background-color: #ffffff;
	padding: 0.4em;
}
.sideBoxContent a
{
    font-weight: bold;
    font-size: 11px;
    color: black;
}
.sideBoxContent a:hover
{
    font-weight: bold;
    font-size: 11px;
    color: navy;
}
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
	color: #FFFF33;
	text-decoration: none;
	} 

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
	color: #FFFFFF;
	}

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

#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: #0000CC;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
	color: #004F4C;
	
	text-decoration: none;
	}
A.category-links, A.category-links:visited {
	color: #004F4C;
	text-decoration: none;
	}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
	color: #555555;
	text-decoration: none;
	}
SPAN.category-subs-parent {
	font-weight: bold;
	}
SPAN.category-subs-selected {
	font-weight: bold;
	}
/* end categories box links */

/*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;
	}

.hiddenField {
	display: none;
}
.visibleField {
	display: inline;
}

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;
	}

.productListing-rowheading
{
    background-color: #e1e1e1;
    height: 2em;
    color: #960202;
    font-weight: bold;
}

a.productListing-heading
{
    color: #960202;
    font-weight: bold;
    text-decoration: none;
}
a:hover.productListing-heading
{
    color: #960202;
    font-weight: bold;
    text-decoration: underline;
}
#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, #infoShoppingCart {
	background-color: #ffffff;
	}
.information {padding: 10px 3px; line-height: 150%;}


#shoppingcartBody #shippingEstimatorContent {

	clear: both;

	}



.seDisplayedAddressLabel {

	background-color:#85C285;

	text-align: center;

	}

.seDisplayedAddressInfo {

	text-transform: uppercase;

	text-align: center;

	font-weight: bold;

	}

#seShipTo {

	padding: 0.2em;

	}



table.tabTable
{
    border-top: gray 1px solid;
    border-left: gray 1px solid;
}
#listCell0-0
{
    background-color: #939393;
    font-weight: bold;
    color: white;
    width: 150px;
    border-right: gray 1px solid;
}
#listCell0-1
{
    border-right: gray 1px solid;
}

#listCell0-2
{
    border-right: gray 1px solid;
}

.productListing-odd
{    
    border-left: gray 1px solid;
}
.productListing-data
{    
    border-bottom: gray 1px solid;
    border-right: gray 1px solid;
}

h3.itemTitle
{
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    color: black;
    padding-left: 3px;
}

h3.itemTitle a
{
    text-align:left;
    font-weight: bold;
    font-size: 12px;
    color: black;
}
.listingDescription
{
     padding-left: 3px;
    text-align: left;
    font-size: 12px;
    color: black;
}
.specialchars {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.5em;
	color: #666666;
	line-height: normal;
	font-weight: bold;	
}

.tipcomments {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0033CC;
	line-height: normal;
}

.smallprint {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	line-height: normal;
}

.keywords {
	font:"Times New Roman", Times, serif;
	font-size:1px;
	color:#ffffff;
}

.rightbox {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 0.9em;
	background-image: url(http://zgear.org/images/rightboxtile.jpg);
	background-repeat: repeat-x;
}

.policies {
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: .8em;
	color: #000000;
	line-height: normal;
}

.sidelines {
	BORDER-RIGHT: #cccccc 1px solid; 
	PADDING-RIGHT: 10px; 
	PADDING-LEFT: 10px; 
	FONT-SIZE: .8em; 
	BORDER-LEFT: #cccccc 1px solid; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #ffffff;
}
.sidelines1

{

    padding-right: 10px;

    padding-left: 10px;

    font-size: 8pt;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    background-color: #ffffff;

}
.boldch  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #DF2D1F;
	font-weight: bold;
}

.boldtext  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000000;
	font-weight: bold;	
}

.grayborder

{

    border-top: #cccccc;

    background-color: transparent;

    border-width: 1px;

    border-top-style: solid;

}

.grayborder2 {
	background-color: #FFFFFF;
	BORDER-BOTTOM: #cccccc;
	border-width: 1px;
	border-bottom-style: solid;
}

.bdescrip {
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 13px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	COLOR: #147c00; 
	PADDING-TOP: 10px; 
	text-decoration: underline; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
p.special    { font-family: Arial; font-size: 10px }

p.special1   { font-family: Verdana; font-size: 8pt; font-weight: bold }

[kobra]

Add image to this rule to the templates stylesheet.css file

.sideBoxContent {
        background-image: url(../images/your_image.XXX);
        background-repeat: add rule;
	background-color: #ffffff;
	padding: 0.4em;
        }

With the above rule the image must be in your_template/images directory

[gjh42]

What is this image for? It sounds like a sidebox heading/title. If so, the easiest way to replace the text with an image is to follow the tutorial, which describes using the Images for Titles mod in Free Addons, among other things.

[shinigami]

THank you for your response.

I did as you suggested and it changed the color on the background with no problems but the gray color is on top.

When I use firebug to examine the element this is what I see:

<table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: rgb(0, 0, 0); width: 100%;">
<tbody><tr>
<td style="text-align: center;">
<img style="height: 4px; width: 1px;" src="images/spacer.gif" alt=""><br>
<img style="height: 37px; width: 138px;" src="includes/templates/mysite/images/categories.png" alt="CATEGORIES"><br>
<img style="height: 4px; width: 1px;" src="images/spacer.gif" alt=""><br></td>
</tr>
</tbody></table>

How can I change that: background-color: rgb(0, 0, 0)?
and where is that hardcoded at?

Thank you tons to everyone!

[gjh42]

It looks like you have a custom template (possibly Template Monster, by the <table> and spacer gif elements), and we can't give any useful advice without seeing it live. We have no real idea where you want this or what code you currently have to build it.