sobota, 29 marca 2014

Zmiana odległości między elementami bloga

Na blogu mamy masę elementów - dosłownie. Jakby je wszystkie zliczyć to by nam się z parę stron zeszło. Czasem niektóre z nich mają automatycznie ustawiany margin.

Margin - opisuje przestrzeń wokół elementu. "Czyści" przestrzeń zewnątrz danego elementu, nie ma żadnego koloru, jest przezroczysty.

( Praktycznie to można opisać tak, że po prostu odsuwa wszystko na daną odległość od elementu, nad którym pracujemy ).
Margin opisuje "margines" ze wszystkich stron, jednak w pojedynczych przypadkach używamy margin-top, margin-bottom, margin-right, margin-left.
Najczęściej opisujemy go w pikselach np.
.date-outer {margin:20px;}
Powyższy kod sprawi, że wokoło postu na odległość dwudziestu pikseli nie pojawi się nic innego, będzie tam pusta przestrzeń.
!Do wykonania poniższych instrukcji potrzebujecie dobrego oka, aby trafić z odpowiednią ilością pikseli i musicie znać selektory dla elementów, które będziecie przemieszczać.

Jeżeli część teoretyczną już mniej więcej załapaliście to bierzemy się na praktykę. Specjalnie na tę okazję usunęłam wszystkie "marginy" z szablonu Walking Travesty i będę z Waszą pomocą ponownie wprowadzać komendy.

Na początku wszystko wygląda tak:

Co będę starała się zrobić. Po pierwsze "podciągnąć" całego bloga do góry, aby nie zostawiać pustej przestrzeni. Sidebar przyciągnąć nieco do postu i obniżyć, aby był na równi z środkową kolumną. Na koniec zmniejszymy odległość między gadżetami.
Na sam początek ostrzegam: Bawienie się marginami to jedno wielkie szacowanie. Nigdy nie wiem ile pikseli mam wpisać; trzeba strzelać, zmieniać, aż w końcu - BA, wyjdzie. 

Skoro cały blog to cały blog, będziemy używać po prostu body:
 body { background-color: #eef0ef; background-image: url(http://25.media.tumblr.com/tumblr_lzju29VxIR1r9g6hvo2_100.png); background-repeat:repeat; background-attachment: fixed;font-family:arial; font-size: 8pt; color: #666; margin-top:-65px;}
Jak widać do zwykłego, normalnego kodu dla body dodałam margin-top z wartością ujemną. Ta wartość ujemna spowoduje, że blog pójdzie do góry. Wartość dodatnia natomiast sprawiłaby, że przestrzeń między górną krawędzią bloga, a kolumnami byłaby jeszcze większa.
Uznałam, że -100px to będzie za dużo, więc spróbowałam z wartością -80px, potem -75px, aż w końcu trafiłam na -65px, które mi odpowiadało.
I mamy. Cały blog zdecydowanie jest wyżej, a pusta przestrzeń zdecydowanie się zmniejszyła. Czyli co? Pierwsze zadanie wykonane!

Teraz sidebar. Najpierw zbliżymy go do środkowej kolumny, potem wyrównamy. 
( Jako, że efekt w przypadku tego szablonu jest ustawiony dla osobnych gadżetów, a nie dla całej kolumny, kod, który dodam poniżej będzie jedynym dla .sidebar )
.sidebar { margin-left:-38px;}
Tu strzelania było mało, bo specjalnie wybredna nie byłam.
I proszę bardzo, teraz trzyma się w końcu kupy!
Teraz trzeba by to wszystko wyrównać, bo to wygląda tak trochę od sasa do lasa ( czy jak to tam się mówi ).
.sidebar {margin-left:-38px;margin-top:18px;}
Oks, tu się trzeba było nakombinować, bo 10px to było zdecydowanie za mało, 20px ciut za dużo, 15px to nie było to, a 17px coś nie pasowało.

No i jest. Teraz wygląda to schludniej i jest bardziej elegancko. 

Na sam koniec zmniejszymy odległość między gadżetami, bo robią co chcą. A wszystko ma ze sobą grać, więc niestety nie mamy za bardzo wyjścia. Takie szczegóły szczególnie rażą w oczy, co nie?
Tutaj będziemy używać albo .sidebar .widget, albo .sidebar .widget-content. To raczej bez różnicy. Ja jednak użyję tego drugiego. 
.widget-content {border:1px solid #f5f5f5; background:#fff;padding:8px;margin-bottom:-20px;}
Tutaj poszło za jednym zamachem.
I w końcu - całość, z dopasowanymi marginesami ( ajć, mogłam chyba jednak bardziej przyciągnąć kolumnę w lewo, no ale nic ). 

Powyżej pokazane przypadki są raczej takie dosyć pospolite, jednak kluczowe. Nie ma chyba szablonu, gdzie nie używałabym masowo margin. Całość można wykorzystywać do przeróżnych ewolucji - dużo bardziej skomplikowanych niż zbliżanie do siebie elementów. Np. Środkowa kolumna idzie bardziej do prawej, natomiast lewy sidebar chcemy, aby był bliżej lewej krawędzi i wyżej. Warto się temu przyjrzeć, gdy nasze tło to wzorzysty i efektowny obrazek, a chcemy, aby jego ważne elementy były widoczne, a nie schowane za postem czy czymś innym. 
Również myślę, że przydać się może, gdy część szablonu tworzymy w programach graficznych i musimy nie dopasować tło pod bloga, a bloga pod tło - wówczas po prostu zmieniamy pozycję elementów na przykład za pomocą marginesów. 
A więc mam nadzieję, że udało mi się przestawić Wam "marginesy", które są jedynym z podstawowych i najbardziej i najczęściej ( tak myślę ) wykorzystywanych komend. Dlatego mam nadzieję, że instrukcja okaże się pomocna. :)

Jak macie jakieś pomysły na instrukcje to oczywiście piszcie! 
Miłego dnia!

PROŚBA. Jestem w trakcie pisania instrukcji na szablon ( prawdopodobnie będzie złożona z 3/4 części ) - Wasze zadanie: Co koniecznie uwzględnić? Jakiś efekt dla kolumn, może coś dla post-footera? Będzie to poradnik dla Was, dlatego Wasze zdanie tutaj się liczy najbardziej. Chcę, aby tutoriale były jak najbardziej pomocne, także liczę na Waszą pomoc!
PROPOZYCJA. Wpadłam na pomysł ( ze względu na masę komentarzy, która pojawiła się ostatnio ), aby również strzelić poradnik ( też w około 3 częściach ) na szablon tumblrowski. Wiecie nieruchoma kolumna, parę efektów dla menu...te sprawy. :) Jak propozycja jest ciekawa to piszcie - będę wiedzieć czy się za to brać czy nie. 

