Question

Здравствуйте! Как изменить вид блока приветствия пользователя?  Вот скриншот как у меня в настоящий момент:  http://mst-tv.ru/Scrinshoty/2019-05-12_08-10-34.png  хотелось бы сделать так, как увидел на одном из сайтов:  http://mst-tv.ru/Scrinshoty/2019-05-12_08-09-11.png  Имеется в виду именно сам вид и естественно как настроить вид цвета?  Благодарю!

Answer 1

Можно в стили прописать что-то подобное:

#sidebar .sidebox:nth-child(1) a { color: #fff; padding: 10px; border-radius:5px; background: #0b72d9; }

и получится похоже как на том сайте.

Comments

Номер строки в стилях где прописать имеет значение? Можете уточнить?

---

Shipilevsv,

Можно в 558-559

---

Yuri_Geruk,

Поставил ваш код в стилях на 558 строке и что то ничего не изменилось.... Что всё же делаю не так?

---

Shipilevsv,

Немного не точно, вставьте в 578-579. После кеш очистите в браузере и будет как нужно.

---

Yuri_Geruk,

поменялось. А теперь где оформить этот блок красиво? чтоб не так всё в куче...

---

Shipilevsv,

Что значит красиво, вам мало выделения ссылок в кнопки или нужно чтобы мигало и сверкало? Сейчас не в куче как вы выразились, сейчас раздель.

---

Yuri_Geruk,

Хотелось чтобы слова: Мой профили и Выход были кнопками и принаведении курсора становилась светлее только та часть на которую наводишь, но выглядели в виде одной кнопки слитно, а вот имя пользователя было не в виде кнопки,а в виде слова, но укропноённо поэтому и привёл в пример скрин с другого сайта... А мигать и сверкать это лишнее

---

Shipilevsv,

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

---

Shipilevsv,

Попробуйте в стили прописать:

#sidebar .sidebox:nth-child(1) a { cursor: pointer; margin: 0 0 1px -23px; padding: 9px 20px; background-color: #0b72d9; font-size: 1rem; line-height: 17px; color: #dae7f2; border: 0; border-radius: 7px; transition: all .3s; text-decoration: none; display: inline-block; }
#sidebar .sidebox:nth-child(1) a:hover{background-color:#0c7ff2}
#sidebar .sidebox:nth-child(1) a[rel="nofollow"]:nth-child(1) {background-color:transparent;color:inherit;padding:inherit;margin:inherit;line-height:inherit;}

вроде должно получиться.

---

Yuri_Geruk,

В целом получилось! Практически одинаково. Осталось только одно имя пользователя возможно пенести чуть ниже и сделать более крупнее по размеру и изменить цвет на тёмно-голубой?  Вы уж простите что Вам приходится со мной мучится, для меня коды это очень больная тема.

---

Shipilevsv,

Стили чуть поправьте заменив их на:

#sidebar .sidebox:nth-child(1) a {cursor: pointer;margin: 0 0 1px -23px;padding: 9px 20px;background-color: #0b72d9;font-size: 1rem;line-height: 17px;color: #dae7f2;border: 0;border-radius: 7px;transition: all .3s;text-decoration: none;}
#sidebar .sidebox:nth-child(1) a:hover{background-color:#0c7ff2}
#sidebar .sidebox:nth-child(1) a[rel="nofollow"]:nth-child(1) {background-color:transparent;color: #0b72d9;padding:inherit;margin:inherit;line-height:inherit;}

если что-то не понравится, настраивайте под себя как вам нужно.

---

Yuri_Geruk,

Получилось хорошо! Мне нравится!