Question

По умолчанию теги к новостям выглядят просто набором ссылок через запятую и ничем не выделяются. Можно ли как-то изменить цвет, размер, сделать фон и тд? То есть чтобы они вывглядели ярче и заметнее.

Answer 1

Прочтите материал https://yraaa.ru/scripts/stilizaciya-tegov-s-pomoshchyu-css там есть пример решения вашего вопроса.

Comments

До того как задать вопрос, я искал ответ в сети и ваша ссылка была одной из первых. Но этот код не работает, все разъезжается.

---

Paranormal,

Ссылку на пример предоставьте где можно увидеть проблему с данным оформлением тегов.

---

Оставлю всего на 5 минут, потом уберу. этот код реально кривой. http://paranormal-news.ru/news/strannyj_sonnyj_paralich_ili_astralnoe_puteshestvie/2019-03-19-15550

---

Paranormal,

Вот эти стили поправьте:

 

стили

.eTag {
 margin: 0 0 7px 20px;
 position:relative;
 font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-size:0.75em;
 font-weight:bold;
 text-decoration:none;
 color:#996633;
 text-shadow:0px 1px 0px rgba(255,255,255,.4);
 padding:0.417em 0.417em 0.417em 0.917em;
 border-top:1px solid #d99d38;
 border-right:1px solid #d99d38;
 border-bottom:1px solid #d99d38;
 -webkit-border-radius:0 0.25em 0.25em 0;
 -moz-border-radius:0 0.25em 0.25em 0;
 border-radius:0 0.25em 0.25em 0;
 background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
 background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
 background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
 background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
 background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
 -webkit-box-shadow:inset 0 1px 0 #faeaba,
 0 1px 1px rgba(0,0,0,.1);
 -moz-box-shadow:
 inset 0 1px 0 #faeaba,
 0 1px 1px rgba(0,0,0,.1);
 box-shadow:
 inset 0 1px 0 #faeaba,
 0 1px 1px rgba(0,0,0,.1);
}
.eTag:before {
 content:'';
 width:1.30em;
 height:1.358em;
 background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
 background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
 background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
 background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
 background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71',
EndColorStr='#feba47');
 position:absolute;
 left: -0.80em;
 top:.2em;
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 -o-transform:rotate(45deg);
 transform:rotate(45deg);
 border-left:1px solid #d99d38;
 border-bottom:1px solid #d99d38;
 -webkit-border-radius:0 0 0 0.25em;
 -moz-border-radius:0 0 0 0.25em;
 border-radius:0 0 0 0.25em;
 z-index:1;
}

у вас они немного некорректные, замените на мои с спойлера. После все выровняется http://joxi.ru/L216LK8C8eYeJA После изменений не забудьте кеш очистить в браузере.

---

Спасибо! Сейчас куда лучше. Но немного все-таки не стыкуется.

---

Paranormal,

Поиграйтесь с значением left: -0.80em; попробуйте сделать вместо 80 например 75

---

Спасибо! Сейчас все встало нормально.