Перейти к содержанию
Alex51508

[РЕШЕНО] Как поменять цвет нисходящего меню

Рекомендуемые сообщения

Доброго времени суток.

У меня встала проблема как поменять цвет нисходящего меню (см вложение).  Как называется класс этого меню. Никак не могу его наити в стилях.

post-670721-0-98706100-1374916664_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png'); <-----Цвет фона выпадающего списка подкатегорий картинкой
}

можно поменять на код цвета в формате  #....

  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

что-то не удалось поменять цвет(

#menu > ul > li > div {
display: none;
background: #FFFFFF; <------ менял
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000; <-- менял
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png'); <-------- менял

все оставалось по дефолту

понять бы в какую сторону копать

Изменено пользователем tim21701

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

разобрался, во всем был виноват кэш браузера

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
#menu > ul > li > div {
display: none;
background: #FFFFFF; 
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000; 
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png'); <-------- меняем цвет картинки

дальше находим

#menu > ul > li ul > li > a:hover {
background: #000000; <--------- меняем (цвет при наведении мыши)
Изменено пользователем tim21701

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

поменять фон footer (подвала)

находим:

/* footer */
#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8; <-------- меняем цвет фона на свой
}

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

-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;

получилось:

/* footer */
#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}

для изменения цвета букаф в футере находим

#footer h3 {
color: #000000; <-------- меняем цвет на свой
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}

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

если что по вашему надо поправить пишите

Изменено пользователем tim21701

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

меняем цвет рамки меню в хедере

/* menu */
#menu {
background: #585858;
border-bottom: 1px solid #000000; <-------- меняем цвет рамки меню
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}

теперь нужно понять как поменять цвет рамки выпадающего меню

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

это радует, что стремитесь понять и разобраться самостоятельно... В добрый путь!  :-)

только обрамляйте код в тэг...в текстовом менеджере - две синенькие стрелочки)))

например так: 

#menu > ul > li > div {
display: none;
background: #FFFFFF; <----Тут заливка выпадающего меню
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000; <------- Тут меняем цвет рамки выпадающего меню
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: #5D91BC;
}
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо за добрые слова) и буду стараться выделять)
 
меняем цвет фона сайта
находим

body {
background-color: #ffffff; <-------- меняем цвет на свой
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

рамку выпадающего меню не менял, как поменяю отпишусь в этой теме

Изменено пользователем tim21701

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ставим картинку в качестве фона сайта

предварительно заливаем картинку в ../catalog/view/theme/default/image/

 

находим

body {
background-color: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
заменяем
background-color: #ffffff;

на background:

url('../image/fly.jpg');

получаем:

body {
background: url('../image/fly.jpg'); <-------- меняем на свою картинку
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
Изменено пользователем tim21701

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Меняем цвет фона активного пункта меню в хедере (кликнули стал активным)

#menu > ul > li > a.active {
background: #000; <-- меняем цвет на свой

}

Добавляем закругления углов

#menu > ul > li > a.active {
background: #000;
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
Изменено пользователем tim21701

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Здравствуйте! Подскажите, пожалуйста,КАК поменять в дефолтной теме ЦВЕТ главного меню категорий на фиолетовый (оно темно-серого цвета)...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

#menu {

background: #585858;<----Тут фон меню навигации (поменять например на #B424EC - станет фиолетовым)

border-bottom: 1px solid #000000;

height: 37px;

margin-bottom: 15px;

-webkit-border-radius: 5px 5px 5px 5px;

-moz-border-radius: 5px 5px 5px 5px;

-khtml-border-radius: 5px 5px 5px 5px;

border-radius: 5px 5px 5px 5px;

-webkit-box-shadow: 0px 2px 2px #DDDDDD;

-moz-box-shadow: 0px 2px 2px #DDDDDD;

box-shadow: 0px 2px 2px #DDDDDD;

padding: 0px 5px;

}

  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Cпасибо огромное!!!!!

Ещё вопрос : как в дефолтной теме в самой шапке (Войти, Зарегистрироваться;Главная,Закладки, Корзина покупок, Оформить заказ) СМЕНИТЬ шрифт и цвет- где что менять нужно? И картинку корзинки поменять как? Было бы неплохо ещё контакт там прописать- но это уже наверное высший пилотаж для чайника)))

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Ещё вопрос : как в дефолтной теме в самой шапке (Войти, Зарегистрироваться;Главная,Закладки, Корзина покупок, Оформить заказ) СМЕНИТЬ шрифт и цвет- где что менять нужно?

 

 
1. Войти, Зарегистрироваться
вставляем в css: 
#header #welcome a{
color: #CCCCCC; <-- Цвет ссылок
font-family: Verdana; <-- семейство шрифта
font-size: 12px; <-- размер шрифта
font-weight: normal; <-- насыщенность шрифта
}

