Hide on small screen - budowa stron mobilnych cz2

Praktyczne wykorzystanie klas o których wspominałem w części pierwszej wygląda następująco:

Ukrywanie modułów w szablonie Joomla 3

Posiadamy moduł, który chcemy ukryć na urządzeniu mobilnym lub tablecie. Jest on po prostu za duży i psuje nam wygląd strony. W tym celu otwieramy dany moduł i przechodzimy na zakładkę wzbogacone, tam szukamy pola Przyrostek klas CSS modułu w to pole wpisujemy hide_mobile, co oznacza że dany moduł będzie ukryty na urządzeniach mobilnych, jeśli dopiszemy tutaj hide_small_tablet to także na małych tabletach moduł się nie ukaże. Oczywiście możemy dopisać też  hide_large_tablet i wtedy moduł nie ukaże się także na dużych tabletach np. 10 cali.

Teraz wiemy jak ukrywać moduły na tabletach, ale co zrobić jeśli na tablecie chcemy aby w zastępstwie pojawił się inny moduł. Postępujemy tak, tworzymy zastępczy moduł i wpisujemy: hide_wide_screen, hide_standard_screen – to oznacza, że dany moduł ukryjemy na standardowych monitorach oraz monitorach panoramicznych, zaś moduł pokaże się na urządzeniach mobilnych jak telefon i dwa rodzaje tabletów. Można też zakombinować odwrotnie.
Wiemy już jak dany moduł ukryć na urządzeniach mobilnych i pokazać go na ekranach komputerów, oraz jak pokazać zastępczy moduł.

Ukrycie fragmentu testu na urządzeniach mobilnych

Podobnie możemy zrobić z fragmentem tekstu, ale to już będzie trochę trudniejsze ponieważ musimy edytować kod danego tekstu, czyli musimy przełączyć edytor tekstowy do trybu edycji kodu.

Ja najczęściej używam edytora Rokpad, tak on wygląda jak na obrazku powyżej. Składania jest kolorowana, dzięki czemu łatwiej jest odnaleźć potrzebny fragment.

Na obrazku poniżej pokazuję co zmienimy w tekście. Kolorem żółtym zaznaczyłem tekst, który chce ukryć na telefonie.

Natomiast w czerwonej ramce zaznaczyłem co musimy dopisać. a więc na poczatku tego tekstu piszemy spam , rozpoczynając nawiasem ostrym, następnie wpisujemy słowo class czyli nadajemy klasę i w cudzysłowi wartość, w naszym przypadku hide_mobile zamykamy cudzysłów i nawias, na końcu zamykamy dany fragment tekstu.

Jeśli będziemy chceili ukryć dany fragment tekstu na tablecie dopisujemy w cudzysłowie kolejny klasy, np hide_small_tablet. W przypadku chęci wstawienia alternatywnego tekstu postępujemy z klasami podobnie jak w przypadku modułów, a więc tworzymy alterantywny tekst w tym samym artykule i określamy go jako ukryty na ekranie komputera.

W następnej części zajmiemy się zdjęciami.