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


Изменения На Сайте

Автор oestepanov, 28 февр. 2016 11:49

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

#1 oestepanov

oestepanov

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

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

Отправлено 28 Февраль 2016 - 11:49

Доброго времени суток!
Аккаунт SL-377885
Все желаемые изменения предоставил на скриншотах.
Вся суть сводится к тому, чтобы уйти от розового цвета везде. Поменять его на красный (такого плана #B22222). Кое где поменять на цвет из шапки.
Так же добавить каталог на главную страницу и изменить подвал.

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

  • 1.JPG
  • 2.JPG
  • 3.JPG
  • 4.JPG
  • 5.JPG

#2 RedHead

RedHead

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

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

Отправлено 28 Февраль 2016 - 14:01

Просмотр сообщенияoestepanov (28 Февраль 2016 - 11:49) писал:

Доброго времени суток!
Аккаунт SL-377885
Все желаемые изменения предоставил на скриншотах.
Вся суть сводится к тому, чтобы уйти от розового цвета везде. Поменять его на красный (такого плана #B22222). Кое где поменять на цвет из шапки.
Так же добавить каталог на главную страницу и изменить подвал.

Здравствуйте.

Действия производим в шаблоне main.css.

1) Строку:
.accordion li.active a.selected{color:#ff1c72;background-color:rgba(0,0,0, 0.03);}
замените на:
.accordion li.active a.selected{color: #B22222;background-color:rgba(0,0,0, 0.03);}

2) строки:
.accordion li a:hover{color:#ff1c72;background-color:rgba(0,0,0, 0.03);}
em.open-close{  position: absolute;right: 3px;top: 4px;cursor: pointer;background:#ff1c72;color:white;border-radius: 2px;padding: 2px 0px 2px 5px;}
на:
.accordion li a:hover{color:#B22222;background-color:rgba(0,0,0, 0.03);}
em.open-close{  position: absolute;right: 3px;top: 4px;cursor: pointer;background:#003c54;color:white;border-radius: 2px;padding: 2px 0px 2px 5px;}

3) строку:
.button_cart_product{height: 36px;line-height: 36px;border-radius:2px;border:none;background-color: #ff1c72;text-align:center;color: #ffffff;display:inline-block;width:120px;cursor:pointer;transition:all 0.35s ease;-o-transition:all 0.35s ease;-ms-transition:all 0.35s ease;-webkit-transition:all 0.35s ease;}
на:
.button_cart_product{height: 36px;line-height: 36px;border-radius:2px;border:none;background-color: #B22222;text-align:center;color: #ffffff;display:inline-block;width:120px;cursor:pointer;transition:all 0.35s ease;-o-transition:all 0.35s ease;-ms-transition:all 0.35s ease;-webkit-transition:all 0.35s ease;}

4) строку
div#tabs a.active,div#tabs a:hover{background-color: #f5fafc;color: #d52462;}
на:
div#tabs a.active,div#tabs a:hover{background-color: #f5fafc;color:  #B22222;}

5) строку
.mainbutton.more{background:#ff1c72;color:white;}
на:
.mainbutton.more{background:#14a395;color:white;}

6) строку
.hoverprod .name a:hover{color:#ff1c72;}
на:
.hoverprod .name a:hover{color: #B22222;}

7) строку
a:hover{color:#ff1c72;}
на
a:hover{color:#B22222;}

8) строку
.hoverprod:hover .name a{color:#ff1c72;}
на:
.hoverprod:hover .name a{color:#B22222;}

9) строку
.banner span{width:40px;height:40px;display:inline-block;border-radius:2px;background:#ff1c72;color:white;font-size:40px;}
на:
.banner span{width:40px;height:40px;display:inline-block;border-radius:2px;background:#14a395;color:white;font-size:40px;}

10) Подвал. В шаблоне html после строки:
<div class="col">
вставьте:
<div id="logo">
		  <a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png?design=comfort" title="" alt=""></a>
		</div>
Возможно, придется для подвала загрузить новый, более яркий логотип, тогда просто в этом коде замените название изображения на новое.

11) Чтобы изменить размер виджета, необходимо сгенерировать его заново, указав нужную высоту. И заменить код скрипта в шаблоне html.

12) Не совсем понятно по поводу каталога рядом со слайдером. Слайдер отображается только на главной, правильно ли я Вас понимаю, что каталог, который мы расположим слева от него, тоже будет виден только на главной?

#3 oestepanov

oestepanov

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

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

Отправлено 28 Февраль 2016 - 15:43

Спасибо!
Еще остались розовые шильдики (см.скриншот). Как их поменять на #B22222?

Так же не изменяется логотип в подвале...Залил новый файл logo2.png, в шаблоне htlm переименовал. Кеш почистил, но ничего не поменялось.

По п.12: в данный момент каталог товаров не отображается на главной странице. Его нужно добавить туда, сделав слайды поуже. Больше ничего не меняем

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

  • 7.JPG

#4 RedHead

RedHead

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

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

Отправлено 28 Февраль 2016 - 17:28

Просмотр сообщенияoestepanov (28 Февраль 2016 - 15:43) писал:

Спасибо!
Еще остались розовые шильдики (см.скриншот). Как их поменять на #B22222?

Так же не изменяется логотип в подвале...Залил новый файл logo2.png, в шаблоне htlm переименовал. Кеш почистил, но ничего не поменялось.

По п.12: в данный момент каталог товаров не отображается на главной странице. Его нужно добавить туда, сделав слайды поуже. Больше ничего не меняем

1) В шаблоне main.css замените строки:
.sticker.new {background-color: #3ec2df;color: #ffffff;opacity:0.8;}
.sticker.hit{background-color: #ff1c72;color: #ffffff;opacity:0.8;}
на:
.sticker.new {background-color: #B22222;color: #ffffff;opacity:0.8;}
.sticker.hit{background-color: #B22222;color: #ffffff;opacity:0.8;}

2) Вы создали новый, но такой же светлый логотип. Он обновился, в коде все верно. Но на светлом фоне его просто не видно.

3) Создайте бэкап шаблона, тк я не уверена, что поняла вас правильно. В шаблоне html замените блок кода:
<!-- Главная страница -->
	 {% IF index_page %}
		 <div id="module_area">
		 <div id="flexslideshow" class="flexslider">
			 <ul class="slides">
			 <li>
				 <div class="bigPic" style="width: 1920px; height: 550px; background:url({ASSETS_IMAGES_PATH}slide1.png?design=comfort) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}slide1.png?design=comfort" alt="Slide 1" class="slide_img">
			 </li>
			 <li>
				 <div class="bigPic" style="width: 1920px; height: 550px; background:url({ASSETS_IMAGES_PATH}slide2.png?design=comfort) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}slide2.png?design=comfort" alt="Slide 2" class="slide_img">
			 </li>
			 <li>
				 <div class="bigPic" style="width: 1920px; height: 550px; background:url({ASSETS_IMAGES_PATH}slide3.png?design=comfort) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}slide3.png?design=comfort" alt="Slide 3" class="slide_img">
			 </li>
			 </ul>
		 </div>
		 </div>
	 {% ENDIF %}
	 <!-- /Главная страница -->
на:
<!-- Главная страница -->
	 {% IF index_page %}
		 <div id="module_area">
			 <div class="catalog-index">
		 {%IFNOT catalog_full_empty%}
				 <div class="catwrp">
					 <div class="catalogheader"><a href="{CATALOG_URL}">Каталог</a></div>
					 <div class="togglecat">
					 <div class="accordionwrp">
						 {%FOR catalog_full%}
						 {% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
						 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="lvl-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
							 <a href="{catalog_full.URL}" class="accAnchor {% IF catalog_full.CURRENT %}selected{% ENDIF %}">{catalog_full.NAME}</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%}
					 </div>
					 </div>
				 </div>
				 {%ENDIF%}
		 </div>
		 <div id="flexslideshow" class="flexslider">
			 <ul class="slides">
			 <li>
				 <div class="bigPic" style="width: 1920px; height: 550px; background:url({ASSETS_IMAGES_PATH}slide1.png?design=comfort) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}slide1.png?design=comfort" alt="Slide 1" class="slide_img">
			 </li>
			 <li>
				 <div class="bigPic" style="width: 1920px; height: 550px; background:url({ASSETS_IMAGES_PATH}slide2.png?design=comfort) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}slide2.png?design=comfort" alt="Slide 2" class="slide_img">
			 </li>
			 <li>
				 <div class="bigPic" style="width: 1920px; height: 550px; background:url({ASSETS_IMAGES_PATH}slide3.png?design=comfort) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}slide3.png?design=comfort" alt="Slide 3" class="slide_img">
			 </li>
			 </ul>
		 </div>
		 </div>
	 {% ENDIF %}
	 <!-- /Главная страница -->

Затем в конец main.css добавьте:

.catalog-index {width:19%;display: inline-block;vertical-align: top;float: left;margin-left:10px;}
#flexslideshow {width:80%;display: inline-block;vertical-align: top;float: right;}

в этом же шаблоне строку:
.banner{display:inline-block;width:33%;vertical-align:top;}
замените на:
.banner{display:inline-block;width:33%;vertical-align:top; margin-top: 20px;}

Результат:

1.jpg

#5 oestepanov

oestepanov

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

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

Отправлено 29 Февраль 2016 - 07:13

Доброго времени суток!
Вы все правильно поняли! Спасибо

1 )Теперь момент по мобильной версии:
Логотип и сверху и снизу почему-то смещен вправо (см скриншот). Как его поставить на место, без ущерба для полной версии?

2) Как удалить выделенное? (см. скриншот №3)

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

  • 2.png
  • 1.png
  • 3.JPG

#6 Danil

Danil

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

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

Отправлено 29 Февраль 2016 - 09:41

Просмотр сообщенияoestepanov (29 Февраль 2016 - 07:13) писал:

Доброго времени суток!
Вы все правильно поняли! Спасибо

1 )Теперь момент по мобильной версии:
Логотип и сверху и снизу почему-то смещен вправо (см скриншот). Как его поставить на место, без ущерба для полной версии?

2) Как удалить выделенное? (см. скриншот №3)
Здравствуйте.
1) В main.css найдите код 
@media only screen and (min-width:320px) and (max-width:757px){
и замените на 

@media only screen and (min-width:320px) and (max-width:757px){
div#logo img {
	max-width: 100%;
}
2) В конец main.css добавьте 
.mainwidth.forbanners {
	display: none;
}

#7 oestepanov

oestepanov

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

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

Отправлено 29 Февраль 2016 - 11:57

Здравствуйте! Спасибо!
Еще нужны доработки=)
1) В каталоге категория сливается с подкатегорией. Нужно сделать категории жирным шрифтом
2) В мобильной версии нужно вынести каталог поверх "меню"

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

  • 1.PNG
  • 2.png

#8 Danil

Danil

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

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

Отправлено 29 Февраль 2016 - 13:11

Просмотр сообщенияoestepanov (29 Февраль 2016 - 11:57) писал:

Здравствуйте! Спасибо!
Еще нужны доработки=)
1) В каталоге категория сливается с подкатегорией. Нужно сделать категории жирным шрифтом
2) В мобильной версии нужно вынести каталог поверх "меню"
1) В конец main.css добавьте 
.accordion li ul li a {
	font-weight: normal;
}
.accordion li a {
	font-weight: bold;
}
2) Изменения Вам произвели, проверьте.

#9 oestepanov

oestepanov

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

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

Отправлено 29 Февраль 2016 - 13:25

Просмотр сообщенияDanil (29 Февраль 2016 - 13:11) писал:

1) В конец main.css добавьте
.accordion li ul li a {
font-weight: normal;
}
.accordion li a {
font-weight: bold;
}
2) Изменения Вам произвели, проверьте.

По п.2 спасибо, все ок!
По п.1: шрифт отличается, но теперь все подкатегории постоянно открыты и назад никак не делаются

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

  • 3.PNG

#10 Danil

Danil

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

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

Отправлено 29 Февраль 2016 - 14:48

Просмотр сообщенияoestepanov (29 Февраль 2016 - 13:25) писал:

По п.2 спасибо, все ок!
По п.1: шрифт отличается, но теперь все подкатегории постоянно открыты и назад никак не делаются
Ошибку исправили, проверьте.

#11 oestepanov

oestepanov

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

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

Отправлено 01 Март 2016 - 09:37

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

#12 Юля123

Юля123

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

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

Отправлено 01 Март 2016 - 10:26

Просмотр сообщенияoestepanov (01 Март 2016 - 09:37) писал:

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

Здравствуйте,

Цитата

2) В мобильной версии нужно вынести каталог поверх "меню"


Цитата