2.Главная,Закладки, Корзина покупок, Оформить заказ

 

ищем в стилях

#header .links a {    
    float: left;
    display: block;
    padding: 0px 0px 0px 7px;
    color: #38B0E3;
    text-decoration: none;
    font-size: 12px;
}

по аналогии с первым (при необходимости добавить font-family)

 

И картинку корзинки поменять как? 

 

 

смотря какой релиз, в 1.5.4.1 ее например нет, так что менять нечего, но добавить можно так

меняем 

#header #cart .heading a span {
     background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;
     padding-right: 15px;
}

на

#header #cart .heading a span {
padding-top: 10px;
background: url('../image/cart.png') no-repeat; <---cart.png -картинка корзины
padding-left: 50px;
padding-bottom: 15px;

}

пример тут http://davbuilding.ru/

 

Было бы неплохо ещё контакт там прописать- но это уже наверное высший пилотаж для чайника)))

 

https://opencartforum.com/topic/22757-vyvod-kontaktov-v-shapku-saita/?do=findComment&comment=187429

 

либо вводом в header.tpl простого HTML -кода с применением стилей для позиционирования 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо, Pascha!!! всё получилось!

 

Подскажите ещё : 1) как убрать пункты меню самого верхнего "закладки(0)" и "корзина покупок" , оставить только Главная и Оформление заказа. Корзина есть в правом верхнем углу, поэтому пункт меню " корзина покупок" не нужен; 

2) как перенести "Войти и Зарегистрироваться" в правый угол;

 3) как убрать Строчку Поиск???

 

:eek:  :geek: Очень благодарны вам!!! Процветания вам, добрые люди!!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

1) как убрать пункты меню самого верхнего "закладки(0)" и "корзина покупок" , оставить только Главная и Оформление заказа. 

 <div class="links">

<a href="<?php echo $home; ?>"><?php echo $text_home; ?></a>

<a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a>

<a href="<?php echo $account; ?>"><?php echo $text_account; ?></a>

<a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a>

<a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a>

</div>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

2) как перенести "Войти и Зарегистрироваться" в правый угол;

#header #welcome {
position: absolute;
top: 7px;
left: 7px; <--- поменять тут на right:...
z-index: 5;
width: 298px;
text-align: left;
color: #999999;
}

далее отпозиционировать как надо

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

не совсем понятно что именно требуется
 

3) как убрать Строчку Поиск???

если убрать сам поиск :закоментировать так
 

<!-- <div id="search">
    <div class="button-search"></div>
    <?php if ($filter_name) { ?>
    <input type="text" name="filter_name" value="<?php echo $filter_name; ?>" />
    <?php } else { ?>
    <input type="text" name="filter_name" value="<?php echo $text_search; ?>" onClick="this.value = '';" onKeyDown="this.style.color = '#000000';" />
    <?php } ?>
  </div> -->

если убрать слово "поиск" то

 

<div id="search">
    <div class="button-search"></div>
    <?php if ($filter_name) { ?>
    <input type="text" name="filter_name" value="<?php echo $filter_name; ?>" />
    <?php } else { ?>
    <input type="text" name="filter_name" value="<?php echo $text_search; ?>" onClick="this.value = '';" onKeyDown="this.style.color = '#000000';" />
    <?php } ?>
  </div>

 

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Как заменить "войти или зарегистрироваться" на изображения?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

заменить 

<div id="welcome">
    <?php if (!$logged) { ?>
    <?php echo $text_welcome; ?>
    <?php } else { ?>
    <?php echo $text_logged; ?>
    <?php } ?>
  </div>

на

<div id="welcome">
<a href="./index.php?route=account/login"><img src="картинка для пункта Войти" alt="Войти" /></a>
 <a href="./index.php?route=account/register"><img src="картинка для пункта Pегистрация" alt="Регистрация" /></a> 
  </div>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вопрос в тему по изменению цвета:
в карточке товара? как поменять цвет   список/сетка  сравнение товара(0) ?  я уже весь stylesheet просмотрела, какие строчки отвечают за это, помогите, пожалуйста

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

как поменять цвет   список/сетка

.product-filter .display a

как поменять цвет сравнение товара(0)

.product-compare a 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.