Trophy icons on Widgets [Tutorial]

[MrHaim]

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:

[by_ix]

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

[aLEX49566]

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]

Только что, aLEX49566 сказал:

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

  הסתר תוכן

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

 

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