Kā novērst nelielas nepatikšanas tīmeklī, izmantojot stilīgu [Firefox un Chrome]

Kā novērst nelielas nepatikšanas tīmeklī, izmantojot stilīgu [Firefox un Chrome]

Web dizaineriem ir gandrīz neiespējams darbs. Viņiem ir jāizstrādā viens dizains, kas patīk visiem. Runājot par tādu pakalpojumu kā Gmail, ko izmanto neskaitāmi miljoni cilvēku visā pasaulē, jūs patiešām varat atmest “gandrīz” daļu - tas ir vienkārši neiespējami. Pat ja pārveidošana patiks lielākajai daļai cilvēku, vienmēr būs lietotāji, kuriem patiešām nepatīk jaunais izskats.





Dažreiz šo lietotāju ir pietiekami, lai piespiestu uzņēmumu atkāpties, piemēram, Google nesen to darīja ar Gmail ikonas pogām. Bet ko darīt, ja ir kaut kas tāds tiešām ienīst, un uzņēmums to nemaina? Vai esat ar to uz visiem laikiem iestrēdzis? Pateicoties lietotāju stiliem, šādas problēmas varat novērst pats.



Iepazīstinām ar stilīgu

Stilīgs ir bezmaksas papildinājums, kas pieejams abiem Firefox un Chrome , un tas ļauj jums darīt kaut ko diezgan maģisku - piemērot savus stilus tīmekļa lapas elementiem. Pat ja jūs neesat tīmekļa izstrādātājs un nekad savā dzīvē neesat uzrakstījis mazliet CSS, tas ir daudz vieglāk, nekā izklausās. Jūs varat izmantot Stylish, lai pilnībā pārveidotu vietnes (kā es jums parādīšu nākamajā sadaļā), bet vēl svarīgāk ir tas, ka varat izmantot Stylish, lai dažu minūšu laikā novērstu nelielas problēmas.





Piemēram, man bija problēma ar noklusējuma fonta lielumu pakalpojumā Gmail. Interfeiss bija labs - es negribēju ar pārlūkprogrammu tuvināt (Ctrl +), jo tas palielinātu visu saskarnes elementu izmēru un būtu patiešām neglīts. Es tikai gribēju veidu, kā padarīt ziņojuma fontu nedaudz lielāku.

Izmantojot Stylish, tas bija patiešām vienkārši, un es jums parādīšu, kā. Bet pirms mēs sākam veidot savus lietotāja stilus, parunāsim par citu cilvēku darba izmantošanu.



UserStyles.org

Ja kaut kas krīt uz nerviem, ir pilnīgi iespējams, ka neesat viens. UserStyles.org ir vietne, kas lietotājiem ļauj koplietot izveidotos stilus. Augšpusē varat redzēt stilu ( Pievienojiet etiķetes rīkjoslas ikonām ) ieteica MakeUseOf komentētājs RandyN, atbildot uz mūsu stāstu par Gmail ikonas pogām. Šis stils ļauj saglabāt ikonas, bet pievienot teksta etiķetes - ko Google neļaus jums darīt.

UserStyles.org ir lielisks, taču tas nav ideāls. Daži no dizainparaugiem mēģina darīt pārāk daudz (pilnībā mainīt vietnes izskatu), un daži ir paredzēti vecām vietņu versijām un tagad ir bojāti. Ja jūs mēģināt labot kaut ko mazu un nevarat to atrast vietnē UserStyles.org, iespējams, jūsu labākais risinājums ir to izdarīt pats.



Vienkārša lietotāja stila izveide

Lai izveidotu savu lietotāja stilu, vispirms jāzina, kādu lapas elementu mēģināt mainīt, un pēc tam kādas izmaiņas vēlaties veikt. Tātad, lai sāktu, ar peles labo pogu noklikšķiniet uz tā, ko vēlaties mainīt, un izvēlieties Pārbaudiet elementu . Jums vajadzētu redzēt kaut ko līdzīgu šim:

Firefox aptumšo pārējo lapu un ap jūsu izvēlēto elementu uzzīmē ļoti skaidru rāmi. Virs šī elementa ir teksts div#2d6.ii.gt.adP.adO , ir virkne CSS klašu kopā ar vienu ID (daļa, kas sākas ar #). Šis ir atlasītājs, kas ietekmē šī elementa stilu. Ekrāna apakšdaļā ir navigācijas josla, kas ļauj šķērsot DOM koku ', vai vienkāršāk sakot, iet uz augšu un uz leju elementu hierarhijā, kas ved uz jūsu izvēlēto elementu.



Spēles nosaukums šeit ir izvēlēties elementu, kuru vēlaties veidot, un padarīt izvēli ne tik šauru, lai tas neietekmētu visu, ko vēlaties ietekmēt, ne tik plašu, lai tas izjauktu citas lietas.

