Модификация "мокко"
#1
Отправлено 09 Февраль 2013 - 13:31
1.Как добавить чёрную полосу под кнопками верхнего меню? Можно, конечно, добавить эту полосу в файле header_bg. но не уверен, что это правильный ход...
2.Кнопки в верхнем меню. Надписи должны быть в белой рамке со скруглёнными краями. Можно наверное просто взять два ж-пега (обычное состояние и нажатая). Но, с другой стороны, надписи разной длинны и тд - хотелось бы сохранить возможность модификации. Короче, можно ли добавить на кнопки рамку и использовать свой шрифт?
3.Кнопки в боковом левом меню так-же должны быть со скруглёнными углами, хочу изменить их цвет и использовать свой шрифт. Хотелось бы добавить выпадающие в право меню подкатегорий...
Вот для начала пока такие вопросы Реально ли реализовать это в "Мокко"?
Прошу пардону, понимаю, что многое из того, что спросил, обсуждалось, но нет времени лопатить весь форум. Если ткнёте в ссылки, тоже не обижусь
#2
Отправлено 09 Февраль 2013 - 14:45
Цитата
Найти код:
#mainNav {position: absolute;left: 5px;bottom: 0;height: 35px;background: url("/web/upload/assets/images/173/172908/nav_bg.jpg") no-repeat;}Заменить:
#mainNav {position: absolute;left: 5px;bottom: 0;height: 35px;background: url("/web/upload/assets/images/173/172908/nav_bg.jpg") no-repeat;border-bottom: 2px solid black;}В вашем варианте тоже нету ничего плохого. Можно просто изменить картинку.
Цитата
В файле "main.csstemplate".
Найти код:
#mainNav table td div a.selected, #mainNav table td div a:hover, #mainNav table td div a:active {color: #D0431D;text-decoration: none;background-position: bottom right;}Заменить:
#mainNav table td div a.selected, #mainNav table td div a:hover, #mainNav table td div a:active {color: #D0431D;text-decoration: none;background: url("адрес до временной картинки") repeat-x bottom left;}
Найти код:
#mainNav table td div a:link, #mainNav table td div a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("/web/upload/assets/images/173/172908/nav_item_bg.gif") repeat-x bottom left;}Заменить:
#mainNav table td div a:link, #mainNav table td div a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("адрес до постоянной картинки") repeat-x bottom left;}
#3
Отправлено 09 Февраль 2013 - 15:05
#4
Отправлено 12 Февраль 2013 - 23:32
Черную полоску добавил, всё-же поменяв header_bg, это оказалось продуктивнее в моём случае.
С кнопками в верхнем меню тоже в принципе добился приемлемого результата. Не стал связываться с битмапами кнопок, обошёлся редактированием кода, но не без косяков.
1. Наверное где-то накосячил с характеристиками border и при наведении на любую кнопку все остальные слева за ней съезжают чуток (на пару пикселов) влево... где косяк, понять не могу. Пустяк, но не приятно.
2. При наведении курсора рамка на кнопке, изначально серая, должна бы менять цвет на белый, но вроде серая остаётся, а белая рисуется внутри неё... Смотрится в принципе даже интересно , но наверное не правильно.
3. И ещё, совсем уж идиотская проблема - не получилось адекватно поменять размер самих кнопок. Хотелось бы уменьшить их на пару тройку пикселов по высоте, но то они съезжают куда-то вниз, то меняются только "нажатые", то к тексту прилипают, короче так и не разобралсо, устал наверное...
Ну и четвёртое, это третий вопрос из предыдущего С цветами кнопок и их скруглением я теперь уж может и разберусь (особенно если по размерам подскажете), но что насчёт разворачивающихся вправо менюшек подкатегорий?
Сайт: http://avia-sign.ru/
#5
Отправлено 13 Февраль 2013 - 01:13
#mainNav table td div a.selected, #mainNav table td div a:hover, #mainNav table td div a:active { background: none repeat scroll 0 0 #2D2D2D; border: 1px solid #F9F9F9; border-radius: 5px 5px 5px 5px; color: #F9F9F9; text-decoration: none; }
и заменить на
#mainNav table td div a.selected, #mainNav table td div a:hover, #mainNav table td div a:active { background: none repeat scroll 0 0 #2D2D2D; border-radius: 5px 5px 5px 5px; color: #F9F9F9; text-decoration: none; }
и ниже добавить
#mainNav table td div:hover { border: 1px solid #F9F9F9; }
3) Для изменения размера вам необходимо изменить высоту в классах
#mainNav table td div a:link, #mainNav table td div a:visited { color: #808080; display: block; height: 23px; padding: 4px 10px 0; } #mainNav table td div { background: none repeat scroll 0 0 #000000; border: 1px solid #808080; border-radius: 5px 5px 5px 5px; float: left; font-size: 1.37em; height: 28px; line-height: 1.3333em; }
а именно свойство height и padding, отрегулировать положение текста вы можете через свойство line-height
4) Информацию по выподающемому меню вы можете почитать тут http://forum.storela...еню/#entry27791
или в других темах форума если воспользуетесь поиском по запросу header1
#6
Отправлено 13 Февраль 2013 - 14:05
Ещё не получается пока кнопки в боковом меню создать. Намекните плиз, куда и какие теги писать?
#7
Отправлено 14 Февраль 2013 - 00:08
#subNavigation li { background: url("http://avia-sign.storeland.net/subnav_rule.gif") no-repeat scroll left bottom transparent; font-size: 1.0833em; line-height: 1.5384em; padding: 0.5em 0; } #subNavigation li a:link, #subNavigation li a:visited { color: #666666; display: block; padding-left: 10px; } #subNavigation li a:hover, #subNavigation li a:active { background: url("http://avia-sign.storeland.net/square_bullet.gif") no-repeat scroll 0 0.6em transparent; color: #D0431D; text-decoration: none; } #subNavigation .selected { color: #D0431D !important; }
стилизация по сути делается аналогично верхнему меню.
#8
Отправлено 15 Февраль 2013 - 09:41
#9
Отправлено 16 Февраль 2013 - 11:31
И вдогонку, хочется поменять цвета всех надписей, можно ли сделать это сразу? К примеру все типа жёлтые(?) заменить на серые, голубые на зелёные и тп? Или как и где это грамотно делается? Где задаются эти цвета, чтобы скопом их поменять? Ну или ссылку на решение подобного вопроса может кто подкинет. По одному менять получается, но это-ж геморрой! )) Сам очевидного ответа пока не нашёл...
#10
Отправлено 16 Февраль 2013 - 11:55
Antonyus (16 Февраль 2013 - 11:31) писал:
И вдогонку, хочется поменять цвета всех надписей, можно ли сделать это сразу? К примеру все типа жёлтые(?) заменить на серые, голубые на зелёные и тп? Или как и где это грамотно делается? Где задаются эти цвета, чтобы скопом их поменять? Ну или ссылку на решение подобного вопроса может кто подкинет. По одному менять получается, но это-ж геморрой! )) Сам очевидного ответа пока не нашёл...
Можно вот таким образом:
$('класс элеента').css('color','white');вставьте в main.js (Сайт->Редактор тем->Стили и скрипты)
#11
Отправлено 16 Февраль 2013 - 12:34
Найдите код:
#subNavigation li { font-size: 1.3em; line-height: 1.5384em; padding: 0.45em 0; background: url(http://avia-sign.storeland.net/subnav_rule_action.gif) no-repeat left; }и замените на:
#subNavigation li a{ font-size: 1.3em; line-height: 1.5384em; padding: 0.45em 0; background: url(http://avia-sign.storeland.net/subnav_rule_action.gif) no-repeat left; }
#12
Отправлено 16 Февраль 2013 - 13:21
Впрочем свой вопрос о смене цветов надписей я снимаю, не так страшно по отдельности ручками поковырять оказалось.
Но всё-же хотелось бы решить проблему с неполной сменой цвета (битмапа) кнопки при наведении курсора. Что бы сделать для этого?
http://avia-sign.ru/
Ой, Sumanai Miyako, Вы уже всё написали! Буду пробовать!
Сообщение отредактировал Antonyus: 16 Февраль 2013 - 13:26
#13
Отправлено 16 Февраль 2013 - 13:25
Antonyus (16 Февраль 2013 - 13:21) писал:
Впрочем свой вопрос о смене цветов надписей я снимаю, не так страшно по отдельности ручками поковырять оказалось.
Но всё-же хотелось бы решить проблему с неполной сменой цвета (битмапа) кнопки при наведении курсора. Что бы сделать для этого?
http://avia-sign.ru/
На этот вопрос я ответила выше
#14
Отправлено 16 Февраль 2013 - 13:27
#15
Отправлено 16 Февраль 2013 - 13:36
#16
Отправлено 16 Февраль 2013 - 14:14
#17
Отправлено 16 Февраль 2013 - 14:46
Antonyus (16 Февраль 2013 - 14:14) писал:
Как Вам нужно, чтобы это на самом деле отображалось?
#18
Отправлено 16 Февраль 2013 - 15:21
support 2.0 (16 Февраль 2013 - 14:46) писал:
#19
Отправлено 16 Февраль 2013 - 16:36
Antonyus (16 Февраль 2013 - 15:21) писал:
Можно сделать фон градиентом. Для этого в файле main.css найдите блок
#contentWrap {clear: both;background: url(http://avia-sign.storeland.net/contentWrap_bg.jpg) repeat-x left bottom;}
и замените его на
#contentWrap {clear: both; background: rgb(255, 255, 255); /* Для старых браузров */ background: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(233, 233, 233)); /* Firefox 3.6+ */ /* Chrome 1-9, Safari 4-5 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255, 255, 255)), color-stop(100%,rgb(233, 233, 233))); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(233, 233, 233)); background: -o-linear-gradient(top, rgb(255, 255, 255), rgb(233, 233, 233)); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(255, 255, 255), rgb(233, 233, 233)); /* IE10 */ background: linear-gradient(top, rgb(255, 255, 255), rgb(233, 233, 233)); /* CSS3 */ }
#20
Отправлено 16 Февраль 2013 - 22:02
А всё-же, можно сделать так, чтобы в рамках с товаром фон оставался белый?..
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных