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


Изменения Стиля Как В Теме "туризм"

Автор tyz43, 01 авг. 2017 10:24

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

#1 tyz43

tyz43

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

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

Отправлено 01 Август 2017 - 10:24

Доброго времени суток. Ребят я знаю вы волшебники и все все можете!) поэтому и такая просьба
1) как бы сделать так чтобы каталог преобразился и был не просто скучными надписими а прикольными квадратами с картинками как в теме туризм (только в туризме 4 квадратиков а мне нужно чтобы их было 8 шт) (картинка 1)
2) и чтобы каталок (то есть щас каталок с боку а нужно чтобы он с верху был) также дублировался в верхней шапки  (картинка 2)
мой Аккаунт SL-336513

Огромное спасибо!

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

  • 2.jpg
  • 1.jpg

#2 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 01 Август 2017 - 15:30

Просмотр сообщенияtyz43 (01 Август 2017 - 10:24) писал:

Доброго времени суток. Ребят я знаю вы волшебники и все все можете!) поэтому и такая просьба
1) как бы сделать так чтобы каталог преобразился и был не просто скучными надписими а прикольными квадратами с картинками как в теме туризм (только в туризме 4 квадратиков а мне нужно чтобы их было 8 шт) (картинка 1)
2) и чтобы каталок (то есть щас каталок с боку а нужно чтобы он с верху был) также дублировался в верхней шапки  (картинка 2)
мой Аккаунт SL-336513

Огромное спасибо!
Здравствуйте.
1. Каталог будет также на главной странице под шапкой?
2. Каталог установил в шаблоне HTML
перед
</header><!-- .header-->
<!-- Выдвигающеся меню -->
код
	 <div id="custommenu" class="middleCenter">
	 <div class="container">
		 <ul class="mainnav" itemscope itemtype="http://schema.org/SiteNavigationElement">
		 {% IFNOT catalog_full_empty %}
			 {% FOR catalog_full %}
			 {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide{% ENDIF %}">{% ENDIF %}{% ENDIF %}
				 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_VISIBLE_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
				 <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}" itemprop="url"><span>{catalog_full.NAME}</span></a>
				 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
			 {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
			 {% ENDFOR %}
		 {% ENDIF %}
		 </ul>
	 </div>
	 </div>

В main.css в самом конце код:
#custommenu {display:none;}
@media screen and (min-width: 981px) {
/** Каталог **/
#custommenu {display: block;width: 100%;border: 0;padding: 9px 10px 8px 10px;overflow: inherit;}
#custommenu > .container {width: auto;padding: 0;float:none;clear:both;margin:auto; overflow: inherit;}
#custommenu .mainnav {list-style: none;margin: 0;padding: 0;height: 34px;overflow: hidden;/* height: auto; */}
#custommenu .mainnav > li {display: inline-block;padding: 0;border-radius: 5px;transition: color 0.1s,background-color .1s;}
#custommenu .mainnav > li:hover {background-color: transparent;}
#custommenu .mainnav > li:hover > a {color: #16a085;}
#custommenu .mainnav > li > a {display: block;position: relative;text-transform: uppercase;padding: 9px 20px 9px 15px;font-size: 14px;font-family: 'PT Sans Narrow', sans-serif;font-weight: 400;letter-spacing: 1px;transition: color 0.1s,background-color .1s;}
#custommenu .mainnav > li > a:before {content: "";width: 10px;height: 10px;border: 8px solid transparent;border-bottom-color: #fff;position: absolute;left: 50%;margin-left: -10px;top: 100%;margin-top: -6px;visibility: hidden;opacity: 0;filter: alpha(opacity=0);}
#custommenu .mainnav > li.parent:hover > a:before {visibility: visible;opacity: 1;filter: alpha(opacity=100);}
#custommenu .mainnav > li.parent > a:after {content: '\f107';position: absolute;font-family: "FontAwesome";width: 10px;height: 10px;top: 50%;right: 5px;left: auto;margin-top: -7px;}
#custommenu .mainnav li .sub {display: none;position: absolute;top: auto;width: auto;min-width: 160px;max-width: 100%;z-index: 10000;margin-top: 9px;padding: 5px 0;background-color: #fff;list-style: none;box-shadow: 0 2px 10px -2px rgba(0,0,0,.3);border: 0;border-radius: 0;}
#custommenu .mainnav li:hover > .sub {display: block;}
#custommenu .mainnav li .sub {max-width: 100%;width: auto;padding: 0;}
#custommenu .mainnav li .sub:before {content: "";display: block;position: absolute;height: 20px;top: -20px;width: 100%;height: 100%;left: 0;z-index: -1;}
#custommenu .mainnav li .sub ul {padding-left: 0;margin-bottom: 0;list-style: none;}
#custommenu .mainnav li .sub li a {display: block;margin: 0;font-size: 13px;font-family: 'PT Sans Narrow', sans-serif;padding: 20px 30px 20px 20px;text-transform: uppercase;}
#custommenu .mainnav li .sub li:hover > a {background-color: #f4f4f4;}
#custommenu .mainnav li .sub li.active > a{color: #019934;}
#custommenu .mainnav li.active > a {color: #fff;}
#custommenu .mainnav li .sub li.level1.parent > a:before {content: '\f105';font: normal normal 16px/20px "FontAwesome";position: absolute;width: 15px;height: 15px;right: 10px;margin-top: -4px;}
#custommenu .mainnav li .sub .sub {display: none;position: absolute;background-color: #fff;box-shadow: 0 2px 10px -2px rgba(0,0,0,.3);right: auto;left: 100%;top: 0;padding: 5px 0;}
#custommenu .mainnav li .sub li.parent:hover .sub {display: block;}
#custommenu .mainnav .hide {display: none !important;}
#custommenu .mainnav li .sub li{position:relative;}
}

#3 tyz43

tyz43

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

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

Отправлено 02 Август 2017 - 09:48

Доброго времени суток!
что то нечего не получается...((((
Давайте ещё:
1) хочется чтоб каталог с верху был также как в теме "туризма" (рисунок 1)
и когда каталок перенесется на верх то с боку убрать его чтобы больше место под красивые "квадратики" было
2) как бы сделать так чтобы каталог преобразился и был не просто скучными надписими а прикольными квадратами с картинками как в теме туризм (только в туризме 4 квадратиков а мне нужно чтобы их было 8 шт) (этот вопрос так и не получилось нечего)

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

  • 1.jpg

#4 tyz43

tyz43

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

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

Отправлено 10 Август 2017 - 10:52

все почти прекрасно но:
1) Местами переставить слайдер на верх а квадраты под слайдером (рис 1), между слайдером и квадратами одну строку оставить чтобы написать что то типа каталог или ещё что то в этом роде пока не придумал, и слайдер во всю длину страници.
2) Поиск перенести на верх только  но чтоб он аккуратно выглядел не большой а примерно такой же как и весь текст  с верху, номер телефона и график работы в подвал опустить(рис 2)
Огромное спасибо!!!!

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

  • 2.jpg
  • 1.jpg

#5 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 12 Август 2017 - 18:04

Просмотр сообщенияtyz43 (10 Август 2017 - 10:52) писал:

все почти прекрасно но:
1) Местами переставить слайдер на верх а квадраты под слайдером (рис 1), между слайдером и квадратами одну строку оставить чтобы написать что то типа каталог или ещё что то в этом роде пока не придумал, и слайдер во всю длину страници.
2) Поиск перенести на верх только  но чтоб он аккуратно выглядел не большой а примерно такой же как и весь текст  с верху, номер телефона и график работы в подвал опустить(рис 2)
Огромное спасибо!!!!
Здравствуйте.
Изменения на тестовом магазине подготовил, чтобы произвести их и подкорректировать на Вашем магазине, необходимо пополнить баланс магазина, т.к он заблокирован.

#6 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 14 Август 2017 - 11:26

Просмотр сообщенияMr.Nito (12 Август 2017 - 18:04) писал:

Здравствуйте.
Изменения на тестовом магазине подготовил, чтобы произвести их и подкорректировать на Вашем магазине, необходимо пополнить баланс магазина, т.к он заблокирован.
Перенёс Слайдер,Категории на сайт.
Бэкап до изменений  14.08.2017 10:30:01
После 14.08.2017 11:25:23
Чтобы отобразить категории замените в шаблоне HTML
	<!--Заголовок-->
	<h2 class="banners-title">Заголовок</h2>
	<style>
	  .banners-title {
		font-size: 30px;
		text-align:center;
	  }
	  #banners,.banners-title {display:none;}
на

	<!--Заголовок-->
	<h2 class="banners-title">Заголовок</h2>
	<style>
	  .banners-title {
		font-size: 30px;
		text-align:center;
	  }
Для установки картинок замените banner1.jpg, banner2.jpg, banner3.jpg

#7 tyz43

tyz43

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

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

Отправлено 16 Август 2017 - 12:16

Доброго времени суток. Помогите немного исправить ошибки в дизайне!
1. почему то все квадраты немного играют по размером, можно ли сделать их размеры фиксироваными чтобы все было ровненько как по линеечки (рис 1) и ещё нижнии квадраты слились между ними нету как у всех небольшого белого промежутка (рис 1 красной линией проведено)
2. на самых маленьких квадратах мальнькая белая рамка внутри можно ли её убрать!
3. на самых маленьких квадратах при наведении на них картинка не затемняется хотя на остальных все затемняется и все хорошо работет
4. можно ли чтобы переход по сслыки происходил при нажатии на любую область картинки
Большое спасибо!!!

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

  • 1.jpg

