În această parte veți învăța despre setările de fișier skin.ini. dezasambla câteva exemple comune de modificări în diferite părți ale pielii Opera. În a treia parte a acestei serii se va da o descriere cuprinzătoare a explica responsabilitățile diferitelor elemente din skin.ini. dar cred că revizuirea mai multor exemple - mod mai eficient de a stăpâni arta de manipulare abilă a skin.ini fișier.
Personalizați butonul Culoarea textului
Skin.ini Deschideți fișierul și găsiți secțiunea [Bara de instrumente Button Skin]. Culoarea textului nu este specificat, prin urmare, trebuie să adăugați mai întâi secțiunea Color Text =. Valoarea de culoare este specificat ca o valoare hexazecimală cu un „#“ la început.
Adăugați linia de text color = # FF0000. pentru a seta culoarea roșie a textului:
Butonul de pe bara de instrumente ar trebui să arate astfel:
Pentru a seta culoarea de fundal a unui element, trebuie să adăugați opțiunea Color = în secțiunea care controlează elementul de date, și setați culoarea folosind valoarea hexazecimală. Dacă parametrul de culoare nu este specificat, Opera face elementul transparent, provocând fundalul va străluci elementul situat sub acesta.
În secțiunea [Bara de instrumente Butonul Skin], setat la valoarea Color = «# 0000FF» pentru a adăuga un fundal albastru, așa cum se arată mai jos:
Acest lucru ar trebui să conducă la următoarele efecte:
Pentru a afișa limitele elementului, trebuie să adăugați doi parametri:
- Border = instalează grosimea de frontieră, în mod implicit este „0“ (fără limită). Rețineți că granița va începe la marginea elementului și să crească spre interior - stabilirea lățimii de frontieră de 10 nu face elementul mai mult, ea doar începe să se ascundă grafica din interiorul celulei.
- Al doilea parametru, Color Border =. stabileste culoarea frontierei. La fel ca și în textul color. Valoarea este dată în hexazecimal.
Încearcă-l singur - introduceți următoarele două linii în secțiunea [bara de instrumente butonul Skin]. pentru a adăuga un chenar albastru de grosime 1 pixel pentru toate butoanele de pe bara de instrumente:
După aplicarea acestor modificări, butonul trebuie să arate astfel:
Pentru a adăuga frontiere mai complexe, puteți utiliza imaginile - cum se face acest lucru este descris mai târziu în acest document.
Câmpurile (umplutură) și marje butoane (marja)
Domenii (padding) a stabilit distanța dintre limitele elementului și conținutul acestuia; liniuțe (marja) este stabilită de granița într-o celulă sau celulă-mamă adiacentă. Ei lucrează în același mod ca și aceleași proprietăți în modelul bloc de cod HTML.
Padding Parametrii Margin și a stabilit în mod independent pentru fiecare dintre cele patru laturi (sus, dreapta, jos, stânga). Valoare implicita = 0, un interval de valori care pot fi setate nu este limitat. Valorile negative sunt permise.
În scopuri demonstrative, este de dorit să se stabilească un câmp valori mari și marje, deoarece asigură că acestea vor fi vizibile în mod clar - este ceea ce vom face în acest exemplu. Secțiunea [Bara de instrumente Butonul Skin] conține deja de la 5 până la 8 parametri, astfel, rămâne doar pentru a adăuga 3. stabili padding egal Top = „20“ și egală cu Margine dreapta = „10“, după cum se arată mai jos:
Acum puteți vedea un câmp mare (padding) în partea de sus în caseta albastră, și o mică adâncitură (marja) între butoanele din afara cutiei:
Pentru a afla mai multe despre aceste opțiuni, a se vedea explicațiile detaliate ale padding și marja în articolul următor.
Odată ce am învățat despre impactul câmpurilor și padding pe distanța față de limitele interioare și exterioare, putem seta intervalul dintre butoanele text și imagine. Pentru a face acest lucru, trebuie să adăugați opțiunea Spacing = și setați distanța în pixeli.
Această opțiune adaugă automat intervalul specificat, acolo unde este necesar. Dacă setați stilul de afișare a barei de instrumente Opera „pictograme numai“ butoane (vezi tab-ul „Bare de instrumente“ în setările de înregistrare :. Instrumente> Appearance), intervalele vor fi complet ignorate. Pe de altă parte, dacă setați stilul de „Icoane si text de mai jos“, intervalul va fi adăugat sub butonul de imagine, iar dacă setați stilul de „Pictogramele și textul de pe dreapta“, a adăugat el la dreapta butonului.
Pielea standard Opera Spațiere = egal cu „2“ pentru secțiunea [Buton Bara de instrumente a pielii]; mergeți mai departe și modificați valoarea la „15“ pentru a face gama mai proeminent, după cum se arată mai jos:
Acest lucru va duce la aproximativ următorul rezultat:
Elemente de tip BoxStretch / BoxTile
Prin colaborarea cu Opera, este posibil să fi observat deja că fundalul buton se schimbă atunci când treceți cursorul pe ea. Deși acest lucru poate fi realizat prin adăugarea de frontiere și culori de fundal, de fapt, acest lucru se face cu ajutorul imaginilor.
Pentru a utiliza imaginea ca element de fundal, întâi trebuie să specificați tipul său: Tip =. Cele mai frecvent utilizate tipuri de piele standard - BoxStretch și BoxTile.
Elementele BoxTile puteți utiliza un total de nouă imagini:
- O imagine pentru fiecare colț - Colțul topleft. Colțul Topright. Colțul Bottomright. Colțul Bottomleft. Poziția lor este fixat în colțuri ale elementului.
- O imagine pentru fiecare frontieră - Tile stânga. Tile Top. Faiantei. Placi de fund. Ei au repetat pentru a umple spațiul de-a lungul fiecărui element de graniță.
- O imagine centrală, care se repetă pentru a umple spațiul gol din mijlocul elementului - Centrul de placi de ceramica.
Imaginile sunt aranjate după cum urmează:
Dacă te uiți la secțiunea [Bara de instrumente Butonul Skin.pressed] în fișierul skin.ini. veți vedea următorul cod:
După cum puteți vedea, pentru toate colțurile și granițele din piele implicit folosind aceeași imagine - frontieră / simple_border.png; Tile Center utilizează un alt.
Hai să facem ceva interesant - copiați aceste 10 linii în secțiunea [Buton Bara de instrumente a pielii] pentru prelucrarea în stare normală de butoane - acum pielea va arata astfel:
Dacă eliminați cele 4 linii care sunt responsabile pentru stilul frontierelor (Tile stânga, Placi de Top, faiantei, Placi de fund), apoi reîmprospătați pielea, veți observa că numai colțuri și partea centrală a imaginii au fost colorate, iar limitele devin transparente:
Zonele care sunt transparente, determinate de imaginile existente. În acest exemplu, unghiular Art - 1x1 pixeli, astfel, suprafața alocată limitele, ocupă 1px în înălțime pentru limitele superioare și inferioare, și 1px în lățime la frontierele stânga și din dreapta. În cazul în care colțurile imaginilor au fost 5px 2px în înălțime și în lățime, înălțimea rezervată pentru limitele superioare și inferioare ar fi 5px, iar lățimea rezervată din stânga și din dreapta frontierelor, ar fi doar 2 pixeli.
Același lucru este valabil și pentru eliminarea imaginilor unghiulare. Astfel, este întotdeauna important la crearea unei imagini de colț și de delimitare pentru a se potrivi reciproc. Nu este atât de important pentru centrul imaginii, deoarece întotdeauna este gresie pentru a umple spațiul gol din mijlocul elementului.
În BoxStretch instalați doar o singură imagine, care este apoi întinsă în mod automat pentru a se potrivi cu dimensiunile elementelor. Această întindere ignoră aceste limite și se aplică numai la mijlocul imaginii.
Imaginea este definit ca un centru de placi de ceramica. și dimensiunea frontierei, care nu va fi extins, este setat parametrul StretchBorder în pixeli, așa cum este indicat prin linia punctată în figura de mai jos:
Dacă setați StretchBorder = 0. Gradient prea întinsă:
Aceste două tipuri au avantaje și dezavantaje, și care unul este cel mai bine depinde de situație. Cele mai multe dintre elementele care pot fi emise folosind BoxTile. Acestea pot fi, de asemenea, decorat cu ajutorul BoxStretch. în afară de ultima, în cele mai multe cazuri, pentru a crea un mai rapid, deoarece Este nevoie de doar o singură imagine în loc de nouă.
Stare (.hover / .ATENTIE / .selected / .pressed)
Citind secțiunea de mai sus pe tipuri, puteți vedea referințe [bara de instrumente butonul Skin.hover]. Adăugarea .hover la numele secțiunii spune Opera pentru a utiliza acest articol numai atunci când treceți cursorul mouse-ului.
Parametrii utilizați pentru a determina proprietățile statelor sunt aceleași ca și cele utilizate pentru orice alt element.
De-a lungul stat este desenată pe partea de sus a normale, așa că, dacă utilizați elemente cu transparență pentru .hover de stat. elementele starea normală va arăta prin intermediul.
Din moment ce statele sunt desenate deasupra normal, nu este nevoie să se specifice domeniului și înapoi din nou, cu excepția cazurilor în care aveți nevoie de ea.
Vă rugăm să rețineți că nu toate elementele suporta toate statele.
Localizare (.bottom / .left / .top / .right)
Împreună cu statele descrise mai sus, există, de asemenea, indicatori de locație. Acestea sunt folosite pentru barele de instrumente de stil și conținutul lor, în funcție de locația lor. Pielea implicit, după cum puteți vedea, filele uita diferit, în funcție de faptul dacă acestea sunt situate deasupra sau dedesubtul. Acest lucru se datorează faptului că în cazul în care bara de tab-ul este situat în partea de jos a filei sunt realizate folosind [Pagebar Button Skin.bottom]. și secțiunea [Pagebar Butonul Skin] este utilizat pentru cele trei locații rămase.
În cazul în care stilul de locația celulei curentă este disponibilă, Opera va utiliza, în caz contrar se va folosi stilul general al panoului.
Să adăugăm un nou stil care va fi utilizat în cazul dreptului de locația bara de tab. Pentru a face acest lucru, trebuie să adăugați secțiunea corespunzătoare [Pagebar Skin.right] în fișierul skin.ini. Vă rugăm să rețineți că secțiunea [Tabs Skin] nu este utilizat pentru decorarea barei cu file, precum și pentru filele din dialogurile.
Secțiunea nou creată, specifică tipul de element și a imaginii, așa cum se arată mai jos:
După ce adăugați această secțiune pentru pielea și fila aspect panoul din dreapta, acesta ar trebui să arate, după cum urmează:
După cum puteți vedea, butonul „New Tab“ nu arata ca o săgeată, pentru că Secțiunea [Pagebar plutitoare Skin.right] încă. Pentru a-l reveni la o săgeată, copiați parametrii din secțiunea [Pagebar Skin plutitoare] în [Pagebar Floating Skin.right]:
Când faceți acest lucru, bara de tab-ul va arata astfel:
clonarea
Dacă doriți să facă unele elemente arata la fel, nu trebuie să specificați toți parametrii în mod independent unul de altul - poti face o dată și spune Opera pentru a copia aceste setări pentru alte elemente. Acest lucru se face prin utilizarea Clone =.
Valoarea este preluat numele elementului a cărui setări doriți să clona, fără paranteze pătrate. La starea normală a barei de instrumente butoane arata ca acestea sunt într-o stare .hover (efect Hover), trebuie să înlocuiți secțiunea standard de [Bara de instrumente Butonul Skin] acest lucru:
Buton va arăta astfel:
Ca clona = copiile tuturor parametrilor de la un element la altul, le puteți înlocui, adăugând la parametrul opțiunea Clone alt element pe care îl copiați, de exemplu:
Acest lucru va conduce la următoarele efecte:
elemente pentru copii
O altă opțiune populară este Child0 =. Această opțiune creează un element din interiorul elementului, ați specificat. Element copil este întins pentru a umple conținutul elementului părinte. Dacă ați stabilit limite sau colțuri, suprafața ocupată de acestea nu vor fi completate, precum și în cazul «Centrul de placi de ceramica» în Tip = BoxTile.
Pentru următorul exemplu vom adăuga un element de copil la butonul din fereastra de dialog. Deoarece proiectarea de butoane casetele de dialog clonate pentru alte elemente, cum ar fi butoane și liste drop-down, bare de derulare, butoane, pentru ei, această schimbare va avea un impact la fel de bine.
secțiunea Căutare [Push Button Skin] și adăugați-l șirul Child0 = Reîncarcă. Acest lucru va conduce la faptul că butoanele de dialog pentru Windows va arata astfel:
Puteți adăuga încă un element de copil: prima va fi numit Child0 =. în al doilea rând - Child1 =. etc.
Este posibil să fi întrebat deja cum să-i spun Opera, care imaginea de a utiliza pictograma utilizată în bara de instrumente și în alte locuri. Icon „Update“, a menționat în exemplul anterior, nu are propria secțiune, așa cum este definit?
La sfârșitul skin.ini fișier puteți găsi secțiunea [Imagini] și [Cutii]. Acestea sunt secțiuni speciale, care nu funcționează, la fel ca cele pe care le cunoașteți despre până acum - fiecare linie în aceste secțiuni creează un nou element cu o singură imagine atribuită.
String Search Panel = butoanele / search.png creează Panoul Element de căutare, și sunt asociate cu, imaginea «search.png», situat în «butoanele» dosar. Atunci când se utilizează o astfel de imagine, este afișată așa cum este, de exemplu, dimensiunea sa nu este schimbat, și nu va fi repetată (nici o repetări) oricum.
În loc de a folosi această metodă rapidă pentru a crea un produs, puteți face acest lucru așa cum este prezentat mai jos; Rețineți, totuși, că nu este recomandat să facă acest lucru, și este menționată numai în scopul de a vă ajuta să înțelegeți:
pictograme mari
O caracteristică frumos, nu este utilizat în piele standard este abilitatea de a specifica o pictogramă în două dimensiuni diferite. Acesta permite utilizatorilor să aleagă dacă doresc să utilizeze o imagine mai mică pentru a economisi spațiu pe ecran, sau mare, este de obicei mai bine, deoarece acestea par a fi mai informativ.
Înainte de a utiliza pictograme mari, trebuie să adăugați o linie de imagini de mari dimensiuni = 1 în secțiunea [Opțiuni]. Acum, în setările „Efectuarea de dialog. „În cazul în care apar selectați“ pictograme mari“, care pot fi stabilite în mod independent, pentru fiecare bară de instrumente:
După adăugarea acestui parametru, trebuie să definiți elementele. Acest lucru se face prin adăugarea unui element de .large, o versiune mărită pe care doriți să o adăugați. Pentru a adăuga versiune îmbunătățită a butonului „Refresh“, se introduce un rând Reload.large = large_buttons / reload.png în secțiunea [Imagini]. în cazul în care «large_buttons» - dosar, care ar trebui să fie mărită versiune pictograme.
În același fel, puteți adăuga o versiune mai mare a pictogramelor pentru alte elemente, de exemplu, [butonul Bara de instrumente skin.large] pentru a mări imaginea în secțiunea [Bara de instrumente butonul piele].
Vă rugăm să rețineți că, în contrast cu stările și locațiile. pentru pictograme mari niciun produs de rezervă!