Так же поменять местами меню и каталог

У Вас сейчас в мобильной версии каталог находится над меню. Уточните, Вам нужно поменять местами?

Каталог у Вас по умолчанию так же свернут, и открывается только когда выбран определенный пункт. Вам это нужно исправить? чтобы работало открытие только по нажатию на стрелку?

#13 oestepanov

oestepanov

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

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

Отправлено 01 Март 2016 - 10:41

Здравствуйте!
Прошу прощения! Да, нужно поменять местами.
По второму вопросу: я хочу, чтобы это выглядело точно так же как и меню. Т.е. изначально все свернуто. Затем при нажатии на "каталог" он показывает категории...дизайн кнопки каталог нужно сделать, точно таким же как и у меню

#14 Юля123

Юля123

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

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

Отправлено 01 Март 2016 - 11:29

Просмотр сообщенияoestepanov (01 Март 2016 - 10:41) писал:

Здравствуйте!
Прошу прощения! Да, нужно поменять местами.
По второму вопросу: я хочу, чтобы это выглядело точно так же как и меню. Т.е. изначально все свернуто. Затем при нажатии на "каталог" он показывает категории...дизайн кнопки каталог нужно сделать, точно таким же как и у меню

1) В шаблоне HTML код:

		<div class="header-bottom">
		   {%IFNOT catalog_full_empty%}
					<div class="catwrp catmenu">
					  <div class="catalogheader"><a href="{CATALOG_URL}">Каталог</a></div>
					   <div class="togglecat">
						<div class="accordionwrp">
						  {%FOR catalog_full%}
							{% IF catalog_full.FIRST %}<ul class="accordion accordion1">{% ENDIF %}
							<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="lvl-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
							  <a href="{catalog_full.URL}" class="accAnchor {% IF catalog_full.CURRENT %}selected{% ENDIF %}">{catalog_full.NAME}</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%}
						</div>
					  </div>
					</div>
				 {%ENDIF%}
		  <div class="mainwidth">
				<div class="lrmenubutton">Меню</div>
				<ul class="menuWrap">				
				 {% FOR menu %}
				   {% FOR header %}
					 {% FOR links %}
							   <li class="{% IF menu.header.links.SELECTED %}selected{%ENDIF%}"><a class="menuparent {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" href="{menu.header.links.URL}"  {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					 {% ENDFOR %}
				   {% ENDFOR %}
				 {% ENDFOR %}							
				</ul>
		  </div>		 
		</div>

замените на код:

<div class="header-bottom">
		  <div class="mainwidth">
				<div class="lrmenubutton">Меню</div>
				<ul class="menuWrap">				 
				 {% FOR menu %}
				   {% FOR header %}
					 {% FOR links %}
							   <li class="{% IF menu.header.links.SELECTED %}selected{%ENDIF%}"><a class="menuparent {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" href="{menu.header.links.URL}"  {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					 {% ENDFOR %}
				   {% ENDFOR %}
				 {% ENDFOR %}							 
				</ul>
		  </div>   
		   {%IFNOT catalog_full_empty%}
					<div class="catwrp catmenu">
					  <div class="catalogheader"><a href="{CATALOG_URL}">Каталог</a></div>
					   <div class="togglecat">
						<div class="accordionwrp">
						  {%FOR catalog_full%}
							{% IF catalog_full.FIRST %}<ul class="accordion accordion1">{% ENDIF %}
							<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="lvl-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
							  <a href="{catalog_full.URL}" class="accAnchor {% IF catalog_full.CURRENT %}selected{% ENDIF %}">{catalog_full.NAME}</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%}
						</div>
					  </div>
					</div>
				 {%ENDIF%}
		</div>

2) В конце main.css добавьте код:

