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


Модификация "мокко"


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

#1 Antonyus

Antonyus

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

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

Отправлено 09 Февраль 2013 - 13:31

Немного поюзал сей шаблон с минимальными модификациями, ну и возникло желание более серьёзно попилить дизайн. Аттачу то, что хотелось бы видеть, прошу помощи, каким образом реализовать.
1.Как добавить чёрную полосу под кнопками верхнего меню? Можно, конечно, добавить эту полосу в файле header_bg. но не уверен, что это правильный ход...
2.Кнопки в верхнем меню. Надписи должны быть в белой рамке со скруглёнными краями. Можно наверное просто взять два ж-пега (обычное состояние и нажатая). Но, с другой стороны, надписи разной длинны и тд - хотелось бы сохранить возможность модификации. Короче, можно ли добавить на кнопки рамку и использовать свой шрифт?
3.Кнопки в боковом левом меню так-же должны быть со скруглёнными углами, хочу изменить их цвет и использовать свой шрифт. Хотелось бы добавить выпадающие в право меню подкатегорий...
Вот для начала пока такие вопросы:) Реально ли реализовать это в "Мокко"?
Прошу пардону, понимаю, что многое из того, что спросил, обсуждалось, но нет времени лопатить весь форум. Если ткнёте в ссылки, тоже не обижусь:)

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

  • draft.jpg


#2 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 09 Февраль 2013 - 14:45

Цитата

1.Как добавить чёрную полосу под кнопками верхнего меню? Можно, конечно, добавить эту полосу в файле header_bg. но не уверен, что это правильный ход...
Можно в файле "main.csstemplate".
Найти код:
#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;}
В вашем варианте тоже нету ничего плохого. Можно просто изменить картинку.

Цитата

2.Кнопки в верхнем меню. Надписи должны быть в белой рамке со скруглёнными краями. Можно наверное просто взять два ж-пега (обычное состояние и нажатая). Но, с другой стороны, надписи разной длинны и тд - хотелось бы сохранить возможность модификации. Короче, можно ли добавить на кнопки рамку и использовать свой шрифт?
Можно сделать как вы сказали. Просто добавлять разные картинки фона.
В файле "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 Antonyus

Antonyus

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

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

Отправлено 09 Февраль 2013 - 15:05

Спасибо за оперативный ответ! Буду пробовать, результат покажу.

#4 Antonyus

Antonyus

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

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

Отправлено 12 Февраль 2013 - 23:32

Итак, попробовал.
Черную полоску добавил, всё-же поменяв header_bg, это оказалось продуктивнее в моём случае.
С кнопками в верхнем меню тоже в принципе добился приемлемого результата. Не стал связываться с битмапами кнопок, обошёлся редактированием кода, но не без косяков.
1. Наверное где-то накосячил с характеристиками border и при наведении на любую кнопку все остальные слева за ней съезжают  чуток (на пару пикселов) влево... где косяк, понять не могу. Пустяк, но не приятно.
2. При наведении курсора рамка на кнопке, изначально серая, должна бы менять цвет на белый, но вроде серая остаётся, а белая рисуется внутри неё... Смотрится в принципе даже интересно :), но наверное не правильно.
3. И ещё, совсем уж идиотская проблема - не получилось адекватно поменять размер самих кнопок. Хотелось бы уменьшить их на пару тройку пикселов по высоте, но то они съезжают куда-то вниз, то меняются только "нажатые", то к тексту прилипают, короче так и не разобралсо, устал наверное...
Ну и четвёртое, это третий вопрос из предыдущего :) С цветами кнопок и их скруглением я теперь уж может и разберусь (особенно если по размерам подскажете), но что насчёт разворачивающихся вправо менюшек подкатегорий?
Сайт: http://avia-sign.ru/

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

  • draft_1.jpg


#5 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 13 Февраль 2013 - 01:13

1,2) Вам необходимо в файле стилей main.css найти


#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 Antonyus

Antonyus

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

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

Отправлено 13 Февраль 2013 - 14:05

Спасибо, помогло! Только изменение line-height ничего не давало, выровнял весь текст с помощью изменения bottom на 1 в этой строчке #mainNav {position: absolute;left: 5px;bottom: 1px;height: 33px;}, не знаю, на сколько это правильно...
Ещё не получается пока кнопки в боковом меню создать. Намекните плиз, куда и какие теги писать?

#7 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 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 Antonyus

Antonyus

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

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

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

Ога, спасибо, будем пробовать разобраццо...

#9 Antonyus

Antonyus

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

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

Отправлено 16 Февраль 2013 - 11:31

Кнопки "Каталога товаров" покрасил, сделал два битмапа - для обычного состояния и нажатую, но такой косяк вылез теперь - в нажатом состоянии показывается только средняя часть кнопки (см. аттач). Не могу разобраться, в чём дело.
И вдогонку, хочется поменять цвета всех надписей, можно ли сделать это сразу? К примеру все типа жёлтые(?) заменить на серые, голубые на зелёные и тп? Или как и где это грамотно делается? Где задаются эти цвета, чтобы скопом их поменять? Ну или ссылку на решение подобного вопроса может кто подкинет. По одному менять получается, но это-ж геморрой! :))) Сам очевидного ответа пока не нашёл...

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

  • draft_2.jpg


