A A A

Joomla 1.6 - sizable text

przez w Webdesign
  • Przeczytano: 9123
  • 7 komentarze
  • Drukuj
9123

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:


Oceń ten wpis:

Nauczyciel przedmiotów informatycznych w szkole ponadgimnazjalnej.


Pierwszy Certyfikowany Administrator Joomla! w Polsce.


Autor książek i e-booków na temat Joomla!. Autor bloga: www.slawop.net, w którym porusza zagadnienia związane z CMS Joomla! i wykorzystaniu go, jako fantastycznego narzędzia, które ułatwia innym tworzenie ich własnego miejsca w sieci.


Prowadzi własną firmę świadczącą usługi związane z tworzeniem oraz administrowaniem serwisów opartych o CMS Joomla!


Współorganizator Joomla! User Group Jawor


Uwielbia ekstremalnie szybką jazdę na rolkach! Fan rozwoju osobistego i ciągłych zmian :-)


I love Joomla! Why?


Because Joomla! is Doing Great Things with Great People :-)


And My favourite sentence:



Don't Let Anybody Steal Your Dreams!


Komentarze

  • Gość
    Sylwek poniedziałek, 02 wrzesień 2013

    Dzięki!
    Opisana metoda działa również z Joomla 2.5
    pozdrawiam

  • Gość
    Tomek piątek, 28 grudzień 2012

    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
    Sławomir Pieszczek piątek, 28 grudzień 2012

    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ść.

  • Gość
    Tomek piątek, 28 grudzień 2012

    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

  • Sławomir Pieszczek
    Sławomir Pieszczek piątek, 28 grudzień 2012

    Tomku, niestety nie pomogę, nie zaglądając do Twojego kodu ;-(

  • Gość
    natalia niedziela, 01 styczeń 2012

    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 sobota, 13 sierpień 2011

    Ogromne dzięki... Świetna instrukcja

Zostaw komentarz

Gość
Gość poniedziałek, 17 grudzień 2018

Najnowsze komentarze

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ć???

Joanna

Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna :)

Informatyk

co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?

Sławomir
05.11.2018 w DJ Image Slider

Właśnie, powinien się pojawić … . Oczywiście skorzystam z rady i zapytam u źródeł. Jeśli dowiem się czegoś mądrego, podzielę się wiedzą, może komuś się przyda. Dziękuję, pozdrawiam, Andrzej

Andrzej
Andrzeju, jeżeli w Ustawieniach podstawowych w zakładce Narzędzia na stronie w polu Powrót do góry masz aktywny przycisk Włączone, to taki przycisk powinien pojawić się u Ciebie na stronie już po prze...