Ikonok hozzáadása egy Joomla cikk fejlécéhez. Tartalom rendezése Joomlában - cikkek törlése és létrehozása az adminisztrációs panelen, valamint paraméterek beállítása az összes anyaghoz

Ez az oktatóanyag megmutatja, hogyan használhat szöveg helyett képeket a Joomla menüelemeihez.

Többféleképpen is hozzáadhat ikonokat a menühöz:

Képek hozzáadása a menükhöz a Menükezelő segítségével

Alapértelmezett Joomla modul A menüvel való együttműködés lehetővé teszi a menüelemek nevének képekkel való helyettesítését:

Képek hozzáadása CSS-kóddal

A második módszer egy osztály hozzáadása css képek fájlba (ahol a ### a sablon száma). A Joomla egyes menümoduljai, például az IceMegaMenu modul, nem teszik lehetővé, hogy képet adjon hozzá az adminisztrációs panel menüelemeihez. Képet hozzáadhat css kóddal:

Háttérkép használata css kódban:




1. A FontAwesome ikonok használata:

   1. Fedezze fel webhelyét a Fejlesztői eszköz segítségével az egyéni css osztály megtalálásához.

      Változtassa meg a fájlt templates/theme###/css/templates.css(ahol a ### a minta száma).

      A fájlhoz hozzáadandó CSS-kód általában így néz ki:

      #iceMenu_101 .iceMenuTitle:before ( font-family: FontAwesome !fontos; tartalom: "###" !fontos; font-size: 45px !fontos; felső: 20px !fontos; pozíció: relatív !fontos; kijelző: inline-block !fontos; sormagasság: 45px !fontos; magasság: 90px !fontos; ) #iceMenu_101 .iceMenuTitle ( font:0/0 a !important; )

      Ahol ### a FontAwesome ikonosztály. Az elérhető ikonok listája a FontAwesome webhelyen található.

      Ellenőrizze webhelyén, hogy vannak-e változások.

Most már tudja, hogyan használjon képeket szöveg helyett a Joomla menüelemeiben.

A Joomla webhely további azonosítása egyedi ikon vagy favicon lehet. A Joomla webhelyen található Favicon megjelenik a böngészőkben a lapok címében és a könyvjelzőkben, valamint a webhely összes oldalán. Alapértelmezés szerint a CMS Joomla által kezelt összes webhely ugyanazokkal a szabványos ikonokkal rendelkezik. Csak a Joomla oldal látható részének ikonja és a adminisztratív panel. A webhely azon részének ikonja, amelyet a látogatók látnak, könnyen megváltoztatható.

Meg kell változtatnom a Joomla webhely ikonját (faviconját)?

A webhely ikonjának cseréje csak a webhely optimalizálás szubjektív összetevőjét érinti. A látogató, aki könyvjelzővel látta el a webhely egy oldalát, könnyen megtalálhatja azt az összes könyvjelző listájában. Ezenkívül a webhely ikonja megjelenik a keresési és alkalmazási eszközökben. például a Yandex Webmaster webhelylistájában.

Ráadásul cserével szabványos ikonra Joomla, abbahagyja annak hirdetését, hogy webhelyét a Joomla kezeli, és ez az egyik lépés a webhely biztonságának növelésére.

Az új Joomla ikonra vonatkozó követelmények

A Favicon szó két angol szó, a kedvencek és az ikon rövidítése. A Joomla ikonoknak saját szabványuk van. Méretük 16x16 vagy 32x32 pixel legyen. Favicon készült, 256 színben kell lennie. És ami a legfontosabb, a Joomla ikon formátumának favicon .ico formátumúnak kell lennie.

A Joomla webhely faviconjának cseréjének lépései

A Joomla webhely ikonjának cseréje néhány egyszerű lépésben történik:

• Generáljon egyedi ikont bármely PNG vagy JPEG fotóból. Vagy rajzoljon saját maga ikont online szolgáltatások vagy fotóprogramok segítségével;
• Készítsen favicont a képből ico formátumban, 16(32)×16(32) px méretben;
• Töltsön fel egy új ikont a webhely könyvtárába, miközben törli az összes régi favicont;
• Beszúrás speciális kód sablonba kezdőlap te oldalad.

Elemezzük az egyes lépéseket részletesen.

1. lépés: Ikon létrehozása a Joomla webhelyhez

Az interneten számos online eszköz található, amelyekkel bármely fényképből favicon .ico ikont hozhat létre. Itt a következőkre kell figyelni.

Ha azt szeretné, hogy a kedvence nélküle legyen fehér háttér, akkor a forrásának innen kell származnia átlátszó háttér létrehozása és formázása során PNG mentéskor. A png-től eltérő fényképformátumok használatával fehér vagy fekete háttérrel rendelkező Favicont kap. Remek ikontárakat találhat az interneten a címen főmenü ennek a webhelynek a pontján: Webmestereszközök.

A favicon generátorokat saját maga is megtalálhatja, ha beírja a keresőmezőbe: favicon generator Itt megadom az ikongenerátorok címét.

1. pr-cy.ru/favicon
2. tools.dynamicdrive.com/favicon

• iconfinder.com
• freepik.com/free-icons
• genericons.com
• flaticons.net
• iconbird.com
• iconizer.net
• webhostinghub.com
• iconspedia.com
• iconsearch.com
• icons8.com
• glyphicons.com
• findicons.com
• icomoon.io
• iconarchive.com
• megtestesít.én
• thennounproject.com
• flaticon.com

A Favicon ikonok az alábbiak szerint készülnek

• Keresse meg előre az eredeti képet a jövőbeli ikonjához;
• Nyissa ki a generátort;
• A generátor betöltő ablakában válassza ki az ikonját a számítógépen. Válassza ki a jövő ikonjának méretét, a Joomla 16×16 pixelhez;
• Nyomjon meg egy gombot, mint például a „Make”.
• A Favicon másodpercek alatt jön létre. Ezután már csak le kell töltenie a számítógépére. Ehhez van egy gomb "Letöltés".Ikon a számítógépen, fel kell töltenie a könyvtárba.

2. lépés: Töltsön fel egy új ikont a webhely könyvtárába

A helykönyvtár azon helyével, ahová az oldal új ikonját (faviconját) kell feltölteni, a helyzet a következő.

Korábban a favicon .ico kötelező elhelyezése az oldal gyökérkönyvtára volt. Most egy kicsit enyhült a helyzet. A dinamikus sablonok használata lehetővé teszi, hogy egy ikont töltsön fel a webhely bármely könyvtárába, csak a kódban (lent) kell egyértelműen megadnia a könyvtár elérési útját. Ugyanakkor emlékeznie kell arra, hogy minél távolabb van az ikon a webhely gyökerétől, annál tovább tart a betöltése a böngészőben. És az oldal betöltésének sebességéért küzdeni kell, még apró dolgokban is.

class="eliadunit">

Ezért azt tanácsolom, hogy töltse fel a fő favicont a Joomla webhely gyökerébe. A letöltéshez FTP-kliensre vagy jogosultságra van szüksége a tárhely adminisztrációs paneljén. Új ikon (favicon ) feltöltése előtt ellenőrizze az összes webhelymappát, és távolítsa el vagy nevezze át a régi kedvenc ikonokat, amelyek esetleg telepítve voltak a feltöltött sablonokban. Külön ellenőrizze a mappát a sablonnal. Távolítsa el a favicon.ico fájlt a sablon almappáiból. A régi faviconok eltávolítása után töltse fel az újat a webhely gyökérkönyvtárába. Favicon a webhely könyvtárában, továbbra is be kell illeszteni a kódot a webhely főoldalának sablonjába.

Jegyzet: Ebben a szakaszban a webhely ikonja már megváltozhatott. Egyes sablonokban az ikon megjelenítésének kódja (az alábbi kódról) már be van írva a webhelysablonba, ezért a katalógusban az ikon cseréjekor a böngésző lapon is változhat. Ennek megtekintéséhez ki kell ürítenie a webhely gyorsítótárát, és esetleg újra kell indítania a böngészőt.

3. lépés: Illessze be a kódot a webhelysablonba a favicon ikon megjelenítéséhez

Jegyzet: Ez a módszer elavult, a nagyobb böngészőkben az új ikon a kód beillesztése nélkül jelenik meg. Elég, ha eltávolítja az összes régi favicont a webhely gyökeréből és a sablonból. és törölje a böngésző és a webhely gyorsítótárát is.

A kód (lent) a Joomla kezdőlap sablonjába kerül a címkék közé (példa lentebb). Az interneten számos kódot (favicon) találhat a Joomla webhelyekhez. Csak azokra a kódokra mondok példát, amelyek az összes Joomla webhelyemen működnek.

Egyes kód. Az ikon szinte azonnal megjelenik a webhely gyorsítótárának törlése után.

Kettős kód. Az űrlapelem típusának (típusának) a böngészőben való megjelenítésének hiánya miatt ez az ikon 1-2 napon belül megjelenik a böngészőben.

Három kód. Olyan ikonra (favicon), amely nem a gyökérkönyvtárban található (a patch-to a favicon mappa elérési útja).

• A kódok ezzel a helyesírási GYORSÍTÁSI IKONVAL és ezzel a parancsikonnal működnek
• Ha webhelyének kódja HTML, nem XHTML, akkor a kódot ">" karakterrel kell befejeznie, nem "/>" karakterrel.

Ha meg kell jelenítenie az ikont az IE böngészőben, próbálja meg hozzáadni ezt a kódot:

Miután beszúrta a kódot a sablonba, ne felejtse el menteni, és törölje a webhely gyorsítótárát is.

• Felügyeleti panel >>>Webhely>>>Karbantartás>>>Az összes gyorsítótár törlése (Joomla 1.7-2.5-3.x verzióihoz)
• Felügyeleti panel>>>Eszközök >>>Az összes gyorsítótár törlése (1.5-ös verzió esetén)

Példa a beillesztett kódra a webhely ikonjának megjelenítéséhez:

Ez az oktatóanyag megmutatja, hogyan adhatja hozzá a hiányzó ikonokat FontAwesome egy Joomla 3.x sablonhoz.

Előfordulhat, hogy webhelyéről hiányzik néhány ikon. Ez valószínű, ha megjelent egy új verzió FontAwesome betűtípus, vagy ha a tervező csak azokat az ikonokat adta hozzá, amelyeket a sablon demóverziója használ.

Csatlakozzon a kiszolgálóhoz FTP-kliens használatával, vagy nyissa meg a tárhely vezérlőpultjának Fájlkezelőjét (cPanel fájl kezelő), és keresse meg a fájlt templates/themeXXX/css/template.css.

Keresse meg az utolsó FontAwesome ikonkódot a template.css fájlban. Utána új ikonokat kell hozzáadnia, például a fa-comments ikont:



Most nyissa meg a fájlt templates/themeXXX/less /font-awesome/font-awesome.css, keresse meg az ikonlista utolsó elemét a megnyitott fájl template.css fájljából. Másolja ki az ikon alatti összes kódot (esetünkben a fa-megjegyzések), és illessze be ezt a kódot a template.css fájl végére.

Mentse el a változtatásokat. Most láthatja, hogy az ikonok megjelennek a webhelyén:



Ha valamilyen okból hiányzik a font-awesome.css fájl a sablonból, nyissa meg a fájlt a FontAwesome hivatalos webhelyén, és másolja ki a kódot a fájlból maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css a sablon végére.css.

/ 2008-09 Joomla! Közösségi Magazin

Ebben a cikkben egy egyszerű módot mutatok be, hogyan adhat hozzá új paramétert a Menütípushoz, amely lehetővé teszi, hogy egyéni képet adjon egy cikk címéhez a Joomla! webhely. Ez a módszer hasonlóan az "Oldalosztály utótag" és a "Modulosztály utótag" használatához az adott menühöz vagy modulhoz társított tartalom testreszabásához. Az alábbiakban ismertetett módszert választottam az "Oldalosztály utótag" helyett, mert az utótag nem egy konkrét paramétert, hanem kapcsolódó oldalelemeket érint. Abban egyszerű példa Csak egy paramétert szeretnék hozzáadni az oldal egyik eleméhez - a cikk címéhez.

1. Először is hozzuk létre a példa adatait.

Készítsünk mintaadatokat a folyamatban való használatra:

Hozzon létre egy "Cikkek" nevű "szakaszt". Ezután hozzon létre három kategóriát. Ezeknél a kategóriáknál úgy javítjuk a használhatóságot, hogy a kategória minden cikkéhez megfelelő képet adunk.

Ezután hozzon létre négy szöveges cikket mintatartalommal minden kategóriában. Ehhez a Mass Content kiterjesztést javaslom.

2. Adjon hozzá egy új paramétert az XML "menütípus"-hoz

Keresse meg Joomla! gyökérkönyvtárát! és kövesse a "tmpl" mappát ennek az elérési útnak megfelelően - összetevők/com_content/views/category/tmpl.

Nyissa meg a blog.xml fájlt, és adja hozzá az alábbi paramétert közvetlenül a címkézett sor után . Tegye ugyanezt a default.xml fájl esetében is.

description="Osztályutótag hozzáadása az egyes kategória cikkcímének stílusához"/>

Fontos jegyzet: Ebben a példában a "description" paraméter egy új sorban kezdődik. Amikor kódot ír be egy xml fájlba, ügyeljen arra, hogy az összes kód egy sorban legyen sortörés nélkül.

3. Hozzon létre egy egyéni sablont (sablonfelülírások)

A Joomla! 1.5, megvan az a csodálatos lehetőség, hogy saját sablonokat hozzunk létre, amelyek lecserélik az alapértelmezés szerint a magban biztosított alapértelmezett tartalomkimeneti sablonokat. Az egyéni sablonok (sablonfelülírások) nagyon kényelmesek és könnyen használhatók. Először átmásoljuk a jelölőfájlokat a fő összetevőkből a sablonmappánk "html" mappájába. Ezután változtatásokat hajtunk végre. Amikor a Joomla! megkeresi az egyéni jelölőfájlokat a templates/yourtemplate/html/ mappában, használja a fájljait, és "figyelmen kívül hagyja" a magban lévő jelölőfájlokat.

Ehhez lépjen a /templates/yourtemplate/package oldalra. Hozzon létre egy új csomagot, és nevezze el "html"-nek. A html mappában hozzon létre egy új könyvtárat, és nevezze el "com_content"-nek. Ha a sablonban már vannak "html" vagy "com_content" könyvtárak, akkor szerencséje van, és nem kell létrehoznia őket.

A "com_content" mappában hozzon létre két mappát; az egyik "cikk" nevet, a másik pedig a "kategória" nevet.

Például:

/templates/rhuk_milkyway/html/com_content/category /templates/rhuk_milkyway/html/com_content/article

Most másolja (ne mozgassa!!!) a jelölőfájlokat a mag - összetevők/com_content/views/category/tmpl/blog_item.php fájlban a /templates/your_template/html/com_content/category mappába

Jegyzet: ha ez a fájl már létezik, jobb, ha nem írja felül. Folytathatja a példa lépéseit a meglévő fájl használatával.

Ismét másolja át (ne mozgassa!!!) a komponenseket/com_content/views/article/tmpl/default.php ide: /templates/your_template/html/com_content/article

Tervezési elemek hozzáadása ikonok megjelenítéséhez a jelölőfájlban

Nyissa meg a /templates/your_template/html/com_content/category/blog_item.php fájlt szerkesztéshez.

item->params->get("pageclass_sfx"); ?>" width="100%">

item->params->get('link_titles') && $this->item->readmore_link != "") : ?>

