Witam. Jestem w trakcie budowania nowej strony szkoły. Korzystam z szablonu Design Control (http://www.shape5.com/demo/index.php?design_control) . Zainstalowałam dodatek plg_snfontavesome_v1.2.
Niestety na stronie głównej pomimo wpisywania kodu nie pojawiają się ikony np. przy menu. Nie wiem co robię źle. Proszę o podpowiedź co powinnam zrobić aby móc wstawiać wektorowe ikony .
Pozdrawiam Sylwia
zwiastun
23-08-2014, 21:11
A po co Ci w ogóle ten dodatek? Fonty Avesome są dołączone do szablonu design_control
sylwiadub
23-08-2014, 21:53
Witam, w takim razie nie wiem jak z nich korzystać :( W którym miejscu powinnam wstawić nazwę ikony np. fa-university jeżeli chcę aby ukazała się przy nazwie modułu lub menu? Wpisuję w menu/wzbogacone w polu przyrostek klas CSS menu i nic to nie daje :(.
Pozdrawiam Sylwia
zwiastun
23-08-2014, 22:21
Tekst, przed którym chcesz umieścić ikonę, obejmujesz znacznikiem, jak w przykładzie
<span class="icon-rss"></span> tekst
albo
<i class="icon-rss"></i> tekst
Nazwy klas, które możesz zastosować, masz w pliku font-awesome.css (katalogszablonu/css/font-awesome/css)
PS W Joomla 2.5 - niestety - jest jakiś problem z tym szablonem, ale w 3.x na pewno działa
zwiastun
24-08-2014, 09:55
Sylwio, sprawdź, czy przypadkiem wpisane polecenia nie są usuwane z kodu.
Standardowo, nawet jeśli jesteś zalogowana z uprawnieniami głownego administratora, edytor TinyMCE usuwa znaczniki, które uznaje za niedozwolone. I zapewne to jest powód.
Przełącz swój edytor najlepiej na CodeMirror.
Uzupełnienie do wcześniejszej informacji:
Aby wyswietlic ikonę przed lub za tekstem umieszczamy TYLKO znaczniki otwierajacy i zamykający (a nie, jak napisałem wczoraj, że obejmujemy znacznikiem wyraz, przed którym chcemy umieścić ikonę), a wiec np:
<i class="icon-rss"></i> tekst
<i class="icon-4x icon-rss"></i>
<i class="icon_circle icon-rss homepage_icon"></i>
sylwiadub
24-08-2014, 10:48
Witam, gdy stawiam ten kod do Przyrostek klas CSS modułu to po zmianie edytora na stronie pojawia się nazwa modułu"> , którą wpisałam w kodzie zamiast tekstu. Po zapisaniu modułu na zapleczu rzeczywiście zostaje cały kod, wcześniej tego nie było.
Gdy wpisuję kod do menu to na stronie nic się nie pojawia :(.
Pozdrawiam Sylwia
zwiastun
24-08-2014, 10:53
To co pokazałem, to kod, który wywołuje ikony w tekstach artykułów (i w tekstach modułu Własny HTML) . Nie wnikałem do dokumenatcji szablonu, jak dodać ikony w menu czy do tytułów modułów.
sylwiadub
24-08-2014, 11:35
Ok, rozumiem. Mi chodziło o menu z ikonami, które przybierają ten sam kolor co np. nazwa modułu. Może powinnam zmienić dodatek do mega menu aby było z ikonami?
Pozdrawiam Sylwia
- - - Updated - - -
Witam kod w artykułach działa. Właśnie o to mi chodziło. Ikona, którą wprowadziłam przybiera kolor czcionki, którą napisany jest tekst. Szkoda, że nie mogę czegoś takiego wstawić przed nazwą modułu.
Bardzo dziękuję za pomoc.
Pozdrawiam Sylwia
zwiastun
24-08-2014, 11:41
Przejrzalem dokumentację szablonu, ale nie widzę tam takich możliwości, aby umieszczać ikony z FontAvesome
- w tytułach modułów
- w tytułach (nazwach) pozycji menu
W demo szablonu również nie ma takich przykładów.
Oczywiście, to nie znaczy, że nie można uzyc ikon czy to w pozycji menu, czy w tytule modulu, ale w tym celu trzeba wpisac odpowiednie reguły CSS do arkuszy stylów dla selektorów konkretnych pozytcji menu i konkretnych modulów.
sylwiadub
24-08-2014, 12:12
Rozumiem. Niestety aż takim specem nie jestem aby napisać odpowiednie reguły a więc pozostaje mi zmiana szablonu lub rezygnacja. Szablonu raczej nie zmienię bo ten ma sporo wariantów ustawień i edycji. A z darmowych szablonów ciężko jest coś innego znaleźć.
Dziękuję za porady.
Pozdrawiam Sylwia :)
zwiastun
25-08-2014, 01:46
Zachęcam do postudiowania... To nie jest aż tak trudne.
Np. każda pozycja menu otoczona jest znacznikiem li z niepowtarzalną klasą: item10, item11, item55 itp. Aby przed odnośnikiem w pozycji menu umieścić ikonę z FontAvesome, trzeba w arkuszu CSS ustalić regułę formatującą dla selektora li.klasa a, np
li.item10 a:before {
content: "\f001";
}
Tę regułę: content: "\f001" przekopiowalemw tym przykładzie z reguły dla klasy .icon-music:before.
Cały ten kod oznacza: wstaw przed znacznikiem a (dlatego po dwukropku angielski wyraz before) w znaczniku li oznaczonym klasą item10 znak ikony icon-music z FontAvesome.
Wcześniej czy później - skoro zajmujesz się tworzeniem strony - musisz opanować przynajamniej elementy HTML i CSS.
Jakimi klasami oznaczone są poszczególne pozycje menu można podejrzeć dzięki narzędziu Firebug w przeglądarce Firefox, a w Chrome dzięki poleceniu Zbadaj element.
Z szablonów polecam zobaczyć takie darmowe rozwiązania, jak:
JA Purity III (http://www.joomlart.com/joomla/templates/purity-iii)
Eximium Presents (http://www.youjoomla.com/joomla-templates/eximium-free-joomla-template-powered-by-yjsg-v2.html?opendowns#files_holder)
Gantry Framework (http://gantry-framework.org/)
Magazine (https://www.gavick.com/joomla-templates/magazine,111.html) oparty na frameworku Gavern