In navolging van CSS snippet wat ik heb gemaakt van Shops met een Ster-rating <= 3 om daar wat CSS code aan toe te voegen, heb im een poging gedaan om het zelfde te doen voor V&A advertenties listings...
Eerdere post van mij van de Shopratings <=3 is deze
mindwarper in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
Ik heb dus een poging gedaan om iets soortgelijks voor V&A advertenties te doen met deze CSS code...
Heb hierbij een aantal keuzes gemaakt - en ik wilde vragen wat jullie ervan vinden - voordat ik mijn CSS public zet
- Heb gekozen voor oranje rood gevarendriehoek voor V&A users met een TWK ster rating <=3
- Een donker gouden gevarendriehoek voor users met nog geen rating
- Een gouden/gele gevarendriehoek voor V&A users met een rating >3 maar met minder dan 15 reviews
- Een groen vinkje voor V&A users met een rating >3 en met >=15 reviews
- Bounce effect voor alle genoemde icoontjes voor de V&A user name
Dan als men doorklikt op een advertentie dan heb ik dat in de
dl.adverteerder class proberen mee te nemen...
Ik heb het ook willen doortrekken naar de betreffende advertentiepagina zelf - maar daar is de beoordeling tussen haakjes in dd.beoordeling niet te selecteren met CSS - dus heb ik dat niet kunnen doen
Laatste paar plaatjes maken het duidelijk wat ik bedoel.
Welke kleurstellingen zouden jullie het liefste willen zien? Ik kan het graag aanpassen
Dan is hieronder de CSS code zoals ik die heb gemaakt - okay met hulp van Gemini
Link is hier:
Users met ≤3 V&A rating - Warning icon | met >3 V&A Rating - Good Checkmark -...
Hier een visuele weergave zoals ik het heb uitgewerkt
:strip_exif()/f/image/6qsXxqtgXf6loffYNxiavXzu.gif?f=fotoalbum_large)
Dan de advertentiepagina zelf ook meegenomen - maar kan dat alleen voor de V&A users doen met nog geen reviews en mensen met een slechte (lees <=3) review-score doen...
Ik kan zoals gezegd geen onderscheid maken tussen V&A users met >3 review-score met met minder dan 15 reviews en die met 15 of meer...
:strip_exif()/f/image/M9cHqutXCXi7lfb4AJDNJaKu.gif?f=fotoalbum_large)
:strip_exif()/f/image/7u62I5p7ugbTQ4BPAxxLGRhJ.gif?f=fotoalbum_large)
Kan iemand van Tweakers (Misschien @
DaFeliX ?) iets wijzigen in de HTML-code van
dl.adverteerder dd.beoordeling dat de tekst tussen haakjes die de review-aantal weergeeft een id of liefst een class kan krijgen (iets van review-total.number of nog anders)?
Dan kan er met CSS op geselecteerd worden - en dat is precies wat ik wil om dat te kunnen doen...
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
| /************************************************************
* TWEAKERS V&A RATING FLAGS
* Logic:
* Target the common parent (td.location or dl.adverteerder)
* to check the star rating, then style the child elements.
************************************************************/
/* ----------------------------------------------------------
0) Declare used warning symbols + styles
---------------------------------------------------------- */
.twk-dark {
/* V&A User Warning + CheckMark ICONS */
--twk-va-user-warn-icon-01: "\26A0\00A0"; /* ⚠ + NBSP */
--twk-va-user-good-icon-01: "\2714\00A0"; /* ✔ + NBSP */
/* Icon Colors */
--twk-va-user-zero-warn-icon-color: darkgoldenrod;
--twk-va-user-warn-icon-color: orangered;
--twk-va-user-caution-icon-color: gold;
--twk-va-user-okay-icon-color: #72AB7E;
--twk-va-user-good-icon-color: #64B307;
/* Animation Variables (2s standard, 2.2s for goldenrod) */
--twk-va-user-anim-01: icon-bounce 2s infinite ease-in-out;
--twk-va-user-anim-02: icon-bounce 2.2s infinite ease-in-out;
}
/* ----------------------------------------------------------
1A) ZERO-rating flag (= 0 stars)
Excludes 0 reviews. ONLY DARKGOLDENROD Warning.
---------------------------------------------------------- */
table.listing.valisting tr td.location:has(
twk-star-rating[title]:is([title*=" 0 " i]):is(
[data-score="0 / 5"]
)
) p.subtitle a[href*="https://tweakers.net/gallery/"]::before,
dl.adverteerder:has(
twk-star-rating:is(
[data-score="0 / 5"]
)
) dd a[href*="https://tweakers.net/gallery/"]::before
{
content: var(--twk-va-user-warn-icon-01);
font-size: 16px;
display: inline-block;
vertical-align: middle;
animation: var(--twk-va-user-anim-01);
font-weight: bold !important;
color: var(--twk-va-user-zero-warn-icon-color);
}
/* ----------------------------------------------------------
1B) Low-rating flag ( > 0 AND <= 3 stars)
Excludes 0 reviews. ONLY ORANGERED Warning.
---------------------------------------------------------- */
table.listing.valisting tr td.location:has(
twk-star-rating[title]:not([title*=" 0 " i]):is(
[data-score="0.5 / 5"],
[data-score="1 / 5"],
[data-score="1.5 / 5"],
[data-score="2 / 5"],
[data-score="2.5 / 5"],
[data-score="3 / 5"],
[data-score="3.0 / 5"]
)
) p.subtitle a[href*="https://tweakers.net/gallery/"]::before,
dl.adverteerder:has(
twk-star-rating:is(
[data-score="0.5 / 5"],
[data-score="1 / 5"],
[data-score="1.5 / 5"],
[data-score="2 / 5"],
[data-score="2.5 / 5"],
[data-score="3 / 5"],
[data-score="3.0 / 5"]
)
) dd a[href*="https://tweakers.net/gallery/"]::before
{
content: var(--twk-va-user-warn-icon-01);
font-size: 16px;
display: inline-block;
vertical-align: middle;
animation: var(--twk-va-user-anim-01);
font-weight: bold !important;
color: var(--twk-va-user-warn-icon-color);
}
/* ----------------------------------------------------------
2A) High-rating flag (> 3 stars) | 1-14 Reviews
Gold Caution
---------------------------------------------------------- */
table.listing.valisting tr td.location:has(
twk-star-rating[title]:is(
[title*=" 1 " i],
[title*=" 2 " i],
[title*=" 3 " i],
[title*=" 4 " i],
[title*=" 5 " i],
[title*=" 6 " i],
[title*=" 7 " i],
[title*=" 8 " i],
[title*=" 9 " i],
[title*=" 10 " i],
[title*=" 11 " i],
[title*=" 12 " i],
[title*=" 13 " i],
[title*=" 14 " i]
):is(
[data-score="3.5 / 5"],
[data-score="4 / 5"],
[data-score="4.5 / 5"],
[data-score="5 / 5"],
[data-score="5.0 / 5"]
)
) p.subtitle a[href*="https://tweakers.net/gallery/"]::before
{
content: var(--twk-va-user-warn-icon-01);
font-size: 16px;
display: inline-block;
vertical-align: middle;
animation: var(--twk-va-user-anim-02);
font-weight: normal !important;
color: var(--twk-va-user-caution-icon-color);
}
/* ----------------------------------------------------------
2B) High-rating flag (> 3 stars) | >= 15 Reviews
ONLY Darker Green Checkmark
---------------------------------------------------------- */
table.listing.valisting tr td.location:has(
twk-star-rating[title]:not(
[title*=" 0 " i],
[title*=" 1 " i],
[title*=" 2 " i],
[title*=" 3 " i],
[title*=" 4 " i],
[title*=" 5 " i],
[title*=" 6 " i],
[title*=" 7 " i],
[title*=" 8 " i],
[title*=" 9 " i],
[title*=" 10 " i],
[title*=" 11 " i],
[title*=" 12 " i],
[title*=" 13 " i],
[title*=" 14 " i]
):is(
[data-score="3.5 / 5"],
[data-score="4 / 5"],
[data-score="4.5 / 5"],
[data-score="5 / 5"],
[data-score="5.0 / 5"]
)
) p.subtitle a[href*="https://tweakers.net/gallery/"]::before
{
content: var(--twk-va-user-good-icon-01);
font-size: 16px;
display: inline-block;
vertical-align: middle;
animation: var(--twk-va-user-anim-01);
font-weight: bold !important;
color: var(--twk-va-user-good-icon-color);
}
/* ----------------------------------------------------------
3) Fix Layout
---------------------------------------------------------- */
table.listing.valisting tr td.location p.subtitle a[href*="https://tweakers.net/gallery/"]
{
display: inline-block;
vertical-align: top;
white-space: normal;
line-height: 1.25;
word-break: break-word;
}
table.listing.valisting tr td.location:not(.city) {
width: 125px !important;
}
/* Target the city/distance column */
table.listing.valisting tr td.location.city
{
width: 115px !important;
/* width: auto !important; */ /* Allows it to grow/shrink based on content */
/* white-space: nowrap; */ /* Prevents the city name from wrapping */
padding-left: 10px; /* Adds breathing room between username and city */
vertical-align: top;
white-space: normal;
line-height: 1.25;
word-break: break-word;
}
/* ----------------------------------------------------------
4) Functies Bounce
---------------------------------------------------------- */
@keyframes icon-bounce {
0% { transform: scale(1) translateY(0); }
25% { transform: scale(1.3) translateY(0px); }
50% { transform: scale(1) translateY(0); }
75% { transform: scale(1.3) translateY(0px); }
100% { transform: scale(1) translateY(0); }
} |
Enthoo Primo || Ryzen 9 5900X || Asus VIII Dark Hero || TridentZ Royal Silver F4-3600C14D-32GTRS Samsung B-Die || Radeon 6800 XT || Kraken X73 w/ 6x NF-A12x25 || 2x WD Black SN850 1TB || WD-HGST 6TB en 18TB || Seasonic Prime Titanium Ultra 1kW
:strip_icc():strip_exif()/u/821329/crop6817c75ef2272_cropped.jpg?f=community)
:strip_exif()/f/image/PD14OLw96gRQJAaFmKjHM40n.png?f=user_large)
/u/357174/crop5c25f523c3e3e_cropped.png?f=community)
:strip_icc():strip_exif()/u/92368/crop67f122a4021bc.jpg?f=community)
:strip_icc():strip_exif()/u/65843/chef60x60.jpg?f=community)
:strip_icc():strip_exif()/u/103745/crop6a36da7745f86_cropped.jpg?f=community)
/u/36698/avatar.png?f=community){kind=avatar}
/u/400/defember100.png?f=community)
:strip_exif()/f/image/l0n2gd5OFKV098Ds2cWU9M31.png?f=user_large)
/u/74211/crop5db297afbbd2b_cropped.png?f=community)
/u/121902/woosh.png?f=community)
/u/34186/crop62e07d174532d_cropped.png?f=community)
:strip_icc():strip_exif()/u/53213/crop56ee8579a466b.jpeg?f=community)
:strip_icc():strip_exif()/u/58227/crop6626a7982351d_cropped.jpg?f=community)
/u/25784/ResNot.GIF?f=community)
:strip_exif()/f/image/dDExFLg23qEbNU7ihBLLsEpz.png?f=user_large)
/u/405466/crop63a610bcef608_cropped.png?f=community)
:strip_exif()/u/18284/crop698b254cc1194.gif?f=community)
:strip_icc():strip_exif()/u/61340/125281113_256.jpg?f=community)
weet niet eens wat het oorspronkelijk was.:strip_icc():strip_exif()/u/301812/BioHazard_60x60.jpg?f=community)
:gifsicle():strip_exif()/f/image/C99wgMo3aEeVZXS5p3he8QKz.gif?f=user_large)
:gifsicle():strip_exif()/f/image/WvwFVkZbccFBjuQIGhu8JIHG.gif?f=user_large)
):strip_exif()/f/image/4S8HomqbhTiJlv4x9CwO304W.png?f=user_large)
:strip_exif()/f/image/Cz7uwKBsDUIQ2xItpdS4z37k.png?f=user_large)
/u/147751/avatar455992_1.gif.png?f=community){kind=avatar}
), maar op mijn profiel of op de FP lukt mij dat voor geen meter /u/125506/link-8bit.png?f=community)
:gifsicle():strip_exif()/f/image/6qsXxqtgXf6loffYNxiavXzu.gif?f=user_large)
:gifsicle():strip_exif()/f/image/M9cHqutXCXi7lfb4AJDNJaKu.gif?f=user_large)
:gifsicle():strip_exif()/f/image/7u62I5p7ugbTQ4BPAxxLGRhJ.gif?f=user_large)
