Szablon z soup.io
Dostałem kilka zapytan o mój szablon z soup.io – ze względu na to, że moje ustawienia są dość specyficzne. Poniżej do ściągnięcia CSS i ustawienia kolorów. Jak to się robi? Bardzo prosto…
#headercontainer2, ul.actionbar, #barcontainer, #endless_error, #reaction-iframe-container {
display: none;
}
#posts .post_regular.twitter .content .body {
background: none;
font-family: Arial,Helvetica,sans-serif;
color: white;
border: 0px;
}
#posts .jaiku .content .body a, #posts .post_regular.twitter .content .body a {
border: 0px;
color: white;
}
div.extra {
display: none;
}
#posts {
padding-top: 0px;
margin-top:0px;
}
#more_history {
margin: 0px;
padding: 0px;
}
h2.date * {
font-family: Georgia,serif;
text-transform: none;
font-size: 35px;
color: #167799 ;
}
#content h2.date {
margin: 50px 0px 0px 0px;
padding: 10px 20px;
background-color: white;
width: 560px;
}
#maincontainer {
background-image: none !important;
}
#headercontainer {
background-color: #167799;
}
.post {
background-color: #0a5987;
width: 600px;
padding-top: 30px;
}
.imagecontainer {
text-align: center;
margin: auto;
}
.content {
background: #0a5987 !important;
}
a.tv_promo {
display: none;
}
.post_quote .content cite {
margin: 0.5em 0.7em 0 0;
}
.body {
max-width: 500px;
}
.post_image .content .description {
max-width: 500px;
}Jeśli chcesz bawić się w tego typu modyfikacje – przede wszystkim zainstaluj firebuga (świetny dodatek, zwłaszcza jeśli doda się do tego Yslow, Firefinder, SenSEO i inne dodatki). Dzięki niemu w prosty sposób znajdziesz ścieżki do elementów które chcesz zmienić (albo ich ID) – dalej potrzebna jest już tylko niewielka znajomość CSS.
Podstawowe elementy są bardzo proste:
width: 100px; <– określenie szerokości
color: red; <– określenie koloru tekstu
background-color: green; <– określenie koloru tła elementu
font-family: serif, sans-serif, monospace; <– określenie rodzaju czcionki, może tez być nazwa fontu “verdana”, “arial” itd
font-size: 20px; <– wielkość czcionki (może być pt % i em)
margin: 10px; <– margines zewnętrzny (nie będzie miał koloru tła)
padding: 20px; <– margines wewnętrzny (będzie miał kolor określony w background-color)
Nie da się w dwóch akapitach wytłumaczyć, jak zmodyfikować szablon soup.io (albo innej dowolnej strony) – ale mam nadzieję, że was zachęciłem… chyba zrobię kompletny tutorial, jak zmodyfikować wygląd, a nie tyko zachęcenie, że warto to robić.
dość ciekawe rozwiązanie