Hvordan du lager tilpassede CSS3 ThemeRoller-temaer - dummies

De 24 forhåndsdefinerte CSS3-temaene gir et bredt spekter av farger, tekst og andre valg. Det er imidlertid mulig å lage et betydelig større antall temaer ved å bruke den tilpassede tilnærmingen. Du kan starte med standardtemaoppsett og arbeid derfra, men den beste tilnærmingen er å finne et forhåndsdefinert tema som ser nærmere på hva du vil og endrer det i stedet.

Ikke bare vil du gjøre mindre arbeid på denne måten, men det kan du oppleve at det ikke er så mange funksjoner som skal endres når du har et forhåndsdefinert tema i tankene. Denne artikkelen hjelper deg med å opprette et tilpasset tema ved hjelp av ThemeRoller.

Hvert tema består av en rekke innstillinger. Ved å endre en bestemt innstilling styrer du utseendet på alle jQuery-brukergrensesnittfunksjonene, inkludert alle widgets. Hver av disse innstillingene har en rekke subsettings du kan bruke til å kontrollere det generelle utseendet på temaet ditt. Følgende liste gir en oversikt over disse innstillingene.

Fontinnstillinger: Bestemmer det generelle utseendet på tekst i temaet. Du kan velge skriftfamilien, vekten og størrelsen på skrifttypen.
Hoek Radius: Bestemmer størrelsen på de avrundede hjørner som brukes for de forskjellige elementene. Denne innstillingen påvirker ikke en nettleser som ikke støtter avrundede hjørner, for eksempel Internet Explorer 7.
Header / Toolbar: Angir innstillingene for bakgrunnen og grensen som brukes for alle overskrifter og verktøylinjer.

Når du arbeider med bakgrunnen, kan du velge bakgrunnsfarge, tekstur og prosentandel av dekning. En tekstur angir hvordan bakgrunnen er mønstret, for eksempel bruk av diagonaler eller diamanter. Hvis du klikker på teksturfeltet, vises en illustrasjonsliste som er akseptabelt - bare velg teksten du vil prøve. Hvis du velger riktig tekstur, kan du legge til pizzazz på nettstedet ditt.

Grenseinnstillingene styrer grense-, tekst- og ikonfarger. Når du klikker på et av disse feltene, ser du en dialogboks for fargevalg. Du kan imidlertid også skrive en bestemt fargeverdi ved hjelp av heksadesimal notasjon.
Innhold: Gir samme bakgrunns- og grensesnittvalg som de som er angitt av Innstillinger for topptekst / verktøylinje. Forskjellen er at disse innstillingene påvirker sidens innhold, i stedet for overskrifter og verktøylinjer.
Clickable: standardstatus: Gir samme bakgrunns- og grensesnittvalg som de som er angitt av Innstillinger for topptekst / verktøylinje. Forskjellen er at disse innstillingene påvirker kontroller som er i standardstatus, i stedet for overskrifter og verktøylinjer.
Klikkbar: svevertilstand: Gir samme bakgrunns- og grensesnittvalg som de som er angitt av Innstillinger for topptekst / verktøylinje. Forskjellen er at disse innstillingene påvirker kontroller som befinner seg i hover-tilstanden (når musepekeren er plassert over toppen av kontrollen), i stedet for overskrifter og verktøylinjer.
Klikkbar: Aktiv tilstand: Gir samme bakgrunns- og grensesnittvalg som de som er angitt av Innstillinger for topptekst / verktøylinje. Forskjellen er at disse innstillingene påvirker kontroller som er i den aktive (valgte) tilstanden, i stedet for overskrifter og verktøylinjer.
Høydepunkt: Gir samme bakgrunns- og grensesnittvalg som de som er angitt av Innstillinger for topptekst / verktøylinje. Forskjellen er at disse innstillingene påvirker alt brukeren har uthevet på skjermen, i stedet for overskrifter og verktøylinjer.
Feil: Gir samme bakgrunns- og grensesnittvalg som de som er angitt av Innstillinger for topptekst / verktøylinje. Forskjellen er at disse innstillingene påvirker feilmeldinger (inkludert innhold), i stedet for overskrifter og verktøylinjer.
Modal skjerm for overlegg: Definerer hvordan overlays vises på skjermen. En overlay er informasjon som presenteres over toppen av eksisterende innhold, på samme måte som en dialogboks vises over toppen av et program. Innstillingene styr bakgrunnen og overleggets utseende.

Bakgrunnsinnstillingene angir farge, tekstur og prosentandel av dekning av bakgrunnen. Teksturene som brukes til overlegg, er helt forskjellige fra de som brukes til andre elementer, så du må sjekke dem nøye. I alle andre henseender fungerer bakgrunnsinnstillingene som de som brukes til innstillingene for topptekst / verktøylinje.

Innstillingen Overlay Opacity styrer hvor godt du kan se det underliggende innholdet. I de fleste tilfeller gir ThemeRoller et modikum av show-through for å gi siden et glasslignende utseende (funnet i enkelte operativsystemer i dag). Du kan imidlertid endre denne innstillingen for å gi ulike spesialeffekter. Innstilling av denne verdien for lav har en tendens til å vise seg distraherende for leseren fordi det opprinnelige innholdet blir sett for enkelt.
Drop Shadows: Endrer utseendet på dropshadows, som har en tendens til å gi noen sideelementer en 3D-effekt. Du kan kontrollere bakgrunnen og det generelle utseendet på dropshadow. Bakgrunnskontrollene er nøyaktig det samme som de som brukes med Modal Screen Overlays.

Dagsskyggenes generelle utseende er definert av skyggeduksiteten, tykkelsen og forskyvningen fra det skyggede elementet. Du kan også kontrollere rundingen av skyggehjulene (når funksjonen støttes av nettleseren).