Gadżety z tłem i oddzielanie ich

 Ostatnio bardzo dużo osób pytało mnie jak zrobić, aby gadżety miały osobne tło, a nie znajdowały się w jednym bloku koloru danej kolumny. 

Często spotykam się z sytuacją, gdzie ręczne ustawianie teł pod każdym gadżetem osobno nic nie daje D:

Pomyślałam, że chociaż spróbuję wytłumaczyć najłatwiejszy sposób na "ogarnięcie" bloga w tej kwestii. Na początek przygotowałam obrazek pomocniczy z pozaznaczanymi elementami strony. Nie wykorzystamy ich wszystkich, ale może wypiszę też ich selektory, na wypadek, gdyby ktoś ich potrzebował do czegoś innego. 

Dodam także, że piszę je z pamięci i wypisuję te, których najczęściej używam. 

Nie dam tu wszystkich selektorów, tylko te podstawowe - żeby zbytnio nie mieszać. Przed selektorem, którego będziemy używać w tej instrukcji dam [!], abyście zwrócili na niego bardziej uwagę ;)

<OBRAZEK POMOCNICZY - kliknij!>

Jeżeli ktoś nie będzie do końca wiedział co to za ramki i skąd one się wzięły, zachęcam do kliknięcia kolejnego linku i zerknięcia na obrazek:

<OBRAZEK POMOCNICZY II - kliknij!>

Każdy obszar otoczony ramką to jeden element (tu pokazany w formie przestrzennej, więc łatwiej to przyswoić). 

Zaznaczyłam:
[!] NIEBIESKIM - gadżety, pod którymi chcielibyśmy mieć tło (chodzi o to, żeby były pomiędzy nimi przerwy). Na szczęście nie musimy się rozpisywać osobno nad tłem dla statystyki, archiwum itp. Zaznaczyłam je wszystkie jednym kolorem, ponieważ istnieje kod określający je jako "elementy w danej kolumnie":

Jeśli chodzi o prawą, to:
.column-right-inner .widget

Lewą:
 .column-left-inner .widget

Środkową:
 .column-main-inner .widget

Tak na marginesie, to:
Tytuły gadżetów:
.sidebar h2 

[!] ZIELONYM - nie wiem jak to określić, ale ja nazywam to "całościami". Kolumna lewa, środkowa i prawa.
Kolumna lewa:
.column-left-inner
lub
.column-left-outer

Kolumna środkowa:
.column-center-inner
lub
.column-main-outer

Kolumna prawa:
.column-right-inner
lub
.column-right-outer

BRĄZOWYM - datę posta,
.main-inner .widget h2.date-header span 
(to jest jeden cały selektor)

CZERWONYM - stopkę posta,
.post-footer

CZARNYM - sam post,
.post-body

ale jeśli chcemy post razem z tytułem i stopką, to tylko .post

Jeśli chcemy odsunąć od siebie posty (np. mamy ich 6 na stronie i zależy nam, aby oddzielone były paskiem tła), to używamy takiego kodu:

.post-outer {
padding: 40px 20px;
}
Wartości można zmieniać.

FIOLETOWYM - tytuł posta, a kod powinien być taki, aby zmienić jego tło:
h3.post-title, .comments h4 {background-color: #000;}


A. Wszystkie gadżety znajdują się w prawej kolumnie na bloku tła (wyobraźmy sobie, że cała prawa zielona ramka wypełniona jest kolorem). Dodamy sobie ramkę ramkę z kropek, zaokrąglimy boki. Kod jest prosty:

.column-right-inner .widget { 
position: relative; 
background-color: #FFFFFF; 
border: 1px dotted #ecf5f0; 
border-radius: 15px 15px 15px 15px; }

Tylko... dlaczego mi on nie działa, a działa innym i w szablonie Simple?

1. Zapiszmy sobie szablon przed pracą nad nim (Panel nawigacyjny > Szablon > Utwórz/przywróć kopię zapasową > Pobierz pełny szablon). Jeśli coś nam się popsuje, to będziemy mogli tę kopię wgrać i powrócić do wyglądu sprzed zmian.

Wracając do instrukcji...
2. Problem może sprawić ów blok koloru. Pierwsze, co powinniśmy zrobić, to przekopać cały kod (Panel nawigacyjny > Szablon > Edytuj kod HTML) naszego bloga w poszukiwaniu (żeby szukać klikam myszką na pole edytora i wciskam kombinację klawiszy CTRL + F):
.column-right-inner {background-color: #FFFFFF;}

Powyższy kod to tylko przykład. Zalecam wpisać  w okienko wyszukiwania .column-right-inner (jeśli dotyczy to kolumny prawej) lub .column-left-inner (jeśli lewej) i w każdym fragmencie badać czy przypadkiem nie ma tam kodu na tło (background). Jeżeli jednak się ono tam znajduje, to ten fragment (background) usunąć.

3. Teraz powinniśmy kliknąć podgląd, żeby nie zapisać sobie szablonu, jeśli popełniliśmy jakąś głupotę.

Kolumna z gadżetami, na której nam zależało, powinna mieć przezroczyste tło, jeżeli usunęliśmy kod z background. Gadżety będą "wisiały w powietrzu". Jeżeli gadżety dalej mają tło jako wspólny długi blok koloru, to trzeba przeszukać kod HTML jeszcze raz. Dopiero wtedy zapisujemy zmiany.

4. Wchodzimy w Panel nawigacyjny > Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS. Wklejamy tam to:

.column-right-inner .widget { 
position: relative; 
background-color: #FFFFFF; 
border: 1px dotted #ecf5f0; 
border-radius: 15px 15px 15px 15px; }

Oczywiście dostosowujemy kod wg własnego uznania.
Background-color - kolor tła, czyli to, na czym nam najbardziej zależy ;)
Border - ramka. 1px obok to grubość ramki. Dotted oznacza, że linia będzie z kropeczek (można zamiast tego dać solid - czyli zwykła linia oraz dashed - czyli z kreseczek). Jeżeli nie chcemy obramowania, to usuwamy ten fragment.
Border-radius - zaokrąglenie rogów. Jeśli chcemy je mieć kwadratowe, to kasujemy ten fragment.


B. Mam wszystko poodzielane, ale nie podobają mi się zbyt małe przerwy pomiędzy gadżetami.

1. Do kodu, który wcześniej wkleiliśmy dodajemy linijkę z margin-bottom. Będzie to wyglądać tak:

.column-right-inner .widget { 
position: relative; 
background-color: #FFFFFF; 
border: 1px dotted #ecf5f0; 
border-radius: 15px 15px 15px 15px;
margin-bottom: 50px; }

Jeśli nasze gadżety od początku były osobno, wystarczy, że do arkusza CSS wkleimy to:

.column-right-inner .widget {
margin-bottom: 50px; }

(oczywiście trzeba uważać na kolumny - jeśli wpiszemy .column-right-inner, to nie liczmy na to, że ruszy się nam lewa... :D )

C. No dobrze, ale te gadżety są za blisko postów.

Do podanych wyżej kodów dorzucamy taką linijkę:
margin-left: 20px; (jeżeli dotyczy to prawej kolumny)
lub
margin-right: 20px; (jeżeli chodzi o kolumnę lewą)



Jeśli jakiś błąd palnęłam, to napiszcie mi :)
Jeśli czegoś nie rozumiecie, to też.
Jeśli macie pomysł na lepszy tytuł dla tego postu, to możecie dodać do komentarza. Jakoś mi się wydaje, że nie jest on zbyt "oczywisty" i męczy mnie myśl, że jest coś lepszego, ale mam to na końcu języka.
A! No i ostatnio coś mam problemy z odpisywaniem niektórym. Piszę "niektórym", bo na maila dostaję oczywiście powiadomienie o komentarzu (i jest tam jego treść), klikam link do posta, a tam tego komentarza po prostu nie ma. @_@ Nie wiem wtedy jak mam odpisywać i gdzie. Najgorsze jest to, że nie ma informacji typu "ten komentarz został usunięty przez autora" czy coś.
Chcę Wam też podziękować za to, że dajecie mi przykłady blogów lub screeny, żeby coś zobrazować, jeśli o coś pytacie w komentarzu. Bardzo mi to ułatwia zrozumienie rzeczy.