[CSS] Szablon od A do Z

W tym poście chciałabym przedstawić wszystkie kody, które użyłam do stworzenia szablonu umieszczonego poniżej. Czyli krok po kroku...

Kiedy mamy stworzoną grafikę i wykonaliśmy wszystko od podszefki (patrz 'CSS od czego zacząć - wprowadzenie'), przystępujemy do etapu numero 5. Czyli: Zaawansowane -> Dodaj arkusz CSS

Pojawia nam się przed oczami biały prostokącik, który aż kusi, ażeby coś w nim naskrobać. Musimy być w pełni skupieni i rozumieć, co mamy przed oczami. Jak mawiał kiedyś mój psorek od WoSu przeglądając klasówki  - 'Czarnego nie rozumiem, a białe mnie rozprasza.' Oby tak nie było w tym przypadku!

Osobiście zawsze zaczynam od tła postu. Podstawowy kod na tło postu brzmi następująco:  '.post' W tym jednak przypadku kod, którego ja użyłam brzmi '.column-center-inner' . Dlaczego? Ponieważ obejmuje on zarówno tło posta, jak również datę i inne elementy.

Aby uzyskać efekt, który widzimy na szablonie, użyłam kolejno:

.main-inner .column-center-inner {background-color: #412842;}

.main-inner .column-center-inner {opacity: 0.6;}

.main-inner .column-center-inner {padding: 0px;}

.main-inner .column-center-inner {border-radius: 70px 1px 2px 2px;}

.main-inner .column-center-inner {border-style: solid;}

.main-inner .column-center-inner {border-width: thin;}

.main-inner .column-center-inner{box-shadow:0px 0px 5px white}

.main-inner .column-center-inner {margin: 0px 15px 0px 15px;} ( ten element jest bardzo ważny, gdyż za jego pomocą robimy marginesy między kolumnami, ażeby nam się nie sklejały)   

                                                                                                                                                                   Kolejny etap to kolumna prawa.

.main-inner .column-right-inner {background-color: #412842;}
.main-inner .column-right-inner {opacity: 0.6;}
.main-inner .column-right-inner {padding: 1px;}
.main-inner .column-right-inner {box-shadow:0px 0px 5px white}
.main-inner .column-right-inner {border-style: solid;}
.main-inner .column-right-inner {border-width: thin;}
.main-inner .column-right-inner {border-radius: 1px 70px 1px 1px;}

Później komentarze i avatary do komentarzy:

.comment p {opacity: 0.6;}
.comment p {box-shadow:0px 0px 5px white}
.comment p {background-color: #412842;}
.comment p {padding: 10px;}
.comment p {border-width: thin;}
.comment p {border-style: solid;}

.avatar-image-container {box-shadow: 0px 0px 5px white}
.avatar-image-container {border-width: thin;}
.avatar-image-container {border-style: solid;}
.avatar-image-container {border-radius: 20px 1px 20px 1px;}

I na sam koniec etap, którego szczerze nienawidzę. Zawsze męczę się z kartami, które strasznie mnie irytują. Dopiero Finranthil klarownie wytłumaczyła mi i bardzo, bardzo pomogła za co raz jeszcze jej serdecznie dziękuję. Bez Ciebie bym dalej główkowała. Dzięki :P

Na początku wklejamy i ustalamy wszelkie parametry. 

!Tyczy się to tylko i wyłącznie kart, które chcemy mieć w osobnych kratkach!

#PageList1 li {box-shadow:0px 0px 5px white;
border-radius: 190px 1px 190px 1px;
background-color:#412842;
opacity: 0.5;
padding: 0px;
margin: 0px;
border-style: solid;
border-width: thin;
}

W tym magicznym miejscu ustalamy pozostałe parametry. Pierwszy z nich tyczy się położenia. Kolejny szerokości. Na wszelki wypadek użyłam jeszcze trzech innych. Zmieniajcie ustawienia, sprawdzajcie, co się zmienia i cieszcie się z efektów.

.tabs-outer {margin: 280px 10px 10px 420px;}
.tabs-outer {width: 840px}
.tabs-inner .widget li a {opacity: 0.9;}
.tabs-inner .widget li a {padding: 1px;}
.tabs-inner .widget li a {margin: 10px;}

Na sam koniec dodajemy kody na wyśrodkowanie poszczególnych elementów i inne tego typu dodatki.

EDIT:

Jeśli nie chcemy mieć nic w nagłówku (ani napisów, ani niepotrzebnych obrazków), wchodzimy w:

Układ -> Edytuj (nagłówek) -> Obraz (z internetu)

Następnie wklejamy w puste pole nagłówek przezroczysty >klik< i zaznaczamy 'Zamiast tytułu i opisu"