Blog
strony internetowe Lublin

Problem banalny ale czasem dla początkującego użytkownika Joomla taka porada może się przydać. Oczywiście w necie jest wiele poradników związanych ze stylami CSS w których podobne. Buttony typu "czytaj dalej" pojawiają się w joomla w modułach i artykułach - zarządzamy ich wyglądem za pomocą różnych klas CSS. W artykułach buttony te są oddzielają tekst zajawki - wstępu artykułu od pełnego tekstu artykułu. Ten typ buttona "czytaj dalej" pojawia się kiedy mamy do czynienia z pozycją menu typu "przegląd artykułów w kategorii" lub "artykułu wyróżnione na stronie głównej.



1. Po zmianie szablonu na mojej stronie www.naleczow.net okazało się że w przeglądzie artykułów, button "czytaj więcej" nie zawsze zachowuje się tak jak bym sobie tego życzył. Zdarza się że dotyka miniaturki - obrazka ilustrującego wstęp artykułu. Oczywiście można za pomocą styli CSS dopisać jakiś margines do niego ale efekt nie był zadowalający więc zdecydowałem że przesunę go do prawej krawędzi - obrazek wyrównany jest do lewej więc powinno być ok i nie będą ze sobą kolidowały.

 



2. Wstawianie przycisku "więcej" do artykułu odbywa się w zakładce edycji artykułu w zapleczu Joomla. No chyba że ktoś woli edytować Joomla od frontu ale ja preferuję pierwszy sposób. W obu jednak przypadkach używamy do tego domyślnego edytora TinyMCE.
W starszych wersjach Joomla było oddzielne pole na zajawkę artykułu i odzielne na pełny tekst artykułu. Od jakiegoś czasu jednak jest stosowane rozwiązanie z podziałem artykułu za pomocą widocznej na screenie czerwonej przerywanej linii. To właśnie nasz przycisk "read more" lub "czytaj dalej" w zależności od wersji językowej.
Przycisk ten dodajemy za pomocą opcji "więcej" w edytorze TinyMCE.

 

 

Projektuję strony www Lublin na Joomla



3. Po sprawdzeniu w FireBugu okazuje się że za wyświetalnie i wygląd tego przycisku odpowiada styl CSS.


#g-page-surround .readmore .btn, #g-offcanvas .readmore .btn, #g-page-surround .search-form-results .btn, #g-offcanvas .search-form-results .btn {
    background: #228cc9 none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    transition: background 0.2s ease 0s;
}
#g-page-surround .readmore .btn:hover, #g-offcanvas .readmore .btn:hover, #g-page-surround .search-form-results .btn:hover, #g-offcanvas .search-form-results .btn:hover, #g-page-surround .readmore .btn:active, #g-offcanvas .readmore .btn:active, #g-page-surround .search-form-results .btn:active, #g-offcanvas .search-form-results .btn:active, #g-page-surround .readmore .btn:focus, #g-offcanvas .readmore .btn:focus, #g-page-surround .search-form-results .btn:focus, #g-offcanvas .search-form-results .btn:focus {
    background: #2e373c none repeat scroll 0 0;
    color: #fff;
}

Oczywiście ten kod powyżej odpowiada także za button wyszukiwarki . Poniżej usunąłem style odwołujące się do przycisku wyszukiwarki. Mamy tu 3 stany przycisku. W pierwszej części jest to stan kiedy jeszcze nie najechaliśmy na niego kursorem. W drugiej części mamy stan "active" i "hover"

#g-page-surround .readmore .btn, #g-offcanvas .readmore .btn {
    background: #228cc9 none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    transition: background 0.2s ease 0s;
}
#g-page-surround .readmore .btn:hover, #g-offcanvas .readmore .btn:hover, #g-page-surround .readmore .btn:active, #g-offcanvas .readmore .btn:active, #g-page-surround .readmore .btn:focus, #g-offcanvas .readmore .btn:focus {
    background: #2e373c none repeat scroll 0 0;
    color: #fff;
}

W moim wypadku styl ten jeszcze dodatkowo jest nadpisany w pliku "custom.scss" i dlatego wygląda jak wygląda.
Żeby zmienić położenie buttona wystarczy dodać do pierwszej części stylu

float: right;

spowoduje to przesunięcie przycisku na prawo


Styl który umieszczę więc w pliku custom.css - tak nadpisuje się style w Gantry5 - będzie wyglądał tak

#g-page-surround .readmore .btn, #g-offcanvas .readmore .btn {
    float: right;
}

 

A tak wyglada efekt końcowy