Техническая поддержка «WoT.pw» Среднее время ответа службы поддержки 3 дня, кроме выходных

Форум

ФорумПомогите настроить сайтВыделить кнопку цветом

_LLInuoH_
Отправлено 22.04.2016 - 21:08

Привет.

Подскажите как выделить только ОДНУ кнопку другим цветом, что б она сразу бросалась в глаза, на фоне других

Спойлер

Сколько не мучал, поменять могу цвет всех кнопок. Чего то не догоняю. Возможно ли это сделать с помощью CSS?

Сообщение отредактировал _LLInuoH_: 22.04.2016 21:09

Новобранец
SHPYRNY
Отправлено 22.04.2016 - 23:12
22.04.2016 - 21:08, _LLInuoH_ написал:

Привет.

Здравствуйте.

22.04.2016 - 21:08, _LLInuoH_ написал:

Подскажите как выделить только ОДНУ кнопку другим цветом, что б она сразу бросалась в глаза, на фоне других

Спойлер

Спойлер

nav.navigation ul.nav-menu li:nth-child(4) a {
background-color: #332E75;
color: #D21515;
}

nth-child(4) цыфра "4" означает порядковый номер. То есть если пункт меню "TeanSpeak 3 Conect" будет находиться 6-й всписке меню то в скобочках () указывать цыфру 6.

 

22.04.2016 - 21:08, _LLInuoH_ написал:

Сколько не мучал, поменять могу цвет всех кнопок. Чего то не догоняю. Возможно ли это сделать с помощью CSS?

Возможно почти все. 

Сообщение отредактировал SHPYRNY: 22.04.2016 23:13

Связь со мной:

TeamSpeak:  None                        Skype: Shpyrny

ВКонтакте: vk.com                       | Профиль WoT: SHPYRNY

Выходной:  Пятница  |  Суббота

Занимаюсь кастомизацией сайтов. По всем вопросами писать на аккаунты указыные выше.

_LLInuoH_
Отправлено 23.04.2016 - 09:55

Благодарю, получилось, но не совсем то что нужно. Сейчас объясню:

Фон кнопки изменился. Изменился текст, не только на самой кнопки, но и выпадающем меню. Но дело даже не в этом. При наведении курсора, кнопка перестала подсвечиваться и текст в выпадающем меню. Как это было до изменений.

Спойлер

Так же цвет текста поменялся в другом выпадающем меню. На кнопку Видео наведен курсор мышки и она подсвечивается согласно установленной теме

Спойлер

Он совпадает с порядковым номером 4. Видино по этой причине цвет был изменен. Но это было исправлено перенесением кнопки под другой порядковый номер, а за одно решил поменять не цвет фона кнопки а только текст

Спойлер

Теперь стало интересно как в выпадающем меню оставить старый цвет и подсвечивание текста при наведении курсора мышки? Мммм старый цвет можно не возвращать, а вот подсвечивание желательно

Сообщение отредактировал _LLInuoH_: 23.04.2016 09:59

Командующий
Enspire
Отправлено 23.04.2016 - 19:53

 

23.04.2016 - 09:55, _LLInuoH_ написал:

подсвечивание текста при наведении курсора мышки?

nav.navigation ul li ul li:hover {
   background-color: rgba(255, 255, 255, 0.2);
}

Заработать на клановом сайте с KeepOne.pro
Открыл блог о веб-дизайне: blog.wot.pw
Услуги веб-дизайнера: перейти

_LLInuoH_
Отправлено 23.04.2016 - 21:50

SHPYRNY и Enspire благодарствую вам, все получилось

Спойлер

 

 

Сообщение отредактировал _LLInuoH_: 23.04.2016 21:58

Командующий
vadimlyahov
Отправлено 10.09.2017 - 17:31

Добрый вечер всем,хотел бы узнать возможно ли изменить цвет кнопок Мой аккаунт и Выйти. Тема Empire.Если можно то дайте шаблон. За раннее спасибо 

Сообщение отредактировал vadimlyahov: 10.09.2017 19:30

Юзербар от WOT-O-Matic

 

Новобранец
SHPYRNY
Отправлено 11.09.2017 - 22:42
10.09.2017 - 17:31, vadimlyahov написал:

Добрый вечер всем,хотел бы узнать возможно ли изменить цвет кнопок Мой аккаунт и Выйти. Тема Empire.Если можно то дайте шаблон. За раннее спасибо 

Да можно: 

Спойлер

