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


Переделка Общего Стиля Начиная С Шапки ...

шапка логотип каталог фон

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

#1 Gerti

Gerti

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

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

Отправлено 26 Июль 2016 - 10:56

Доброго всем времени суток! Помогите реализовать идею см. скрин.
1)На данный момент хочется установить такие же кнопки как на скрине и устаканить выпадающий каталог на кнопке КАТАЛОГ ФАБРИКИ.

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

  • 3.png


#2 Vaccina

Vaccina

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

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

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

В разделе Сайт - Меню - удалите пункт меню "Катало фабрики"
В шаблоне HTML найдите:
<!-- Верхний блок навигации -->
		  <div class="containerin" id="top-menu">
				<ul class="pad-box cont620" id="mainmenu">
				  {% FOR menu %}
						{% FOR header %}
						  {% FOR links %}
								<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a>
								{% IF menu.header.links.NAME == Каталог фабрики %}
								<ul class="topSubMenu">
								  </ul>
								{% ENDIF %}
								</li>
						  {% ENDFOR %}
						{% ENDFOR %}
				  {% ENDFOR %}
				</ul>
				<div class="clr"></div>
		  </div>
		  <!-- end Верхний блок навигации -->

замените на:
<!-- Верхний блок навигации -->
		  <div class="containerin" id="top-menu">
				<ul class="pad-box cont620" id="mainmenu">
	  <li><a href="http://el-boom.storeland.ru/">Каталог фабрики</a>
						{%FOR catalog_full%}
					{% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
					<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
					  <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="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%}								   
				   </li>
				  {% FOR menu %}
						{% FOR header %}
						  {% FOR links %}
								<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
						  {% ENDFOR %}
						{% ENDFOR %}
				  {% ENDFOR %}
				</ul>
				<div class="clr"></div>
		  </div>
		  <!-- end Верхний блок навигации -->

В main.css найдите:
#top-menu {
height: 40px;
overflow: hidden;
}

замените на:
#top-menu {
height: 40px;
}

и в самом конце пропишите:
#mainmenu{
position:relative;
}
#mainmenu li{
display: block !important;
float: left;
}
#mainmenu li ul {
display: none;
left: 0;
width:200px;
position: absolute;
top: 39px;
z-index:99;
}
#mainmenu li:hover ul{display:block;}
#mainmenu li ul li{
width:200px;
padding:10px;
border-bottom:1px solid #000;
background:#999;
}
#mainmenu li ul li a{
font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif;
padding: 0px;
background:none;
}
#mainmenu li ul li a:hover{
background:none;
}


#3 Gerti

Gerti

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

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

Отправлено 27 Июль 2016 - 10:43

К сожалению не то...каталог выходит криво не отображая изначальных вкладок каталога...

#4 Vaccina

Vaccina

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

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

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

Опишите пожалуйста подробнее проблему, после изменений выше при наведении на кнопку "Каталог фабрики" снизу появляются категории.

#5 Gerti

Gerti

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

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

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

При наведении в каталоге фабрики на раздел Под вкладки не открываются, телефоны и звонок сдвинут сильно в право, а рамка каталог-поиск не отцентрирована на сером фоне.
И сразу хотелось бы кнопки такие как на первом скрине)

#6 Gerti

Gerti

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

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

Отправлено 03 Август 2016 - 10:56

Вопросы еще актуальны) Прошу помощи) особенно на счет диза кнопок и каталога...

#7 Vaccina

Vaccina

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

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

Отправлено 04 Август 2016 - 04:29

Добавьте пожалуйста свой номер аккаунта в профиль форума, а то уже сложно его найти или указывайте в сообщениях.

В main.css после:
#mainmenu li:hover ul{display:block;}

замените на:
#mainmenu li:hover > ul{display:block;}
#mainmenu li > ul > li > ul{
  left:200px;
  top:0;
}

далее найдите:
#contactInfo {
	position: absolute;
	font-size: 18px;
	top: 70px;
	top: 23px;
	right: 0;
	line-height: 24px;
}

замените на:
#contactInfo {
	position: absolute;
	font-size: 18px;
	top: 23px;
	right: 40px;
	line-height: 24px;
}

далее найдите:
.catalog {
	position: absolute;
	top: 105px;
	top: 58px;
	right: 50%;
}

замените на:
.catalog {
	position: absolute;
	top: 58px;
	right: 52%;
}

далее найдите:
#search {
	height: 28px;
	width: 245px;
	height: 36px;
	width: 364px;
	position: absolute;
	top: 105px;
	top: 58px;
	right: 20%;
	background: #fff;
	border: 2px solid red;
}

замените на:
#search {
	height: 36px;
	width: 364px;
	position: absolute;
	top: 58px;
	right: 22%;
	background: #fff;
	border: 2px solid red;
}


#8 Gerti

Gerti

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

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

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

Аккаунт SL-390809
Спасибо это выровнялось, но очень нужен  диз кнопок как на скрине в начале темы, подскажите как воплотить..

#9 Danil

Danil

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

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

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

Просмотр сообщенияGerti (04 Август 2016 - 18:13) писал:

Аккаунт SL-390809
Спасибо это выровнялось, но очень нужен  диз кнопок как на скрине в начале темы, подскажите как воплотить..
Здравствуйте.
Пришлите, пожалуйста, скриншот с обозначенными изменениями, непосредственно на Вашем сайте.

#10 Gerti

Gerti

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

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

Отправлено 04 Август 2016 - 20:00

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

Здравствуйте.
Пришлите, пожалуйста, скриншот с обозначенными изменениями, непосредственно на Вашем сайте.
Требуется все как на скрине 3 , ну и собсно мой сайт ниже скрин

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

  • 1.png
  • скрин 3.png


#11 Danil

Danil

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

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

Отправлено 04 Август 2016 - 20:56

Просмотр сообщенияGerti (04 Август 2016 - 20:00) писал:

Требуется все как на скрине 3 , ну и собсно мой сайт ниже скрин
Частично произвел Вам изменения, нужно чтобы Вы загрузили изображения для меню в раздел Сайт - Редактор шаблонов и прислали их названия, для дальнейших изменений.

#12 Gerti

Gerti

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

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

Отправлено 04 Август 2016 - 21:00

Просмотр сообщенияDanil (04 Август 2016 - 20:56) писал:

Частично произвел Вам изменения, нужно чтобы Вы загрузили изображения для меню в раздел Сайт - Редактор шаблонов и прислали их названия, для дальнейших изменений.
Спасибо) Единственно не допоняла какие собсно нужны изображения :unsure:
И сразу по кнопочкам их бы хотелось сделать по больше как на скрине 3, спустить ниже чтобы все было органично и кнопку каталога не малиновую а салатную как на логотипе...

#13 Vaccina

Vaccina

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

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

Отправлено 05 Август 2016 - 02:43

Вам необходимо в раздел Редактор шаблонов загрузить изображения\иконки для верхнего меню(Каталог фабрики, Акции и т.д.) и указать в сообщении данной темы какую иконку и для какого пункта меню вы загрузили, чтобы мы смогли предоставить код для их вставки.

В main.css найдите:
#mainmenu li:first-child a, #mainmenu li ul li a {
	background: #D02090;
}

замените на:
#mainmenu li:first-child a, #mainmenu li ul li a {
	background: #92C024;
}

далее найдите и удалите:
#top-menu {
	height: 40px;
}

далее найдите:
#mainmenu li ul {
	display: none;
	left: 0;
	width: 200px;
	position: absolute;
	top: 39px;
	z-index: 99;
}

замените на:
#mainmenu li ul {
	display: none;
	left: 0;
	width: 200px;
	position: absolute;
	top: 69px;
	z-index: 99;
}

P.S.: добавьте номер аккаунта, по которому ведем работы, в профиль форума 390809

#14 Gerti

Gerti

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

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

Отправлено 05 Август 2016 - 18:49

попробовала загрузила пока 3 иконки katalog fabriki, kabinet, nash blog посмотрите пожалуйста подойдут ли по размеру.

#15 Vaccina

Vaccina

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

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

Отправлено 06 Август 2016 - 04:48

В main.css найдите:
#mainmenu li a{
  font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif;
  color: #FFF;
  display: block;
  padding: 15px;
  text-transform: uppercase;
  text-decoration: none;
 
  }
#mainmenu li:first-child a, #mainmenu li ul li a {
		background: #92C024;
}
  #mainmenu li:first-child a:hover, #mainmenu li ul li a:hover {
  background:#C71585 ;
  }
	#mainmenu > li:nth-child(2) a {background: #A9A9A9;}
	#mainmenu > li:nth-child(3) a {background: #E8E8E8;}
	#mainmenu > li:nth-child(4) a {background: #CFCFCF;}
	#mainmenu > li:nth-child(5) a {background: #B5B5B5;}
	#mainmenu > li:nth-child(6) a {background: #9C9C9C;}
   

замените на:
#mainmenu li a {
	font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif;
	color: #FFF;
	display: block;
	padding: 15px;
	text-transform: uppercase;
	text-decoration: none;
	height: 40px;
	overflow: hidden;
}
#mainmenu > li:first-child > a{background: url(https://el-boom.storeland.ru/design/katalog%20fabriki.png?2555) no-repeat center top #92C024;line-height: 70px;}
#mainmenu > li:first-child > a:hover{background-color:#C71585;}
#mainmenu > li:nth-child(2) a {background-color: #A9A9A9;}
#mainmenu > li:nth-child(3) a {background-color: #E8E8E8;}
#mainmenu > li:nth-child(4) a {background-color: #CFCFCF;}
#mainmenu > li:nth-child(5) a {background-color: #B5B5B5;}
#mainmenu > li:nth-child(6) a {background-color: #9C9C9C;}

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

#16 Gerti

Gerti

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

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

Отправлено 08 Август 2016 - 10:32

Доброго времени суток, kabinet -личный кабинет, kontakti- контакты, novinki - новинки, akchii - акции, brendi- бренды, korzina -корзина, katalog2-каталог, dostavka-доставка
Далее  
1) все кнопки опустить ниже шапки чтобы оставался маленький зазорчик и увеличить так,чтобы они были по ширине основной странички.
2) Вопрос по фону, ни как не могу выровнять фон, какого размера должен быть фон, а то уже все перепробовала ни как не хочет вставать единой картинкой.
3) Сделать Уже строго по кнопке открывающийся каталог на кнопке каталог фабрики , ...и сделать салатным цветом подвкладки


#17 Alekseys

Alekseys

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

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

Отправлено 09 Август 2016 - 11:56

Просмотр сообщенияGerti (08 Август 2016 - 10:32) писал:

Доброго времени суток, kabinet -личный кабинет, kontakti- контакты, novinki - новинки, akchii - акции, brendi- бренды, korzina -корзина, katalog2-каталог, dostavka-доставка
Далее  
1) кнопочки КОНТАКТЫ и ЛИЧНЫЙ КАБИНЕТ и ДОСТАВКА сделать такими же как и остальные
2) все кнопки опустить ниже шапки чтобы оставался маленький зазорчик и увеличить так,чтобы они были по ширине основной странички.
3) Вопрос по фону, ни как не могу выровнять фон, какого размера должен быть фон, а то уже все перепробовала ни как не хочет вставать единой картинкой.
4) Сделать Уже строго по кнопке открывающийся каталог на кнопке каталог фабрики , ...и сделать салатным цветом подвкладки

Здравствуйте.
1. В разделе Сайт - Редактор шаблонов - Стили - main.css в самый конец вставьте
#mainmenu > li:nth-child(7) a {background-color: #9C9C9C;}
#mainmenu > li:nth-child(8) a {background-color: #9C9C9C;}
#mainmenu > li:nth-child(9) a {background-color: #9C9C9C;}
2. В main.css замените
#logo {
  height: 134px;
}
на
#logo {
  height: 165px;
}
3. В шаблоне HTML замените
<body style="background:url('{ASSETS_IMAGES_PATH}1.jpg') repeat center center;">
на
<body style="background:url('{ASSETS_IMAGES_PATH}1.jpg') no-repeat center center;background-size: 100%;">
4. В main.css замените
#mainmenu li ul li a{
font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif;
padding: 0px;
background:#D02090;
padding:10px;
}
на
#mainmenu li ul li a{
font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif;
padding: 0px;
background:#b6e24a;
padding:10px;
}


#18 Gerti

Gerti

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

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

Отправлено 09 Август 2016 - 12:10

Просмотр сообщенияAlekseys (09 Август 2016 - 11:56) писал:


3. В шаблоне HTML замените
<body style="background:url('{ASSETS_IMAGES_PATH}1.jpg') repeat center center;">
на
<body style="background:url('{ASSETS_IMAGES_PATH}1.jpg') no-repeat center center;background-size: 100%;">
4. В main.css замените
#mainmenu li ul li a{
font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif;
padding: 0px;
background:#D02090;
padding:10px;
}
на
#mainmenu li ul li a{
font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif;
padding: 0px;
background:#b6e24a;
padding:10px;
}
Спасибо за помощь :) но возникли нюансы
3) По поводу фона он встал вообще не так просто растянулся по ширине... а нужно чтобы все заполнял
4) изменился только цвет а вопрос по поводу заужения выпадающего каталога так и остался открытым.
И еще повторюсь хочется увеличить все кнопки как по высоте так и по ширине , чтобы они встали ровненько по отношению к основной страничке.
Заранее спасибо)

#19 Alekseys

Alekseys

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

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

Отправлено 09 Август 2016 - 14:05

Просмотр сообщенияGerti (09 Август 2016 - 12:10) писал:

Спасибо за помощь :) но возникли нюансы
3) По поводу фона он встал вообще не так просто растянулся по ширине... а нужно чтобы все заполнял
4) изменился только цвет а вопрос по поводу заужения выпадающего каталога так и остался открытым.
И еще повторюсь хочется увеличить все кнопки как по высоте так и по ширине , чтобы они встали ровненько по отношению к основной страничке.
Заранее спасибо)
3. Вам нужно как минимум, чтобы ширина данного изображения (1.jpg) была минимум 1920 пикселей.
4. В main.css замените
.containerin {width: 940px; margin: 0px auto; }
на
.containerin {width: 960px; margin: 0px auto; }
затем
#mainmenu{
position:relative;
text-align:center;
float:none;
display:block;
}
замените на
#mainmenu{
position:relative;
text-align: left;
float:none;
display:block;
margin: 0;
}
и
#mainmenu li a {
		font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif;
		color: #FFF;
		display: block;
		padding: 15px;
		text-transform: uppercase;
		text-decoration: none;
		height: 40px;
		overflow: hidden;
}
замените на
#mainmenu li a {
		font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif;
		color: #FFF;
		display: block;
		padding: 15px 18px;
		text-transform: uppercase;
		text-decoration: none;
		height: 40px;
		overflow: hidden;
}
после чего в конец main.css добавьте
#mainmenu > li:last-child a {
	margin-left: 3px;
}
4. В main.css замените
#mainmenu li ul li{width: 200px;border-bottom:1px solid #000;display:block;}
на
#mainmenu li ul li{width: 150px;border-bottom:1px solid #000;display:block;}
затем
#mainmenu li > ul > li > ul{
  left:200px;
  top:0;
}
замените на
#mainmenu li > ul > li > ul{
  left:150px;
  top:0;
}


#20 Gerti

Gerti

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

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

Отправлено 09 Август 2016 - 14:27

Спасибо, но как бы сдвинуть левее а то кнопки не вровень, сделать их квадратнее и поставить на них иконки (залиты) kabinet -личный кабинет, kontakti- контакты, novinki - новинки, akchii - акции, brendi- бренды, korzina -корзина, katalog2-каталог, dostavka-доставка
далее выпадающее меню в каталог фабрики тож немного не ровно, где можно подкорректировать?
И по фону когда на главной то стоит на пол странички сейчас размер 2151 на 1920






Темы с аналогичным тегами шапка логотип, каталог, фон

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

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