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


Изменить Цвет Кнопок И Подкатегорий.


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

#41 Владимир1984

Владимир1984

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений
  • ГородМосква

Отправлено 21 Октябрь 2013 - 13:05

Как поменять каталог (заменить кнопки каталога исходниками в формате .png) если это возможно.

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

  • Структура, которую нужно поменять.jpg


#42 ne_yana

ne_yana

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

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

Отправлено 21 Октябрь 2013 - 13:24

Просмотр сообщенияВладимир1984 (21 Октябрь 2013 - 13:05) писал:

Как поменять каталог (заменить кнопки каталога исходниками в формате .png) если это возможно.

Добрый день, необходимо загрузить фон кнопки, после чего заменить
#left .block .navigation ul li, #right .block .navigation ul li {
background: url(http://design.accessory-online.ru/block-main-nav-bg.jpg) no-repeat;
width: 223px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #e2e2e2;
overflow: hidden;
}
на
#left .block .navigation ul li, #right .block .navigation ul li {
background: url(путь к загруженному фону) no-repeat;
width: 171px;
overflow: hidden;
border: red 1px solid;
border-radius: 6px;
}


#43 Владимир1984

Владимир1984

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений
  • ГородМосква

Отправлено 21 Октябрь 2013 - 14:48

А как сделать, чтобы верхние кнопки были точно такие же, как боковые. Чтобы текст категории был по центру, и не было бы белых полей (пробелов) между ними. Также нужно, чтобы совпадали границы. Ещё раз спасибо, извините за беспокойство)

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

  • Кнопки сайта.jpg


#44 Koderhan

Koderhan

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

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

Отправлено 21 Октябрь 2013 - 14:58

Просмотр сообщенияВладимир1984 (21 Октябрь 2013 - 14:48) писал:

А как сделать, чтобы верхние кнопки были точно такие же, как боковые. Чтобы текст категории был по центру, и не было бы белых полей (пробелов) между ними. Также нужно, чтобы совпадали границы. Ещё раз спасибо, извините за беспокойство)
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Найти код:
		#left .block .navigation ul li, #right .block .navigation ul li {
background: url(http://st.accessory-online.ru/2/820/365/button-7561.png) no-repeat;
width: 171px;
overflow: hidden;
border: red 1px solid;
border-radius: 6px;
}
Заменить:
		#left .block .navigation ul li, #right .block .navigation ul li {
background: url(http://st.accessory-online.ru/2/820/365/button-7561.png) no-repeat;
overflow: hidden;
border: red 1px solid;
border-radius: 6px;
}
И вам нужно будет изменить длину изображения кнопки до 223px

И для добавления картинки в верхнее меню.

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
#panelsite div.centercol .menuheader ul li {
float:left;
background: url(http://st.accessory-online.ru/2/820/365/button-7561.png) -10px 0px no-repeat;
margin: 0 10px 0 0px;
padding-left: 0px;
border-radius: 10px;
}


#45 Владимир1984

Владимир1984

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений
  • ГородМосква

Отправлено 21 Октябрь 2013 - 15:59

Огромное Спасибо. Получается.

#46 Виолетта

Виолетта

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

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

Отправлено 21 Октябрь 2013 - 22:52

Просмотр сообщенияne_yana (21 Октябрь 2013 - 09:30) писал:

Здравствуйте, выпуклость у кнопок была из-за того, что фоном кнопки была картинка, а теперь просто установленный Вами цвета.Сменить синюю кнопку можно, изменив следующий блок:
.whtblue:hover {background: url(http://design.good4hobby.ru/whtblue-bg.jpg) center top repeat;border: 1px solid #5fa8c4;color: #3e3e3e;text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);}
а зеленые:
.whtgreen:hover, .blgreen:hover {
background: url(http://design.good4hobby.ru/whtgreen-bg.jpg) center center repeat;
border: 1px solid #83a61d;
color: #1c1c1c;
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
}
Спасибо за ответ. Не могли бы вы уточнить что именно нужно изменить,чтобы получить желаемое. А то,я видимо что-то не то меняю,так как исчезает сама кнопка Подробнее,при наведении появляется синий блок вместо этого, и надпись В корзину окрашивается в ярко-голубой,хотя у меня выбран другой цвет. Цвет мне нужен вот этот #6A6EAA

И еще,подскажите пожалуйста как будет выглядеть блок для изменения вот этой конкретной кнопки Оформить заказ(хочу вернуть первоначальный цвет).

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

  • Безымянный88.png


#47 Vaccina

Vaccina

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

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

Отправлено 22 Октябрь 2013 - 05:51

Задание цвета не даст вам нужный результат. Необходимо использовать изображение кнопки для придания кнопки различных визуальных стилей. Вам желательно бы вернуть стили кнопок обратно, после чего уже изменить сами изображения кнопок в графическом редакторе. По умолчанию стили кнопок выглядят так

/*Контентная часть сайта*/
  /*Кнопки*/
  .whtblue { border:1px solid #d0d0d0 !important; background:url({ASSETS_IMAGES_PATH}whtblue-nor.jpg) center top repeat-x; padding:5px 15px; font:normal 12px Verdana, Geneva, sans-serif; color:#504f4f; height:27px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer; outline:none; }
  @-moz-document url-prefix() { .whtblue { padding:2px 12px 5px 12px; height:27px; }  a.whtblue { padding:5px 12px 5px 12px; height:27px;} }
  .whtblue:hover { background:url({ASSETS_IMAGES_PATH}whtblue-bg.jpg) center top repeat; border:1px solid #5fa8c4; color:#3e3e3e; text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);  }
  .whtblue:active { background:url({ASSETS_IMAGES_PATH}whtblue-bg.jpg) center bottom repeat; border:1px solid #5fa8c4; }
  .whtgreen { border:1px solid #d0d0d0; background:url({ASSETS_IMAGES_PATH}whtgreen-bg.jpg) center top repeat-x; padding:4px 10px 2px 10px; font:normal 11px Verdana, Geneva, sans-serif; color:#3a3a3a;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer; text-shadow: 0px 1px 0 rgba(255, 255, 255, 1);}
  @-moz-document url-prefix() { button.whtgreen { height:23px; padding:2px 10px 4px 10px; position:relative; top:1px; } }
  .whtgreen:hover, .blgreen:hover   { background:url({ASSETS_IMAGES_PATH}whtgreen-bg.jpg) center center repeat; border:1px solid #83a61d; color:#1c1c1c; text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);  }
  .whtgreen:active, .blgreen:active { background:url({ASSETS_IMAGES_PATH}whtgreen-bg.jpg) center bottom repeat; }
  .blgreen {  background:url({ASSETS_IMAGES_PATH}whtblue-bg.jpg) center top repeat; border:1px solid #5fa8c4; color:#494949; text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4); padding:4px 10px 2px 10px; //padding:1px 10px 0px 10px; //line-height:10px; font:normal 11px Verdana, Geneva, sans-serif;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer;}
  a.blgreen, a.whtgreen, a.whtblue, a.whtgray { text-decoration:none; display:inline-block; height:15px; }
  @-moz-document url-prefix() { button.blgreen { height:23px; padding:2px 10px 4px 10px;  } }
  a.whtgray, button.whtgray  { background:url({ASSETS_IMAGES_PATH}whtgray-bg.jpg) top center no-repeat; width:138px; height:18px; padding:7px 0 6px 0; text-align:center; font:bold 12px Verdana, Geneva, sans-serif; color:#3a3a3a; cursor:pointer; text-shadow: 0px 1px 0 rgba(255, 255, 255, 1); margin:0 10px 0 0;}
  a.whtgray:hover, button.whtgray:hover { background:url({ASSETS_IMAGES_PATH}whtgray-bg.jpg) center center no-repeat; }
  a.whtgray:active, button.whtgray:active { background:url({ASSETS_IMAGES_PATH}whtgray-bg.jpg) center bottom no-repeat; }
  button.whtgray { float:left; height:31px; padding:4px 0 6px 0;  }
  #mainindex button.blgreen { width:86px; float:left; margin:0 0 0 5px; padding-bottom:4px; }
  #mainindex a.whtgreen { float:left; margin:0 0 0 30px; }
  button:hover { cursor:pointer; }
  input[type=submit].whtgreen, button.whtgreen { padding:4px 10px; }
/*Блоки левой и правой части*/

данные стили заданы в файле стилей main.css. Найти необходимый блок можно по комментариям /*Контентная часть сайта*/ и /*Блоки левой и правой части*/

#48 Виолетта

Виолетта

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

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

Отправлено 22 Октябрь 2013 - 22:09

Спасибо за ответ. Да,пожалуй так и поступлю, а то они мне совсем не нравятся невыпуклые. Все вернула,но кнопка Оформить заказ так и осталась такой как на скриншоте. Сейчас уже и не знаю как вернуть ее обратно,столько всего наменяла. Подскажите как ее вернуть тоже в первоначальный вид?

#49 Сake

Сake

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

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

Отправлено 23 Октябрь 2013 - 02:40

Просто найдите и удалите в файле стилей main.css правило

.whtblue, input.paymentFormTbodySubmitButton[type="submit"] {
  background: #B2A7F4;
  border: 1px solid #6A6EAA !important;
  border-radius: 4px 4px 4px 4px;
  color: #2B2D3F;
  cursor: pointer;
  font: 12px Verdana,Geneva,sans-serif;
  height: 27px;
  outline: medium none;
  padding: 5px 15px;
}


#50 Виолетта

Виолетта

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

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

Отправлено 23 Октябрь 2013 - 21:29

Спасибо большое. Все супер!




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

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