
03-14-2018, 05:12 PM
|
 |
Paid Member
|
|
Join Date: Feb 2018
Posts: 4
|
|
Hi,
yes. I did this:
1) Go to Ecwid control panel
2) Below select Design (under Configuration)
3) On the right top it says "Edit Theme"
4) After Edit theme select add new css theme
5) Copy and paste this:
To the Theme name part: Tabs
Below to the blank area:
.ecwid {
$bg-color: #eee;
$bg-color-active: #fff;
$border-color: #ccc;
$tabs-count: 3;
.tabs {
margin-bottom: 20px;
.tabs__input {
display: none;
}
.tabs__link {
background: $bg-color;
border: 1px solid $border-color;
float: left;
font-weight: 600;
padding: 5px 10px;
margin-right: -1px;
margin-bottom: -1px;
&:hover {
background: darken($bg-color, 10%);
}
}
.tabs__content {
border: 1px solid $border-color;
clear: both;
display: none;
padding: 10px;
transition: opacity 200ms ease-out;
}
@for $i from 1 through $tabs-count {
.tabs__input:checked:nth-of-type(#{$i}) ~ .tabs__link:nth-of-type(#{$i}) {
background: $bg-color-active;
border-bottom-color: $bg-color-active;
}
}
@for $i from 1 through $tabs-count {
.tabs__input:checked:nth-of-type(#{$i}) ~ .tabs__content:nth-of-type(#{$i}) {
display: block;
}
}
}
.ecwid-productBrowser-details-descr .tabs__link {
box-sizing: border-box;
width: 100% / $tabs-count;
}
}
|