.togglecat{display:none;}

#15 oestepanov

oestepanov

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

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

Отправлено 01 Март 2016 - 12:37

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

Так же теперь в полной версии сайта каталог всегда свернут...Нельзя сделать так, чтобы с телефона каталог был свернут (как сейчас), а если заходят с пк, то развернут?


Вот так должно выглядеть, когда захожу с мобильника:
Изображение

Вот так, когда с пк:
Изображение


P.S. Почему-то не могу прикрепить картинку сегодня

#16 Юля123

Юля123

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

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

Отправлено 01 Март 2016 - 12:54

Просмотр сообщенияoestepanov (01 Март 2016 - 12:37) писал:

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

Так же теперь в полной версии сайта каталог всегда свернут...Нельзя сделать так, чтобы с телефона каталог был свернут (как сейчас), а если заходят с пк, то развернут?


Вот так должно выглядеть, когда захожу с мобильника:
Изображение

Вот так, когда с пк:
Изображение


P.S. Почему-то не могу прикрепить картинку сегодня


Чтобы каталог товаров был свернуть только в мобильной версии, код:

.togglecat{display:none;}

добавьте после кода:

@media only screen and (min-width:320px) and (max-width:510px){

а в конце main.css удалите.


далее после кода:

@media only screen and (max-width:990px){

добавьте код:

.catwrp.catmenu {
	background: #14a395;
	min-height: 50px;
	overflow: hidden;
	padding: 10px 29px;
}
.catalogheader {
	border-radius: 7px;
}

#17 oestepanov

oestepanov

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

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

Отправлено 01 Март 2016 - 13:04

Спасибо! Именно то, что нужно...
Еще мелкие штрихи (см.скриншот): размер и шрифт не совпадает с меню
Изображение

#18 Юля123

Юля123

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

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

Отправлено 01 Март 2016 - 13:30

Просмотр сообщенияoestepanov (01 Март 2016 - 13:04) писал:

Спасибо! Именно то, что нужно...
Еще мелкие штрихи (см.скриншот): размер и шрифт не совпадает с меню
Изображение

изменения Вам произвела, посмотрите, пожалуйста.

#19 Наталья11111

Наталья11111

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

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

Отправлено 28 Июль 2016 - 07:36

День добрый!

Как убрать Ваш  виджет VK из подвала и оставить свой?

#20 Vaccina

Vaccina

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

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

Отправлено 28 Июль 2016 - 07:52

В шаблоне HTML найдите и удалите:
<script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>
		<!-- VK Widget -->
		<div id="vk_groups"></div>
		<script type="text/javascript">
		VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 20003922);
		</script>

вместо него вставьте свой сгенерированный код виджета
Обратно в Изменение общей стилистики


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

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

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