#10 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 16 Февраль 2013 - 11:55

Просмотр сообщенияAntonyus (16 Февраль 2013 - 11:31) писал:

Кнопки "Каталога товаров" покрасил, сделал два битмапа - для обычного состояния и нажатую, но такой косяк вылез теперь - в нажатом состоянии показывается только средняя часть кнопки (см. аттач). Не могу разобраться, в чём дело.
И вдогонку, хочется поменять цвета всех надписей, можно ли сделать это сразу? К примеру все типа жёлтые(?) заменить на серые, голубые на зелёные и тп? Или как и где это грамотно делается? Где задаются эти цвета, чтобы скопом их поменять? Ну или ссылку на решение подобного вопроса может кто подкинет. По одному менять получается, но это-ж геморрой! :))) Сам очевидного ответа пока не нашёл...

Можно вот таким образом:
$('класс элеента').css('color','white');
вставьте в main.js (Сайт->Редактор тем->Стили и скрипты)

#11 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 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 Antonyus

Antonyus

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

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

Отправлено 16 Февраль 2013 - 13:21

Miyako, я, честно говоря не понял, к какому из моих вопросов относилась Ваша рекомендация, но всё-же её выполнил - повставлял в разные части main.js и никаких изменений не заметил. Очевидно я что-то упустил или Вы слишком хорошего мнения о моих способностях:)
Впрочем свой вопрос о смене цветов надписей я снимаю, не так страшно по отдельности ручками поковырять оказалось.
Но всё-же хотелось бы решить проблему с неполной сменой цвета (битмапа) кнопки при наведении курсора. Что бы сделать для этого?:)
http://avia-sign.ru/
Ой, Sumanai Miyako, Вы уже всё написали!:) Буду пробовать!

Сообщение отредактировал Antonyus: 16 Февраль 2013 - 13:26


#13 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

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

Просмотр сообщенияAntonyus (16 Февраль 2013 - 13:21) писал:

Miyako, я, честно говоря не понял, к какому из моих вопросов относилась Ваша рекомендация, но всё-же её выполнил - повставлял в разные части main.js и никаких изменений не заметил. Очевидно я что-то упустил или Вы слишком хорошего мнения о моих способностях :)
Впрочем свой вопрос о смене цветов надписей я снимаю, не так страшно по отдельности ручками поковырять оказалось.
Но всё-же хотелось бы решить проблему с неполной сменой цвета (битмапа) кнопки при наведении курсора. Что бы сделать для этого? :)
http://avia-sign.ru/

На этот вопрос я ответила выше

#14 Antonyus

Antonyus

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

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

Отправлено 16 Февраль 2013 - 13:27

ога, заметил, прошу прощения, просто не обновил страничку...

#15 Antonyus

Antonyus

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

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

Отправлено 16 Февраль 2013 - 13:36

В очередной раз dooomy arigatou, Miyako, конечно всё получилось!

#16 Antonyus

Antonyus

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

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

Отправлено 16 Февраль 2013 - 14:14

Опять бяка какая-то вылезла :angry:  Изменил немного файл contentWrap_bg.jpg - добавил ему тона, а он (с тоном) почему-то отображается только в нижней части страницы, хотя вроде бы по всему "рабочему" полю магазина он идёт фоном....

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

  • draft_3.jpg


#17 support 2.0

support 2.0

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

  • Модераторы
  • 4 924 сообщений

Отправлено 16 Февраль 2013 - 14:46

Просмотр сообщенияAntonyus (16 Февраль 2013 - 14:14) писал:

Опять бяка какая-то вылезла :angry:  Изменил немного файл contentWrap_bg.jpg - добавил ему тона, а он (с тоном) почему-то отображается только в нижней части страницы, хотя вроде бы по всему "рабочему" полю магазина он идёт фоном....

Как Вам нужно, чтобы это на самом деле отображалось?

#18 Antonyus

Antonyus

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

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

Отправлено 16 Февраль 2013 - 15:21

Просмотр сообщенияsupport 2.0 (16 Февраль 2013 - 14:46) писал:

Как Вам нужно, чтобы это на самом деле отображалось?
Я рассчитывал, что изменённый contentWrap всё поле, которое было белым, заполнит... просто весь белый фон хотелось подтонировать, правда желательно, чтобы ячейки товара белыми остались...

#19 support 2.0

support 2.0

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

  • Модераторы
  • 4 924 сообщений

Отправлено 16 Февраль 2013 - 16:36

Просмотр сообщенияAntonyus (16 Февраль 2013 - 15:21) писал:

Я рассчитывал, что изменённый contentWrap всё поле, которое было белым, заполнит... просто весь белый фон хотелось подтонировать, правда желательно, чтобы ячейки товара белыми остались...

Можно сделать фон градиентом. Для этого в файле 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 Antonyus

Antonyus

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

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

Отправлено 16 Февраль 2013 - 22:02

Суппорт, спасибо! Градиентом тоже ничего, интересно:) Но хоть убей, не пойму, почему если contentWrap_bg.jpg был прописан вроде как для всего #contentWrap, отображался он только по нижней границе?! Но это уже из области любознательности:))
А всё-же, можно сделать так, чтобы в рамках с товаром фон оставался белый?..




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

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