Перейти к содержимому


Прошу Ответить По Вкладкам


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 11

#1 Пингвин

Пингвин

    Пользователь

  • Пользователи
  • PipPip
  • 19 сообщений

Отправлено 12 Март 2015 - 17:19

Здравствуйте.  Сделала вкладки. 1)Теперь надо поменять цвет на зеленый (как сделан дизайнерами). 2) И текст не помещается в рамку вкладки.
3) Также включила отзывы, но они не отображаются вкладкой. 4) И как можно сделать вкладку состав, чтобы для каждого товара отображался разный состав?
Аккаунт 325506

Прикрепленные изображения

  • Скриншот 2015-03-10 22.48.05.png


#2 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 12 Март 2015 - 17:42

Просмотр сообщенияПингвин (12 Март 2015 - 17:19) писал:

Здравствуйте.  Сделала вкладки. 1)Теперь надо поменять цвет на зеленый (как сделан дизайнерами). 2) И текст не помещается в рамку вкладки.
3) Также включила отзывы, но они не отображаются вкладкой. 4) И как можно сделать вкладку состав, чтобы для каждого товара отображался разный состав?
Аккаунт 325506
Здравствуйте,
1. Найдите в style2.css

.tabs label {
background: #6d747c;
background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 140px;
color: #385c5b;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
замените на


.tabs label {
background: #7A9F0B;
background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5C7F00), color-stop(100%,#4F6F00));
background: -webkit-linear-gradient(top, #5C7F00 0%,#4F6F00 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 140px;
color: #DEEA87;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

2. найдите в style2.css
.tabs {
position: relative;
margin: 40px auto;
width: 750px;
}
замените на

.tabs {
position: relative;
margin: 40px auto;
width: 669px;
overflow-y: scroll;
}
3. на данный момент у вас выключены отзывы о товарах, найдите в раздел Настройки-Основное и включите.
4. Вы можете добавить информацию в краткое описание и вывести на сайте

#3 Пингвин

Пингвин

    Пользователь

  • Пользователи
  • PipPip
  • 19 сообщений

Отправлено 12 Март 2015 - 18:22

Просмотр сообщенияИрина345 (12 Март 2015 - 17:42) писал:

Здравствуйте,
1. Найдите в style2.css

.tabs label {
background: #6d747c;
background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 140px;
color: #385c5b;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
замените на


.tabs label {
background: #7A9F0B;
background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5C7F00), color-stop(100%,#4F6F00));
background: -webkit-linear-gradient(top, #5C7F00 0%,#4F6F00 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 140px;
color: #DEEA87;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

2. найдите в style2.css
.tabs {
position: relative;
margin: 40px auto;
width: 750px;
}
замените на

.tabs {
position: relative;
margin: 40px auto;
width: 669px;
overflow-y: scroll;
}
3. на данный момент у вас выключены отзывы о товарах, найдите в раздел Настройки-Основное и включите.
4. Вы можете добавить информацию в краткое описание и вывести на сайте

Спасибо большое!
Но:
1) Цвет шрифта поменялся, но стал почти незаметным. А название и сама вкладка так и подсвечиваются голубым.
2) Появилась рамка для текста, но скролл не работает, в итоге часть длинного текста не просмотреть.
3) У меня включены отзывы, но они по-прежнему не показываются.

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 13 Март 2015 - 01:53

1. В style2.css найдите:
.tabs input:checked + label {
	background: #fff;
z-index: 6;

	-webkit-animation: page 0.2s linear;
	-moz-animation: page 0.2s linear;
	-ms-animation: page 0.2s linear;
	-o-animation: page 0.2s linear;
	animation: page 0.2s linear;
}

данный код отвечает за выбранную вкладку, можно в ней изменить цвет шрифта, например:
.tabs input:checked + label {
	background: #fff;
z-index: 6;
color:#000;
	-webkit-animation: page 0.2s linear;
	-moz-animation: page 0.2s linear;
	-ms-animation: page 0.2s linear;
	-o-animation: page 0.2s linear;
	animation: page 0.2s linear;
}

Цвет внутри таба меняйте в следующем блоке:
.content div h2, .content div h3 {
  color: #398080;
}

2. В style.css найдите:
.content div
замените на:
.content > div

скролл рабочий появится в случае, если информации больше чем высота блока

3. В шаблоне Товар найдите:
{% IFNOT TARIFF_FEATURE_GOODS_OPINION %}
				  <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
				  <label for="tab-4" class="tab-label-4">Отзывы</label>
				{%ENDIF%}
замените на:
				  <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
				  <label for="tab-4" class="tab-label-4">Отзывы</label>


#5 Пингвин

Пингвин

    Пользователь

  • Пользователи
  • PipPip
  • 19 сообщений

Отправлено 14 Март 2015 - 16:12

Просмотр сообщенияVaccina (13 Март 2015 - 01:53) писал:

1. В style2.css найдите:
.tabs input:checked + label {
background: #fff;
z-index: 6;

-webkit-animation: page 0.2s linear;
-moz-animation: page 0.2s linear;
-ms-animation: page 0.2s linear;
-o-animation: page 0.2s linear;
animation: page 0.2s linear;
}

данный код отвечает за выбранную вкладку, можно в ней изменить цвет шрифта, например:
.tabs input:checked + label {
background: #fff;
z-index: 6;
color:#000;
-webkit-animation: page 0.2s linear;
-moz-animation: page 0.2s linear;
-ms-animation: page 0.2s linear;
-o-animation: page 0.2s linear;
animation: page 0.2s linear;
}

Цвет внутри таба меняйте в следующем блоке:
.content div h2, .content div h3 {
color: #398080;
}

2. В style.css найдите:
.content div
замените на:
.content > div

скролл рабочий появится в случае, если информации больше чем высота блока

3. В шаблоне Товар найдите:
{% IFNOT TARIFF_FEATURE_GOODS_OPINION %}
				 <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
				 <label for="tab-4" class="tab-label-4">Отзывы</label>
			 {%ENDIF%}
замените на:
				 <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
				 <label for="tab-4" class="tab-label-4">Отзывы</label>


Спасибо! Все получилось, кроме одного: поменять цвет недействующей вкладки (в прикрепленном файле пример). Сейчасвкладки голубые, нужны зеленые. Перепробовала все.

Прикрепленные изображения

  • Скриншот 2015-03-14 16.08.22.png


#6 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 14 Март 2015 - 16:18

Просмотр сообщенияПингвин (14 Март 2015 - 16:12) писал:

Спасибо! Все получилось, кроме одного: поменять цвет недействующей вкладки (в прикрепленном файле пример). Сейчасвкладки голубые, нужны зеленые. Перепробовала все.
Здравствуйте.
Вопрос еще актуален?
На данный момент цвет вкладок изменен.

#7 Пингвин

Пингвин

    Пользователь

  • Пользователи
  • PipPip
  • 19 сообщений

Отправлено 14 Март 2015 - 16:20

Просмотр сообщенияDanil (14 Март 2015 - 16:18) писал:

Здравствуйте.
Вопрос еще актуален?
На данный момент цвет вкладок изменен.

Вопрос актуален. Обновляю, цвет по-прежнему, не тот, что нужно.

#8 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 14 Март 2015 - 16:28

Просмотр сообщенияПингвин (14 Март 2015 - 16:20) писал:

Вопрос актуален. Обновляю, цвет по-прежнему, не тот, что нужно.
В main.css найдите код
.tabs label {
  background: 7A9F0B;
  background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5C7F00), color-stop(100%,#4F6F00));
  background: -webkit-linear-gradient(top, #5C7F00 0%,#4F6F00 100%);
  background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  font-size: 15px;
  line-height: 40px;
  height: 40px;
  position: relative;
  padding: 0 20px;
  float: left;
  display: block;
  width: 140px;
  color: black;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
  border-radius: 3px 3px 0 0;
  box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
background: linear-gradient (во всех 6 строчках должен быть одинаковый цвет)

#9 Пингвин

Пингвин

    Пользователь

  • Пользователи
  • PipPip
  • 19 сообщений

Отправлено 14 Март 2015 - 16:47

Просмотр сообщенияDanil (14 Март 2015 - 16:28) писал:

В main.css найдите код
.tabs label {
background: 7A9F0B;
background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5C7F00), color-stop(100%,#4F6F00));\

Спасибо!! Теперь все как надо)

background: -webkit-linear-gradient(top, #5C7F00 0%,#4F6F00 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 140px;
color: black;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
background: linear-gradient (во всех 6 строчках должен быть одинаковый цвет)

Спасибо! Теперь все как надо)

#10 Пингвин

Пингвин

    Пользователь

  • Пользователи
  • PipPip
  • 19 сообщений

Отправлено 17 Март 2015 - 19:22

Добрый вечер! Помогите, пожалуйста, убрать горизонтальный скролл (вертикальный надо оставить).

Прикрепленные изображения

  • Скриншот 2015-03-17 19.22.02.png


#11 Cupuyc

Cupuyc

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 747 сообщений

Отправлено 17 Март 2015 - 19:54

Просмотр сообщенияПингвин (17 Март 2015 - 19:22) писал:

Добрый вечер! Помогите, пожалуйста, убрать горизонтальный скролл (вертикальный надо оставить).

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> СТИЛИ -> main.css добавьте последней строкой код:
.op .tabs .content {overflow-x: hidden;}


#12 Пингвин

Пингвин

    Пользователь

  • Пользователи
  • PipPip
  • 19 сообщений

Отправлено 17 Март 2015 - 20:27

Просмотр сообщенияCupuyc (17 Март 2015 - 19:54) писал:

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> СТИЛИ -> main.css добавьте последней строкой код:
.op .tabs .content {overflow-x: hidden;}

Спасибо большое! Работает.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных