[solved] Changing "more info" and "datasheet" tabs look?

[h4mm1e]

Hi Every one, thanks for looking in...

 

 

My shop is using a customer theme but I don't like to look of the "more info" and "datasheet" tabs etc on the product page.

 

see Here

 

I'd much rather use the tabs from the standard prestashop theme if possible see HERE

 

 

how would one go about doing this?

 

 

any help / thoughts would be very helpful

[Ronaldo Perez]

go /themes/your_theme/product.tpl

search <!-- description and features -->

edit the code below, when talking about design - it is necessary to change the css files

[h4mm1e]

Thanks again Sergey,

 

Is there a simple way for me to edit it to use the tab style from the standard prestashop theme? I have no idea what i'm looking at really

[Ronaldo Perez]

I would say, when you're hungry, there are several ways to satisfy your hunger

- Learn to cook

- Hire a chef

- Go to a restaurant

[h4mm1e]

luckily enough I don't actually have to write the programming for my oven or cast the steel to make my cutlery

 

I'm trying to learn.

[h4mm1e]

Well looks like I learned to Cook,

 

I copied

 

/* Tabs */
.idTabs {
list-style-type: none;
border-bottom: solid 1px #76839b;
height: 21px;
margin-top: 1em
}
ul.idTabs li {
float: left;
margin-right: 1px
}
.idTabs a {
background-image: url('../img/tab_bg.jpg');
display: block;
width: 173px;
height: 18px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding-top: 3px;
color: #374853
}
.idTabs .selected {
background-image: url('../img/tab_bg_selected.jpg');
color: white
}
/* IdTabs Short*/
.idTabsShort a {
background-image: url('../img/tab_bg_short.jpg');
width: 138px
}
.idTabsShort .selected {
background-image: url('../img/tab_bg_selected_short.jpg');
color: white
}
div.sheets {
clear: both;
padding: 1em
}
#more_info_sheets li {
background-position: 6px 4px;
margin-bottom: 0.4em
}
/* global style */

 

from Global.css in prestshop theme and paste it into my Global.css in my custom theme

 

 

thanks to the moody chef sergey.

[Ronaldo Perez]

Nice. I hope I have not offended you

[Truong Huynh]

Well looks like I learned to Cook,

 

I copied

 

/* Tabs */
.idTabs {
list-style-type: none;
border-bottom: solid 1px #76839b;
height: 21px;
margin-top: 1em
}
ul.idTabs li {
float: left;
margin-right: 1px
}
.idTabs a {
background-image: url('../img/tab_bg.jpg');
display: block;
width: 173px;
height: 18px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding-top: 3px;
color: #374853
}
.idTabs .selected {
background-image: url('../img/tab_bg_selected.jpg');
color: white
}
/* IdTabs Short*/
.idTabsShort a {
background-image: url('../img/tab_bg_short.jpg');
width: 138px
}
.idTabsShort .selected {
background-image: url('../img/tab_bg_selected_short.jpg');
color: white
}
div.sheets {
clear: both;
padding: 1em
}
#more_info_sheets li {
background-position: 6px 4px;
margin-bottom: 0.4em
}
/* global style */

from Global.css in prestshop theme and paste it into my Global.css in my custom theme

 

 

thanks to the moody chef sergey.

 

 

Nice!

 

You can help me edit themse PS_1.6.1.16? I needed.

 

I need see demo: https://www.w3schools.com/howto/howto_js_tabs.asp

 

I need edit DATASHEET and MORE INFO into tabs

 

Thanks for help!

Edited August 27, 2017 by Truong Huynh (see edit history)