style kate mac

Wpis

• « Poprzedni wpis
• Następny wpis »

środa, 12 października 2011

Subtelny: zmiana stronności

W nowym kodzie bardzo łatwo zmienić stronność a dodatkowo nie ma ona znaczenia dla kolejności ładowania się zawartości bloga. Nie ma znaczenia co jest po lewej a co po prawej bo nawet w przypadku szablonów lewostronnych najpierw ładować się będzie treść a potem nawigacja i dodatki. Pozwala to bez poczucia winy wybrać sobie lewostronny szablon. Moje trzy subtelne zrobiłam jako prawostronne ale to nie ma znaczenia po bez kombinowania kilkoma klikami możemy to zmienić.

---

szablony subtelne: 01 różowo-oliwkowy, 02 burzowo niebieski, 03 zgaszony pistacjowy zmienione na lewostronne (gdzie szeroka szpalta z główną treścią jest po prawej stronie a po lewej znajduje się treść poboczna)

---

Tych klików będzie dokładnie pięć bo tyle ma słowo right a wystarczy, że wpiszemy je w odpowiednim miejscu w szablonie i zmiana zostanie dokonana

Na początek bardzo dokładna a jednocześnie prosta instrukcja.

1. Wchodzimy w edycję bloga, przechodzimy do karty WYGLĄD i wybieramy zakładkę EDYCJA CSS

2. W arkuszu odszukujemy część opisującą treść. I przy selektorze #tresc-glowna zmieniamy pływanie elementu z float:left; na float:right;

klikamy zapisz i gotowe.

Na temat tego jak działa w nowym kodzie budowanie układu rozpiszę się przy innej okazji. Dzisiaj wskażę tylko miejsce w szablonach subtelnych w których wprowadzać będziemy poprawki. Następnym zaś razem zrobimy szablon jednokolumnowy.

Łatwość zmiany stronności szablonu jest jedną z zalet nowego kodu. Poprzednio poza zmianami w css trzeba było zmienić html uważając przy tym aby wybrać najbardziej podobny bo różnice pomiędzy poszczególnymi szablonami bazowymi mogły być spore. Tym razem zmiana nie będzie musiała nawet ocierać się o html bo html w założeniu miał być jeden (a że tak nie jest to nieco inna opowieść).

Na koniec tego wstępu opiszę tylko czemu będziemy wpisywać right choć chcemy mieć szablon lewostronny. Jeżeli kogoś to zastanawia to już wyjaśniam, o układzie decyduje położenie szpalty z główną treścią, to ona ładuje się pierwsza a więc jej ułożenie determinuje układ. Stronność natomiast przyzwyczaiłam się określać na podstawie położenia szpalty z treścią poboczną .

Zmiana szablonu na lewostronny

A teraz instrukcja dla zielonych. W zasadzie powyższa jest więcej niż wystarczająca ale dla zielonych jak szczypiorek na wiosnę dodam jeszcze wizualne wyjaśnienia.

Wchodzimy w edycję bloga:

WYGLĄD -> EDYCJA CSS -> Edytor CSS (czyli to okienko z kodem szablonu)

Odszukujemy miejsce w szablonie gdzie opisany jest główny wygląd szpalt, będzie ono na początku arkusza i powinno być także zaznaczone komentarzem. Dodatkowo zamierzam umieszczać odpowiednie komentarze także w dokładnym miejscu zmiany więc bez obaw.

Szukamy selektora #tresc-glowna. Jego zawartość powinna wyglądać tak:

#tresc-glowna {
 float: left;
 width: 590px;
 padding: 0px 20px;
 margin: 0px;
 text-align:left;
}

Jedną z pierwszych właściwości wpisanych przy tym selektorze jest float czyli pływanie. Określone jest jako left co oznacza, że główna treść na pływać do lewej krawędzi. Jako że część z notkami ładuje się pierwsza to ona właśnie decyduje w największym stopniu o układzie. Zmieniając pływanie na right sprawimy że obok głównej szpalty (która popłynie do prawej krawędzi), na lewo od niej, zrobi się miejsce na szpaltę poboczną. Zmieniony kod powinien wyglądać tak:

#tresc-glowna {
 float: right;
 width: 590px;
 padding: 0px 20px;
 margin: 0px;
 text-align:left;
}

Możemy jeszcze troszkę nad zmianą popracować, pozmieniać dopełnienia i marginesy ale od początku planowałam umożliwić łatwą zmianę stronności a więc wszystkie odstępy zrobiłam symetryczne. Szablon wygląda więc równie dobrze jako lewostronny jak i prawostronny.

Przygotowałam też gotowe pełne arkusze do jednokolumnowej wersji tego szablonu. Aby z nich skorzystać należy:

1. skopiować oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
2. upewnić się, że jako szablon podstawowy wybrany jest ten którego ja używam czyli new_template7 (jeżeli nie to zmienić szablon na ten właśnie)
3. zastąpić zawartość pola edycji CSS udostępnionym tu kodem; dla poszczególnych kolorów będą to odpowiednio
• lewostronny beżowy z kwiatami
• lewostronny niebieski z pikselami
• lewostronny pistacjowy ze wzorkiem

Szczegóły wpisu

Tagi:

• subtelny
• dokładna instrukcja lewostronny
• opcja zmiana stronności

Kategoria:

• kilka uwag o CSS

Autor(ka):

kate_mac

Czas publikacji:

środa, 12 października 2011 12:39

Opcje

• Poleć znajomemu wpis „Subtelny: zmiana stronności”
• Dodaj komentarz do wpisu „Subtelny: zmiana stronności”
• Śledź komentarze przez RSS do wpisu „Subtelny: zmiana stronności”

Trackback

Trackback URL dla wpisu:

http://stylekatemac.blox.pl/2011/10/Subtelny-zmiana-stronnosci.trackback