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


Помогите С Установкой Css3 Вкладок (Табов)

Автор NaLeeWay, 13 дек. 2012 11:37
css3 установка описание товар

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

#181 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 27 Июнь 2014 - 17:38

В Style.css
допишите
div.content-2, .content-4 {
	width: 500px;
	padding: 10px 0!important;
	margin-left: -80px!important;
}
div.content-1, .content-3 {
	width: 600px;
	margin-left: 50%;
	padding: 10px 0;

#182 svarob-shop

svarob-shop

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

  • Пользователи
  • PipPip
  • 39 сообщений
  • ГородНижний Новгород

Отправлено 27 Июнь 2014 - 19:00

Просмотр сообщенияbatta (27 Июнь 2014 - 17:38) писал:

В Style.css
допишите
div.content-2, .content-4 {
width: 500px;
padding: 10px 0!important;
margin-left: -80px!important;
}
div.content-1, .content-3 {
width: 600px;
margin-left: 50%;
padding: 10px 0;

Осталось только отзывы поправить. А возможно содержимое вкладок выровнять от левого края?

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

  • 2014-06-27 19-58-37 Скриншот экрана.png

#183 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 27 Июнь 2014 - 19:17

ИзображениеУ нас всё корректно отображается.
Вы каким браузером пользуетесь?

#184 svarob-shop

svarob-shop

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

  • Пользователи
  • PipPip
  • 39 сообщений
  • ГородНижний Новгород

Отправлено 27 Июнь 2014 - 22:44

Просмотр сообщенияbatta (27 Июнь 2014 - 19:17) писал:

У нас всё корректно отображается.
Вы каким браузером пользуетесь?

Да, я выровнял их

#185 svarob-shop

svarob-shop

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

  • Пользователи
  • PipPip
  • 39 сообщений
  • ГородНижний Новгород

Отправлено 27 Июнь 2014 - 22:59

Просмотр сообщенияbatta (27 Июнь 2014 - 19:17) писал:

У нас всё корректно отображается.
Вы каким браузером пользуетесь?

Большое спасибо за помощь в редактирование вкладки, я практически весь форум облазил по этой теме, но безрезультатно.

Буду еще очень рад, если Вы сможете мне помочь во в таком деле (конечно я создам новую тему):
Сделать из стандартного всплывающего окна "Товар ... успешно добавлен в корзину" на аналогичную другого сайта.
Ссылка на тему: http://forum.storela...товара-в-корзи/

#186 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 24 Август 2014 - 16:33

Подскажите, пожалуйста, как реализовать в шаблоне ПЛАСТИК данный метод http://forum.storela...бов/#entry35209

Просто код шаблона ТОВАР совершенно другой. В нем нет даже строчки
<!-- Блок описания товара. Показываем его есть описание товара -->


И порядок кода совершенно другой.

Заранее большое спасибо за помощь.

#187 Danil

Danil

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

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

Отправлено 24 Август 2014 - 17:05

Просмотр сообщенияgrappp (24 Август 2014 - 16:33) писал:

Подскажите, пожалуйста, как реализовать в шаблоне ПЛАСТИК данный метод http://forum.storela...бов/#entry35209

Просто код шаблона ТОВАР совершенно другой. В нем нет даже строчки
<!-- Блок описания товара. Показываем его есть описание товара -->


И порядок кода совершенно другой.

Заранее большое спасибо за помощь.

Зайдите в шаблон товар найдите и удалите код
Скрытый текст
Далее в шаблоне товар найдите код
<!-- Условия доставки-Конец -->
		 </div>
	 </div>
	 <br /> <script type="text/javascript">(function() {
if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})();</script>
<div class="pluso" data-background="transparent" data-options="medium,round,line,horizontal,nocounter,theme=08" data-services="vkontakte,facebook,twitter,google,moimir,odnoklassniki,livejournal,tumblr,linkedin,email,print"></div>
</div>
	 <div class="clear"></div>
</div>
</form>
И после него вставьте
Скрытый текст
Далее скачайте Прикрепленный файл  style2.css   4,51К   347 Количество загрузок: и добавьте к себе на сайт на сайт.
После зайдите в html шаблон и найдите код
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}main.css" type="text/css" />
И после него добавьте
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}style2.css" type="text/css" />

