Како поправити мале сметње на вебу са стилом [Фирефок & Цхроме]

Веб дизајнери имају готово немогућ посао. Морају смислити један дизајн који ће се свидети свима. Када говорите о услузи као што је Гмаил, коју користе безбројни милиони људи широм света, заиста можете испустити „скоро“ део - то је једноставно немогуће. Чак и ако се редизајн допадне већини људи, увек ће бити корисника којима се нови изглед заиста не свиђа.

Понекад има довољно ових корисника да присиле компанију да се повуче, као што је Гоогле недавно урадио помоћу дугмади за икону Гмаил. Али шта ако постоји нешто за вас заиста мрзите, а компанија то не мења? Јесте ли заувек заглављени у томе? Захваљујући корисничким стиловима, можете сами да решите такве проблеме.

Представљамо Стилисх

Стилисх је бесплатни додатак доступан и за Фирефок и Хром , и омогућава вам да учините нешто прилично магично - примените сопствене стилове на елементе веб странице. Чак и ако нисте веб програмер и никада у животу нисте написали мало ЦСС -а, ово је много лакше него што звучи. Можете користити Стилисх за потпуну трансформацију веб страница (као што ћу вам показати у следећем одељку), али што је још важније, можете користити Стилисх за решавање малих сметњи за неколико минута.

На пример, имао сам проблем са подразумеваном величином фонта у Гмаил -у. Интерфејс је био у реду - нисам хтео да зумирам (Цтрл +) помоћу свог прегледача, јер би то повећало величину свих елемената интерфејса и било би заиста ружно. Само сам хтео начин да фонт поруке буде мало већи.

Са Стилисх -ом је било заиста једноставно, а ја ћу вам показати како. Али пре него што погледамо креирање сопствених корисничких стилова, разговарајмо о повећању рада других људи.

УсерСтилес.орг

Ако вам нешто иде на живце, сасвим је могуће да нисте сами. УсерСтилес.орг је веб локација која омогућава корисницима да деле стилове које су сами створили. Изнад можете видети стил ( Додајте ознаке иконама на траци са алаткама ) препоручио коментатор МакеУсеОф -а РандиН као одговор на нашу причу о тастерима Гмаил икона. Овај стил вам омогућава да задржите иконе, али додате текстуалне ознаке - нешто што вам Гоогле неће дозволити.

УсерСтилес.орг је одличан, али није савршен. Неки од дизајна покушавају да учине превише (потпуно промене изглед веб локације), а неки су за старе верзије веб страница и сада су покварени. Ако покушавате да поправите нешто мало и не можете то пронаћи на УсерСтилес.орг, можда је ваш најбољи начин да то учините сами.

Креирање сопственог једноставног корисничког стила

Да бисте креирали свој кориснички стил, прво морате знати који елемент странице покушавате да промените, а затим коју промену желите да направите. Дакле, за почетак кликните десним тастером миша на оно што желите да промените и изаберите Прегледати елемент . Требало би да видите овако нешто:

Фирефок затамњује остатак странице и исцртава врло јасан оквир око елемента који сте изабрали. Изнад тог елемента, текст који каже див#2д6.ии.гт.адП.адО , је гомила ЦСС класа, заједно са једним ИД -ом (део који почиње са #). Ово је бирач који утиче на стил овог елемента. При дну екрана налази се навигациона трака која вам омогућава да пређите преко стабла ДОМ ', или једноставнијим речима, идите горе -доле у хијерархији елемената који воде до елемента који сте изабрали.

Назив игре овде је да одаберете елемент који желите да стилизујете и да избор не буде тако сужен да неће утицати на све на шта желите да утичете, нити толико широк да би пореметио друге ствари.

Кликнуо сам за један елемент више, див.гс , само зато што ми се свиђа њено име (чини се као нешто што се неће променити прерано, али то је потпуна претпоставка са моје стране). Утиче на целу област порука. Након што је одабрано подручје које желите стилизирати, кликните на Стил дугме у доњем десном углу да бисте отворили Правила хлеб:

Знам, у почетку је страшно. Али овде видите различита ЦСС правила која утичу на елемент који сте изабрали, и ту можете направити сопствене привремене измене и видети њихов утицај на страницу у реалном времену, без поновног учитавања. Али шта треба да промените? Кликните Некретнине дугме и поништите избор Само кориснички стилови :

Овде можете видети комплетну листу све ЦСС правила. Можете се листати надоле по листи док не пронађете правило које има смисла за оно што вам је потребно (величина слова у нашем случају), па чак и кликнути на знак питања поред њега да бисте отворили страницу са објашњењима. Дакле, сада знамо да желимо да прилагодимо својство фонт-сизе за све див елементе који имају класу ' гс '(написано стенографски као див.гс ).

Остаје само питање каква је његова вредност. За то се враћамо на окно Правила и почињемо да се играмо:

40 пиксела је можда помало лудо, али добијате општу идеју. Поиграјте се са овим и слободно додајте било које друго својство док не добијете изглед који сте тражили. Не затварајте страницу јер су ваше измене такве не сачувано било где.

Чување вашег новог стила

Када овај део веб локације изгледа баш онако како желите, време је да га сачувате. Кликните Стилисх икона на траци са додацима и изаберите Напишите нови стил . Стилисх би тада желео да зна на којим страницама би требало да примени нови стил - у нашем случају изаберите другу опцију, маил.гоогле.цом . Затим ћете видети овај дијалог:

Већ сам га попунио. Очигледно сам изабрао име и неке ознаке за стил. Али праве ствари се дешавају унутар кода: Ред 3 је већ био тамо - Стилисх га је поставио тако да зна на којим страницама се стил примењује. Али ред 5-7 су моји. Хајде да их анализирамо:

5. ред: див.гс { - овај део би требало да препознате. Ово је елемент који смо одлучили да стилизујемо. Отворна заграда значи да ћемо сада написати нека ЦСС правила. Ред 6: фонт-сизе: 20пк! импортант; -то је правило које желимо да променимо (величина фонта), након чега следи његова нова дефиниција (20 пиксела), а затим! Важна декларација, што значи да ће се Фирефок придржавати овог правила чак и ако елемент ближе тексту покуша да постави величина фонта на нешто другачије.Ред 7:} - затварање дефиниције стила.

Затим кликните на Преглед и задивите се својим послом:

И на крају, када видите да ради, кликните Сачувати.

Ово није потпуни водич

Свестан сам да сам морао да направим неколико скокова и скокова да бих овај кратки водич држао у границама једног поста. Ако сте успут били збуњени, прихватите моје извињење. ЦСС је у почетку лукав, али није толико компликован када се снађете - а локално прилагођавање веб локација остаје један од најбољих начина за учење.

Ако вас је нешто збунило, питајте ме испод и потрудићу се да вам помогнем.

догађај 41 кернел повер виндовс 10

Објави Објави Твеет Емаил 5 савета за суперпуњење ваших ВиртуалБок Линук машина

Уморни сте од лоших перформанси које нуде виртуелне машине? Ево шта треба да урадите да бисте побољшали перформансе ВиртуалБок -а.

Прочитајте следеће Повезане теме

Прегледници
Веб Девелопмент
Алати за вебмастере
Мозилла Фирефок
Гоогле Цхроме
Веб дизајн

О аутору Ерез Зукерман(288 објављених чланака) Више од Ереза Зукермана

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили