Jump to content
Sign in to follow this  
Alex51508

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

Recommended Posts

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

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

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

Share this post


Link to post
Share on other sites
#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

Share this post


Link to post
Share on other sites

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

#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'); <-------- менял

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

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

Edited by tim21701

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
#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; <--------- меняем (цвет при наведении мыши)
Edited by tim21701

Share this post


Link to post
Share on other sites

поменять фон 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;
}

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

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

Edited by tim21701

Share this post


Link to post
Share on other sites

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

/* 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

Share this post


Link to post
Share on other sites

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

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

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

#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

Share this post


Link to post
Share on other sites

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

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

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

Edited by tim21701

Share this post


Link to post
Share on other sites

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

предварительно заливаем картинку в ../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;
}
Edited by tim21701

Share this post


Link to post
Share on other sites

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

#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;
}
Edited by tim21701

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

#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

Share this post


Link to post
Share on other sites

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

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

Share this post


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

 

 
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

Share this post


Link to post
Share on other sites

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

 

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

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

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

 

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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

заменить 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

.product-filter .display a

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

.product-compare a 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.