v4.2.3 Newbie Help Pls Caretta Bright Skin

[Guest lolichka]

Hi all,

I am new to V4 and finding my way around the code side of things. Sorry for the long post but I need to explain :-)

I am using the Caretta-Bright skin and would like to add a background image to the text headings in each of the boxes that appear.

For example "Product Category" would be displayed in white text with a red awning image as the background.

I did search the forum and came across this thread http://forums.cubecart.com/index.php?showt...p;hl=box+titles however, I am not sure what skin that relates to as I do not have mentioned anywhere in styleTemplates>Boxes>categories.tpl "boxTitlesleft". From what I can guage of that file my reference relates to <div class="LeftBox"> for each of the boxes.

I did open the layout.css file and locate "LeftBox and attempted to add the backgroun image, however upon doing that all of the boxes ended up getting squished on top of each other and I did see the awning. I'm just not sure how to unsquish the boxes!

I am definately no expert when it comes to .css and am learning, could someone offer some help please. I am sure its a simple fix but I don't have the understanding to figure it out... i've copied and pasted the code below.

I'm 'assuming' that the squished boxes may have something to do with the margin / padding but I don't know how to offset this with the awning image that has been added. I did add different variables, such as increase 5px to 175px and 2px to 100px to see what happened and gradually reduced those but there was still a substantial gap I couldn't get rid of.??

/**BEGIN LEFT COLUMN SIDE BOXES

*************************/

.LeftBox {

margin: 0 0 5px 0;

padding: 0 0 2px 0;

width:185px;

background color: #FFFFFF;

height: 30px;

background-image: url(../styleImages/backgrounds/awning.jpg);

background-position: center;

background-repeat: no-repeat;

margin-top: 10px;

}

/**END LEFT COLUMN SIDE BOXES

*************************/

I am volunteering my time to help get a store online in between familiy, babies and my own work. I've integrated their branding into the site with exception of a few minor tweaks as mentioned above. I know they would be willing to purchase also however catch 22 in that I need to get their design sorted first :-)

I really would appreciate some help on this.

Thanks

L

[Guest lolichka]

Ok - I have been playing around with elements within the layout.css and have figured out as much as this:

open yourSkin/layout.css and find the following (around line 106)...

/**LEFT COLUMN HEADINGS

************************/

.subHeading {

margin:0;

padding:0;

color: #ffffff;

height: 30px;

width:100%;

/*border-bottom: 1px dotted #CC0000;*/

background-image: url(../../yourSkin/styleImages/backgrounds/awning.jpg);

background-repeat: no-repeat;

background-position: left top;

background-color: #3F4BBA; /* changes colour of background for awning picture */

}

Basically I commented out the dotted bottom border as I didn't need this.

I added in background-image/repeat/position and changed the colour to the same of that as the awning.

I then needed to adjust the H2 / H3 headings to fit in with the style of the background image.

*** Note - these changes only relate to the Carrera-Bright skin.

Cheers

L