Jump to content

Featured Replies

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:

cup-icon.png.2e34d0187ffaad4b6e73f81c3f929359.png.bae12fbcf3bd34da09c55389ce2f6464.pngimage.png.632d7ee68fd7b39363386e7f67e85de0.png.6ae82e581c328d3039f0c0e53231bf9f.png

Link to comment
https://ipbmafia.ru/topic/25371-trophy-icons-on-widgets-tutorial/
Share on other sites

этот раздел явно не для этого. 

Link to comment
https://ipbmafia.ru/topic/25371-trophy-icons-on-widgets-tutorial/?&do=findComment&comment=191034
Share on other sites

MrHaim Хорошая работа. Но я предлагаю сделать так:

Спойлер

000.PNG.304eccbdaf87b1aaf0c73d8610744ada.PNG

На мой взгляд это смотрится интереснее. А цвета работают на всех шаблонах.

/*стиль для наград*/
/* 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;
}

 

Link to comment
https://ipbmafia.ru/topic/25371-trophy-icons-on-widgets-tutorial/?&do=findComment&comment=191043
Share on other sites
Только что, aLEX49566 сказал:

מר חייםעבודה טובה. אבל אני מציע לעשות את זה:

  הסתר תוכן

000.PNG.304eccbdaf87b1aaf0c73d8610744ada.PNG

לדעתי זה נראה יותר מעניין. וצבעים עובדים על כל התבניות.





 

Definitely, much more beautiful and aesthetic.  I will definitely use it.  Thank you for sharing!

Link to comment
https://ipbmafia.ru/topic/25371-trophy-icons-on-widgets-tutorial/?&do=findComment&comment=191044
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.