A A A

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

 

Komentarze 7

Gość - Tomek w sobota, 13 sierpień 2011 10:02

Ogromne dzięki... Świetna instrukcja

Ogromne dzięki... Świetna instrukcja
Gość - natalia w niedziela, 01 styczeń 2012 13:51

Zawsze jestem pod wrażeniem ogromnej wiedzy merytorycznej na tej stronie. Doskonale napisane artykuły, bez tej strony nie dałabym rady ,,ogarnąć" Joomli. Wielkie dzięki!!!!!!!!

Zawsze jestem pod wrażeniem ogromnej wiedzy merytorycznej na tej stronie. Doskonale napisane artykuły, bez tej strony nie dałabym rady ,,ogarnąć" Joomli. Wielkie dzięki!!!!!!!!
Gość - Tomek w piątek, 28 grudzień 2012 14:40

Witam. Poradnik na 5, ale u mnie tekst Rozmiar tekstu Zwiększ Wyzeruj Zmniejsz niezależnie od miejsca umieszczenia rozbija się na dwie linie Gdzie tkwi problem?

Witam. Poradnik na 5, ale u mnie tekst Rozmiar tekstu Zwiększ Wyzeruj Zmniejsz niezależnie od miejsca umieszczenia rozbija się na dwie linie :( Gdzie tkwi problem?
Sławomir Pieszczek (website) w piątek, 28 grudzień 2012 19:56

Tomek, problem prawdopodobnie tkwi w ustawieniach Twojego szablonu ;-)
Musisz zerknąć do pliku CSS i zmienić lub zdefiniować szerokość dla znaczników w których umieściłeś kod definiujący rozmiar tekstu.
W moim przykładzie elementy te umieszczone są w znaczniku DIV o klasie (class) o nazwie logo :-)
Być może element w którym umieściłeś sizabletext u Ciebie ma określoną szerokość.

Tomek, problem prawdopodobnie tkwi w ustawieniach Twojego szablonu ;-) Musisz zerknąć do pliku CSS i zmienić lub zdefiniować szerokość dla znaczników w których umieściłeś kod definiujący rozmiar tekstu. W moim przykładzie elementy te umieszczone są w znaczniku DIV o klasie (class) o nazwie logo :-) Być może element w którym umieściłeś [i]sizabletext [/i]u Ciebie ma określoną szerokość.
Gość - Tomek w piątek, 28 grudzień 2012 21:50

Dzięki za szybką odpowiedź. Wsadzałem wszędzie w każdą pozycje templatki (bizblue) i wszędzie to samo Mam miejsce gdzie są poziome reklamy google 5 linków. Usunąłem wsadziłem i znowu w dwóch liniach. Nijak nie wiem jak to przejść
P.S. W logo tez wrzucałem i to samo

Dzięki za szybką odpowiedź. Wsadzałem wszędzie w każdą pozycje templatki (bizblue) i wszędzie to samo :( Mam miejsce gdzie są poziome reklamy google 5 linków. Usunąłem wsadziłem i znowu w dwóch liniach. Nijak nie wiem jak to przejść :( P.S. W logo tez wrzucałem i to samo
Gość
sobota, 16 luty 2019

Zdjęcie captcha

Najnowsze komentarze

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...
Gość - Joanna Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2
09 grudzień 2018
Czy jest jakaś możliwość, żeby zmienić układ top-bar i tej linii, w której jest logo? Tam niby są flexibloki ale nie można zmienić ich szerokości, a tego potrzebuję bardzo. Jak tego dokonać???
Gość - Informatyk Tworzenie bazy danych w CPanelu na Smarthost - instalacja Joomla!
19 listopad 2018
Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna
Gość - Sławomir DJ Image Slider
04 listopad 2018
co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?