Joomla 1.6 - sizable text

Zmiana rozmiaru czcionkiJakiś czas temu w artykule Struktura serwisu WWW pisałem, że nie ma stron idealnych. Mimo tego, że nie sposób zaprojektować witrynę, która będzie podobała się dosłownie wszystkim, każdy chciałby mieć serwis, który podoba się większości odwiedzających go internautów.

Zapewne już zauważyłeś, że Internet staje się potężnym medium informacyjnym, reklamowym, marketingowym. To nie telewizja, ani radio jest obecnie tzw. czwartą władzą! To Internet! Korporacje wydają fortuny na zatrudnianie wysokiej klasy specjalistów takich jak webmasterzy, graficy, copywriterzy, psycholodzy, marketingowcy itp.

Niestety przeciętny webmaster nie ma dostępu do takich funduszy, więc radzi sobie jak może ;-)

Idealnie byłoby gdyby strona internetowa wzbudzała zainteresowanie internautów, podobała im się oraz poruszanie się po niej byłoby proste i intuicyjne. Na przykład nie każdy internauta ma doskonały wzrok i jeżeli zaprojektujesz zbyt małą czcionkę, to mimo iż prezentowane przez Ciebie treści będą niezwykle ciekawe, nie zainteresuje się nimi, ponieważ będzie miał trudności z ich odczytaniem. Nie każdy przecież wie, że w większości najnowszych przeglądarek wystarczy przytrzymać na klawiaturze klawisz CTRL i nacisnąć klawisz + (plus), aby powiększyć zawartość okna lub klawisz - (minus), aby go zmniejszyć. Nie każdy również wie, że wystarczy nacisnąć na klawiaturze kombinację klawiszy CTRL+0 (zero), aby powrócić do pierwotnej wielkości zawartości okna. A może dać taką możliwość użytkownikowi Twojego serwisu, aby klikając odpowiednie linki (przyciski) mógł sobie zwiększać lub zmniejszać tekst? Widziałeś już takie serwisy?

Ja, do niedawna uważałem, że wszyscy wiedzą, że wystarczy CTRL+ lub CTRL- aby sobie regulować wielkość zawartości przeglądanego serwisu. ;-) Niedawno, projektując mały serwis związany z terapią i rehabilitacją osób cierpiących na różnego rodzaju skrzywienia kręgosłupa, zaprojektowałem dosyć sporą czcionkę, aby była czytelna dla większości osób, które potencjalnie mogą na nią trafić. Jednak pani doktor stwierdziła, że czcionka jest za duża i nie widać wszystkiego co trzeba od razu i że przecież nie wszyscy przewijają stronę w dół, aby zobaczyć jakie treści kryje całość. No i w sumie ma rację! Poprosiła, abym może dał jakieś okienko z informacją, jak powiększyć tekst, aby ktoś ze słabszym wzrokiem mógł przeczytać go komfortowo, bez wysilania oczu. Myślę sobie, no tak, ale to mało profesjonalnie. No i w ten oto sposób zmuszony zostałem do zaimplementowania jakiegoś narzędzia, które pozwalałoby zmieniać rozmiar czcionki poprzez klikanie w serwisie.

Ponieważ serwis oparty jest na Joomla! 1.6, pamiętałem, że kiedyś jak testowałem tą wersję i przeglądałem go korzystając z domyślnych szablonów, któryś z nich miał takie rozwiązanie! Tak więc sprawdzam i... JEST :-) Szablon Beez5:

Zmiana rozmiaru tekstu w szablonie Beez5Jak wykorzystać to rozwiązanie w swoim szablonie? Nie jest to trudne. Pokażę Tobie, jak w kilku krokach umożliwić zmianę rozmiaru czcionki w Twoim serwisie, wykorzystując rozwiązanie z szablonu Beez5.

Skrypty JavaScript

Bez zbędnego tłumaczenia o co chodzi, skopiuj cały folder javascript z szablonu beez5 do swojego szablonu, w moim wypadku to slawop_net:

Kopiowanie folderu javascript z szablonu Beez5

Jeżeli w swoim szablonie wykorzystujesz już jakieś skrypty javacript i masz już folder, w którym je przechowujesz, to skopiuj zawartość folderu javascript z szablonu Beez5 do swojego folderu ze skryptami javascript.

W folderze tym znajdują się trzy pliki, z czego do naszego zastosowania potrzebne są dwa: hide.js i md_stylechanger.js. Pierwszy z nich m.in. generuje w znaczniku o identyfikatorze fontsize tekst z trzema linkami, natomiast drugi odpowiedzialny jest za funkcjonalność związaną ze zmianą rozmiaru czcionek.

Plik językowy szablonu

Teraz znajdź w folderze pl_PL (znajdziesz go w folderze languages Twojej instalacji Joomla) plik pl-PL.tpl_beez5.ini. Utwórz jego kopię nazywając ją pl-PL.tpl_nazwa_twojej_templatki.ini (w moim wypadku pl-PL.tpl_slawop_net.ini).

Fragmenty kodu z szablonu Beez5

Skopiuj wiersz 29 oraz 32 z pliku index.php szablonu Beez5 i wklej pod klauzulą defined('_JEXEC') or die; w pliku index.php swojego szablonu. U mnie to wygląda tak:

Fragment kodu z szablonu Beez5

Pamiętaj, aby zmienić fragment z nazwą szablonu beez5 na nazwę Twojego szablonu. W moim wypadku to slawop_net:

Fragment kodu szablonu Beez5 z zamienioną nazwą

Następnie skopiuj wiersze: 74, 76, 85-92 z pliku index.php szablonu Beez5 i wklej do pliku index.php swojego szablonu, przed znacznikiem znacznikiem zamykającym </HEAD>:

Fragment kodu szablonu Beez5

Pamiętaj, aby zmienić fragment z nazwą szablonu beez5 na nazwę Twojego szablonu. W moim wypadku to slawop_net:

Fragment kodu szablonu Beez5 wklejony do własnego szablonu

Pozostała w zasadzie tylko jedna rzecz. Skopiuj wiersz 129 z pliku index.php szablonu beez5 do pliku index.php swojego szablonu w miejsce, gdzie chcesz, aby pokazały się linki umożliwiające zmianę rozmiaru czcionki.

U mnie wklejam w nagłówku:

Fragment kodu z szablonu Beez wklejony do własnego szablonu

Zmodyfikuj swój styl CSS

Jeżeli zrobiłeś wszystko jak trzeba powinieneś zobaczyć tekst: Rozmiar tekstu wraz z linkami: zwiększ, wyzeruj i zmniejsz. Na razie pewnie ich wygląd może nie jest zachwycający:

Wygląd modułu zmieniającego wielkość czcionki

Teraz wystarczy kilka modyfikacji w Twoim pliku CSS, aby całość prezentowała się na przykład tak:

Wygląd modułu zmieniającego wielkość tekstu po modyfikacji w pliku CSS

Cecha font-size w stylach CSS

Jeżeli zrobiłeś wszystko jak trzeba, skrypt wyświetla na stronie co trzeba, ale nie zmienia rozmiaru tekstu, to prawdopodobnie w swoich stylach używasz wartości absolutnych dla cechy font-size! Określając wielkość czcionki danego elementu wpisałeś na przykład:

h1 {font-size: 26px;}

Koniecznie musisz to zmienić używając jednostek: em lub wartości procentowych, na przykład:

h1 {font-size: 1.5em;}

lub

h1 {font-size: 120%;}

Po tych zmianach wszystko powinno działać jak należy :-)

Plik deskryptora

Jeżeli te zmiany będziesz chciał dokonać na szablonach, które będą miały być instalowane poprzez instalator Joomla!, to powinieneś dodać do pliku deskryptora (templateDetails.xml) w sekcji , następujący wpis: javascript.

wpis w pliku deskryptora

To byłoby chyba na tyle! Jeżeli próbowałeś zastosować to o czym tutaj piszę, to podziel się swoimi spostrzeżeniami w komentarzu pod tym artykułem. Może napotkałeś na jakieś problemy? Napisz, może uda się Tobie pomóc :-)

 

Uważasz, że artykuł był ciekawy i chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?
Wpisz swoje imię oraz adres e-mail a następnie kliknij "ZAPISZ MNIE"

Twoje imię:


Adres email:


Joomla! 1.6 - prosty przepis na własną stronę WWW
Jak przygotować się do egzaminów?

Podobne wpisy

 

    By accepting you will be accessing a service provided by a third-party external to https://www.slawop.net/

    Najnowsze komentarze

    Gość - Studio Jak wybrać hosting dla Joomla!?
    13 wrzesień 2019
    Warto jeszcze dopisać punkt, żeby przy wyborze wybrać panel między DirectAdmin/cPanel. Niektóre hostingi mają swoje własne rozwiązania - czasami bardzo specyficzne, co niekoniecznie jest dobrą rzeczą
    Gość - Marek Szyfrowanie symetryczne a niesymetryczne
    09 czerwiec 2019
    "Klucz przekazany do publicznej wiadomości, nazywany jest kluczem publicznym lub jawnym. Może on być stosowany do szyfrowania lub deszyfrowania informacji otrzymanych od osoby, która go wygenerowała. ...
    Gość - Marek Tworzenie szablonów dla Joomla! Helix Ultimate
    10 maj 2019
    Witam, napotkałem problem pojawiający się przy zmianie kolorów tła czy czcionek oraz importowaniem ustawień. W pierwszym przypadku, po zmianie kolorów i ich zapisaniem, panel podglądu strony przeładow...
    Gość - Andy SSL i Joomla! w Smarthost
    03 styczeń 2019
    Dzięki, jak zwykle dobra robota! Warto dodać, że instalacja certyfikatu SSL nie zapewnia bezpieczeństwa transmisji danych. To jest możliwe po wdrożeniu polityki bezpieczeństwa w firmie. Co do SSL - to...
    Gość - Henryk Jak utworzyć menu poziome w szablonie protostar?
    02 styczeń 2019
    Robię punkt po punkcie i nie wyświetla się poziome menu Nie wiem gdzie tkwi błąd i co robię źle?Jeśli to możliwe to proszę o pomocps. posiadam książkę "Joomla! 3x" i tu również niema pomocy Pozdrawiam...