14 komentarzy:

  1. Ja mam propozycję. Możesz napisać jakiś kod (czy w ogóle jest jakiś) żeby szablon po załadowaniu go na bloga nie rozjeżdżał się. I ogólnie, żeby był na każdym ekranie widoczny tak samo. Bo miałam sytuacje, że projektowałam szablon, a on wychodził poza ekran na niektórych (większych, mniejszych) ekranach... Albo inaczej zachowywał się na mozilli, a inaczej na chrome...

    I możesz napisać jak przenieść nazwę autora posta i komentarze ze stopki posta, np koło daty. Próbowałam już to kilka razy robić i zawsze mi nie wychodzi. Cała środkowa kolumna przez to mi się 'rozpada'

    No i jeszcze jedno. Jak zrobić taki efekt, żeby przyciski 'starszy' 'poprzedni' post zachowywały się np. tak jak przyciski w kartach w meny? :D

    Może coś z tego napiszesz, oby!

    Z góry dziękuję :)

    OdpowiedzUsuń
    Odpowiedzi
    1. A używasz position?

      Usuń
    2. Co do propozycji to to czy szablon się nie rozjeżdża czy wręcz przeciwnie jest dosyć kłopotliwe. Nie ma na to konkretnej instrukcji - mogę tylko polecić ograniczenie kodów, które sprawiają, że blog zmienia swoją naturalną pozycję. W dodatku przy małych zmianach problemy zazwyczaj nie są duże. Jak pisałam, ciężka sprawa, bo niektóre elementy są przystosowane do okna przeglądarki, do rozdzielczości, czasem mogą też zależeć od systemu. Jakbym mogła jednak jakoś pomóc, tak osobiście i bardziej dokładnie to pisz na maila. :)

      Co do autora, komentarzy - to najprościej jest to zrobić w układ>blog posts/posty w blogu>edycja tam można to szybciutko przerzucić. Ja jednak robię to w troszkę inny sposób, bo przerzucam wszystko w kodzie.

      Nie do końca rozumiem, ale nowszy/starszy post to .blog-pager, jeśli chodzi nam o linki to proponuję .blog-pager a i skopiować kod, który napisaliśmy dla menu. :)

      Jak coś nie na temat lub niejasno wyjaśnione to oczywiście pisz. :)

      Usuń
    3. @Anonymous Właśnie też myślałam o position - to cholerstwo właśnie ustawia się bardzo często pod krawędź przeglądarki, która niestety niekiedy jest w różnych miejscach. :)

      Usuń
  2. Uważam, że poradnik o stworzeniu szablonu tumblrowskiego byłby strzałem w dziesiątkę. Na Tumblru jest dużo ciekawych gadżetów, a przede wszystkim takie szablony odznaczają się schludnym minimalizmem :)
    Co do samej instrukcji - o tak, marginesy są ważnym elementem bloga. Niby zna się te wszystkie tricki jak już się trochę w tym siedzi, ale i tak dobrze, że taki poradnik został stworzony.
    Pozdrawiam, Niah.

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak gadżety na tumblrze są dosyć proste, z tego co wiem, to wszystko skupia się na jakieś grafice, menu i krótkim opisie. No trzeba też nieco pokombinować z starszy/nowszy post, ale damy radę! :P
      Ja wolę marginesy od position - zwłaszcza, że moje zmiany są bardzo niewielkie. :D

      Usuń
  3. Jesteś kochanym człowiekiem! Instrukcja z posta pewnie mi się przyda - a jakże. I oczywiście proszę o instrukcję na Tumblra, bo ostatnio sobie założyłam mini blog studencki, ale nie mam pomysłu na wygląd. Może dzięki Tobie się zainspiruję i nauczę czegoś nowego. Pozdrawiam ;*

    OdpowiedzUsuń
    Odpowiedzi
    1. W takim razie myślę, że instrukcja na szablon tumblr powinna się pojawić. Miejmy tylko nadzieję, że wielu osobom się przyda :)

      Usuń
  4. Instrukcja jak zawsze fajnie napisana i przydatna, może kiedyś skorzystam :) Od dawna nie komentuję, ale bloga obserwuję na bieżąco! Będę czekał na kolejne instrukcje, są naprawdę ciekawe :D Pozdrawiam!

    OdpowiedzUsuń
  5. Poradnik na szablon tumblrowski? JESTEM NA TAK! bardzo przydatna instrukcja, ogólnie twoje instrukcje naprawdę bardzo mi pomagają i są jasno napisane :D

    OdpowiedzUsuń
  6. Hej! Tutaj administratorka SQALAY. Dodałam twojego bloga do kategorii 'blogi prywatne', jeśli nie chcesz żeby twój blog się tam znajdował to napisz pod najnowszą notką, a jeśli chcesz to proszę o zapoznanie się z regulaminem :p

    Pozdrawiam! :)

    OdpowiedzUsuń
  7. Czy mogłabyś zrobić jakieś ciekawe instrukcję na menu?? ; )))

    OdpowiedzUsuń
    Odpowiedzi
    1. A dasz radę opisać co dokładnie znaczy "ciekawe"? :D

      Usuń

- +
Szablon wykonany przez Tyler