Sablonok testreszabása

A Shoprenter webáruház rendszer több, előre elkészített megjelenítési sablont is tartalmaz. Ezek határozzák meg az oldal külső megjelenését, a szín- és látványvilágot.

A Shoprenter egyik legnagyobb előnye, hogy a modulok illetve CSS segítségével abszolút testre szabható, és gyakorlatilag bármilyen design kialakítható!

Amennyiben a Sablon kiválasztás menüpont egyre bővűlő kínálatában sikerül megtalálnunk a számunkra legmegfelelőbb sablont, azonban úgy véljük, hogy  egy-két apróbb módosítás lenne szükséges a tökéletes dizájn eléréséhez, ne keseredjünk el, ugyanis a Shoprenter webáruház megoldásban szerkeszthető minden sablon! Amennyiben ért a CSS szerkesztéshez a kiválasztott sablont szabadon alakíthatja, míg el nem nyeri az Önnek legmegfelelőbb állapotot!

Sablon kiválasztás

Ez az opció a Beállítások/Megjelenés/Sablon kiválasztás menüpontban érhető el. Maga a menüpont három fülből áll, a Saját sablonokból, Választható sablonokból, illetve Egyedi sablonok. Az előbbiben csak a kiválasztott sablonok jelennek meg egy kisképpel, amelyen látható lesz maga a megjelenés. Ez alatt egy kis aktiváló jelölőkör látható, ha erre kattintunk az adott sablon lesz a Mentés gombra történő kattintást követően a bolt aktuális kinézete, valamint adott még egy Szerkesztés gomb, amely segítségével a sablont alkotó kisképek, és a CSS is szerkeszthetőek.

A Választható sablonok fülben a többi, választható sablon listázódik ki. Ennek a fülnek a célja, hogy bemutassa a további lehetőségeket, illetve innen a saját sablonok közzé lehessen tenni az itt megjelenő sablonokat. Magán a fülön csupán a sablonok kisképe, illetve mindegyikhez egy gomb található, amellyel áthelyezhető a saját sablonok közé.

Amennyiben egyik sablon se felel meg az elképzeléseinek, akkor az Egyedi sablonok fülön keresztül kapcsolatba léphet velünk és elkészítünk önnek egy teljesen saját dizájnt.

Sablon testreszabás

Ez a Beállítások/Megjelenés/Sablon testreszabás menüpontban érhető el, és az aktuális, vagy a sablon kiválasztásánál megadott sablon módosítását tudjuk itt elvégezni.

Ez a pont 5 fülből áll; az első fül az adott sablonról tartalmaz információkat. A második fül az oldal kinézetét adó kis képi elemeket jeleníti meg. A képek mellett az alapvető információk is – mint a méret, fájlformátum –, illetve a módosíthatósági linkek is helyet kaptak. Ezek egyenként módosíthatóak, vagy törölhetőek a kép alatt található linkek segítségével. Amennyiben az eredmény nem megfelelő, a [Visszaállítás] link segítségével az eredeti állapotra cserélhető a jelenlegi kiskép.

Lehetőségünk van új képek feltöltésére is, a jobb felső részben található „Új kép feltöltése” gomb segítségével. Ekkor egy tallózó ablak jelenik meg, melyben kiválaszthatjuk az új képet.

A harmadik fülön a sablon színei módosíthatóak. Azon elemek, amelyek nem képpel vannak meghatározva, szín, vagy más típusú információként vannak megadva a böngészőnek. A színeket tudjuk ezen a "Sablon színek" nevű fülön módosítani. A használata nagyon egyszerű: a megadott nevű elem mellett látható színkockára kattintva egy színválasztó alkalmazás jelenik meg. Itt a megfelelő színt kiválasztva, és a "Mentés"-re kattintva a változás azonnal látszik az áruházban. Amennyiben valakinek kényelmesebb, a színkocka mellett található szövegmezőben a szín hex-kódja is megjelenik. A rendszer szempontjából mindegy, hogy a két adat közül melyiket adjuk meg.

A negyedik fülön a sablon CSS leírása szerepel, ezzel a megjelenítési adatokat tudjuk módosítani. FIGYELEM! Ezek módosítása az áruház kinézetét módosíthatja. Amennyiben hibás adatok kerülnek be, az áruház nem jelenik meg megfelelően! 
Az alsó ablakban tudja beírni a változtatásokat, amennyiben vissza szeretné állítani ezeket, akkor elegendő törölnie a bevitt kódokat. 
Célszerű minden esetben biztonsági másolatot készíteni a CSS kódokról egy külső fájlban a saját gépén!

Az ötödik fülön kaptak helyet az Egyedi scriptek. A ShopRenter rendszerében lehetőség van egyedi JavaScriptes kódrészletek elhelyezésére is. Ezek többségében a webáruház külső szoftverekkel történő összekötésére szolgálnak.

A kapott kódrészlet dokumentációjától függően kell elhelyezni a kódrészletet az adminisztrációs felület megfelelő szöveges mezőjében. Ez történhet az oldal HEAD részén, vagy a BODY részén belül is, attól függően milyen feltételt szab a külső szoftver. Mindkét esetben az elem végére kerül a kódrészlet.

Fontos azonban, hogy fokozott óvatossággal helyezzük el az ilyen kódokat. Egy rosszul beillesztett kód ugyanis megakadályozhatja, hogy az oldal teljesen betöltődjön, s ezáltal a webáruház nem megfelelően jelenik meg, vagy nem működik tökéletesen.

A Sablon színek fülön lévő menüpontok magyarázatához a következő oldalon  található segítség. Sablononként lehetnek eltérések, de az alapok megegyeznek (kivéve a Boston, Kaméleon és London sablon esetében).

Mobil webáruház

A ShopRenter oldala elérhető mobil változatban is, azaz a mobil eszközökön is képes megjelenni. Ez azt jelenti, hogy nem a bolt hagyományos felületét, hanem egy egyedi, egyhasábos elrendezést látunk a mobil eszközökön ilyenkor.

A mobilra optimalizált áruház használatához először engedélyezni kell a modult. Amennyiben nem használjuk a funkciót, úgy a klasszikus webes nézet jelenik meg mobil eszközökön.

A Facebook áruházhoz hasonlóan a megjelenést, illetve az oldalon található szöveges adatok testre lehet szabni a Beállítások/Megjelenés/Mobil áruház menüpontban.

A menüpontban 3 fül található:

A Főoldali üdvözlő szöveg fülön beállítható, hogy az oldalon alapértelmezetten megjelenő szöveges üzenet jelenjen-e meg mobil nézetben is, vagy egyedi legyen, netán ne is jelenjen meg. Egyedi üdvözlőszöveget is megadhatunk ezen az oldalon.

Az Információk menüpont fülön a hasonló nevű modulban található szöveges tartalmak közül mondhatjuk meg, hogy melyek jelenjenek meg a mobil nézetben.

Az utolsó, Testreszabás nevű fül tartalmazza a mobil nézet színeit vezérlő beállításokat, illetve itt tudjuk még engedélyezni, vagy letiltani. A mobil nézetben nem szokás képeket használni, így szinte mindent színezni lehet. A beállítások gyakorlatilag a teljes mobil nézet színvilágát felölelik, az alapszíntől az árak, szövegek, határvonalak színéig. Ez gyakorlatilag egy kényelmesen használható CSS szerkesztő.

A Logo fülön található beállítás segítségével egyedi logót rendelhet a webáruházához, amely csak a mobilnézeten lesz elérhető.

A használata egyszerű: Mivel mindent szín vezérel, ezért lehetőség van mindegyiket kézzel megadni. Ehhez csak kattintsunk a szín képére a jobb oldalon. A grafikus beállítottságú emberek a képek hex kódját is megadhatják, az eredmény ekkor is ugyanaz lesz. Bővíthető az adott elemhez rendelt színek száma, ekkor a megadott színek közötti színátmenet jön létre, melyek a megadott színpozícionálással még tovább finomíthatóak.

Megjegyeznénk, hogy a sabloncsaládokhoz nem készült külön-külön mobilos megjelenés is. Így viszont sokkal egyedibb mobilos webáruházak hozhatóak létre.

Van még kérdése? Kérelem beküldése

20 Megjegyzések

  • Avatar
    Pletka Sandor

    Üdvözlöm! Azt szeretném megkérdezni, hogy ha az ajánlatkérés hátterét szeretném sötétebbre állítani, akkor melyik részt kell átállítanom?

  • Avatar
    Pletka Sandor

    Tárgytalan, közben megtaláltam, tartalom színeken belül a tartalom doboz háttérszín

  • Avatar
    Fischbein László

    Üdv! Hogyan tudom az általam módosított sablont elmenteni más néven? Van-e erre lehetőség?

  • Avatar
    Zilahi Krisztián

    Üdvözlöm!

    Érdeklődni szeretnék, hogy van lehetőség, egy egyedi (saját) képet beállítani a sablon mögé háttérnek?

    Tehát például, hogy a "Clean Kék" sablonnál bal és jobb oldalt ne egy szürke csík legyen, hanem egy-egy kép?

    Válaszukat előre is köszönöm szépen!

     

     

  • Avatar
    Dévay Gabriella

    Sziasztok! Csatlakozni szeretnék az előttem kérdezőhöz és megkérdezni, hogy van-e lehetőség a háttér színét pl. egy 20x20 pixeles (vagy nagyobb) képre cserélni, ami értelemszerűen egybefüggő sormintaként jelenne meg?

    Előre is köszönöm a segítséget.

  • Avatar
    ShopRenter

    Kedves László!

    Elnézést a kései válaszért. A sablont elmenteni ilyen módon sajnos nem lehet, a css-változtatásokat lehet esetleg külön fájlba kimenteni. Azonban már tervbe van véve, hogy el lehessen menteni a sablonban végzett változtatásokat, és sablonváltás után is vissza lehessen térni hozzájuk.

    Kedves Krisztián és Gabriella

    meg lehet oldani ezeket css-en keresztül, vagy sablontól függően a sablon képei között kicserélve a megfelelő képet. Egy egybefüggő képet nem feltétlen javasolnék, saját monitoron lehet, hogy szépen nézne ki, de más méretben előfordulhat, hogy nagyon torz lenne, színt, vagy mintát viszont minden további nélkül be lehet állítani. 

    Amennyiben további kérdésük lenne, kérem az alábbi weboldalon tegyék meg: http://support.shoprenter.hu/anonymous_requests/new

    Üdvözlettel

    Szabó Gábor

  • Avatar
    Szabó Zoltán

    Sziasztok!

    Hogy tudom megváltoztatni a kategória menük háttér tehát nem a szöveg hanem a kis dobozok színét?

  • Avatar
    ShopRenter

    Kedves Zoltán!

    Ez sablon függő, de általában a beállítások-megjelenés-sablon testreszabásán belül, a sablon színeknél, vagy pedig css-ben. 

    Kérlek írd meg ide a webáruházad nevét, hogy segíteni tudjunk

    http://support.shoprenter.hu/anonymous_requests/new

  • Avatar
    Baranyai Dávid

    Hogyan tudok a Demo áruház felirat helyére logót tenni?

  • Avatar
    Csáki-Darabos Rita

    Hogyan tudom a sablonban a kategórianevek betűméretét növelni?

  • Avatar
    Boldizsár István

    Már az elején elakadtam..

    Nem találom a képeket, pl. a Kaméleon sablon kókuszdióit..

    Köszönöm, B.I.

  • Avatar
    ShopRenter

    Kedves Dávid - beállítások-bolt beállítások-általános beállításoknál a logó fülön nincs esetleg bepipálva a "szöveg megjelenítése logó helyett"? 

    Rita - a külalak szerkesztése CSS segítségével valósítható meg

    István - le tudná kérem írni mi a bolt neve? 

    További kérdések esetén kérem itt tegyék ezt fel, hogy gyorsabban tudjunk segíteni -  http://support.shoprenter.hu/anonymous_requests/new

  • Avatar
    pethsop petshop

    Kedves Shoprenter!

    Az alábbi linken található webshop (http://petshop2.shoprenter.hu/)  főoldalán található slide-show-t szeretném módosítani. Melyik menüpontban találom ezt az opciót? Mivel állateledelekkel foglalkozunk, a könyvek sajnos kevésbé passzolnak a témához :)

    Előre is nagyon szépen köszönöm!

    Üdv, 

    Petróczy Viktória

     

     

  • Avatar
    ShopRenter

    Kedves Viktória!

    Ezt a beállítások-megjelenés-modulok beállításán belül találja, ez a főoldali bannerkezelő modul. 

    További kérdéseit kérem itt tegye fel, hogy gyorsabban tudjunk segíteni -  http://support.shoprenter.hu/anonymous_requests/new

  • Avatar
    Erdei Gábor

    Tisztelt Shoprenter!

    Karácsonyi háttérképet szeretnék felrakni az oldalamra ,ebben kérem a segítségüket ha van rá mód akkor mozgót (mondjuk esik a hó :)  )  Hol tudom ezt módosítani?

    Köszönöm!

  • Avatar
    ShopRenter

    Kedves Gábor!

    A hátteret a beállítások-megjelenés-sablon testreszabásnál lehet szerkeszteni, képtől függően lehet, hogy szükség lesz bizonyos szintű css ismeretre, hogy be lehessen pozicionálni a képet. 

    A mozgó háttér helyett inkább egy javascriptes hóesést tudnék javasolni. Kérem írjon az info@shoprenter.hu címre, hogy bővebben is segíthessünk.

  • Avatar
    Bartók Miklós

    Kedves Balázs!

    Ezt az egyszerű, más oldalakon remekül működő Java scriptet szeretném használni de hibásnak találja a szerkesztő és nem menti el. Mi lehet a gond?

     <script language="javascript" type="text/javascript">

        //Set up images

        img1 = new Image()

        img1 = "face01.png"; // same as image in the <span>

        img2 = new Image()

        img2 = "google02.png";

        img3 = new Image()

        img3 = "youtube03.png";

        

        img4 = new Image()

        img4 = "instagramm04.png";

        //Number of seconds before images rotate

        seconds = "1";

        function imgOne()

        {

        document.getElementById("mypics").innerHTML = '<a href="http://www.facebook.com"><img src="'+img1+'" name="myimg" border=0></a>';

        setTimeout("imgTwo()", seconds * 1000);

        }

        function imgTwo()

        {

        document.getElementById("mypics").innerHTML = '<a href="http://www.google.com"><img src="'+img2+'" name="myimg" border=0></a>';

        setTimeout("imgThree()", seconds * 1000);

        }

        function imgThree()

        {

        document.getElementById("mypics").innerHTML = '<a href="http://www.youtube.com"><img src="'+img3+'" name="myimg" border=0></a>';

        setTimeout("imgFor()", seconds * 1000);

        }

        function imgFor()

        {

        document.getElementById("mypics").innerHTML = '<a href="http://www.instagram.com"><img src="'+img4+'" name="myimg" border=0></a>';

        setTimeout("imgOne()", seconds * 1000);

        }

        </script>

  • Avatar
    Varga Mária

    Kedves Balázs,

    A kérdésem az, hogy amennyiben találunk egy nekünk megfelelőbb sablont az újdonságok között, mint amit jelenleg használunk, van e mód az új sablonra történő átállásra, és az alapbeállításokat az új sablon átveszi e? A feltöltött termékek átkerülnek e?

    A saját sablonok közé betett sablonokat ha jól látom lehet szerkeszteni, de az előnézeti képeiket tudom ellenőrizni anélkül, hogy aktiválnám valamelyiket is?

    Üdv

    Szilárd

  • Avatar
    Kuchta Ildikó

    Sziasztok!
    London türkiz sablonom van, de túl kicsinek bizonyul a logó helye. Szeretném a magasságot megnövelni, hogy nagyobb méretben kitehessem az új logómat, mert már nagyon zavar az oldal aránytalansága. Én is meg tudom ezt oldani vagy csak a CSS-ben lehet ezt módosítani, amihez komolyabb tudás kell?
    Üdv: Ildikó

  • Avatar
    Fógel Adrián

    Kedves Shoprenter!

    Érdeklődnék, hogy van-e már lehetőség a testreszabott sablonok elmentésére, hogy sablonváltás után visszalehessen állítani a már korábban kialakítottat.

    Köszönettel,
    Adrián

Kérjük, Belépés után hagyjon megjegyzést.