Как да разкараме банерите и други неща (епизод 2)
05 декември 2007, 23:34 ч • Уеб дизайн и програмиране • коментари: 12
След като преди време си говорихме как можем да махнем банерите от сайтовете с помощта на hosts файла, днес ще видим как става това с помощта на CSS. Цяла вечер се забавлявам с тази техника и резултатите са доста задоволителни.
Ето така изглежда в момента при мен сайтът на пощата abv.bg:
Както се вижда, само формата за логване е останала, всичко останало е скрито. Няма шега, няма измама.
По принцип има две основни причини да искаме да скрием част от съдържанието на уеб страница - нещо ни дразни и/или нещо заема място, което бихме искали да бъде заето от друго нещо, по-полезно за нас. Горната картинка по-скоро показва възможностите на техниката, не че сайтът на ABV чак толкова ме дразни :)
Например на сайта на вестник Капитал има един доста голям и безполезен хедър, който преспокойно може да замине:
(тук банер в хедъра няма, тъй като е скрит със старата система с hosts файла)
Друг пример е пощата GMail, в която може да се махне дясната колона с текстови реклами и да се разшири мястото за текста на писмата:
Как става?
И след рекламното въведение, ето и по същество как стават нещата. Имаме нужда от браузър Firefox и познания за CSS селекторите. Наличието на Firebug или Web Developer Toolbar помага доста.
Тук е моментът да кажа на хората, които не се занимават с CSS, да не се обезсърчават - ако някой ми прати уеб адрес и ми каже какво иска да си скрие, ще му помогна :)
Дотук добре. Следващата стъпка е да отидем в
C:\Documents and Settings\[име]\Application Data\Mozilla\Firefox\Profiles\[профил]\chrome
и да създадем файл с име userContent.css. Та тоя файл е магическото място, където ако сложим някакви CSS стилове, те ще се прилагат на абсолютно всяка страница, която отваряме с Firefox. Затова трябва CSS селекторите да са с висока specificity (специфичност, конкретност), че хем да хващат това, което трябва, хем да не хващат нищо от други сайтове. След промяна в този файл, трябва да се рестартира браузърът.
Цялата работа е едно прекрасно упражнение по CSS, защото на някои сайтове прилагането на тази техника е трудно, а някъде е направо невъзможно - ако всичко е с таблици без CSS класове, почти няма за какво да се хванем и трябва да търсим специфични за сайта атрибути и поредност в HTML елементите.
Ето кодът, с който докарах abv.bg до изгледа по-горе:
body>table#head:first-child,
table#head+div+div#cont #sr_bl,
table#head+div+div#cont>#block>div,
table#head+div+div#cont>#block>table tr:first-child+tr,
table#head+div+div#cont>#block>table tr:first-child td:first-child,
table#head+div+div#cont>#block #banner,
table#head+div+div#cont>#block table[width="420"],
#lf_bg #lf_tl,
#lf_bg #lf_bl,
#lf_f select#ttd
{display:none !important;}
table#head+div+div#cont,
table#head+div+div#cont #block,
table#head+div+div#cont #block>table:first-child
{margin:0 !important;width:auto !important}
table#head+div+div#cont>#block>table tr:first-child>td #lf_bg
{background:none !important}
body[style]>table[width]:first-child tr+tr>td>table:first-child,
body>table:first-child tr+tr div#content>table:first-child,
body>table:first-child tr+tr div#content>br
{display:none !important;}
Това пък е за GMail:
#rh{display:none}
#fic{margin-right:0 !important}
За пощите Hotmail и Yahoo:
/*Yahoo mail*/
#SKY{display:none !important}
/*Hotmail*/
.AdHeaderContainer,
.cAdHeaderContainer,
.dSideAds
{display:none !important}
За радост на дамите, ето и кодът за tialoto.bg. Както се вижда, можем спокойно да кажем ашколсун на създателите на Firefox за отличната CSS поддръжка :)
body>div[style~="777px;"] table:first-child+table,
body>div[style~="777px;"] table:first-child+table+table,
body>div[style~="777px;"] .col2 iframe
{display:none !important;}
Айде стига толкова, вие сте на ход :)
Коментари
Можеш да следиш коментарите към този сайт и чрез RSS.
Ицката • 06 декември 2007, 12:04 ч
Готино! Не съм го тествал, но щом е от теб не го подлагам под съмнения :)
За съжаление това решение можем да го приложим на сайтовете, които посещаваме често, не и да скрием банерите от другите. Но, все пак, и това не е малко!
Георги • 06 декември 2007, 19:00 ч
позването на stylish е много по добре, тъй като ти позволява да задаваш стилове на определени страници за да няма обърквания ако се ползват еднаки имена на класове, което е доста срещано.
Все пак си остава проблема, че само "луди" като нас го правят, тъй като повечето ползват Интернет Експлорер, а тези които са открили лисан, имат само Google и/или Yahoo Toolbar, а да ги накараш да ходият да търсят в някоя си папка, че да се чудят с какво да я отворят после,...
Longanlon • 12 декември 2007, 16:24 ч
човече, това е чудесно! жалко само, че не може да се прилага универсален код за всички сайтове.
Благодаря ти за тоя на абв, надявам се нямаш нищо против, че си го изкопирах. остава да видя дали съм се справил добре с прилагането му :)
Cvetomir • 18 декември 2007, 20:11 ч
Браво ман а ще можеш ли да ми кажеш програмката или как да си правя такива с CSS-a
Димо • 25 декември 2007, 00:45 ч
ABV.bg напоследък си промениха дизайна, съответно и HTML-a, така че предишният CSS код спря да работи :) Пуснал съм новата версия горе на старото й място. Новото е, че сега съм скрил и падащото меню - удобство за хората, които ползват табулацията за преминаване към полето за писане на парола, защото вече ще го натискат само един път :)
Цветомир - не ти разбрах въпроса?
Michel • 16 януари 2008, 16:27 ч
Cooooool! :-)
Знаех за userContent.css, но досега винаги ме е мързяло да пиша там стилове... ;-)
Сега като се замисля, с два-три клика мога да направя сайта на youtube да е с черен фон -- тка много по-приятно ще се гледат видеотата там... ;-)
Иван • 17 септември 2008, 13:26 ч
Здравейте.До C:Documents and Settings достигам ама после ги няма тия неща.Аз ли трябва да ги създам или проблема е друг.Благодаря предварително.
Димо • 17 септември 2008, 13:32 ч
Иван - отиди в Control Panel > Folder Options > View > и там разреши показването на скрити файлове (show hidden files and folders)
Иван • 17 септември 2008, 13:52 ч
Благодаря Димо това много ми хареса ,вече няма да гледам "МАЛКИТЕ" банери в някои сайтове.
Ицко • 26 април 2009, 00:56 ч
Новата версия на АБВ ме дразни изключително много. Никак не ми се нрави това с разместването на блокчета, затова ето как се справих аз с премахването им.
Като за начало промених userContent.css, което ми премахна видимостта на блоковете. Хубаво ще е да почнете начисто, защото ако добавите тези редове към редовете, които Димо е показал (които са за старата версия на АБВ), няма да можете да прикачвате файлове при писане на писма :P
Ето го и userContent.css:
---
div#TopLinks>div#TopLinksLeft,
div#TopLinks>div#TopLinksRight,
div#SearchLogo>div#SearchForm>div#G1,
div#sr_bl>div#G1,
div#ResetSettings>span#ResSetspan,
div#widget-place-2>div#identifierwidget-1,
div#widget-place-2>div#identifierwidget-2,
div#widget-place-2>div#identifierwidget-3,
div#widget-place-1>div#identifierwidget-4,
div#widget-place-1>div#identifierwidget-5,
div#widget-place-1>div#identifierwidget-6,
div#Footer>div#FooterIn>div#FooterLeft,
div#Footer>div#FooterIn>div#FooterRight,
div#BanLogF>div#Banner,
#LoadArea, img[src="http://img.abv.bg/dHome/dragimages/closebtn.gif\"],
td[height="60"]>table#tll,
div#pn_block,
div#aukcion
{ display: none !important; }
---
Каква файда обаче, след като продължават да се зареждат, макар и да не се показват?
Пак лагва, пак бави, пак дразни. Ето защо опираме до ползата на "Adblock Plus", Add-on за FF, чрез който могат да бъдат забранявани конкретни javascript
файлове. Ето линк за Add-on-а:
---
https://addons.mozilla.org/en-US/firefox/downloads/latest/1865/addon-1865-latest.xpi
---
Такам, след като сте приложили Adblock Plus, отваряте настройките му (Ctrl + Shift + E), цъкате на Add Filter и в него въвеждате ей това:
---
http://img.abv.bg/dHome/dragJS/abvhomepage.js
---
И общо взето е това. Началната страница е чиста почти като Гугъл :P
![http://img.abv.bg/dHome/dragimages/closebtn.gif\"],](http://img.abv.bg/dHome/dragimages/closebtn.gif\"],){kind=link}
Ицко • 26 април 2009, 00:59 ч
На реда с #LoadArea, при img не трябва да има преди затварящите кавички. Ще помоля Димо ако чете тез редове да го ремув-не по някакъв начин, както и да изтрие ТОЗИ коментар :P
Коментирай
Полетата с по-тъмен етикет са задължителни. Email-ът ти няма да бъде публикуван. Писането на кирилица е желателно. Сайтът поддържа граватари.
Блог категории
Страници
Нови коментари
- Посетихме Рим преди няколко дни-пренасяш се в...
от Петя - Здравейте, ползвам рутер линксис wrt54, и съм...
от Марто - Здравейте, ползвам рутер линксис wrt54, и съм...
от Марто - zdr Imam Ruter TP-LINK moga li da...
от Ivan - много много ми хареса всичко -много информативно...
от венета