Как да поправим малки досади в мрежата със стилен [Firefox & Chrome]

Уеб дизайнерите имат почти невъзможна работа. Те трябва да измислят един дизайн, който да се хареса на всички. Когато говорите за услуга като Gmail, използвана от безброй милиони хора по целия свят, наистина можете да отхвърлите „почти“ частта - това е просто невъзможно. Дори ако редизайнът се харесва добре на повечето хора, винаги ще има потребители, които наистина не харесват новия облик.

Понякога има достатъчно от тези потребители, за да принудят компания да се върне назад, както наскоро направи Google с бутоните с иконите на Gmail. Но какво, ако има нещо ти наистина ли омраза и компанията не я променя? Оставате ли с него завинаги? Благодарение на потребителските стилове можете сами да отстраните такива проблеми.

Представяме ви стилен

Stylish е безплатна добавка, достъпна както за Firefox и Chrome , и ви позволява да направите нещо доста вълшебно - прилагайте свои собствени стилове към елементите на уеб страницата. Дори и да не сте уеб разработчик и никога през живота си не сте написали малко CSS, това е много по -лесно, отколкото звучи. Можете да използвате Stylish, за да трансформирате напълно уебсайтовете (както ще ви покажа в следващия раздел), но още по -важното е, че можете да използвате Stylish, за да поправите малки досадници за минути.

Например имах проблем с размера на шрифта по подразбиране в Gmail. Интерфейсът беше добре - не исках да увеличавам (Ctrl +) с браузъра си, защото това ще увеличи размера на всички елементи на интерфейса и ще бъде наистина грозно. Просто исках начин да направя шрифта на съобщението малко по -голям.

С Stylish беше наистина просто и ще ви покажа как. Но преди да разгледаме създаването на ваши собствени потребителски стилове, нека поговорим за използването на работата на други хора.

UserStyles.org

Ако нещо ви върти нервите, напълно е възможно да не сте сами. UserStyles.org е уебсайт, който позволява на потребителите да споделят стилове, които са създали. По -горе можете да видите стил ( Добавете етикети към иконите на лентата с инструменти ), препоръчано от коментатора на MakeUseOf RandyN в отговор на нашата история за бутоните с иконите на Gmail. Този стил ви позволява да запазвате иконите, но да добавяте текстови етикети - нещо, което Google няма да ви позволи.

UserStyles.org е страхотен, но не е перфектен. Някои от дизайните се опитват да направят твърде много (променят изцяло външния вид на уебсайт), а някои са за стари версии на уебсайтове и сега са счупени. Ако се опитвате да поправите нещо малко и не можете да го намерите на UserStyles.org, може би най -добрият начин за действие е да го направите сами.

Създаване на собствен прост потребителски стил

За да създадете свой собствен потребителски стил, първо трябва да знаете какъв елемент от страницата се опитвате да промените и след това каква промяна искате да направите. Така че, за да започнете, щракнете с десния бутон върху това, което искате да промените, и изберете Инспектирай елемента . Трябва да видите нещо подобно:

Firefox потъмнява останалата част от страницата и очертава много ясна рамка около избрания от вас елемент. Над този елемент, текстът, който казва div#2d6.ii.gt.adP.adO , е куп CSS класове, заедно с един ID (частта, която започва с #). Това е селекторът, който влияе върху стила на този елемент. В долната част на екрана има навигационна лента, която ви позволява да пресечете DOM дървото 'или с по -прости думи, вървете нагоре и надолу в йерархията на елементите, водещи до избрания от вас елемент.

Името на играта тук е да изберете елемента, който искате да оформите, и да направите избора не толкова тесен, че да не повлияе на всичко, което искате да повлияете, нито толкова широк, че да обърка други неща.

Щракнах с един елемент по -високо, div.gs , просто защото харесвам името му (изглежда като нещо, което няма да се промени твърде скоро, но това е пълно предположение от моя страна). Той засяга цялата област на съобщението. След като зоната, която искате да оформите, е избрана, щракнете върху Стил бутон в долния десен ъгъл, за да отворите Правила хляб:

Знам, в началото е страшно. Но тук виждате различните правила за CSS, които засягат избрания от вас елемент, и тук можете да направите свои собствени временни модификации и да видите тяхното въздействие върху страницата в реално време, без да я презареждате. Но какво трябва да промените? Щракнете върху Имоти бутон и премахнете отметката Само потребителски стилове :

Тук можете да видите пълен списък на всичко CSS правила. Можете да превъртите надолу списъка, докато намерите правило, което има смисъл за това, от което се нуждаете (размер на шрифта в нашия случай), и дори да щракнете върху въпросителен знак до него, за да отворите страница с обяснения. И така, сега знаем, че искаме да променим свойството font-size за всички div елементи, които имат клас „ gs “(написано стенографично като div.gs ).

Единственият въпрос, който остава, е каква искаме да бъде неговата стойност. За целта се връщаме към панела с правила и започваме да играем:

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

Запазване на вашия нов стил

След като накарате тази част от сайта да изглежда точно както искате, време е да я запазите. Щракнете върху Стилен икона в лентата с добавки и изберете Напишете нов стил . След това Stylish би искал да знае на кои страници трябва да приложи новия стил - в нашия случай изберете втората опция, mail.google.com . След това ще видите този диалогов прозорец:

Вече го попълних. Очевидно съм избрал име и някои тагове за стила. Но истинските неща се случват в кода: Ред 3 вече беше там - Stylish го постави на място, така че да знае на кои страници стилът се прилага. Но ред 5-7 са мои. Нека ги анализираме:

Ред 5: div.gs { - тази част трябва да разпознаете. Това е елементът, който решихме да оформим. Отварящата скоба означава, че сега ще напишем някои правила за CSS. Ред 6: размер на шрифта: 20px! важно; -това е правилото, което искаме да променим (размер на шрифта), последвано от новото му определение (20 пиксела), а след това от! Важна декларация, което означава, че Firefox ще се подчини на това правило, дори ако елемент, по-близо до текста се опитва да зададе размера на шрифта на нещо различно. Ред 7:} - затваряне на дефиницията на стила.

След това щракнете върху Визуализация и се чудете на работата си:

И накрая, след като видите, че работи, щракнете върху Запазване.

Това не е пълно ръководство

Наясно съм, че за да запазя този кратък урок в границите на една публикация, трябваше да направя редица скокове и скокове. Ако сте се объркали по пътя, моля, приемете моите извинения. CSS е сложен в началото, но не е толкова сложен, след като се овладеете - и персонализирането на уебсайтове на местно ниво остава един от най -добрите начини за учене.

Ако сте се объркали от нещо, моля, попитайте ме по -долу и аз ще направя всичко възможно да помогна.

как да изпращате големи файлове чрез прикачен файл към имейл

Дял Дял Туит електронна поща 5 съвета за зареждане на вашите VirtualBox Linux машини

Уморени ли сте от лошото представяне на виртуалните машини? Ето какво трябва да направите, за да увеличите производителността на VirtualBox.

Прочетете Напред Свързани теми

Браузъри
Уеб разработка
Инструменти за уеб администратори
Mozilla Firefox
Google Chrome
Уеб дизайн

За автора Ерез Цукерман(288 статии са публикувани) Още от Erez Zukerman

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате