Share This

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







Przydało się? - Udostępnij

Blog - popularne

Specified key was too long; max key length is 767 bytes - błąd podczas przywracania strony za...

Klient poprosił mnie o zwiększenie wersji PHP do najnowszej wersj PHP 7.2. Przy stronach firmowych najczęściej nie wykonuję takich operacji z automatu tylko staram się na początek sprawdzić czy jest...
Czytaj dalej

Akeeba Kickstart - czyli jak przywrócić stronę internetową Joomla 3 z kopii zapasowej Akeeba Backup

Przenosimy stronę na CMS joomla na inny serwer. Mając wykonaną za pomocą Akeeba Backup kopię strony www możemy ją przenieść w krótkim czasie na dowolny serwer. Czas wysyłania na serwer rozpakowanych...
Czytaj dalej

Jak zrobić banner slideshow w joomla 3 - dodatek Roksprocket dla strony www na joomla

Roksprocket dla Joomla czyli jak zrobić banner dla naszej strony internetowej na joomla. Roksprocket do moduł którego wersja występuje także dla wordpressa. Można za jego pomocą wykonać nie tylko...
Czytaj dalej

Jak dodać firmę do Google Maps

Tworząc firmową stronę internetową prawie zawsze umieszczamy na niej mapę z lokalizacją firmy. Czasy statycznych map graficznych minęły dawno temu. Teraz najczęściej szukamy firm na google które ma...
Czytaj dalej

Jak dodać film z youtube stronę www na joomla - dodatek AllVideos od Joomla Works

Niezbyt często korzystam w wykonywanych stronach www z możliwości osadzania w nich wideo. Jeśli klienci mają przygotowane materiały wideo warto je wykorzystać nie tylko z powodu lepszego zapoznania...
Czytaj dalej

Jak wykonać przekierowanie DNS domeny zarejestrowanej na home.pl na serwer nazwa.pl - na którym...

Przekierowanie DNS wykonujemy kiedy domenę zarejestrowaliśmy w jednej firmie, a hosting dla naszej strony internetowej wykupiliśmy w innej. Dzisiaj pokażę jak przekierować domenę zarejestrowaną na...
Czytaj dalej

WordPress - jak wykonać kopię zapasową strony www na WordPress za pomocą Akeeba Backup

WordPress podobno nie sprawia problemów, ale dmuchając na zimne - kopię strony www należy wykonać jeśli zależy nam na bezpieczeństwie naszych danych. Akeeba Backup to narzędzie które powstało jako...
Czytaj dalej

Przezroczystość w plikach PNG - jak zapisać plik z PNG z przezroczystością w Adobe Photoshop dla...

Format .png to drugi w kolejności po .jpg format plików graficznych wykorzystywany w czasie tworzenia stron internetowych. Oczywiście większość użytkowników internetu najbardziej kojarzy .jpg bo w...
Czytaj dalej

Akeeba Backup - jak wykonać kopię strony www na CMS Joomla 3

Akeeba Backup pozwala na tworzenie kopii na wszystkich wersjach joomla - tu w wersji dla Joomla 3 Mając stronę internetową utrzymywaną na dobrym hostingu nie musimy martwić się o wykonywanie kopii...
Czytaj dalej