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,

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

---

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,

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