Thumbnails border & "More info" tab bacground

[Sadegh940]

I have two question. although I searched the forum but I have problem with:

 

1) How to get a border around product thumbnails

2) how to change "more info" tab background in products page. I have attached my website global.css and screenshot of my website page. plz help me if you have solution. thank you!

global.css

[miskey]

Can I also ask that How I can change the name of "more info" tab ?

[halennoor]

Can I also ask that How I can change the name of "more info" tab ?

 

Go to

Tools>Translations choose the Front Office Translation from the drop down menu --click on language of your front office.

 

scroll until you reach the "product expression" click on it and find the "More info" -- make changes on the field on the right.

Save your changes by clicking on the Update translations at the bottom

[Sadegh940]

nobody to help?

[halennoor]

to get border around thumbnails try this - look up in global.css about line 1186 - at

 

/* views block */

 

insert the values you want for the border.( adjust the px and hex color to your own requirement)

 

 

border: solid 1px #488c40;

 

thus, it looks like this in your global.css

 

#thumbs_list {

overflow: hidden;

float: left;

border: solid 1px #488c40;

width: 255px

 

hope it helps.

Edited June 27, 2012 by halennoor (see edit history)

[halennoor]

for "more info" background color

 

try this

 

go to global.css at /* IdTabs Short*/

 

insert the property and value ( change the hex color code to your preference)

 

background: #488c40;

 

 

it should look like this:

 

div.sheets {

clear: both;

background: #488c40;

padding: 1em

}

 

see if it works for you.

[Sadegh940]

to get border around thumbnails try this - look up in global.css about line 1186 - at /* views block */ insert the values you want for the border.( adjust the px and hex color to your own requirement) border: solid 1px #488c40; thus, it looks like this in your global.css #thumbs_list { overflow: hidden; float: left; border: solid 1px #488c40; width: 255px hope it helps.

 

Thank you for your response. I checked it. This code add one frame around all thumbnails. but I want to have a frame around each thumbnail. I add this code to "#thumbs_list li" the frame appears. but the problem is that my photos size is 150*150. so the photos are bigger than my current frame size(80*80). how can I change the thumb size?

 

#thumbs_list {
overflow: hidden;
float: left;
width: 255px
}
#thumbs_list ul {
padding-left: 0;
list-style-type: none;
margin-top: 5px
}
#thumbs_list li {
float: left;
cursor: pointer;
width: 80px;
height: 80px;
margin-right: 5px;
border: solid 1px #40478c

 

for "more info" background color try this go to global.css at /* IdTabs Short*/ insert the property and value ( change the hex color code to your preference) background: #488c40; it should look like this: div.sheets { clear: both; background: #488c40; padding: 1em } see if it works for you.

 

unfortunately this code doesn't work.

Edited June 27, 2012 by Sadegh940 (see edit history)

[halennoor]

sorry i misunderstood you. I thought you wanted the borders around the thumbnails and not each thumbnails. In which case the border property and values should go to the #thumbs_list li. The size can be adjusted by modifying the 80 px to 150 px but if you have many thumbnails they will be pushed to the bottom row.

 

 

on the second question - more info tab background -- the code should work for the background of the entire information box background.

 

But to change the tab background color, you will have to change the color code

#FF6762 to something else.

 

this is in about line 146 of in your code.

 

 

.idTabsShort .selected {

background: none repeat scroll 0 0 #FF6762;

color: white;

}

 

hope it helps.

Edited June 27, 2012 by halennoor (see edit history)