Témák létrehozása az opera
Ebben a részben meg fogja tanulni a fájlról skin.ini beállításokat. szétszerelése néhány gyakori példát változások különböző részein az Opera bőrt. A harmadik részben a sorozat kap egy átfogó leírást elmagyarázza a felelősség a különböző elemek skin.ini. de azt hiszem, hogy a felülvizsgálat számos példát - a hatékonyabb módja a mastering a művészet ügyes kezelése fájl skin.ini.
Customize gomb szövegének színe
Skin.ini Nyissa meg a fájlt, és keresse meg a [eszköztár gomb Skin]. A szín a szövegben nincs megadva, ezért először hozzá kell adni a szakasz Text Color =. A szín megadva érték hexadecimális értékként a „#” az elején.
Add a vonal Text Color = # FF0000. állítsa be a piros szín a szöveg:
Gombjára kell most kinéznie:
Ahhoz, hogy a háttér színe egy elem, hozzá kell adni a lehetőséget, Color = a szakasz, amely ellenőrzi az adatok elem, és a szín a hexadecimális értéket. Ha a szín paraméter nincs megadva, az Opera az elem átlátszó, így a háttérben fog ragyogni elem található alatta.
Szakaszban [eszköztár gomb Skin], arra az értékre Color = «# 0000FF» hozzá a kék alapon, az alábbiak szerint:
Ennek eredményeképpen a következő hatások:
Megjelenítéséhez az elem határait, hozzá kell két paramétert:
- Border = telepíti a határ vastagsága, alapértelmezés szerint a „0” (korlátozás nélkül). Tartsuk szem előtt, hogy a határon kezdődik szélén az elem befelé növekednek - beállítás a határ szélessége 10 nem teszi az elem több, ő csak kezdi, hogy elrejtse a grafika a sejten belül.
- A második paraméter, Border Color =. beállítja a színt a határ. Csakúgy, mint a szöveg színét. érték szerepel hexadecimális.
Próbáld ki magad - illessze be a következő két sort a részben [eszköztár gomb Skin]. hogy adjunk egy határa kék 1 pixel vastagságú összes gomb az eszköztáron:
Alkalmazása után ezek a változások, a gomb így kell kinéznie:
Ahhoz, hogy hozzá bonyolultabb határok, akkor a képek -, hogyan kell csinálni a későbbiekben ismertetett dokumentumban.
Fields (padding) és margók (margin) gombok
Fields (padding) állítsa be a távolságot a határait az elem és annak tartalma; francia (margó) távol van a határ egy szomszédos cella vagy szülői sejttel. Ők dolgoznak ugyanúgy, mint az azonos tulajdonságokat a blokk modell HTML.
Padding Margó paraméterek és függetlenül beállítható mind a négy oldalán (Top, Right, alsó, bal). Alapérték = 0, egy értéktartományt lehet állítani nem korlátozott. Negatív értékek is engedélyezettek.
A bemutató kedvéért kívánatos létrehozni egy nagy mező értékei és az árrések, mivel biztosítja, hogy nem lesznek jól látható - az, amit teszünk ebben a példában. § [eszköztár gomb Skin] már tartalmaz 5-8 paramétereket, így csak az maradt hátra, hogy adjunk 3 egyenlő esélyű Padding Top = „20” és egyenlő jobb margó = „10” az alábbiak szerint:
Most már láthatja a nagy területen (padding), a tetején a kék doboz, és egy kis bemélyedés (margin) a gombok között a dobozon kívül:
Ha szeretne többet megtudni ezeket a lehetőségeket, hogy részletes magyarázatot padding és margin a következő cikkben.
Miután megtanultuk a hatása a mezőket, és padding a távolság a belső és a külső határok, tudjuk meg a közötti időszakban a kép és a szöveg segítségével. Ehhez hozzá kell adni a lehetőséget, térköz = és a távolságot pixelben.
Ez az opció automatikusan hozzáadja a megadott intervallum, ahol szükség van rá. Ha a megjelenítési stílus Operaház eszköztár „ikonok csak” gombbal (lásd lap „Eszköztárak” a regisztrációs beállítások :. Eszközök> Megjelenés), a szünetekben lesz teljesen figyelmen kívül hagyja. Másrészt, ha meg a stílus „Ikonok és szöveg alatti”, az intervallum lesz adva a kép alatti gombot, ha meg a stílus „Az ikonok és a szöveg a jobb oldalon,” tette hozzá a jogot a gombot.
A szabványos bőr Opera térköz = egyenlő „2” a rész [eszköztár gomb Skin]; megy előre, és módosítsa az értéket „15”, hogy a tartomány több kiemelkedő, az alábbiak szerint:
Ez azt eredményezi, hogy körülbelül a következő eredménnyel:
Típus elemek BoxStretch / BoxTile
A munka az Opera, akkor lehet, hogy már észre, hogy a háttérben a gomb átvált, ha lebeg a kurzort. Bár ez úgy valósítható meg, hozzátéve határok és háttérszín, sőt, ez történt a segítségével a képek.
Ahhoz, hogy a kép, mint a háttér elem, először meg kell adnia annak típusa: Type =. A leggyakrabban használt szabvány bőrtípusra - BoxStretch és BoxTile.
Elements BoxTile használhatja összesen kilenc képek:
- Egy kép minden sarkában - Corner balfelső. Corner Topright. Corner Bottomright. Corner Bottomleft. Helyzetük rögzítve a sarkokban az elem.
- Egy kép minden határon - Csempe Bal. Tile Top. Csempe jobb. Csempe Bottom. Ők ismételni, hogy kitöltse a helyet mentén átnyúló elem.
- Egy központi kép, ami ismétlődik, hogy töltse ki az üres tér közepén az elem - Csempe Center.
A képek vannak elrendezve a következőképpen:
Ha megnézzük a [eszköztár gomb Skin.pressed] a skin.ini fájlt. látni fogja a következő kódot:
Mint látható, az összes sarkai és határai az alapértelmezett skin használja ugyanazt a képet - határon / simple_border.png; Csempe Center használ egy másik.
Csináljunk valami érdekeset - másolni ezeket 10 sor a [eszköztár gomb Skin] feldolgozásra a normális állapot gombok - most a bőr fog kinézni:
Ha eltávolítja a 4 sor, amelyek felelősek a stílus határait (cserép Bal, cserép Top, cserép jobb, cserép alsó), majd frissítse a bőr, akkor veszi észre, hogy csak a sarkai és a központi része a kép volt színes, és a határokat átláthatóvá válik:
Területeken, amelyek átlátható, meghatározva a meglévő képeket. Ebben a példában a szögletes Art - 1x1 pixel, így a terület oszt ki a határokat, elfoglalja 1px magassága az alsó és felső határok, és 1 képpont széles a bal és jobb határokat. Ha a sarkok a képek voltak 5px 2px magasság és szélesség, magasság fenntartott alsó és felső határa lenne 5px, szélessége fenntartva a bal és jobb határa lenne csak 2 pixel.
Ugyanez vonatkozik az eltávolítása szögletes képek. Így mindig fontos létrehozásakor egy sarokba, és határt kép egyeztetni egymással. Ez nem olyan fontos az a kép közepén, ahogy mindig ki van rakva, hogy kitöltse az üres tér közepén az elem.
A BoxStretch telepíti csak egy képet, amelyet aztán automatikusan megnyúlik, hogy illeszkedjen a méreteit az elemek. Ez stretching figyelmen kívül hagyja ezeket a határokat, és csak az a kép közepét.
A kép úgy definiáljuk, mint egy cserép központ. és a mérete a határ, amely nem hosszabbítható meg, be van állítva StretchBorder paraméter pixel, ahogy azt a szaggatott vonal az alábbi ábrán:
Ha a StretchBorder = 0. gradiens túl feszített:
Ez a két típusnak megvannak az előnyei és hátrányai, és melyik a legjobb a helyzettől függ. A legtöbb elemek, amelyek használatával kell kibocsátani BoxTile. Ők is díszített segítségével BoxStretch. mellett az utolsó, a legtöbb esetben, hogy hozzon létre egy gyorsabb, mert Ez megköveteli csak egyetlen kép helyett kilenc.
Állapot (.hover / .attention / .selected / .pressed)
Olvasás a fenti szakaszt típusú, láthatjuk hivatkozások [eszköztár gomb Skin.hover]. Hozzáadása .hover a szakasz nevét mondja Opera használni ezt a tételt csak akkor, ha lebeg a kurzort.
Paraméterek meghatározásához használt a tulajdonságait a államok ugyanazok, mint azok, amelyeket bármely más elemet.
Több állam rajzolja fel a normális, így ha elemeket átláthatóságot az állami .hover. az elemek a normális állapot jelenik meg rajta.
Mivel az államok rajzolt a tetején a normális, nem kell megadni a területen, és vissza, kivéve azokat az eseteket, amikor szüksége van rá.
Kérjük, vegye figyelembe, hogy nem minden elemét támogatja az összes államokban.
Hely (.bottom / .left / .top / .right)
Együtt az államok a fent leírt, ott is mutatói helyen. Hozzá vannak szokva a stílus eszköztárak és azok tartalmát elhelyezkedéstől függően. Az alapértelmezett bőr, mint látható, a fülek formája eltérő attól függően, hogy azok felett vagy alatt helyezkedhetnek. Ez azért van, mert ha a fül sáv alján a lap szerint készülnek [Pagebar gomb Skin.bottom]. és a [Pagebar gomb Skin] használjuk a fennmaradó három helyszínen.
Ha a stílus az aktuális cella hely elérhető, Opera fogja használni, egyébként az általános stílus a panel fogja használni.
Adjunk hozzá egy új stílust fogja használni abban az esetben a jogot a lap bár helyét. Ehhez hozzá kell adni a megfelelő rész [Pagebar Skin.right] a skin.ini fájlt. Felhívjuk figyelmét, hogy a [Lapok Skin] nem használják a díszítés a lap bár, és a lapok a párbeszéd.
Az újonnan létrehozott szakaszban adja meg az elem típusát és a kép, az alábbiak szerint:
Miután hozzáadott ebben a szakaszban a bőr és a panel elrendezése lapon jobbra, meg kell nézni az alábbiak szerint:
Mint látható, az „Új lap” gomb nem néz ki, mint egy nyíl, mert § [Pagebar Úszó Skin.right] még. Ahhoz, hogy küldje vissza a nyíl, másolja a paramétereket a [Pagebar Úszó Skin] a [Pagebar Lebegő Skin.right]:
Ha ezt megteszi, a lap bár így fog kinézni:
klónozás
Ha azt szeretnénk, hogy néhány elem ugyanúgy néz ki, akkor nem kell megadni az összes paramétert egymástól függetlenül - meg tudod csinálni egyszer, és mondd Opera másolni ezeket a beállításokat a többi elem. Ez úgy történik, hogy a Clone =.
Az értéket veszi elem neve, amelynek a beállításait klónozni kívánt, a szögletes zárójelek nélkül. Ahhoz, hogy a normális állapot az eszköztár gombjainak néznek ki, mintha olyan állapotban .hover (hover hatás), ki kell cserélni a standard rész [eszköztár gomb Skin] a következő:
Gomb fog kinézni:
Ahogy a klónok = másolatok összes paraméter az egyik elemről a másikra, akkor cserélje ki, hozzátéve, hogy a Clone opció paraméter más elem, másol, például:
Ez vezet a következő hatásokat:
Gyermek elemek
Egy másik népszerű lehetőség Child0 =. Ez az opció létrehoz egy elemet elemen belül megadott. Gyermek elem van nyújtva, hogy kitöltse a tartalmát a szülő elem. Ha az előírt határok, sarkok, a terület által elfoglalt őket, nem lesznek kitöltve, valamint abban az esetben, «Mozaik Center» itt Type = BoxTile.
A következő példában hozzá utódeleme a gombra a párbeszédablakban. Mivel a design párbeszédpanelek gombok klónozott más elemeket, például gombokat és legördülő listák, görgetősávok, gombok, nekik ez a változás hatással lesz is.
Keresési feltételek [Nyomógombos Skin] és add hozzá a húr Child0 = újratöltése. Ez vezet az a tény, hogy az ablakok párbeszéd gombok fog kinézni:
Akkor hozzá még egy gyerek elemét: az első lesz az úgynevezett Child0 =. második - Child1 =. stb
Lehet, hogy már azon, hogyan lehet megmondani, Opera, amely képet használni az ikon az eszköztáron és más helyeken. Icon „Update”, ahogy azt a korábbi például nem rendelkezik saját rész, így hogyan definiáljuk?
Végén skin.ini fájl megtalálható az a [Kép] és [dobozok]. Ezek speciális szakaszok, amelyek nem működnek, mint azok, amiről tudod, hogy eddig - minden sor az alábbi fejezeteket létrehoz egy új elemet egy kép van hozzárendelve.
Karakterlánc parancsra Search = gombok / search.png teremt Panel keresés elem és kapcsolódó, a kép «search.png» található, a «gombokkal» mappát. Amikor egy ilyen képet használja, akkor az megjelenik, ahogy van, vagyis, a mérete nem változott, és ez nem fog megismétlődni (nincs ismétlés) egyébként.
Ahelyett, hogy ezt a gyors módszert a terméket, megteheti az alábbiak szerint; Tartsuk szem előtt azonban, hogy ez nem ajánlott megtenni, és a továbbiakban csak azért, hogy segítsen megérteni:
nagy ikonok
Egy szép tulajdonsága, nem használják a standard bőr, az a képesség, hogy adjon meg egy ikont két különböző méretben. Ez lehetővé teszi a felhasználók számára, hogy eldöntsék, akarnak használni egy kisebb képet a helytakarékosság a képernyőn, vagy nagy, akkor általában jobb, mert úgy tűnik, hogy informatívabb.
Használat előtt nagy ikonok, meg kell adni egy sort Nagy képek = 1 a részben az [Opciók]. Most a beállítások „Legyen a párbeszéd. „Ha megjelenik válassza” Nagy ikonok”, amely egymástól függetlenül állítható be az egyes eszköztár:
Hozzáadása után ezt a paramétert meg kell adni az elemeket. Ez úgy történik, hozzátéve, egy elem .large, kibővített változata, amely a hozzáadni kívánt. Ahhoz, hogy hozzá továbbfejlesztett változata a „Frissítés” gomb be egy sor Reload.large = large_buttons / reload.png a [Képek]. ahol «large_buttons» - mappa, ami kell bővíteni ikonok változata.
Ugyanígy felvehet egy nagyobb változata az ikonok más elemek, például a [eszköztár gomb skin.large] a képre a részben [eszköztár gomb skin].
Felhívjuk figyelmét, hogy ellentétben az államok és helyszíneken. Nagy ikonok nincs tartalék elemeket!