2 lipca 2013

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ę ;)


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:


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.

32 komentarze:

  1. hej :) notka jak zwykle przyda się :D
    mam pytanie, jak zrobić (tak jest na tym blogu) aby tło było nieruchome? tzn. żeby tło się nie ruszało tylko tekst, nie chcę suwaka w notce, ponieważ no cóż, nie podoba mi się.
    Pomożesz? x

    OdpowiedzUsuń
    Odpowiedzi
    1. Zmartwię Cię, tło się rusza razem z tekstem.
      Po prostu podzieliłam sobie je na malutkie paseczki. Wepchnęłam do tego kodu:

      .main-inner {
      padding-top: 30px;
      background: url(http://imageshack.us/a/img5/9951/tloo.png)
      repeat-y; }

      repeat-y znaczy, że powtarza się wzdłuż osi y, czyli pionowo.

      Usuń
  2. Ja mam problem w notce z avatarami anonimów :(

    OdpowiedzUsuń
  3. Hmm... A jeśli chcę, żeby prawy pasek był jednolity, bez przerw i żeby był blisko bloga ? Aha, jeszcze żeby nagłówek był równo z prawym paskiem ?
    Tak jak tu : http://wiska-wiskaa.blogspot.com/
    Proszę o odpowiedź, szukam tego któryś dzień z kolei :c

    OdpowiedzUsuń
    Odpowiedzi
    1. To nie naglówek, to gadżet "obrazek" :D o wiele łatwiej będzie Ci go ustawić ^^
      Próbujemy na odwrót :D O_o chociaż teraz to jak się zastanawiam, to mogłam coś palnąć w tej instrukcji. Spróbujmy:
      .column-main-inner {background-color: #FFFFFF;}


      LUB

      .main-inner {background-color: #FFFFFF;}

      Usuń
    2. Czekaj, wróć. Chyba cos mi sie pokickalo.
      Ta dziewczyna zmienila szablon (inna dziewczyna mi kiedyś pokazywała wlasnie go) i nie wiem czy chcesz dostosować się wlaśnie do tego nowego, czy do starego :D

      Usuń
    3. Bo podałaś przykładowy blog :) Inna dziewczyna pokazywała właśnie ten sam jako przykład kilka dni temu i wyglądał on całkowicie inaczej ;D Chodzi Ci więc o aktualną wersję? :)

      Usuń
    4. Jednolity pasek:
      .column-right-inner {
      background: #FFFFFF;
      }

      jeśli chcesz lewy, to zamiast right daj "left".
      Jeśli chcesz mieć bliżej bloga to:

      .column-right-inner {
      background: #FFFFFF;
      margin-left: 5px; }

      a dla strony lewej:

      .column-left-inner {
      background: #FFFFFF;
      margin-right: 5px; }

      Usuń
    5. No właśnie o to chodzi, za nic nie działa ;/ !

      Usuń
  4. A ja mam pytanie co do menu, jak zrobić, żeby po najechaniu, menu nie rozwijało mi się w dół, tylko np. w lewo?

    OdpowiedzUsuń
    Odpowiedzi
    1. Trochę nie tutaj ;D Następnym razem pytaj w zakładce "Zapytaj" lub pod notką o menu.

      Wystarczy zmienić wartości tutaj:

      /* Level 1 podmenu */
      .fin>li>ul {
      padding-top: 0px;
      z-index: 99;
      border-top: 1px solid #fff;
      top: 0px;
      }

      /* Sprawianie, że lvl 1 wysunie się po najechaniu na niego myszką */
      .fin>li:hover>ul {
      left: 61px;
      }

      (w tych wklejonych fragmentach wartości są już zmienione.)

      Usuń
  5. Hej,mam pytanie:)Nie wiem jak to wyjaśnić,może zrozumiesz:) Jak zrobić,żeby gadżety były osobno,a np.bannery z linkiem złączone ze sobą w jednej kolumnie?Jeśli się nie pogniewasz,to chodzi mniej więcej o coś takiego,jak na tym blogu:http://trouble-is-coming.blogspot.com/ (tam gdzie 'ogłoszenia' )i ten obrazek nad tytułem?Byłabym wdzięczna,bo tego jeszcze nie mogę ogranąć:) Pozdrawiam ;*

    OdpowiedzUsuń
    Odpowiedzi
    1. 1. Zrobić to, co jest w instrukcji u góry (żeby każdy gadżet był osobno).
      2. Dodać gadżet Tekst.
      3. W gadżecie Tekst klikamy napis "Edytuj kod HTML". Tutaj musimy zapisać sobie wszystko HTMLem. Np.
      żeby mieć zalinkowany bannerek, trzeba wpisać tam taki kod:
      UWAGA, wszystkie znaczki + zamień na >

      <a href="http://LINK-DO-BLOGA.blogspot.com/"+<img src="http://LINK-DO-BANNERKA" /+</a+

      Do tego gadżetu możesz wklejać takich kodów ile chcesz.

      Żeby mieć tam zalinkowany tekst, spróbuj dodać:

      TEKST NORMALNY <a href="http://LINK-DO-STRONY.pl" target="_blank"+TEKST, KTÓRY MA BYĆ ZALINKOWANY</a+ TEKST NORMALNY.

      Usuń
  6. W sumie,mam jeszcze pytanie.Wiem,że.sidebar h2 to tytuły gadżetów,ale jak dodać obrazek w tytule gadżetu,stron i linków?

    OdpowiedzUsuń
    Odpowiedzi
    1. tak jak mowisz:

      #IDgadzetu h2 {
      background: url("http://LINK-DO-OBRAZKA.png");}

      tytul stron np:
      #PageList1 h2 {
      background-image: url("http://link-do-obrazka.png"); }

      Usuń
  7. Żeby odsunąc sposty od sieibie trzeba wkleić:
    .post-outer {padding: 40px 20px;} ?

    A jak się fragmentów html w html w blogspocie wyszukuje?

    OdpowiedzUsuń
    Odpowiedzi
    1. Wprawdzie nigdy z tego nie korzystałam, ale wg mnie spróbuj
      .post-outer {margin: 40px 0px;}

      (ta dwudziestka u Ciebie odsunie też boczne kolumny, a tego chyba nie chcemy)

      Wyszukujemy kody:
      Panel nawigacyjny -> Szablon -> edytuj kod html.
      Pojawia się taka ramka, a w niej kod.
      Nie wiem czy ja to dobrze robię, ale klikam myszką gdzieś w ten kod (byleby mi tam ten kursor jak przy pisaniu migał) i wciskam CTRL i F jednocześnie. Wyskakuje malutkie okienko z napisem Search. Tam wpisuję wyraz. Daję enter.

      Usuń
  8. Cześć. Mam pytanie i wielką nadzieję, że ktoś jest mi w stanie pomóc. Wiecie jak zrobić tak, by nie zaznaczać ile postów ma być na stronie, ale by się pojawiały jak się będzie zjeżdżać na dół? Mam na myśli takie coś jak na tym blogu: http://fashioncoolture.com.br/

    OdpowiedzUsuń
  9. Nie za bardzo rozumiem Twoją instrukcję :c
    www.megmyfashion.blogspot.com

    OdpowiedzUsuń
  10. Nie rozumiem tylko gdzie to wszystko mam wpisać :(

    OdpowiedzUsuń
  11. bardzo przydatna notka, będę z niej często korzystać C:

    OdpowiedzUsuń
  12. hej ;) mam pytanko :p
    jak zrobić żeby nagłówek był równo z prawą kolumną ? coś takiego jak na tym blogu:
    http://willbefineee.blogspot.com/

    OdpowiedzUsuń
  13. Mm pytanie. Jak zrobić by tytuł posta miał efekt podświetlonego napisu tak jak u ciebie ? Plis odpowiedz :)

    OdpowiedzUsuń
  14. bardzo przydatne : )skorzystałam z unstrukcji : )
    fantastic-stories.blogspot.com

    OdpowiedzUsuń
  15. a co zrobic jezeli chce miec wszystkie gadzety po prawej stronie w jednej kolumnie? Bo mam szablon rewelacja i wszystkie gadzety pojawiają się mi w oddzielnych ramkach....

    OdpowiedzUsuń

szukaj