[X] Помощник

[TimurR Topic Starter]

Частенько готовый шаблон не отвечает моим требованиям касаемо внешки. Хочется прикручивать иконки, выделять цветом определенные элементы меню и т.д. В простых шаблонах такая функциональность редкость, но зато они поддерживают возможность вставлять кастомный CSS код, а этого в 90% случаев достаточно.

Допустим, наша тема на главной странице выводит посты поверх превьюшек которых выводятся рубрики, как тут:


Мне кажется это выглядит слишком просто и скучно, я люблю разные цвета и хочу кастомизировать цвет фона каждой отдельной рубрики. Чтобы сделать это можно воспользоваться селекторами атрибута. Читать про этот тип селектора тут: http://htmlbook.ru/samcss/selektory-atributov

Вкратце мы обращаемся в CSS к элементу не по его классу или идентифкатору, а по определенному атрибуту и его значение. В моем случае это обычная <a> ссылка, а атрибут это href="http://site.ru/category-name". Конкретно в моем случае у этой ссылки есть еще родительский блок div.entry-category поэтому я обращаюсь к элементу по такой конструкции:

div.entry-category>a[href="https://site.ru/category/trends"] {
	background: #FF4500;
}
div.entry-category>a[href="https://site.ru/category/games"] {
	background: #EE7700;
}

получаем такой результат:




и так можно применить определенные стили к каждому отдельно взятому элементу. Например, можно выделить элемент в меню.


Добавить иконки FA в кастомном меню или к заголовкам виджетов можно также без плагинов. Просто подключаете FA и в конструкторе меню прописываете код нужной иконки прямо в заголовке каждого элемента меню. Более того там же используя атрибут style можно задать стили для иконки:

<i class="fab fa-android" style="color: green;"></i>  

[mwhide=0][/mwhide]

Результат получается такой




С виджетами придется использовать псевдоэлементы :before и/или :after, то есть до или после элемента. Для этого просто находите и обращаетесь через айди родительского элемента к заголовку виджета и прописываете такой код в CSS: 

#revenue_pro-views-4>.widget-title:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f518";
    color: red;
    padding-right: 5px;
}

Перед любыми махинациями делайте резервную копию. 

Сообщение отредактировал TimurR - 14.12.2019, 20:27

[FIvYur]

Я тоже кстати стандартные элементы уникализирую если в этом нужна, либо что бы еще было интереснее. Но тут главное не переборщить :D

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.