Facebook – wpisy w 2 kolumnach lub więcej

Facebook – wpisy w 2 kolumnach lub więcej
12 May 2013

Nawiązując do wpisu o usuwaniu prawego panelu na facebook’u zgodnie z tym co zapowiadałem pokazuję jak w prosty sposób wyświetlić wpisy w 2 kolumnach lub więcej.

Sposób i wykonanie jest ten sam. Wchodzimy na facebook’a i uruchamiany nasz edytor i wklejamy następujący kod.

Najpierw część główna, czyli widok w 2 kolumnach. Aby to wykonać do istniejącego blocku contentarea

#contentArea{
min-width:900px;
}

Dopisujemy instrukcję -webkit-column-count:2, która odpowiada za liczbę kolumn –  w tym wypadku 2.

Kolejnym znacznikiem jaki dodamy będzie -webkit-column-gap:40px, który odpowiada za odstęp w pixelach od między kolumnami. 40 będzie tu idealnie pasowało.

Ostatnim znacznikiem jest znacznik estetyczny, czyli ta linia pionowa, która przedzieli nam kolumny tak aby to było widoczne.

-webkit-column-rule:3px outset #2593F0; 

Ten znacznik składa się z 3 atrybutów. Opiszę każdy z nim

  • 3px – szerokość lini
  • outset – gdzie ma być skierowana – tego nie zmieniamy
  • #2593F0 – kolor lini w HTML ( możemy sobie go ustalić choćby tu: https://kuler.adobe.com/)

 

Po dodaniu całość kodu wygląda tak:

#contentArea{
min-width:900px;  /* Szerokość wpisów */
-moz-column-count:2; /* Liczba Kolumn - Firefox */
-webkit-column-count:2; /* Liczba Kolumn - Safari and Chrome */
column-count:2;  /* Liczba Kolumn */
-webkit-column-gap:40px;   /* Odstęp między kolumnami */
-webkit-column-rule:3px outset #2593F0;   /* Linia pionowa */
}

Możemy dodać jeszcze jeden styl dla całości treści. Konkretnie ujemny margines z lewej, czyli

margin-left:-100px;

gdzie liczba px (na minusie) to o ile ma się strona przesunąć w lewo.

Dla tych co nie mogą nadążyć, bądź załapać, lub też po prostu im się nie chce. Podanie kompletny kod

/* Ustawienia wstępne */
.hasLeftCol #mainContainer {
border-right: 0px solid #ccc;
min-height: 600px; 
}
/* Usunięcie prawej kolumny */
#rightCol{
display:none; 
}
/* Wpisy */
#contentArea{
min-width:900px;   /* Szerokość wpisów * /
-webkit-column-count:2;     /* Liczba Kolumn */
-webkit-column-gap:40px;    /* Odstęp między kolumnami */
-webkit-column-rule:3px outset #2593F0;  /* Linia pionowa */
}
/* Tło */
#contentCol{
width:950px; /* Szerokość tła - musi być 50px większa niż szerokość wpisów */
}
/* Cofnięcie całośći do lewej*/
#mainContainer{
margin-left:-100px;
}

Zastępujemy nasz istniejący i klikamy na ikonkę edytora. Zamykamy stronę facebooka. Po ponownym wejściu nie będzie już tego boxa do edycji, a zmiany będą zapisane. Kod daje nam:

  • widok w 2 kolumnach
  • całość wyrównana do lewej (o 100px w lewo)
  • linia przedzielająca
  • brak prawego menu
  • szerokość strony idealna przy rozdzielczości 1280×1024 i wyżej

Dla ciekawskich. Po wszystkich edycjach i aplikacji my theme for facebook u mnie facebook prezentuje się tak:

newfacebook

 

Mimo wszystko ja jednak korzystam z normalnego widoku ( 1 kolumna ) jednak z całą resztą zmian, czyli:

/* Ustawienia wstępne */
.hasLeftCol #mainContainer {
border-right: 0px solid #ccc;
min-height: 600px; 
}
/* Usunięcie prawej kolumny */
#rightCol{
display:none; 
}
/* Wpisy */
#contentArea{
min-width:800px;   /* Szerokość wpisów * /
}
/* Tło */
#contentCol{
width:850px; /* Szerokość tła - musi być 50px większa niż szerokość wpisów */
}