#8 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 16 Август 2017 - 15:15

Просмотр сообщенияtyz43 (16 Август 2017 - 12:16) писал:

Доброго времени суток. Помогите немного исправить ошибки в дизайне!
1. почему то все квадраты немного играют по размером, можно ли сделать их размеры фиксироваными чтобы все было ровненько как по линеечки (рис 1) и ещё нижнии квадраты слились между ними нету как у всех небольшого белого промежутка (рис 1 красной линией проведено)
2. на самых маленьких квадратах мальнькая белая рамка внутри можно ли её убрать!
3. на самых маленьких квадратах при наведении на них картинка не затемняется хотя на остальных все затемняется и все хорошо работет
4. можно ли чтобы переход по сслыки происходил при нажатии на любую область картинки
Большое спасибо!!!

Здравствуйте.
В шаблоне main.css найдите код:
#banners .banner-image {position: relative;background-size: cover;background-repeat: no-repeat;}
#banners .banner-image:not(.bg):before {position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;background: #333;opacity: 0;filter: alpha(opacity=0);-moz-transition: opacity 0.55s ease-out;-o-transition: opacity 0.55s ease-out;-webkit-transition: opacity 0.55s ease-out;transition: opacity 0.55s ease-out;}

Замените на:
#banners .banner-image {position: relative;background-size: cover;background-repeat: no-repeat;max-height: 738px;min-height: 276px;}
#banners .banner-image:not(.bg):before {position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;background: #333;opacity: 0;filter: alpha(opacity=0);-moz-transition: opacity 0.55s ease-out;-o-transition: opacity 0.55s ease-out;-webkit-transition: opacity 0.55s ease-out;transition: opacity 0.55s ease-out;}

Найдите код:
#banners .banner-image.bg .content.small {padding: 55px 0;outline: 3px solid #fff;outline-offset: -20px;}

Замените на:
#banners .banner-image.bg .content.small {padding: 55px 0;}

Для ссылок в шаблоне HTML найдите код:
	<!-- Баннеры -->
	<div id="banners">
	  <div class="preloader"><span class="content-loading"></span></div>
	  <div class="banner-left">
		<div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner1.jpg?design=tourism);">
		  <div class="content big">
			<h3>СПУТНИКОВОЕ ОБОРОДУВАНИЕ</h3>
			<h4>КОМПЛЕКТЫ,АКСЕСУАРЫ</h4>
			<a href="http://xn--56-kmced.xn--p1ai/catalog/Sputnikovoe-oborudovanie" class="button">ПРОСМОТР</a>
		  </div>
		</div>
	  </div>
	  <div class="banner-right">
		<div class="banner-left">
		  <div class="banner-top">
			<div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner2.jpg?design=tourism);background-position: center center;">
			  <div class="content small">
				<h3>ПУЛЬТЫ</h3>
				<h4></h4>
			   <a  href="http://xn--56-kmced.xn--p1ai/catalog/Pulty-distancionnogo-upravleniya" class="button">ПРОСМОТР</a>
			  </div>
			</div>
		  </div>
		  <div class="banner-bottom">
			<div class="banner-image bg" style="background-image: url({ASSETS_IMAGES_PATH}banner123_1.jpg?design=tourism);background-position: center center;">
			  <div class="content small">
				<h3>телевидение</h3>
				<h4>ЗА 2.000 РУБЛЕЙ!!!</h4>
				<a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
			  </div>
			</div>
		  </div>
		</div>
		<div class="banner-right">
		  <div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner3.jpg?design=tourism);">
			<div class="content big">
			  <h3>УСИЛЕНИЯ</h3>
			  <h3>2G 3G 4G</h3>
			  <a href="http://xn--56-kmced.xn--p1ai/catalog/3G-4G-oborudovanie" class="button">ПРОСМОТР</a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Баннеры -->
	<div id="banners">
	  <div class="preloader"><span class="content-loading"></span></div>
	  <div class="banner-right">
		<div class="banner-left">
		  <div class="banner-bottom">
			<div class="banner-image bg" style="background-image: url({ASSETS_IMAGES_PATH}banner123.jpg?design=tourism);background-position: center center;">
			  <div class="content small">
				<h3>РЕМОНТ</h3>
			   <h4>ДАГНОСТИКА</h4>
				<h4>МОНТАЖ</h4>
				<a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
			  </div>
			</div>
		  </div>
		  <div class="banner-top">
			<div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner2.jpg?design=tourism);background-position: center center;">
			  <div class="content small">
				<h3>РАЗНОЕ</h3>
				<a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
			  </div>
			</div>
		  </div>		 
		</div>
		<div class="banner-right">
		  <div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner3_3.jpg?design=tourism);">
			<div class="content big">
			  <h3>КАБЕЛЯ</h3>
			  <h4>РАЗЕМЫ </h4>
			  <h4>ПЕРЕХОДНИКИ</h4>
			  <a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
			</div>
		  </div>
		</div>
	  </div>	 
	  <div class="banner-left">
		<div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner3_1.jpg?design=tourism);">
		  <div class="content big">
			<h3>ЭФИРНОЕ</h3>
			<h4>ТЕЛЕВИДЕНИЕ</h4>
			<a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
		  </div>
		</div>
	  </div>
	</div>

Замените на:
	<!-- Баннеры -->
	<div id="banners">
	  <div class="preloader"><span class="content-loading"></span></div>
	  <div class="banner-left">
		<div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner1.jpg?design=tourism);" onclick="location.href='/catalog/Sputnikovoe-oborudovanie';">
		  <div class="content big">
			<h3>СПУТНИКОВОЕ ОБОРОДУВАНИЕ</h3>
			<h4>КОМПЛЕКТЫ,АКСЕСУАРЫ</h4>
			<a href="http://xn--56-kmced.xn--p1ai/catalog/Sputnikovoe-oborudovanie" class="button">ПРОСМОТР</a>
		  </div>
		</div>
	  </div>
	  <div class="banner-right">
		<div class="banner-left">
		  <div class="banner-top">
			<div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner2.jpg?design=tourism);background-position: center center;" onclick="location.href='/catalog/Sputnikovoe-oborudovanie';">
			  <div class="content small">
				<h3>ПУЛЬТЫ</h3>
				<h4></h4>
			   <a href="http://xn--56-kmced.xn--p1ai/catalog/Pulty-distancionnogo-upravleniya" class="button">ПРОСМОТР</a>
			  </div>
			</div>
		  </div>
		  <div class="banner-bottom">
			<div class="banner-image bg" style="background-image: url({ASSETS_IMAGES_PATH}banner123_1.jpg?design=tourism);background-position: center center;" onclick="location.href='{CATALOG_URL}';">
			  <div class="content small">
				<h3>телевидение</h3>
				<h4>ЗА 2.000 РУБЛЕЙ!!!</h4>
				<a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
			  </div>
			</div>
		  </div>
		</div>
		<div class="banner-right">
		  <div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner3.jpg?design=tourism);" onclick="location.href='/catalog/3G-4G-oborudovanie';">
			<div class="content big">
			  <h3>УСИЛЕНИЯ</h3>
			  <h3>2G 3G 4G</h3>
			  <a href="http://xn--56-kmced.xn--p1ai/catalog/3G-4G-oborudovanie" class="button">ПРОСМОТР</a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Баннеры -->
	<div id="banners">
	  <div class="preloader"><span class="content-loading"></span></div>
	  <div class="banner-right">
		<div class="banner-left">
		  <div class="banner-bottom">
			<div class="banner-image bg" style="background-image: url({ASSETS_IMAGES_PATH}banner123.jpg?design=tourism);background-position: center center;" onclick="location.href='{CATALOG_URL}';">
			  <div class="content small">
				<h3>РЕМОНТ</h3>
			   <h4>ДАГНОСТИКА</h4>
				<h4>МОНТАЖ</h4>
				<a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
			  </div>
			</div>
		  </div>
		  <div class="banner-top">
			<div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner2.jpg?design=tourism);background-position: center center;" onclick="location.href='{CATALOG_URL}';">
			  <div class="content small">
				<h3>РАЗНОЕ</h3>
				<a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
			  </div>
			</div>
		  </div>		 
		</div>
		<div class="banner-right">
		  <div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner3_3.jpg?design=tourism);" onclick="location.href='{CATALOG_URL}';">
			<div class="content big">
			  <h3>КАБЕЛЯ</h3>
			  <h4>РАЗЕМЫ </h4>
			  <h4>ПЕРЕХОДНИКИ</h4>
			  <a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
			</div>
		  </div>
		</div>
	  </div>	 
	  <div class="banner-left">
		<div class="banner-image" style="background-image: url({ASSETS_IMAGES_PATH}banner3_1.jpg?design=tourism);" onclick="location.href='{CATALOG_URL}';">
		  <div class="content big">
			<h3>ЭФИРНОЕ</h3>
			<h4>ТЕЛЕВИДЕНИЕ</h4>
			<a href="{CATALOG_URL}" class="button">ПРОСМОТР</a>
		  </div>
		</div>
	  </div>
	</div>

Обратно в Каталог товаров


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

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

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