Zmieniamy blogi – #1 – style css – wprowadzenie.

Witajcie! Dzisiejszym wpisem rozpoczynam serię, o której już kiedyś wspominałam, że pojawi się na blogu. Zagadnienia będą skupione przede wszystkim na modyfikacji szablonów blogowych za pomocą kaskadowych arkuszy stylów css. Dla laików pojęcie to wydaje się mocno skomplikowane, przyznaję, że sama do tego typu formatowania przekonałam się dopiero wtedy, kiedy zaczęłam zajmować się modyfikacjami szablonów bloggera, a potem WordPressa.

Zmiany, jakie miały miejsce w ostatnich latach, dotyczące tworzenia szablonów, wymuszają tworzenie stron responsywnych. Są to strony, których szablon dopasowuje się do wszystkich możliwych rozdzielczości urządzeń, na których taka strona jest wyświetlana (mam tu na myśli monitory zewnętrzne, ekrany laptopów, smartfony, tablety). Serwisy tworzone w języku HTML, posiadające stałe, określone wymiary poszczególnych elementów, powoli odchodzą w zapomnienie ustępując miejsca responsywnym bądź mobilnym systemom zarządzania treścią.

Platformy blogger i wordpress są systemami CMS. Co to oznacza w praktyce? Osoba, która taką stronę tworzy, nie musi znać zasad języka HTML oraz składni stylów CSS. Może skorzystać z gotowych szablonów i za pomocą pewnych elementów formatowania zmieniać ich wygląd. Jest to możliwe dlatego, że treść takiej strony jest oddzielona od samego graficznego szablonu, tzw. skórki. Za każdym razem, kiedy wgrywamy nowy szablon, zawartość takiej strony nie ulega zmianie, jest nadal przechowywana w bazie danych, zmienia się jedynie oprawa graficzna. Pozwala to m.in. na przeniesienie treści bloga z jednej platformy na drugą.

W bloggerze modyfikujemy szablon w panelu PROJEKT / SZABLON / DOSTOSUJ. 

Możemy bez problemu zmienić tło, ustawić szerokość całej strony i paska bocznego, zmienić układ czy kolorystykę poszczególnych elementów składowych bloga (tytułów postów, linków, itp.).

W WordPressie (mam tu na myśli platformę wordpress.org – czym się różni od wordpress.com dowiesz się z bloga Jest Rudo) szablon modyfikujemy poprzez panel PERSONALIZACJA. Opcje mogą różnić się w zależności od zainstalowanego szablonu. Motywy płatne dają więcej możliwości ingerencji w szablon bez znajomości zasad programowania. Wśród opcji bezpłatnych również znajdziemy takie, które w dość przystępny sposób dadzą się mniej lub bardziej dopasować do naszych potrzeb.

Jeśli wygląd zainstalowanego szablonu odpowiada nam w 100%, to w tym miejscu moglibyśmy zakończyć nasze rozważania. Pójdziemy jednak krok dalej i założymy, że są takie elementy w motywie, które nie do końca nam odpowiadają, a których nie możemy zmienić za pomocą gotowych narzędzi do formatowania. Wtedy z pomocą przychodzą nam kaskadowe arkusze stylów css. Najprościej rzecz ujmując, jest to zewnętrzny plik podpięty do szablonu, zawierający polecenia formatujące poszczególne elementy na blogu.

Gdzie zmieniamy style css?

Blogger: PROJEKT / SZABLON / DOSTOSUJ / ZAAWANSOWANE / DODAJ ARKUSZ CSS.
WordPress: PERSONALIZACJA / DODATKOWY CSS.

W najnowszej wersji WordPressa opcja Dodatkowy css jest już na stałe wbudowana, w poprzednich wszystko zależało od tego, jaki szablon był zainstalowany na blogu. Niektóre motywy oferowały tą opcję, w innych trzeba było modyfikować kodowanie bezpośrednio w szablonie poprzez KOKPIT / WYGLĄD / EDYTOR / ARKUSZ STYLÓW, co nie było dobrym rozwiązaniem, bo niektóre aktualizacje powodowały powrót do wyjściowego  stanu.

Zanim zaczniemy zmieniać kodowanie

Przed przystąpieniem do jakichkolwiek zmian, musimy pamiętać o zabezpieczeniu naszego szablonu i utworzeniu kopii zapasowej sprzed zmian. Od tego miejsca będę opisywać, jak takie modyfikacje przeprowadzić na platformie blogger. Dajcie znać w komentarzach, czy są wśród Was osoby posiadające blogi na WordPressie i czy mam poruszać również zagadnienia związane z tą platformą. Wracając do utworzenia kopii szablonu,  w bloggerze wchodzimy w Szablon / Edytuj kod HTML, stawiamy kursor w miejscu kodu, naciskając jednocześnie klawisze CTRL+A zaznaczamy cały kod. Możemy go wkleić do notatnika i zapisać na dysku. W razie pomyłki, taki kod ponownie wklejamy w to samo miejsce i zapisujemy zmiany.

Z czego składają się style css?

Każdy styl składa się z nazwy formatowanego elementu oraz nawiasów klamrowych zawierających polecenia do formatowania.

Tyle tytułem wstępu. W następnej notce z tej serii wyjaśnię, jak sprawdzić nazwę elementu, który chcemy sformatować oraz jak modyfikować istniejące w szablonie kody.

Czy próbowaliście już samodzielnie zmieniać coś w szablonie bloga za pomocą stylów css? Jeśli tak, to z jakimi problemami się zetknęliście? Na jakiej platformie znajduje się Wasz blog lub strona?

 

4 comments / Add your comment below

  1. Na pewno to cos w kregu moich zainteresowań. Mnie najbardziej zastanawia jak zmienic wyglad ktory bd sie pojawial na telefonach.

    1. Blogger i WordPress są platformami sprzyjającymi responsywności, więc nie powinno być problemów z prawidłowym wyświetlaniem się takich stron na telefonach, bo się ładnie dopasowują (o ile ktoś nie namiesza w kodzie i nie pozmienia ustawień, bo i takie sytuacje są możliwe). W bloggerze musi być zaznaczona opcja „Tak, na urządzeniach mobilnych pokazuj szablon w wersji mobilnej.” w panelu Szablon. Są jednak takie szablony, zaprojektowane przez ThemeXpose, w których ta opcja musi być odznaczona, żeby wersja responsywna wyglądała identycznie zarówno na komputerach jak i telefonach.

      1. W kodach szablonów trochę grzebałam i zmieniałam co nieco. Ale uważnie będę śledzić Twój cykl. Na pewno dowiem się czegoś nowego. :-)

Dodaj komentarz