X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Несколько лайфхаков для кастомизации тем WordPress
TimurR
TimurR
Topic Starter сообщение 14.12.2019, 20:26; Ответить: TimurR
Сообщение #1


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

Допустим, наша тема на главной странице выводит посты поверх превьюшек которых выводятся рубрики, как тут:
Tl-F-rz-IHgs-A.jpg

Мне кажется это выглядит слишком просто и скучно, я люблю разные цвета и хочу кастомизировать цвет фона каждой отдельной рубрики. Чтобы сделать это можно воспользоваться селекторами атрибута. Читать про этот тип селектора тут: 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;
}

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

1g5-Yqm-NPu-Yc.jpg


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


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

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

[mwhide=0]ONAg-D8w-F-o.jpg[/mwhide]

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

Nc-ZLq-Xv-Tgi-Q.jpg


С виджетами придется использовать псевдоэлементы :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;
}

C5-Ll-Iax-BNn-A.jpg

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

Сообщение отредактировал TimurR - 14.12.2019, 20:27
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FIvYur
FIvYur
сообщение 14.12.2019, 23:01; Ответить: FIvYur
Сообщение #2


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


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыСовфед предлагает замедлить YouTube для россиян
18 seostock 593 Вчера, 19:10
автор: Freedo
Открытая тема (нет новых ответов) Андроид приставка для телевизора
19 zyzy 719 Вчера, 10:19
автор: EvilGomel
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыGAMBLING.pro - СРА-сеть для профи
70 Gamblingpro 17827 5.5.2021, 12:56
автор: Gamblingpro
Открытая тема (нет новых ответов) Подскажите контекстные сети для монетизации трафика
Не Adsense и не РСЯ
5 Porsche 1071 5.5.2021, 1:16
автор: Ostromir
Горячая тема (нет новых ответов) Socialkit - Программа для продвижения аккаунтов Инстаграм
67 socialkit 11552 4.5.2021, 22:36
автор: socialkit


 



RSS Текстовая версия Сейчас: 7.5.2021, 2:12
Дизайн