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


tega4

Регистрация: 29 янв. 2012
Offline Активность: 26 янв. 2016 12:56
-----

#113931 Раскрывающийся Текстовый Список

Отправлено Vaccina на 07 Январь 2014 - 04:14

В качестве html кода используйте код вида

<div class="spoiler">
  <div class="title" style="cursor: pointer;"><strong><em>Название X</em></strong></div>
  <div class="description" style="display:none;">невидимое описание</div>
</div>
<div class="spoiler">
  <div class="title" style="cursor: pointer;"><strong><em>Название Y</em></strong></div>
  <div class="description"style="display:none;">невидимое описание</div>
</div>

чтобы данный код начал работать - добавьте так же в файл main.js код

$(function() {
  $('.spoiler > .title').click(function() {
	$(this).closest('.spoiler').children('.description').toggle('slow');
	return(false);
  });
});



#68584 Нашел Полезное Решение? - Оставь Ссылку В Этой Теме!

Отправлено 551 на 21 Май 2013 - 14:48

Может кому-то пригодится: колоночное разбиение текста, как в журнале (пример у меня на главной внизу http://babylook.me/).

Текст добавляем в див:

<div class="column" style="width: 920px;">текст</div>

В main.css добавляем:


.column {
-moz-column-width: 250px;
-webkit-column-width: 250px;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
}

Таким образом текст разбивается на 3 колонки.


#102057 Глюк На Сайте. Не Добавляются Товары В Корзину

Отправлено sengun на 10 Ноябрь 2013 - 18:39

Просмотр сообщенияtega4 (10 Ноябрь 2013 - 17:58) писал:

Есть проблема, теперь пишет что не найдена форма корзины, именно на странице товара.
Прикрепленный файл Снимок.JPG
В измененном коде в шаблоне "Товар" замените строку
<form action="{CART_ADD_GOODS_MODIFICATION_URL}" method="post" class="form-inline goodsDataForm">
на эту
<form action="{CART_ADD_GOODS_MODIFICATION_URL}" method="post" class="form-inline goodsDataForm product-form-{GOODS_FROM}">



#101623 Несколько Вопросов.

Отправлено Vaccina на 09 Ноябрь 2013 - 05:59

1-2.Сл.тема вам должна помочь: http://forum.storela...та-с-поиском-т/
3.В файле main.js найдите:

//Карусель изображений товара
$(document).ready(function()
{
$('#thumbs_list').serialScroll({
  items:'li:visible',
  prev:'#view_scroll_left',
  next:'#view_scroll_right',
  axis:'x',
  offset:0,
  start:0,
  stop:true,
  onBefore:serialScrollFixLock,
  duration:700,
  step: 2,
  lazy: true,
  lock: false,
  force:false,
  cycle:false
});
$('#thumbs_list').trigger('goto', 1);
$('#thumbs_list').trigger('goto', 0);
});
замените на:

//Карусель изображений товара
$(document).ready(function()
{
$('#thumbs_list').serialScroll({
  items:'li:visible',
  prev:'#view_scroll_left',
  next:'#view_scroll_right',
  axis:'x',
  offset:0,
  start:0,
  stop:true,
  onBefore:serialScrollFixLock,
  duration:700,
  step: 4,
  lazy: true,
  lock: false,
  force:false,
  cycle:false
});
$('#thumbs_list').trigger('goto', 1);
$('#thumbs_list').trigger('goto', 0);
});
Каждый клик по направительно стрелке будет заставлять перелистывать сразу по 4 товара
4. Найдите:
.accordion ul {
display: block;
float: left;
margin: 0px;
padding: 0px;
position: relative;
width: 100%;
}
попробуйте в нем удалить стиль float: left;

5. Найдите:

.block2 {
background: #FFFFFF;
border-left: 1px solid #EFEFEF;
border-right: 1px solid #EFEFEF;
float: left;
margin-bottom: 20px;
position: relative;
width: 210px;
}
и
.accordion ul {
display: block;
float: left;
margin: 0px;
padding: 0px;
position: relative;
width: 100%;
и добавьте необходимые стили


#87611 Кнопки "поделиться" Для Адаптивного Дизайна

Отправлено Koderhan на 03 Сентябрь 2013 - 16:06

Шаблон Вечность изначально является адаптивный и обычные кнопки поделиться не совсем подходят для отображения на маленьких экранах смартфонов. Часто, кнопки бывают маленькие и попасть по ним трудно. Но можно воспользоваться кнопками от yandex.share которые предназначены для отображения на маленьких экранах. http://api.yandex.ru/share/mobile.xml .
Пример как будет выглядеть.
ScreenShot 792.png ScreenShot 793.png
Установка таких кнопок производится довольно просто.
Все действия производятся в разделе Сайт -> Редактор шаблонов. Для добавления кнопок на страницу товара нужно открыть файл "Товар" и добавить после кода:
<div class="clear"></div>
	 <!-- Блок описания модификации -->
	 <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
	 {GOODS_MOD_DESCRIPTION}
	 </div>
		 <div class="clear"></div>
	 </div>
Вот такой код:
<div class="goodsDataYandexShare">
		 <!-- Кнопки социальных сетей от yandex-share -->
		 <div id="yandex_share" class="orange"></div>
		 <!-- end Кнопки социальных сетей от yandex-share -->
		 </div>
ScreenShot 791.png
В блоке с id yandex_share будут выводиться кнопки.
Теперь нужно добавить JavaScript код  в конец файла "Товар":
<!-- Подключение скрипта от Yandex.Share, кнопки поделиться -->
<script type="text/javascript" src="//yandex.st/share/m.share.js" charset="utf-8"></script>
<script>
new Ya.share({
	 element: 'yandex_share', // id блока в котором выводятся кнопки
	 elementStyle: {
		 'type': 'none',
		 // Кнопки сервисов
		 'quickServices': ['yaru', 'vkontakte', 'facebook', 'twitter', 'odnoklassniki', 'moimir', 'lj', 'gplus']
	 },
	 link: '{CURRENT_URL}', // ссылка на страницу
	 title: '{PAGE_TITLE}', // заголовок страницы
	 description: '{GOODS_DESCRIPTION}', // короткое описание страницы
	 image: '{GOODS_IMAGE_LARGE}', // адрес изображения
	 serviceSpecific: {
		 twitter: {
			 title: '@{NET_DOMAIN} {GOODS_NAME}', // вывод сообщения в твитере. Формат: @адрес страницы название сайта
		 }
	 }
});
</script>
<!-- END Подключение скрипта от Yandex.Share, кнопки поделиться -->

Осталось добавить стили к кнопкам. В конец файла Styles.css , в самый конец файла добавить код:
/* Стили для кнопки Поделиться */
#yandex_share {
display: block;
width: 100px;
background: gray;
line-height: 2;
padding: 0 2%;
background-color: #FFF;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.15) 50%);
background-image: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);
background-image: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);
background-image: linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);
cursor: pointer;
-moz-border-radius: 0.4em;
-webkit-border-radius: 0.4em;
border-radius: 0.4em;
}
.b-share-popup__yandex {
color: white;
text-align: left;
width: 100%;
display: inline-block;
padding: 0px 10px;
}
.goodsDataYandexShare {
padding: 2% 0%;
}
@media screen and (max-width: 480px) {
#yandex_share {
	 line-height: 2.5;
	 width: 120px;
	 text-align: center;
}
}
/* end Стили для кнопки Поделиться */



#51236 Изменение Дизайна Лайт

Отправлено Vaccina на 13 Март 2013 - 01:50

Попробуйте добавить в ваш файл стилей main.css

.logo {
	height: 170px !important;
	left: 0;
	position: absolute;
	top: 0;
	width: 400px !important;
	z-index: 2;
}
.logo a {
	display: block;
	height: 100%;
	width: 100%;
}
.valignTop {
	padding-top: 20px !important;
}
.contentTbodyCatalog {
	padding-top: 20px !important;
}
.contentTableHeadNavigation {
	padding-top: 110px !important;
}
.Contakti {
	left: 650px !important;
	margin-right: 0 !important;
	position: absolute !important;
	top: 35px !important;
}
.contentTableHeadCart {
	z-index: 2;
}



#49803 Изменение Дизайна Лайт

Отправлено miyako на 06 Март 2013 - 14:52

Просмотр сообщенияtega4 (06 Март 2013 - 14:05) писал:

на данный момент я хочу убрать это:

Пришлите пожалуйста ваш код шаблона Товары в формате doc


#49065 Изменение Дизайна Лайт

Отправлено miyako на 04 Март 2013 - 07:46

Просмотр сообщенияtega4 (03 Март 2013 - 19:52) писал:

Доброго Вам!
У меня снова несколько вопросов по структуризации темы Лайт.