#188 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 24 Август 2014 - 17:37

Как-то вышло не так

Изображение

#189 Danil

Danil

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

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

Отправлено 24 Август 2014 - 17:39

Просмотр сообщенияgrappp (24 Август 2014 - 17:37) писал:

Как-то вышло не так

Изображение

Необходимо добавить style2.css. На данный момент у Вас его нет.

#190 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 24 Август 2014 - 17:51

Да, вы правы. Добавил его просто не туда )

Получилось. Но все равно как-то не так ) Под вкладками вот такая ерунда (скрин)

Изображение

И вкладка описание пуста. Хотя должна быть заполнена.

#191 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 24 Август 2014 - 17:58

И если можно, то хотелось бы видеть следующие вкладки: Описание (полное описание в админке которое) / Характеристики / Доставка / Отзывы

#192 Danil

Danil

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

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

Отправлено 24 Август 2014 - 18:03

Просмотр сообщенияgrappp (24 Август 2014 - 17:51) писал:

Да, вы правы. Добавил его просто не туда )

Получилось. Но все равно как-то не так ) Под вкладками вот такая ерунда (скрин)

Изображение

И вкладка описание пуста. Хотя должна быть заполнена.

В шаблоне товар найдите код 
{GOODS_DESCRIPTION_LARGE}
И после него вставьте код
									 <!-- Короткое SEO-описание -->
{% IF GOODS_SEO_DESCRIPTION_SHORT %}
<div style="padding-top:1em;">{GOODS_SEO_DESCRIPTION_SHORT}</div>
{% ENDIF %}
<!-- END Короткое SEO-описание -->
<!-- Полное SEO-описание -->
{% IF GOODS_SEO_DESCRIPTION_LARGE %}
<div style="padding-top:1em;" class="htmlDataBlock">
		 {GOODS_SEO_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Полное SEO-описание -->

Далее ниже найдите код и удалите
<!-- Короткое SEO-описание -->
{% IF GOODS_SEO_DESCRIPTION_SHORT %}
<div style="padding-top:1em;">{GOODS_SEO_DESCRIPTION_SHORT}</div>
{% ENDIF %}
<!-- END Короткое SEO-описание -->
<!-- Полное SEO-описание -->
{% IF GOODS_SEO_DESCRIPTION_LARGE %}
<div style="padding-top:1em;" class="htmlDataBlock">
		 {GOODS_SEO_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Полное SEO-описание -->
<!-- Блок характеристик товара. Показываем его если указаны характеристики -->
{% IFNOT goods_features_empty %}
<h3>Характеристики {GOODS_NAME}</h3>
<table class="goodsDataFeatures">
		 <tr>
				 {% FOR goods_features%}
						 <td>
								 <p><span>{goods_features.NAME}</span></p>
						 </td>
						 <td>
								 {goods_features.VALUE}
						 </td>
						 {% IFNOT goods_features.last %}{goods_features.index | is_divided("2","</tr><tr>","")}{% ENDIF %}
				 {% ENDFOR %}
		 </tr>
</table>
{% ENDIF %}
<!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
<!-- Сопутствующие товары -->
{% IFNOT related_goods_empty %}
<h3>Сопутствующие товары</h3>
<table>
<tr>
{% FOR related_goods %}
		 <td class="goodsListItem">
				 <div class="goodsListItemBlock withBorder cornerAll">
				 <div class="goodsListItemImage"><a href="{related_goods.URL}"><img class="goods-image-small" src="{% IF related_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{related_goods.IMAGE_SMALL}{% ENDIF %}" alt="{related_goods.NAME}" /></a></div>
				 <h3 class="goodsListItemName"><a href="{related_goods.URL}">{related_goods.NAME}</a></h3>
				 <div class="goodsListItemPriceNew">
						 <a href="{related_goods.URL_MIN_PRICE_NOW}">{related_goods.MIN_PRICE_NOW | money_format}</a>
				 </div>
				 <div class="goodsListItemPriceOld">
								 {% IF related_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>related_goods.MIN_PRICE_NOW %}
										 <a href="{related_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{related_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
								 {% ELSEIF related_goods.MIN_PRICE_OLD>related_goods.MIN_PRICE_NOW %}
										 <a href="{related_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{related_goods.MIN_PRICE_OLD | money_format}</a>
								 {% ENDIF %}
				 </div>
				 </div>
		 </td>
{% IFNOT related_goods.last %}{related_goods.index | is_divided("4","</tr><tr>","")}{% ENDIF %}
{% ENDFOR goods %}
</tr>
</table><br /><br />
{% ENDIF %}
<!-- END Сопутствующие товары -->

#193 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 24 Август 2014 - 18:31

Да, теперь вроде правильно все.
Вот только не могли бы вы помочь сделать вкладки в таком расположении:

Описание / Характериситики / Доставка / Отзывы

А сопутсвующие товары, что бы так и шли просто внизу.
И вкладка описание сейчас просто пустая. Хотя в админке поле "ПОЛНОЕ ОПИСАНИЕ" заполнено.

Вот хотелось бы, что бы получилось как тут: http://snpshop.ru/go...-Sovy?from=N2I2
Только вкладок у меня больше и вкладка ОПИСАНИЕ там видимо это SEO описание, а мне нужно просто "ПОЛНОЕ ОПИСАНИЕ". И вот цвет вкладок хотелось бы в тон шаблона )

Заранее большое спасибо и извините, что так насел на вас )

#194 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 24 Август 2014 - 18:59

Просмотр сообщенияgrappp (24 Август 2014 - 18:31) писал:

Да, теперь вроде правильно все.
Вот только не могли бы вы помочь сделать вкладки в таком расположении:

Описание / Характериситики / Доставка / Отзывы

А сопутсвующие товары, что бы так и шли просто внизу.
И вкладка описание сейчас просто пустая. Хотя в админке поле "ПОЛНОЕ ОПИСАНИЕ" заполнено.

Вот хотелось бы, что бы получилось как тут: http://snpshop.ru/go...-Sovy?from=N2I2
Только вкладок у меня больше и вкладка ОПИСАНИЕ там видимо это SEO описание, а мне нужно просто "ПОЛНОЕ ОПИСАНИЕ". И вот цвет вкладок хотелось бы в тон шаблона )

Заранее большое спасибо и извините, что так насел на вас )
Здравствуйте.
Уточните на примере какого товара можно видеть что описания нету.

в main.css добавьте в самый конец
Скрытый текст


В шаблоне Товар измените весь код на

Скрытый текст

#195 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 24 Август 2014 - 22:07

Просмотр сообщенияbatta (24 Август 2014 - 18:59) писал:

Здравствуйте.
Уточните на примере какого товара можно видеть что описания нету.

в main.css добавьте в самый конец
Скрытый текст


В шаблоне Товар измените весь код на

Скрытый текст


К сожалению с Вашим вариантом получается вообще полная тарабарщина :(
Я так понимаю, что Вы мне предложили просто скопировать шаблон "ТОВАР" с преведенного мной примера :) Но к сожалению мне это не подходит.

Мне нужны именно вкладки:
Описание / Характериситики / Доставка / Отзывы

+ ко всему прочему у меня в шаблоне "ТОВАР" уже присутствуют свои изменения и просто заменить весь текст я не могу :(

#196 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 24 Август 2014 - 22:42

Просмотр сообщенияgrappp (24 Август 2014 - 22:07) писал:

К сожалению с Вашим вариантом получается вообще полная тарабарщина :(
Я так понимаю, что Вы мне предложили просто скопировать шаблон "ТОВАР" с преведенного мной примера :) Но к сожалению мне это не подходит.

Мне нужны именно вкладки:
Описание / Характериситики / Доставка / Отзывы

+ ко всему прочему у меня в шаблоне "ТОВАР" уже присутствуют свои изменения и просто заменить весь текст я не могу :(
Вставьте код перед в Шаблоне Товар
<!-- Условия доставки -->


<script type="text/javascript">(function() {
  if (window.pluso)if (typeof window.pluso.start == "function") return;
  if (window.ifpluso==undefined) { window.ifpluso = 1;
	var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
	s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
	s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
	var h=d[g]('body')[0];
	h.appendChild(s);
  }})();</script>
<div class="pluso" data-background="none;" data-options="medium,square,line,horizontal,counter,sepcounter=1,theme=14" data-services="vkontakte,odnoklassniki,facebook,twitter,moimir"></div>
<div class="clear"></div>
	</div>
  </form>
<div class="op">
  <section class="tabs">
	<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
	<label for="tab-1" class="tab-label-1">Описание </label>

	<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
	<label for="tab-2" class="tab-label-2">Доставка</label>

	<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
	<label for="tab-3" class="tab-label-3">отзывы</label>
 
<!--	 <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
	 <label for="tab-4" class="tab-label-4">Сопутствующие товары</label> -->
				  
	 <div class="clear-shadow"></div>
 
	 <div class="content">
	   <div class="content-1">
		  <h2>{GOODS_NAME}</h2>
		  {GOODS_DESCRIPTION_LARGE}		 
	   </div>
	   <div class="content-2">
main.css написал в сообщении №194

#197 Navihome_ru

Navihome_ru

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 94 сообщений
  • ГородМосква

Отправлено 30 Сентябрь 2014 - 13:37

Просмотр сообщенияKoderhan (24 Январь 2013 - 20:00) писал:

Для того чтобы удалить левую полоску.


[/CODE]


Здравствуйте!
1.Подскажите как сделать так что бы текст вкладки вставлялся весь по факту, а не в рамках поля. текста много поле маленькое. нужно чтобы поле не имело вертикальногоразмера. для всех вкладок.
2. если во вкладку вставляю блок сопутств товар. то он не отображает изображения. это можно исправить?
спасибо!)

#198 Navihome_ru

Navihome_ru

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 94 сообщений
  • ГородМосква

Отправлено 30 Сентябрь 2014 - 14:20

0

#199 Navihome_ru

Navihome_ru

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 94 сообщений
  • ГородМосква

Отправлено 30 Сентябрь 2014 - 14:44

Просмотр сообщенияСake (25 Июнь 2014 - 00:19) писал:

Вам необходимо в файле стилей style2.css найти

.tabs {
margin: 30px;
position: relative;
width: 100%;
}

и заменить на

.tabs {
margin: 30px 0;
position: relative;
width: 90%;
}

далее необходимо найти

.content > div {
opacity: 0;
padding: 10px 40px;
position: absolute;
top: 0;
transition: all 0s linear 0s;
z-index: 1;
}

и заменить на

.content > div {
display: none;
opacity: 0;
padding: 10px 40px;
transition: all 0s linear 0s;
z-index: 1;
}

далее необходимо найти

.content {
background: #fff !important;
border-radius: 0 3px 3px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1);
height: 740px;
position: relative;
width: 860px;
z-index: 5;
}

и заменить на

.content {
background: #fff;
border-radius: 0 3px 3px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1);
position: relative;
width: 90%;
z-index: 5;
}

далее необходимо найти

.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 {
opacity: 1;
transform: translateX(0px);
z-index: 100;
}

и заменить на

.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 {
display: block;
opacity: 1;
transform: translateX(0px);
z-index: 100;
}

далее в файле стилей main.css найдите

.goodsDataMainOrder {
background: #fff !important;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-left: 100px;
position: absolute;
top: 300px;
width: auto;
}

и замените на

.goodsDataMainOrder {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
top: 300px;
width: auto;
}


Спасибо все четко!!!! главное учесть то что половина кода может быть отредактировано ранее и менять только то что изменилось.

#200 Navihome_ru

Navihome_ru

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 94 сообщений
  • ГородМосква

Отправлено 30 Сентябрь 2014 - 18:47

Просмотр сообщенияKoderhan (05 Декабрь 2013 - 12:18) писал:

В файле "Товар".
Попробуйте после кода:



Помогитес двумя вопросами.
1. Неотображаются сопутств. товары во вкладке аксессуары в карточке товара.
2. Не срабатывают кнопки в отзывах там же во вкладках. (оставить отзыв, полож и отриц отзывы)

Спасибо.
Обратно в Страница товара


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Страница товара
  6. Privacy Policy