nav.navigation ul.nav-login a {
position:relative;
padding:11px 15px 11px 52px;
font-size:16px;
color:#eee;
border:solid 1px #000;
background:#1a1b1f;
text-decoration:none;
text-transform:uppercase;
font-family:'WarHeliosCondCBold';
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background-image:-webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image:-moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image:-o-linear-gradient(bottom, #1a1b1f, #212528);
background-image:-ms-linear-gradient(bottom, #1a1b1f, #212528);
background-image:linear-gradient(to top, #1a1b1f, #212528);
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.2);
box-shadow:0px 1px 3px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.2);
}

/*---------------------------------------------------------------------------
       При наведении.
---------------------------------------------------------------------------*/

nav.navigation ul.nav-login a:hover {
background-image:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}

Картинка рядом:

Спойлер

nav.navigation ul.nav-login a::before {
position:absolute;
left:-1px; top:-1px;
display:block;
font-size:18px;
color:#25C2F5;
height:100%;
border:solid 1px #000;
background:#1a1b1f;
text-decoration:none;
font-family:'FontAwesome';
line-height:41px;
-moz-border-radius-topleft:4px;
-webkit-border-top-left-radius:4px;
border-top-left-radius:4px;
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
background-image:-webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image:-moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image:-o-linear-gradient(bottom, #1a1b1f, #212528);
background-image:-ms-linear-gradient(bottom, #1a1b1f, #212528);
background-image:linear-gradient(to top, #1a1b1f, #212528);
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.2);
box-shadow:0px 1px 3px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.2);
}

 

Связь со мной:

TeamSpeak:  None                        Skype: Shpyrny

ВКонтакте: vk.com                       | Профиль WoT: SHPYRNY

Выходной:  Пятница  |  Суббота

Занимаюсь кастомизацией сайтов. По всем вопросами писать на аккаунты указыные выше.

Командующий
vadimlyahov
Отправлено 12.09.2017 - 16:40

SHPYRNY вроде всё поставил,а при навидении ни чего не меняется.Я так понял что там надо вставлять что то,где написано none,помоги плиз                                                               

Спойлер

/*---------------------------------------------------------------------------
       При наведении.
---------------------------------------------------------------------------*/

nav.navigation ul.nav-login a:hover {
background-image:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}

 

Юзербар от WOT-O-Matic

 

Новобранец
SHPYRNY
Отправлено 12.09.2017 - 22:13
12.09.2017 - 16:40, vadimlyahov написал:

SHPYRNY вроде всё поставил,а при навидении ни чего не меняется.Я так понял что там надо вставлять что то,где написано none,помоги плиз                                                               

Спойлер

/*---------------------------------------------------------------------------
       При наведении.
---------------------------------------------------------------------------*/

nav.navigation ul.nav-login a:hover {
background-image:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}

 

 

Ну да, "none " означает ничего, нет;

background-imag:none - изображение на заднем плане:нет;
box-shadow:none - тень-окна:нет;

Вам же нужно указать соответствующие цвета:

background-imag:#asfwq1;

Или же градиент как указан у Вас повсюду на кнопках:

background-imag:linear-gradient(to top, #ff00ff, #0000ff);
И соответсвенно тень:

box-shadow:0px 0px 10px rgba(5, 247, 46, 0.5), 0px 0px 1px 1px #ffff00 inset;

А вот Вам пример как нужно сделать Вам:

Спойлер

nav.navigation ul.nav-login a:hover {
      color: #00ff00;
      box-shadow: 0px 0px 10px rgba(9, 247, 5, 0.5), 0px 0px 1px 1px #ffff00 inset;
     -webkit-box-shadow: 0px 0px 10px rgba(5, 247, 46, 0.5), 0px 0px 1px 1px #ffff00 inset;
      background-image: linear-gradient(to top, #ff00ff, #0000ff);
}

P.S 
Сделал все как у Вас на всех кнопках.
Сообщение отредактировал SHPYRNY: 12.09.2017 22:20

Связь со мной:

TeamSpeak:  None                        Skype: Shpyrny

ВКонтакте: vk.com                       | Профиль WoT: SHPYRNY

Выходной:  Пятница  |  Суббота

Занимаюсь кастомизацией сайтов. По всем вопросами писать на аккаунты указыные выше.

Командующий
vadimlyahov
Отправлено 12.09.2017 - 22:24
12.09.2017 - 22:13, SHPYRNY написал:
12.09.2017 - 16:40, vadimlyahov написал:

SHPYRNY вроде всё поставил,а при навидении ни чего не меняется.Я так понял что там надо вставлять что то,где написано none,помоги плиз                                                               

Спойлер

/*---------------------------------------------------------------------------
       При наведении.
---------------------------------------------------------------------------*/

nav.navigation ul.nav-login a:hover {
background-image:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}

 

 

Ну да, "none " означает ничего, нет;

background-imag:none - изображение на заднем плане:нет;
box-shadow:none - тень-окна:нет;

Вам же нужно указать соответствующие цвета:

background-imag:#asfwq1;

Или же градиент как указан у Вас повсюду на кнопках:

background-imag:linear-gradient(to top, #ff00ff, #0000ff);
И соответсвенно тень:

box-shadow:0px 0px 10px rgba(5, 247, 46, 0.5), 0px 0px 1px 1px #ffff00 inset;

А вот Вам пример как нужно сделать Вам:

Спойлер

nav.navigation ul.nav-login a:hover {
      color: #00ff00;
      box-shadow: 0px 0px 10px rgba(9, 247, 5, 0.5), 0px 0px 1px 1px #ffff00 inset;
     -webkit-box-shadow: 0px 0px 10px rgba(5, 247, 46, 0.5), 0px 0px 1px 1px #ffff00 inset;
      background-image: linear-gradient(to top, #ff00ff, #0000ff);
}

P.S 
Сделал все как у Вас на всех кнопках.

О SHPYRNY спасибо тебе, то что надо 

Юзербар от WOT-O-Matic

 

Новобранец
SHPYRNY
Отправлено 12.09.2017 - 22:29
12.09.2017 - 22:24, vadimlyahov написал:
 

О SHPYRNY спасибо тебе, то что надо 

Всегда пожалуйста 

Сообщение отредактировал SHPYRNY: 12.09.2017 22:29

Связь со мной:

TeamSpeak:  None                        Skype: Shpyrny

ВКонтакте: vk.com                       | Профиль WoT: SHPYRNY

Выходной:  Пятница  |  Суббота

Занимаюсь кастомизацией сайтов. По всем вопросами писать на аккаунты указыные выше.

Пожалуйста, авторизируйтесь to post a message,