По скольку с картинкой переводящей на главную страницу я уже разобралась сама, у меня возникли следующие вопросы:

1. Как мне вывести на главную страницу список категорий картинками?
2. И раскрасить левое меню, которое с категориями?
3. Необходимо поднять наверх главное меню и также его раскрасить.

1. Если вы не удаляли код в HTML о новинках, хитах и товарах на главной, тогда вам нужно добавить соответствующий товар в эти категории и они отобразятся на главной. (смотрите скриншот)

2. Что именно вы хотите сделать с левым меню?
Приложите пожалуйста скриншот или объясните подробнее.

3. Как вы хотите изменить меню? Опишите более подробнее или прикрепите скриншоты

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

  • товары на главной.png



#49305 Изменение Дизайна Лайт

Отправлено Koderhan на 04 Март 2013 - 20:14

В файле "HTML".
Найти код:
<!-- Контакты магазина -->
			<table>
Заменить:
<!-- Контакты магазина -->
			<table class="mytable">
В файл "main.csstemplate".
Добавить код:
.mytable {
	border: 1px solid;
	margin-top: -70px;
	margin-bottom: 20px;
	margin-left: 50px;
}



#49466 Изменение Дизайна Лайт

Отправлено Koderhan на 05 Март 2013 - 13:29

Просмотр сообщенияtega4 (05 Март 2013 - 13:17) писал:

Подскажите как мне добавить кнопку купить, пример на скрине.
И как мне заменить стиль самих кнопочек на странице товара, чтобы они были синенькие, а не серые?

http://forum.storela...аров/#entry1008

http://forum.storela...тре-в-каталоге/

http://forum.storela...начение-кнопки/


#49526 Изменение Дизайна Лайт

Отправлено Koderhan на 05 Март 2013 - 16:26

Просмотр сообщенияtega4 (05 Март 2013 - 14:39) писал:

спасибо с первым разобралась, а вот по поводу второго Вы меня не правильно поняли...
на скрине кнопка которую надо изменить.
В файле "main.css".
Найти код:
.goodsDataFormSubmitButton		  {vertical-align:middle;text-align:right;white-space:nowrap;padding:1em 1em 1em 0;}
Заменить:
.goodsDataFormSubmitButton {
vertical-align:middle;
text-align:right;
white-space:nowrap;
}
Добавить код:
.goodsDataFormSubmitButton input {
   
color:#ffffff;background-color:#24505a;
background-image: -moz-linear-gradient(left, #24505a 0%, #4a7f8b 30%, #87b8c3 50%,#24505a 95%);
	background-image: -webkit-linear-gradient(left, #24505a 0%, #4a7f8b 30%, #87b8c3 50%,#24505a 95%);
	background-image: -o-linear-gradient(left, #24505a 0%, #4a7f8b 30%, #87b8c3 50%,#24505a 95%);
	background-image: -ms-linear-gradient(left, #24505a 0%, #4a7f8b 30%, #87b8c3 50%,#24505a 95%);
	background-image: linear-gradient(left, #24505a 0%, #4a7f8b 30%, #87b8c3 50%,#24505a 95%);
	font-weight:normal;
	padding:10px;
	border: 5px solid #24505a;
	border-radius:15px 15px 15px 15px;
	-moz-border-radius:15px 15px 15px 15px;
	-khtml-border-radius:15px 15px 15px 15px;
}
.goodsDataFormSubmitButton input:hover {
	font-weight: bold;
}