- Uyumlu XF 2 Sürümleri
Resimde görmüş olduğunuz şekilde öneklerin tasarımını kullanmak isterseniz, temanızın extra.less şablonuna aşağıdaki kodları ekleyiniz.
Kod:
.greenprefix {
display: inline-block;
position:relative;
padding: .7em;
padding-left: 2em;
margin: 0 .5em .5em 0;
background: #8dc63f;
color: rgba(255,255,255,.6) !important;
text-decoration:none;
font-weight: bold;
}
.greenprefix:hover {
background:#B3CC73;
color:white;
}
.greenprefix:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:1;
background: -moz-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255, 255, 255, 0) .6em) -.6em -.6em,
-moz-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -o-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-o-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -ms-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-ms-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -webkit-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-webkit-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
}
.greenprefix:after {
content: '';
position:absolute;
top:.25em;
right:.25em;
bottom:.25em;
left:.25em;
border: 1px rgba(0,0,0,.3) dashed;
outline: 1px rgba(255,255,255,.5) dashed;
}
.redprefix {
display: inline-block;
position:relative;
padding: .7em;
padding-left: 2em;
margin: 0 .5em .5em 0;
background: #b30;
color: rgba(255,255,255,.6) !important;
text-decoration:none;
font-weight: bold;
}
.redprefix:hover {
background:#B3CC73;
color:white;
}
.redprefix:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:1;
background: -moz-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255, 255, 255, 0) .6em) -.6em -.6em,
-moz-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -o-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-o-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -ms-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-ms-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -webkit-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-webkit-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
}
.redprefix:after {
content: '';
position:absolute;
top:.25em;
right:.25em;
bottom:.25em;
left:.25em;
border: 1px rgba(0,0,0,.3) dashed;
outline: 1px rgba(255,255,255,.5) dashed;
}
.brownprefix {
display: inline-block;
position:relative;
padding: .7em;
padding-left: 2em;
margin: 0 .5em .5em 0;
background: #564C41;
color: rgba(255,255,255,.6) !important;
text-decoration:none;
font-weight: bold;
}
.brownprefix:hover {
background: #B3CC73;
color:white;
}
.brownprefix :before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:1;
background: -moz-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255, 255, 255, 0) .6em) -.6em -.6em,
-moz-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -o-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-o-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -ms-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-ms-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -webkit-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-webkit-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
}
.brownprefix :after {
content: '';
position:absolute;
top:.25em;
right:.25em;
bottom:.25em;
left:.25em;
border: 1px rgba(0,0,0,.3) dashed;
outline: 1px rgba(255,255,255,.5) dashed;
}
.blueprefix {
display: inline-block;
position:relative;
padding: .7em;
padding-left: 2em;
margin: 0 .5em .5em 0;
background: #55758D;
color: rgba(255,255,255,.6) !important;
text-decoration:none;
font-weight: bold;
}
.blueprefix:hover {
background:#B3CC73;
color:white;
}
.blueprefix:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:1;
background: -moz-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255, 255, 255, 0) .6em) -.6em -.6em,
-moz-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -o-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-o-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -ms-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-ms-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
background: -webkit-radial-gradient(.6em .6em, circle, #FCFCFF .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
-webkit-radial-gradient(1em 50%, circle, #FCFCFF .35em, rgba(255,255,255,0) .4em),
-webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em) !important;
}
.blueprefix:after {
content: '';
position:absolute;
top:.25em;
right:.25em;
bottom:.25em;
left:.25em;
border: 1px rgba(0,0,0,.3) dashed;
outline: 1px rgba(255,255,255,.5) dashed;
}Kaydedip çıkın. Daha sonra kullanmak istediğiniz prefix için Konu önekleri ekleme kısmından dilediğiniz rengi ekleyin.
Renk, yükseklik, genişlik gibi değerleri istediğinize göre değiştirip sitenizde kullanabilirsiniz.
