03-30-2014, 09:16 AM
1. Temalar&Şablonlar > Şablonlar > 1. Ana Sayfa Şablonlar > İndex
Grip İstediğimiz Yere Ekliyoruz.
2. Temalar&Şablonlar > Temalar > Global.css
Gir En alta Ekle
Alıntıdır MDP'den ßyßurak.
Grip İstediğimiz Yere Ekliyoruz.
Kod:
<a class="button teach-me">
<span class="item">Duyuru 1 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry"> Eylük 10, 2013</span>
<span class="meta cost">30₺</span>
<i class="chevron"></i>
</a>
<a class="button">
<span class="item">Duyuru 2 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">40₺</span>
<i class="chevron"></i>
</a>
<a class="button handyman">
<span class="item">Duyuru 3 Satış </span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">15₺</span>
<i class="chevron"></i>
</a>
<a class="button pick-up-delivery">
<span class="item">Duyuru 4 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">30₺</span>
<i class="chevron"></i>
</a>
<a class="button">
<span class="item">Duyuru 5 Satış </span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">10₺</span>
<i class="chevron"></i>
</a>
<a class="button">
<span class="item">Duyuru 6 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">30₺</span>
<i class="chevron"></i>
</a>
<a class="button teach-me">
<span class="item">Duyuru 7 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">30₺</span>
<i class="chevron"></i>
</a>2. Temalar&Şablonlar > Temalar > Global.css
Gir En alta Ekle
Kod:
/*
* re: https://twitter.com/CodePen/status/355107665099231232
*
* this version uses <i> for the icons; this is the first time i've constructed icons out of pure css using pseudo elements (MUCH more on that here: http://css-tricks.com/pseudo-element-roundup/ )
*
* next version(s) might substitute the <i>s with @fontface & unicode range; i'd like to also try to get more semantic with this (though i think this is pretty semantic to start with... no? maybe not); i'd also like to get this modernizr'd and compatible way back to ie version who-knows-what
*
* feel free to hit me up w/criticisms @ jeremy.buller@gmail.com
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
.button {
display: block;
position: relative;
padding: .75em 5em .75em 1em;
border-radius: .25em;
margin-bottom: .5em;
background: #fff;
box-shadow:
/* regular bottom */
0 .0625em .125em rgba(0, 0, 0, .125),
/* inset bottom */
inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
/* category color (left) */
inset 1em 0 0 -.7em rgba(200, 0, 120, .5),
/* arrow background (right) */
inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}
.button:hover {
text-decoration: none;
}
.teach-me {
box-shadow:
0 .0625em .125em rgba(0, 0, 0, .125),
inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
inset 1em 0 0 -.7em rgba(0, 95, 210, .5),
inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}
.handyman {
box-shadow:
0 .0625em .125em rgba(0, 0, 0, .125),
inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
inset 1em 0 0 -.7em rgba(20, 160, 0, .5),
inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}
.pick-up-delivery {
box-shadow:
0 .0625em .125em rgba(0, 0, 0, .125),
inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
inset 1em 0 0 -.7em rgba(210, 15, 0, .5),
inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}
.item {
font-weight: bold;
color: #000;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item:after {
content: '';
display: block;
height: 0;
width: 100%;
}
.meta {
margin-left: .25em;
}
.category,
.expiry,
i {
font-size: 9px;
line-height: 2; /* 16 "px" */
}
.expiry {
font-weight: bold;
}
.expiry:before {
content: 'Tarih: ';
font-weight: normal;
}
.cost {
position: absolute;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 2em;
right: 1.125em;
top: 0;
line-height: 2.083; /* 50 "px", should be same as button height */
}
.clock {
display: inline-block;
position: relative;
width: 1.333em;
height: 1.333em;
margin-left: .333em;
border: .25em solid #95979d;
border-radius: 50%;
vertical-align: middle;
}
.clock:before,
.clock:after {
content: '';
display: block;
position: absolute;
width: .125em;
height: .25em;
background: #95979d;
}
.clock:before {
left: 50%;
bottom: 47%;
margin-left: -.0625em;
}
.clock:after {
transform: rotate( 135deg );
left: 63%;
top: 47%;
}
.chevron {
display: block;
width: 1em;
height: 1em;
font-size: .75em;
position: absolute;
right: .667em;
top: 50%;
margin-top: -.6em; /* just eyeballing it */
}
.chevron:before,
.chevron:after {
content: '';
display: block;
position: absolute;
background: rgba(0, 0, 0, .125);
width: .5em;
height: .5em;
right: .25em;
top: 50%;
}
.chevron:before {
transform: skewX( 45deg );
top: 0;
box-shadow: inset -.125em .125em .125em rgba(0, 0, 0, .25);
}
.chevron:after {
transform: skewX( -45deg );
bottom: 0;
box-shadow: inset .25em .125em .125em -.125em rgba(0, 0, 0, .25);
}Alıntıdır MDP'den ßyßurak.
Okyanusta batan gemidir yalnızlık,
Çok derinlerdedir gücün yetmez onu oradan çıkarmaya.
Kaybolup gider daha sonra.
Kendi kendine konuşmaktır yalnızlık...
Belkide en iyi tarafıdır bu
Kendini sorgularsın, bir kez olsun çekersin köşeye nefsini hayatı anlamaya çalışırsın.
Çok derinlerdedir gücün yetmez onu oradan çıkarmaya.
Kaybolup gider daha sonra.
Kendi kendine konuşmaktır yalnızlık...
Belkide en iyi tarafıdır bu
Kendini sorgularsın, bir kez olsun çekersin köşeye nefsini hayatı anlamaya çalışırsın.
