Сообщений в теме: 22

[dalulka]

http://ecofuel.storeland.ru/
как поменять внешний вид кнопок меню, с простой надписи на какую нибудь красивую кнопочку, ну или хотя бы на четкий выделенный прямоугольник, но лучше красивую кнопку?

[Vaccina]

Для этого нужно простилизовать пункты меню Редактор тем - main.css

#mainmenu li a {
	background: url("http://img.storeland.ru/web/upload/assets/images/71/70060/tm_link_border.gif") no-repeat scroll right top transparent;
	color: #FFFFFF;
	display: block;
	float: left;
	font: bold 12px/40px Helvetica,Tahoma,Arial,sans-serif;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	text-transform: uppercase;
}

то есть мы меняем фон background на необходимую Вам картинку или же если Вы хотите сделать обычный цветной треугольник то достаточно значение заменить цветом например #000000

[dalulka]

Vaccina (03 Апрель 2012 - 17:30) писал:

Для этого нужно простилизовать пункты меню Редактор тем - main.css

#mainmenu li a {
	background: url("http://img.storeland.ru/web/upload/assets/images/71/70060/tm_link_border.gif") no-repeat scroll right top transparent;
	color: #FFFFFF;
	display: block;
	float: left;
	font: bold 12px/40px Helvetica,Tahoma,Arial,sans-serif;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	text-transform: uppercase;
}

то есть мы меняем фон background на необходимую Вам картинку или же если Вы хотите сделать обычный цветной треугольник то достаточно значение заменить цветом например #000000

ПОМЕНЯЛА НА ЦВЕТ, ПОЛУЧИЛАСЬ ОДНА СПЛОШНАЯ ПОЛОСА! В ЧЕМ ОШИБКА http://ecofuel.storeland.ru/
/*main menu*/
  #top-menu {height: 40px;overflow: hidden;} #mainmenu li, #langmenu li  { display:inline;}
  #mainmenu li a{
  font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif;
  color: #b70618;
  display: block;
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  text-transform: uppercase;
  text-decoration: none;
  background: #1e36eb no-repeat right top; }
  #mainmenu li a:hover {
  background: url({ASSETS_IMAGES_PATH}tm_link_border.gif) repeat-x center bottom;

[Vaccina]

Это не ошибка, просто у Вас нету отступов между кнопками. Нужно добавить в тот же блок(#mainmenu li a) margin-left:10px; например, можно увеличить\уменьшить значение на необходимое.

[dalulka]

Vaccina (04 Апрель 2012 - 19:32) писал:

Это не ошибка, просто у Вас нету отступов между кнопками. Нужно добавить в тот же блок(#mainmenu li a) margin-left:10px; например, можно увеличить\уменьшить значение на необходимое.

КАК И КУДА ВСТАВИТЬ ЭТОТ КОД, ЧТОБ ПОЛУЧИЛАСЬ КНОПКА, ЗАШИФРОВАННАЯ В НЕМ? (КАСАЕТСЯ МЕНЮ В ШАПКЕ И КАТЕГОРИЙ В КАТАЛОГЕ НА ГЛАВНОЙ СТРАНИЦЕ) И КАК СДЕЛАТЬ, ЧТОБЫ ПРИ НАВЕДЕНИИ КУРСОРА НА КАКОЙ НИБУДЬ ИЗ ПУНКТОВ МЕНЮ, ТАМ НЕ ВСПЛЫВАЛ СИНИЙ ПРЯМОУГОЛЬНИК?

a.button {
   display: -moz-inline-stack;
   display: inline-block;
   width: 41px;
   height: 23px;
   background: url("http://dabuttonfacto...se&hp=20&vp=11") no-repeat;
   line-height: 23px;
   vertical-align: text-middle;
   text-align: center;
   color: #ffffff;
   font-family: Calibri;
   font-size: 18px;
   font-weight: bold;
   font-style: normal;
   text-shadow: #222222 1px 1px 0;
}
a.button > span {
   display: -moz-inline-block;
}

[Vaccina]

Данный код лучше не использовать по нескольким причинам. А именно изображение берется с удаленного ресурса - что будет влиять на загрузку важной части сайта. Так же данный код не подойдет для стандартного меню что видно из селектора a.button > span
Так же он направлен на один браузер firefox что видно по свойству -moz- данное меню может совершенно не корректно отображаться в других браузерах.
А для удаления выделения пункта меню при наведении - необходимо удалить в файле стилей класс

#mainmenu li a:hover {
	background: url("http://img.storeland.ru/web/upload/assets/images/10/9976/tm_link_border.gif") repeat-x scroll center bottom transparent;
}

[dalulka]

жаль. выделение удалось убрать. спс.

[Breasy]

А как отцентровать кнопки меню?

всмысле вот у меня слева а я хочу посередине прямо под логотипом - http://s144851.storeland.ru/

[Vaccina]

Попробуйте сделать следующее:
блоку:

#top-menu {
	height: 40px;
	overflow: hidden;
}

прописать ширину width:900px; например
далее
прописать ниже

#mainmenu{margin:0 auto;}

[dalulka]

Vaccina (09 Апрель 2012 - 23:27) писал:

Попробуйте сделать следующее:
блоку:

#top-menu {
	height: 40px;
	overflow: hidden;
}

прописать ширину width:900px; например
далее
прописать ниже

#mainmenu{margin:0 auto;}

нашла кнопку, которая мне нравится. вот скрин от нее и ее кода. подойдет ли она на мой сайт и куда этот код вставить (какую конкретно его часть), чтобы кнопки меню и разделы каталога приняли такой вид?

[Vaccina]

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

[dalulka]

Vaccina (20 Апрель 2012 - 23:07) писал:

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

вот засада! неужели ни у кого из help desk нет КОДА от подобных кнопок???!!! как же люди то делают их??

[Vaccina]

Цитата

вот засада! неужели ни у кого из help desk нет КОДА от подобных кнопок???!!! как же люди то делают их??

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

[dalulka]

Vaccina (23 Апрель 2012 - 20:30) писал:

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

скопировала кнопку с сайта в виде картинки png и сохранила ее в корне. как дальше ее использовать для внедрения в КАТАЛОГ - понятно, а вот будет ли подгоняться автоматически размер кнопки под написанный текст? мне не удалось этого достичь. пришлось подгонять размер кнопки под изначальный размер выделенного для этого поля и отключать повтор бэкграунда.
код у меня теперь такой
.leftmenu li li a {
    border-bottom: 3px solid #D6D6D6;
    color: #d00616;
    display: block;
    font: 15px/20px "Trebuchet MS",Arial,Helvetica,sans-serif;
    padding: 7px 10px;
    text-decoration: none;
    white-space: nowrap;
    background: url("http://ekofuel.ru/we...060/button.png") no-repeat;
}

[Vaccina]

Изображение не будет подгоняться под размер текста (блока). Для этого необходимо прибегать к таким методам как использование спрайтов.

[dalulka]

Vaccina (24 Апрель 2012 - 21:20) писал:

Изображение не будет подгоняться под размер текста (блока). Для этого необходимо прибегать к таким методам как использование спрайтов.

разобралась на примере кнопок МЕНЮ

[Dreifeld]

А как поменять фон кнопок не верхнего меню, а того, что справа? Шаблон - Сияние.

[miyako]

Dreifeld (04 Июнь 2013 - 14:22) писал:

А как поменять фон кнопок не верхнего меню, а того, что справа? Шаблон - Сияние.

При наведении - в файле main.css это код:

.leftmenu li li a:hover {
  background: url(http://miyako.storeland.net/lm-bg.jpg) repeat-x left bottom;
}

Вам нужно изменить изображение - lm-bg.jpg. Сначала удаляете его из Сайт-Редактор шаблонов - список слева - Изображения. Затем загружаете ваше с названием  lm-bg в формате jpg

Чтобы добавить фон для меню слева можно сделать так:
Найдите в main.css код:

.leftmenu li li a {
display: block;
padding: 5px 10px;
border-bottom: 1px solid #D6D6D6;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
}

и замените на:

.leftmenu li li a {
display: block;
padding: 5px 10px;
border-bottom: 1px solid #D6D6D6;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
background: red; /*ваш цвет*/
}

или если хотите вместо цвета подгрузить изображение, тогда так:

.leftmenu li li a {
display: block;
padding: 5px 10px;
border-bottom: 1px solid #D6D6D6;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
background: url("{ASSETS_IMAGES_PATH}название изображения");
}

Название изображения заменяете на свое. Само изображение загружаете через Сайт-Редактор шаблонов - слева список - Выберите файл

[unling]

как поменять в шаблоне осень кнопки вот например если я хочу вот такую кнопку?
Или если я хочу вот такую же верхнюю панель как вот тут

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

• 
• 

[Vaccina]

Для этого необходимо задать\изменить фон (background) у необходимых элементов, к примеру для меню необходимо в файле style.css найти сл.код:

#megamenu {
height: 54px;
left: 238px;
position: absolute;
top: 90px;
}

и задать фон, пример:

#megamenu {
background:url ('ссылка на картинку') no-repeat left center;
height: 54px;
left: 238px;
position: absolute;
top: 90px;
}

Кнопки вы какие хотите изменить?