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


Изменение Общего Стиля


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

#1 PyJIbka

PyJIbka

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

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

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

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

#2 Vaccina

Vaccina

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

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

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

Укажите пожалуйста в своем профиле номер аккаунта вашего сайта или сообщите адрес сайта.
На счет цветовой гаммы, уточните пожалуйста, что именно вы хотите изменить в плане цвета.

#3 PyJIbka

PyJIbka

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

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

Отправлено 23 Август 2014 - 11:47

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

Укажите пожалуйста в своем профиле номер аккаунта вашего сайта или сообщите адрес сайта.
На счет цветовой гаммы, уточните пожалуйста, что именно вы хотите изменить в плане цвета.
Данные поменял, убрать черный цвет  с сайта вообще и заменить его на нужный! + заменить слайды на главной
http://e42631.storeland.ru

#4 batta

batta

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

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

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

Просмотр сообщенияPyJIbka (23 Август 2014 - 11:47) писал:

Данные поменял, убрать черный цвет  с сайта вообще и заменить его на нужный! + заменить слайды на главной
http://e42631.storeland.ru
Здравствуйте.
style.css
.nav-container {
background: #000000;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
width: 100%;
}
style.css
.logo {
margin-top: 0;
text-align: center;
width: 270px;
float: left;
display: block;
padding: 20px;
background: none repeat scroll 0 0 #000;
}
меняйте значение background на нужный для вас цвет
style.css
.promo_block {
background: #000;
top: -55px !important;
}
меняйте значение background на нужный для вас цвет
style.css
.header_bar {
position: fixed;
top: 0px;
z-index: 10000;
width: 100%;
background: #000;
display: none;
}
меняйте значение background на нужный для вас цвет
style.css
.box-heading {
padding: 6px 15px 6px 40px;
background: #000 url('http://e42631.storeland.net/box-heading.png') no-repeat left center;
color: #fff;
font-size: 17px;
line-height: 30px;
font-family: Calibri;
font-weight: lighter;
}
меняйте значение background на нужный для вас цвет
style.css
#footer h3 {
color: #FFFFFF;
font-size: 16px;
line-height: 1em;
margin-bottom: 8px;
padding: 6px 0 8px 16px;
background-color: #151515;
}
меняйте значение background-color на нужный для вас цвет
style.css
.footer_bg_color {
background-color: #262626;
font-family: Calibri;
font-size: 12px;
margin-top: 20px;
}
меняйте значение background-color на нужный для вас цвет

Добавьте нужный вам картинки в вашем бек офисе в разделе Сайт-- Редактор шаблонов -- Добавить файл-- переименуйте свои картинки в на названия "slide1, slide2, slide3, slide4" стандартные слайды или удалите или переименуйте.

#5 PyJIbka

PyJIbka

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

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

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

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

Здравствуйте.
style.css
.nav-container {
background: #000000;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
width: 100%;
}
style.css
.logo {
margin-top: 0;
text-align: center;
width: 270px;
float: left;
display: block;
padding: 20px;
background: none repeat scroll 0 0 #000;
}
меняйте значение background на нужный для вас цвет
style.css
.promo_block {
background: #000;
top: -55px !important;
}
меняйте значение background на нужный для вас цвет
style.css
.header_bar {
position: fixed;
top: 0px;
z-index: 10000;
width: 100%;
background: #000;
display: none;
}
меняйте значение background на нужный для вас цвет
style.css
.box-heading {
padding: 6px 15px 6px 40px;
background: #000 url('http://e42631.storeland.net/box-heading.png') no-repeat left center;
color: #fff;
font-size: 17px;
line-height: 30px;
font-family: Calibri;
font-weight: lighter;
}
меняйте значение background на нужный для вас цвет
style.css
#footer h3 {
color: #FFFFFF;
font-size: 16px;
line-height: 1em;
margin-bottom: 8px;
padding: 6px 0 8px 16px;
background-color: #151515;
}
меняйте значение background-color на нужный для вас цвет
style.css
.footer_bg_color {
background-color: #262626;
font-family: Calibri;
font-size: 12px;
margin-top: 20px;
}
меняйте значение background-color на нужный для вас цвет

Добавьте нужный вам картинки в вашем бек офисе в разделе Сайт-- Редактор шаблонов -- Добавить файл-- переименуйте свои картинки в на названия "slide1, slide2, slide3, slide4" стандартные слайды или удалите или переименуйте.

Спасибо!Здоровья тебе и твои близким!

#6 PyJIbka

PyJIbka

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

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

Отправлено 23 Август 2014 - 12:25

еще тупой вопрос! а как узнать значение цвета моего? например стоит
background-color: #262626;
какой индекс у моего цвета и где его брать?

#7 batta

batta

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

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

Отправлено 23 Август 2014 - 12:34

Просмотр сообщенияPyJIbka (23 Август 2014 - 12:25) писал:

еще тупой вопрос! а как узнать значение цвета моего? например стоит
background-color: #262626;
какой индекс у моего цвета и где его брать?
Можете воспользоваться http://tablecolor.camtasia.com.ua

#8 PyJIbka

PyJIbka

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

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

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

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

Можете воспользоваться http://tablecolor.camtasia.com.ua

А какое значение у прозрачного цвета? и где можно менять текст лого-меню и их стиль?)

#9 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 23 Август 2014 - 13:32

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

А какое значение у прозрачного цвета? и где можно менять текст лого-меню и их стиль?)

Пример прозрачного цвета
background-color: transparent;


#10 PyJIbka

PyJIbka

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

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

Отправлено 23 Август 2014 - 13:44

Просмотр сообщенияCastiel (23 Август 2014 - 13:32) писал:

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

#11 batta

batta

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

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

Отправлено 23 Август 2014 - 15:02

Просмотр сообщенияPyJIbka (23 Август 2014 - 13:44) писал:

Спасибо! подскажите как изменить всплывающее меню, когда опускаешься ниже пос айту, появляется логотип и поиск пос айту, как туда поставить фрагменты главного меню? (главноя, доставка, корзина и пр. ) а еще лучше оставить поиск подвинув его ливее и уменьшив и добавить меню )
как найти и чем заменить )
в style.css
.header_bar #search input[type="search"] {
width: 100%;
height: 40px;
border: none;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
измените на
.header_bar #search input[type="search"] {
width: 100%;
height: 40px;
border: none;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 445px;
}
в Style.css
.header_bar #search input[type="submit"] {
position: absolute;
right: 0;
border: solid 2px #ff0000;
height: 40px;
}
измените на
.header_bar #search input[type="submit"] {
position: absolute;
right: 0;
border: solid 2px #ff0000;
height: 40px;
display: block;
left: 425px;
}

вам нужно вставить код
  <!-- Верхний блок навигации -->
			<div class="menu_block_dropdown">
			  <div class="et_categ_box">
				<div id="et_categ_box_scroll">
				  <div class="img_link_wrapper"><a class="image-link" href="http://{NET_DOMAIN}/"></a></div>
				  {% FOR menu %}
					{% FOR header %}
					  {% FOR links %}
						 <div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div>
					  {% ENDFOR %}
					{% ENDFOR %}
				  {% ENDFOR %}
				</div> 
			  </div>
			</div>
			<!-- end Верхний блок навигации -->
перед кодом
<!-- Форма поиска -->
			<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if(jQuery(this).find('#search').val()=='Поиск по магазину...') return false;">
			  <div id="search">
			  <input type="search" name="q" id="Search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" /> 
			  <input name="search" title="Искать" type="submit" value="" /> 
			  <div class="clear"></div>
			  </div>
			</form>
			<!-- /Форма поиска -->
после этого поправим как нужно

#12 PyJIbka

PyJIbka

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

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

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

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

в style.css
.header_bar #search input[type="search"] {
width: 100%;
height: 40px;
border: none;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
измените на
.header_bar #search input[type="search"] {
width: 100%;
height: 40px;
border: none;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 445px;
}
в Style.css
.header_bar #search input[type="submit"] {
position: absolute;
right: 0;
border: solid 2px #ff0000;
height: 40px;
}
измените на
.header_bar #search input[type="submit"] {
position: absolute;
right: 0;
border: solid 2px #ff0000;
height: 40px;
display: block;
left: 425px;
}

вам нужно вставить код
<!-- Верхний блок навигации -->
		 <div class="menu_block_dropdown">
			 <div class="et_categ_box">
			 <div id="et_categ_box_scroll">
				 <div class="img_link_wrapper"><a class="image-link" href="http://{NET_DOMAIN}/"></a></div>
				 {% FOR menu %}
				 {% FOR header %}
					 {% FOR links %}
						 <div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div>
					 {% ENDFOR %}
				 {% ENDFOR %}
				 {% ENDFOR %}
			 </div>
			 </div>
		 </div>
		 <!-- end Верхний блок навигации -->
перед кодом
<!-- Форма поиска -->
		 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if(jQuery(this).find('#search').val()=='Поиск по магазину...') return false;">
			 <div id="search">
			 <input type="search" name="q" id="Search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" />
			 <input name="search" title="Искать" type="submit" value="" />
			 <div class="clear"></div>
			 </div>
		 </form>
		 <!-- /Форма поиска -->
после этого поправим как нужно

Посмотрите что вышло) надо править)

#13 batta

batta

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

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

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

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

Посмотрите что вышло) надо править)
уточните на скриншоте какие изменения нужно произвести
в style.css
.header_bar #search input[type="submit"] {
position: absolute;
right: 0;
border: solid 2px #ff0000;
height: 40px;
display: block;
left: 425px;
}
измените на
.header_bar #search input[type="submit"] {
position: absolute;
right: 0;
border: solid 2px #ff0000;
height: 40px;
display: block;
left: 860px;
top: 49px;
}


#14 PyJIbka

PyJIbka

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

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

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

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

уточните на скриншоте какие изменения нужно произвести
в style.css
.header_bar #search input[type="submit"] {
position: absolute;
right: 0;
border: solid 2px #ff0000;
height: 40px;
display: block;
left: 425px;
}
измените на
.header_bar #search input[type="submit"] {
position: absolute;
right: 0;
border: solid 2px #ff0000;
height: 40px;
display: block;
left: 860px;
top: 49px;
}

О да! то что надо!) а можно выравнять меню сверху с поиском?! например меню подвинуть правее, что бы было по центру, вместе со значком домой)

#15 batta

batta

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

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

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

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

О да! то что надо!) а можно выравнять меню сверху с поиском?! например меню подвинуть правее, что бы было по центру, вместе со значком домой)
В style.css допишите
.menu_block_dropdowna {
position: relative;
z-index: 9999;
left: 180px;
display: block;
top: 10px;
}


#16 PyJIbka

PyJIbka

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

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

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

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

В style.css допишите
.menu_block_dropdowna {
position: relative;
z-index: 9999;
left: 180px;
display: block;
top: 10px;
}
Никак не найду эту строчку через поиск(

#17 batta

batta

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

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

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

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

Никак не найду эту строчку через поиск(
Её нету, Вам её нужно вписать в style.css

#18 PyJIbka

PyJIbka

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

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

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

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

Её нету, Вам её нужно вписать в style.css
вписал, вышло так   .menu_block_dropdowna {position: relative;z-index:9999;left:180px;display: block;top: 10px;} но ничего не изменилось( вписал в самом конце

#19 batta

batta

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

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

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

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

вписал, вышло так   .menu_block_dropdowna {position: relative;z-index:9999;left:180px;display: block;top: 10px;} но ничего не изменилось( вписал в самом конце
поменяйте на
.menu_block_dropdowna {position: relative; z-index: 9999;left: 180px;display: block; top: 10px;}
у вас в коде нету пробелов

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

поменяйте на
.menu_block_dropdowna {position: relative; z-index: 9999;left: 180px;display: block; top: 10px;}
у вас в коде нету пробелов
И почистите кэш браузера ctrl+F5

#20 PyJIbka

PyJIbka

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

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

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

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

поменяйте на
.menu_block_dropdowna {position: relative; z-index: 9999;left: 180px;display: block; top: 10px;}
у вас в коде нету пробелов


И почистите кэш браузера ctrl+F5
Сделал, не помогло(




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

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