item->readmore_link; ?>"

cikk->további_link; ?>"

escape($ez->cikk->cím); ?>

params->get('icon_suffix'); ?>»>

escape($ez->cikk->cím); ?>

4. CSS-stílusok és képek hozzáadása

Rendben, elkészítettük a Joomla sablon alapelemeit, és most térjünk át ennek a leckének a tervezési részére.

Az első dolog, amit tennünk kell, hogy kiválasztjuk az ikonokat a fent említett kategóriákhoz (GYIK, Média, Könyvek). Ehhez használhatja a selyem ikonkészlet ikonjait, amelyek már rendelkeznek a kívánt mérettel (16px), a PNG-32-es fájlok átlátszósággal és természetesen ingyenesek.

Az alábbiakban a hármat választottam ki. Egyszerűen átmásolhatja ezeket a képeket, és elhelyezheti a /templates/your_template/images mappában.

Most nyissa meg a fő sablon CSS-fájlját (általában template.css) /templates/yourtemplate/css/template.css, és adja hozzá a következő CSS-kódot:

háttér: url(../images/info.png) no-repeat 0px 5px;

háttér: url(../images/photo.png) no-repeat 0px 5px;

háttér: url(../images/book_open.png) no-repeat 0px 5px;

Stílusok hozzárendelése a menüponthoz (menüpont)

A fenti kódban láthatjuk a szükséges osztályok nevét (pl. FAQ, media, book). Ezek azok az opciók, amelyeket most használhat majd a menükezelőbe való belépéshez.

Ehhez először jelentkezzen be a Joomla! és hozzon létre egy új menüpontot a „Blog – Kategória tartalom” tartalomkimenettel.

A jobb oldali menüpontok között a "Speciális" fület látod, ahol látni fogod új paraméter, a "Cikkelyikon osztály" elnevezéssel. Ebben a mezőben három érték egyikét adhatja meg: FAQ, media vagy book. Az új menüelem mentése után böngésszen a Joomla! Frontend Categories Blogjában. webhelyet, és válasszon egy új menüpontot. Amint "ráér" a cikkhez, megjelenik egy új lehetőség a cím ikonnal történő megjelenítésére.

Ha változtatni akarsz meglévő beállításokat vagy adjon hozzá többet, csak annyit kell tennie, hogy hozzáadja új osztály CSS a fenti példában látható módon. Remélem, ezt a módszert fogja használni a sablonjaiban. Élvezze a Joomla!

Ebben a cikkben megnézzük, hogyan lehet ikonokat beszúrni a Joomla oldal menüpontjaiba úgy, hogy ne csak a cím jelenjen meg, hanem mellette egy ikon is, amely ezt a menüpontot szimbolizálja. Hadd emlékeztesselek arra, hogy a Protostar sablonnal dolgozom. A cikk anyaga pedig befolyásolja ennek a sablonnak a stílusait. De ha más sablont használ, akkor nem tény, hogy az alábbi recept haszontalan lesz. ;)

