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


Цвета Шрифтов . Корзина. Поиск.


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

#1 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 10:01

Доброго дня! Очень боюсь что то напутать еще сильнее  ,  поэтому ни как не могу обойтись без вашей помощи , особенно когда дело касается отображения сайта на мобильных устройствах.

1 меню

меню на сайте отображается корректно , но в мобильных оно белое на белом
нужно в мобильных тоже изменить (по принципу каталога товаров) установить свой фон . :wub:

2 каталог товаров и меню, а так же кнопка подробне ,быстрый заказ ,оформить заказ

интересует пошаговая замена цвета в этих кнопках <_<

основной цвет #ffcc00
цвет дублер при наведении #da3b44

3 самый сложный вопрос на который я так и не нашла отклика, корзина и поиск возможно ли их оформить не однотонным серым цветом а своими картинками :blink:  
Безымянный.png

4 возможно ли в мобильной версии скрыть отображение меню в подвале ? :D

#2 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 04 Февраль 2014 - 10:02

Просмотр сообщениязлая я))) (04 Февраль 2014 - 10:01) писал:

Доброго дня! Очень боюсь что то напутать еще сильнее  ,  поэтому ни как не могу обойтись без вашей помощи , особенно когда дело касается отображения сайта на мобильных устройствах.

1 меню

меню на сайте отображается корректно , но в мобильных оно белое на белом
нужно в мобильных тоже изменить (по принципу каталога товаров) установить свой фон . :wub:

2 каталог товаров и меню, а так же кнопка подробне ,быстрый заказ ,оформить заказ

интересует пошаговая замена цвета в этих кнопках <_<

основной цвет #ffcc00
цвет дублер при наведении #da3b44

3 самый сложный вопрос на который я так и не нашла отклика, корзина и поиск возможно ли их оформить не однотонным серым цветом а своими картинками :blink:  


4 возможно ли в мобильной версии скрыть отображение меню в подвале ? :D

Здравствуйте, Пожалуйста указывайте номер аккаунта или адрес вашего сайта о котором идет речь.

#3 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 10:13

Аккаунт SL-140897, все время забываю что вы не экстрасенсы)))))))))) :D :lol:

#4 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 04 Февраль 2014 - 10:25

Просмотр сообщениязлая я))) (04 Февраль 2014 - 10:13) писал:

Аккаунт SL-140897, все время забываю что вы не экстрасенсы)))))))))) :D :lol:

1. Изменяем цвет ссылок в меню
Находим
@media only screen and (max-width:959px)
{
.container{width:710px;position: relative;}
.column,.columns{margin:0 10px}
.half{width:364px}
.one-third{width:220px}
.two-third{width:450px}
.hide-desktop{display:inline!important}
.hide-mobile{display:none!important}
#header-right {height: 100%;margin: 0;}
#megamenu{display:none!important}
#header_shopping_cart{margin-top:21px;}
#search_block_top{position: relative;float: right;margin: 16px 0px 0 0;clear: both;}
#category_view_type.list_view #product_list li{width:450px}
#left-column{width:100%}
#left-column #image-block{width:528px;margin:0 auto}
#left-column #image-block #small_pic{width:528px;height:auto}
#left-column #view_scroll_left,#left-column #view_scroll_right{width:69px}
#left-column #thumbs_list{width: 290px;}
#right-wrapper{width:100%;margin:30px 0 0 0}
table.autumn-table tr td:first-child {border: none;}
table.autumn-table tr td:last-child {border: none;}
ul.idTabs li{margin:0 0 -1px 0;display:block}
table.responsive,table.responsive thead,table.responsive tbody,table.responsive tfoot,table.responsive th,table.responsive tr,table.responsive td,table.std,table.std thead,table.std tbody,table.std tfoot,table.std th,table.std tr,table.std td{display:block}
.table_mobile_label{display:block}
table.responsive thead,table.std thead{display:none}
table.responsive tbody tr,table.std tbody tr{border-bottom:1px solid #e9e9e9}
table.responsive tr.odd,table.std tr.odd{background:#fafafa!important}
table.responsive td ,table.std td{border:none!important;position:relative;padding-left:50%}
table.responsive tfoot tr,table.std tfoot tr{padding:10px 0;border-bottom:1px solid #e9e9e9}
table.responsive tr td,table.std tr td{padding:5px!important;text-align: center !important;}
.cart-table .cart_quantity .cart_quantity_input {float: none;}
#order-opc h2 {font-size:10px;margin-bottom: 0;}
#order-opc h2 span{font-size: 10px;display: inline-block;color: #fff;background: #333;padding: 10px 11px;margin-right: 5px;border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;line-height: 10px;}
#step{margin:15px 0;padding-top:20px;padding-bottom: 20px;border-top:1px dashed #c0c0c0;border-bottom:1px dashed #c0c0c0}
#footer .block h4,#footer .block h4 a,#footer h4,#footer h4 a{font-size:16px;margin-bottom:20px}
#footer .newsletter_input{width:70%}
.sort_by{display: none;}
#category_view_changer {float: left;}
.sortPagiBar{padding-bottom:20px;height: 53px;}
.sortPagiBar .nbrItemPage {display: none;}
.accordion_main {display: block;}

}

В самый конец, перед } добавляем
.accordion a, .accordion_main a {
color: #000;
}

2. Цвет каталога товаров
Находим в style.css
.accordion a, .accordion_main a {
text-decoration: none;
border-bottom: 1px solid #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding: 8px 10px 8px 0;
display: block;
cursor: pointer;
color: #fffddf;
}

color: #fffddf; цвет

Цвет меню
Находим
#megamenu li .root_link {
color: #ffcc00;
text-transform: uppercase;
font-size: 12px;
text-decoration: none;
}

color: #ffcc00; цвет

Цвет меню при наведении
#megamenu li .root_link:hover, #megamenu li.active .root_link {
color: #da3b44;
}

Цвет кнопки подробнее
a.exclusive {
background: #505050 !important;
}

Цвет кнопки добавить в корзину и оформить заказ
.add_to_cart {
display: block;
background-color: #505050;
background-image: url('http://design.texstil-optom.ru/cart_white.png');
background-repeat: no-repeat;
background-position: 13px 50%;
color: #fff!important;
height: 35px;
padding: 0 16px 0 46px;
border: 1px solid #505050;
cursor: pointer;
font-weight: 700;
line-height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
}

background-color: #505050;  цвет фона
border: 1px solid #505050;  цвет границ
color: #fff!important;  цвет текста

Цвет кнопки добавить в корзину при наведении
.add_to_cart:hover {
background-color: #e6434c;
text-decoration: none;
}

Замена фона в корзине (выпадающая корзина)
Находим
#header #cart_block {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
top: 42px;
background: #fcfcfc;
width: auto;
}

background: #fcfcfc; заменить на фоновую картинку или другой цвет

Замена фона в основной части корзины
Находим
#header_shopping_cart {
position: static;
width: 170px;
float: right;
clear: both;
margin-top: 0px;
list-style: none;
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background: #f7f7f7 url('http://design.sensual-shop.ru/cart_red.png') no-repeat 12px;
border: 1px solid #cecece;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
}

background: #f7f7f7 url('http://design.sensua...ru/cart_red.png') no-repeat 12px; тут прописан цвет фона + красная иконка корзины

Цвет фона поиска
Находим
#search_block_top #search_query_top {
width: 180px;
vertical-align: middle !important;
border: 1px solid #cecece!important;
padding-right: 30px;
}

добавляем background: #fff; или картинку
border: 1px solid #cecece!important;  цвет рамки

Отключаем показ футера для экранов менее 767 px
Находим
@media only screen and (max-width:767px)
{

Ниже добавляем
#megamenu_bottom {display: none;}


#5 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 10:42

скажите а это правильный код для каталога чтоб изменить цвет при наведении ?
.accordion_main a .active .root_link {color:#da3b44}

#6 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 04 Февраль 2014 - 10:44

Просмотр сообщениязлая я))) (04 Февраль 2014 - 10:42) писал:

скажите а это правильный код для каталога чтоб изменить цвет при наведении ?
.accordion_main a .active .root_link {color:#da3b44}

Для изменения пунктов меню при наведении добавьте в любое удобное место
.accordion a:hover, .accordion_main a:hover {color:fff;}


#7 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 10:45

Просмотр сообщенияCastiel (04 Февраль 2014 - 10:25) писал:

Цвет кнопки подробнее
a.exclusive {
background: #505050 !important;
}

Цвет кнопки добавить в корзину и оформить заказ
.add_to_cart {
display: block;
background-color: #505050;
background-image: url('http://design.texsti.../cart_white.png');
background-repeat: no-repeat;
background-position: 13px 50%;
color: #fff!important;
height: 35px;
padding: 0 16px 0 46px;
border: 1px solid #505050;
cursor: pointer;
font-weight: 700;
line-height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
}

background-color: #505050;  цвет фона
border: 1px solid #505050;  цвет границ
color: #fff!important;  цвет текста

Цвет кнопки добавить в корзину при наведении
.add_to_cart:hover {
background-color: #e6434c;
text-decoration: none;
}

#megamenu_bottom {display: none;}[/CODE]
извините я наверное не правильно написала нужно поменять только цвет текста , на серой кнопке желтый текст при наведении становится розовым только текст

#8 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 04 Февраль 2014 - 10:46

Просмотр сообщениязлая я))) (04 Февраль 2014 - 10:45) писал:

извините я наверное не правильно написала нужно поменять только цвет текста , на серой кнопке желтый текст при наведении становится розовым только текст

color: #fff!important;

вам необходимо изменить цвета на нужные

Цвет кнопки добавить в корзину при наведении
.add_to_cart:hover {
background-color: #e6434c;
text-decoration: none;
color: #fff;
}


#9 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 11:22

наверное я вообще бум бум...

этот код тоже меняет цвет самой кнопки а не текста

#10 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 11:28

Безымянный.png и еще у меня сам каталог и тело сайта как бы сдвинуто влево подскажите пожалуйста как поставить вот так как на скрине

#11 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 11:38

думаю что кнопки вобще можно и не трогать как считаете? ведь есть уже акцент на меню и каталоге .,единственное что беспокоит это корзина и поиск вставить бы туда свои картинки и думаю они тогда не смотрелись бы как бельмо

#12 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 04 Февраль 2014 - 12:03

Просмотр сообщениязлая я))) (04 Февраль 2014 - 11:38) писал:

думаю что кнопки вобще можно и не трогать как считаете? ведь есть уже акцент на меню и каталоге .,единственное что беспокоит это корзина и поиск вставить бы туда свои картинки и думаю они тогда не смотрелись бы как бельмо

Рекомендую вам изменить логотип (оставить только название+слоган остальное убрать и сделать это все на прозрачном фоне.) так как он налезает на основное меню.

#13 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 12:04

очень актуальны эти вопросы
3 самый сложный вопрос на который я так и не нашла отклика, корзина и поиск возможно ли их оформить не однотонным серым цветом а своими картинками :blink:  
Изображение

4 возможно ли в мобильной версии скрыть отображение меню в подвале ? :D

#14 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 04 Февраль 2014 - 12:36

Просмотр сообщениязлая я))) (04 Февраль 2014 - 12:04) писал:

очень актуальны эти вопросы
3 самый сложный вопрос на который я так и не нашла отклика, корзина и поиск возможно ли их оформить не однотонным серым цветом а своими картинками :blink:  
Изображение

4 возможно ли в мобильной версии скрыть отображение меню в подвале ? :D

Ответы даны в первом сообщении.

Цитата

Замена фона в корзине (выпадающая корзина)
Находим
#header #cart_block {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
top: 42px;
background: #fcfcfc;
width: auto;
}

background: #fcfcfc; заменить на фоновую картинку или другой цвет

Замена фона в основной части корзины
Находим
#header_shopping_cart {
position: static;
width: 170px;
float: right;
clear: both;
margin-top: 0px;
list-style: none;
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background: #f7f7f7 url('http://design.sensual-shop.ru/cart_red.png') no-repeat 12px;
border: 1px solid #cecece;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
}

background: #f7f7f7 url('http://design.sensua...ru/cart_red.png') no-repeat 12px; тут прописан цвет фона + красная иконка корзины

Цвет фона поиска
Находим
#search_block_top #search_query_top {
width: 180px;
vertical-align: middle !important;
border: 1px solid #cecece!important;
padding-right: 30px;
}

добавляем background: #fff; или картинку
border: 1px solid #cecece!important;  цвет рамки

Отключаем показ футера для экранов менее 767 px
Находим
@media only screen and (max-width:767px)
{

Ниже добавляем
#megamenu_bottom {display: none;}


#15 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 15:02

с корзиной разабралась а вот с поиском и как подвинуть каталог ну не в какую

#16 Alexey11

Alexey11

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

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 04 Февраль 2014 - 15:27

Просмотр сообщениязлая я))) (04 Февраль 2014 - 15:02) писал:

с корзиной разабралась а вот с поиском и как подвинуть каталог ну не в какую
Здравствуйте, приложите пожалуйста скриншот, куда вы хотите подвинуть каталог.

#17 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 15:34

Просмотр сообщенияAlexey11 (04 Февраль 2014 - 15:27) писал:

Здравствуйте, приложите пожалуйста скриншот, куда вы хотите подвинуть каталог.
отправляла уже
Безымянный.png

#18 @lina_va

@lina_va

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

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

Отправлено 04 Февраль 2014 - 16:41

Просмотр сообщениязлая я))) (04 Февраль 2014 - 15:34) писал:

отправляла уже
добрый день
в main.css найдите блок:
.block2 {
margin-bottom: 20px;
background: #fff;
border-left: 0px solid #efefef;
border-right: 0px solid #efefef;
float: left;
position: relative;
width: 210px;
}
добавьте:
margin-left: -40px;
в этом же блоке Вы можете изменить ширину Каталога

#19 мистка

мистка

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

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

Отправлено 04 Февраль 2014 - 17:25

ЕЩЕ ПОЖАЛУЙСТА ПОМОГИТЕ КАТАЛОГ В КОМПЕ ВЫНГЛЯДИТ НОРМАЛЬНО А НА ТЕЛЕФОНЕ ШРИФТ ЧЕРНЫЙ НЕ МОГУ НАЙТИ ГДЕ МЕНЯТЬ

Просмотр сообщения@lina_va (04 Февраль 2014 - 16:41) писал:

добрый день
в main.css найдите блок:
.block2 {
margin-bottom: 20px;
background: #fff;
border-left: 0px solid #efefef;
border-right: 0px solid #efefef;
float: left;
position: relative;
width: 210px;
}
добавьте:
margin-left: -40px;
в этом же блоке Вы можете изменить ширину Каталога
rfr yt cn   НЕ НАШЛА ТАКОЙ КОД КАК НЕ СТАРАЛАСЬ

#20 @lina_va

@lina_va

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

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

Отправлено 04 Февраль 2014 - 17:26

Просмотр сообщениязлая я))) (04 Февраль 2014 - 17:25) писал:

ЕЩЕ ПОЖАЛУЙСТА ПОМОГИТЕ КАТАЛОГ В КОМПЕ ВЫНГЛЯДИТ НОРМАЛЬНО А НА ТЕЛЕФОНЕ ШРИФТ ЧЕРНЫЙ НЕ МОГУ НАЙТИ ГДЕ МЕНЯТЬ


rfr yt cn   НЕ НАШЛА ТАКОЙ КОД КАК НЕ СТАРАЛАСЬ
В style.css найдите:
@media only screen and (max-width: 959px)
после него удалите код:
.accordion a, .accordion_main a {
color: #000;
}





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

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