Переделка Общего Стиля Начиная С Шапки ...
#1
Отправлено 26 Июль 2016 - 10:56
1)На данный момент хочется установить такие же кнопки как на скрине и устаканить выпадающий каталог на кнопке КАТАЛОГ ФАБРИКИ.
#2
Отправлено 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
Отправлено 27 Июль 2016 - 10:43
#4
Отправлено 28 Июль 2016 - 04:11
#5
Отправлено 02 Август 2016 - 09:48
И сразу хотелось бы кнопки такие как на первом скрине)
#6
Отправлено 03 Август 2016 - 10:56
#7
Отправлено 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
Отправлено 04 Август 2016 - 18:13
Спасибо это выровнялось, но очень нужен диз кнопок как на скрине в начале темы, подскажите как воплотить..
#9
Отправлено 04 Август 2016 - 18:59
Gerti (04 Август 2016 - 18:13) писал:
Спасибо это выровнялось, но очень нужен диз кнопок как на скрине в начале темы, подскажите как воплотить..
Пришлите, пожалуйста, скриншот с обозначенными изменениями, непосредственно на Вашем сайте.
#12
Отправлено 04 Август 2016 - 21:00
Danil (04 Август 2016 - 20:56) писал:
И сразу по кнопочкам их бы хотелось сделать по больше как на скрине 3, спустить ниже чтобы все было органично и кнопку каталога не малиновую а салатную как на логотипе...
#13
Отправлено 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
Отправлено 05 Август 2016 - 18:49
#15
Отправлено 06 Август 2016 - 04:48
#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
Отправлено 08 Август 2016 - 10:32
Далее
1) все кнопки опустить ниже шапки чтобы оставался маленький зазорчик и увеличить так,чтобы они были по ширине основной странички.
2) Вопрос по фону, ни как не могу выровнять фон, какого размера должен быть фон, а то уже все перепробовала ни как не хочет вставать единой картинкой.
3) Сделать Уже строго по кнопке открывающийся каталог на кнопке каталог фабрики , ...и сделать салатным цветом подвкладки
#17
Отправлено 09 Август 2016 - 11:56
Gerti (08 Август 2016 - 10:32) писал:
Далее
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
Отправлено 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
Отправлено 09 Август 2016 - 14:05
Gerti (09 Август 2016 - 12:10) писал:
3) По поводу фона он встал вообще не так просто растянулся по ширине... а нужно чтобы все заполнял
4) изменился только цвет а вопрос по поводу заужения выпадающего каталога так и остался открытым.
И еще повторюсь хочется увеличить все кнопки как по высоте так и по ширине , чтобы они встали ровненько по отношению к основной страничке.
Заранее спасибо)
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
Отправлено 09 Август 2016 - 14:27
далее выпадающее меню в каталог фабрики тож немного не ровно, где можно подкорректировать?
И по фону когда на главной то стоит на пол странички сейчас размер 2151 на 1920
Темы с аналогичным тегами шапка логотип, каталог, фон
Вопросы работы сервиса StoreLand →
Другие вопросы →
Проблема Со Ссылками При Переходе На Товар Из МенюАвтор Гость_Goosenic_* , 26 янв. 2021 ссылки меню, товары, каталог |
|
|||
характеристики
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Техно →
Каталог товаров →
Вывод Характеристик В Товарах Отображаемых ТаблицейАвтор Гость_metry_* , 06 дек. 2020 характеристики, каталог, товары |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Веган →
Как Изменить Разделы Каталога И Добавить Подразделы?Автор Гость_lazar_* , 14 июня 2020 каталог |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Город →
Каталог товаров →
Выравнивание По Нижнему Краю И Названия КатегорийАвтор Гость_Максим Бакланов_* , 11 февр. 2020 каталог |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Рассвет →
Изменение общей стилистики →
ФонАвтор Гость_bok_* , 13 окт. 2019 фон |
|
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных