MrHaim Опубликовано 17 марта, 2023 Поделиться Опубликовано 17 марта, 2023 Hello. I had an idea to replace the first three places in widget with trophy icons. I tried several times and was successful in doing it only using CSS. 😉 How to do it? Add the following code to custom.css: /* First Place */ .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-first--background); font-family: FontAwesome; } /* Second Place */ .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-second--background); font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-third--background); font-family: FontAwesome; } Results: Donjuan и SlawkA 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
by_ix Опубликовано 17 марта, 2023 Поделиться Опубликовано 17 марта, 2023 этот раздел явно не для этого. SlawkA 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
aLEX49566 Опубликовано 17 марта, 2023 Поделиться Опубликовано 17 марта, 2023 MrHaim Хорошая работа. Но я предлагаю сделать так: Спойлер На мой взгляд это смотрится интереснее. А цвета работают на всех шаблонах. /*стиль для наград*/ /* First Place */ .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #ffd700; font-family: FontAwesome; } /* Second Place */ .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #c0c0c0; font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #cd7f32; font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(4) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(4) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #404040ba; font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(5) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(5) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: #404040ba; font-family: FontAwesome; } MrHaim 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
MrHaim Опубликовано 17 марта, 2023 Автор Поделиться Опубликовано 17 марта, 2023 Только что, aLEX49566 сказал: מר חייםעבודה טובה. אבל אני מציע לעשות את זה: הסתר תוכן לדעתי זה נראה יותר מעניין. וצבעים עובדים על כל התבניות. Definitely, much more beautiful and aesthetic. I will definitely use it. Thank you for sharing! aLEX49566 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.