A probléma megfogalmazása

Tehát megvan az oldal főmenüje, ami már megvan áthelyezve a webhely fejlécébeés még adott is neki vízszintes elrendezés. Ez így néz ki:

Általában a standard menü. De nincs benne egyéniség, de nagyon szeretném. =)

Ezért, miután más oldalakon bekukkantott, hogy a nevük mellé lehet ikonokat beszúrni a menüpontokba, ezt megtesszük oldalunkon is.

Menükezelő. Menü tétel. Hivatkozási beállítások lap

A változás érdekében kinézet menüpontunkban szükségünk van a Joomla adminisztrációs panelre, és konkrétan a " Link opciók", amely elérhető a " Menükezelő» szerkesztéskor ill menüpont létrehozása. A képen látható "" mezővel fogunk dolgozni:

1. Írja be a mezőbe annak az ikonnak a nevét, amelyet a menüben látni akarunk a neve elé, például ikon-felhasználók
2. Azonnal tegyen egy szóközt a mezőbe " Menü címe» (hogy az ikon ne olvadjon össze a menüpont nevével)
3. Mentse el a változtatásokat, és nézze meg, mi történik

A menüpont címe lefelé mászik (nem vízszintesen, hanem függőlegesen helyezkedik el)

A kapott eredményt nézve minden lehangolónak tűnik. Bár az ikon megjelent a menüpontban, a menüpont neve lefelé kúszott, függőleges elrendezésben, betűnként kinyúlva:

Javítjuk a helyzetet. A menüpontot vízszintes nézetbe hozzuk.

Még mindig nem értem, hogy mi vezérelte a Protostar sablon készítőit, és miért bukkan fel egy ilyen jamb. Egy dolog világos: a menüelem megjelenítési tulajdonsága blokkra van állítva, tehát minden karaktert blokkol és kiír, egymás alá helyezve őket. És ki kell húznunk őket egy vonalba, ami azt jelenti, hogy a megjelenítési tulajdonság értékének inline-nek kell lennie.

Ehhez módosítania kell a template.css fájlt, amely a sablon mappájában található:

./templates/protostar/css/template.css