Es noklikšķināju vienu elementu augstāk, div.gs , tikai tāpēc, ka man patīk tā nosaukums (šķiet kaut kas tāds, kas nemainīsies pārāk ātri, bet tas ir pilnīgs minējums no manas puses). Tas ietekmē visu ziņojumu apgabalu. Kad apgabals, kuru vēlaties veidot, ir atlasīts, noklikšķiniet uz Stils pogu apakšējā labajā stūrī, lai atvērtu Noteikumi maize:

Es zinu, sākumā tas ir biedējoši. Bet šeit jūs redzat dažādus CSS noteikumus, kas ietekmē jūsu izvēlēto elementu, un šeit jūs varat veikt savas pagaidu izmaiņas un redzēt to ietekmi uz lapu reāllaikā, to atkārtoti neielādējot. Bet ko vajadzētu mainīt? Noklikšķiniet uz Rekvizīti pogu un noņemiet atzīmi Tikai lietotāju stili :

Šeit jūs varat redzēt pilnu sarakstu visas CSS noteikumi. Jūs varat ritināt sarakstu uz leju, līdz atrodat noteikumu, kas atbilst jūsu vajadzībām (mūsu gadījumā fonta lielums), un pat noklikšķiniet uz jautājuma zīmes blakus tai, lai atvērtu skaidrojuma lapu. Tātad, tagad mēs zinām, ka vēlamies pielāgot fonta lieluma īpašību visiem div elementiem, kuru klase ir gs '(rakstīts saīsinājumā kā div.gs ).

Paliek tikai jautājums, kāda mēs vēlamies būt tās vērtībai. Lai to izdarītu, mēs atgriežamies pie noteikumu paneļa un sākam spēlēt:

40 pikseļi var būt mazliet traki, bet jums ir vispārējs priekšstats. Spēlējiet ar šo un nekautrējieties pievienot citus rekvizītus, līdz iegūstat vēlamo izskatu. Noteikti neaizveriet lapu, jo jūsu veiktās izmaiņas ir nē saglabāts jebkur.

Jaunā stila saglabāšana

Kad šī vietnes daļa izskatīsies tieši tā, kā vēlaties, ir pienācis laiks to saglabāt. Noklikšķiniet uz Stilīgs ikonu papildjoslā un izvēlieties Uzrakstiet jaunu stilu . Stylish vēlas uzzināt, kurās lapās tam jāpiemēro jaunais stils - mūsu gadījumā izvēlieties otro iespēju, mail.google.com . Tālāk jūs redzēsit šo dialoglodziņu:

Es to jau aizpildīju. Acīmredzot es izvēlējos stilam nosaukumu un dažus tagus. Bet īstās lietas notiek koda ietvaros: 3. rindiņa jau bija tur - Stilīgs ievieto to vietā, lai tas zinātu, uz kurām lapām stils attiecas. Bet 5-7. Līnija ir mana. Analizēsim tos:

5. rinda: div.gs { - šo daļu jums vajadzētu atpazīt. Šis ir elements, kuru esam nolēmuši veidot. Sākuma stiprinājums nozīmē, ka mēs tagad rakstīsim dažus CSS noteikumus. 6. rinda: font-size: 20px! svarīgi; -tas ir noteikums, kuru mēs vēlamies mainīt (fonta lielums), kam seko tā jaunā definīcija (20 pikseļi) un pēc tam! Svarīga deklarācija, kas nozīmē, ka Firefox ievēros šo noteikumu pat tad, ja tekstu tuvāks elements mēģinās iestatīt fonta lielums uz kaut ko citu.7. rinda:} - stila definīcijas aizvēršana.

Pēc tam noklikšķiniet uz Priekšskatīt un apbrīnojiet savu darbu:

Un visbeidzot, kad redzat, ka tas darbojas, noklikšķiniet Saglabāt.

Šī nav pilnīga rokasgrāmata

Es labi apzinos, ka, lai saglabātu šo īso pamācību viena ziņojuma robežās, man bija jāveic vairāki lēcieni un lēcieni. Ja jūs apjukāt ceļā, lūdzu, pieņemiet manu atvainošanos. Sākotnēji CSS ir sarežģīti, taču tas nav tik sarežģīti, kad esat to sapratis - un vietņu pielāgošana lokāli joprojām ir viens no labākajiem veidiem, kā mācīties.

Ja jūs kaut kas mulsināja, lūdzu, jautājiet man tālāk, un es darīšu visu iespējamo, lai palīdzētu.

kā apiet Google konta verifikāciju pēc atiestatīšanas
Kopīgot Kopīgot Čivināt E -pasts 5 padomi, kā uzlādēt VirtualBox Linux iekārtas

Vai esat noguris no virtuālo mašīnu piedāvātās sliktās veiktspējas? Lūk, kas jums jādara, lai uzlabotu VirtualBox veiktspēju.

Lasīt Tālāk Saistītās tēmas
  • Pārlūkprogrammas
  • Web izstrāde
  • Tīmekļa pārziņa rīki
  • Mozilla Firefox
  • Google Chrome
  • Web dizains
Par autoru Erezs Cukermans(Publicēti 288 raksti) Vairāk no Ereza Cukermana

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu