HTML/CSS Using CSS Style-Sheet to Exclude Smilies

  • Thread starter Thread starter loseyourname
  • Start date Start date
  • Tags Tags
    Css
AI Thread Summary
The discussion revolves around the use of CSS to hide smilies in a web interface. A user is attempting to implement a CSS rule to prevent smilies from displaying by using the selector IMG[SRC*="/smilies"] { display: none !important }. However, they encounter issues with the rule not functioning as expected. Suggestions include ensuring the code is correctly formatted with curly brackets and confirming that it is placed in the correct userContent.css file within the appropriate directory for their browser. The conversation highlights the importance of syntax accuracy and the correct file location for CSS rules to take effect. There are also mentions of using alternative methods, like Adblock, but the focus remains on refining the CSS approach. Users are encouraged to experiment with the code in different browsers, particularly Firefox, to see if it resolves the issue.
loseyourname
Staff Emeritus
Gold Member
Messages
1,829
Reaction score
5
The html source is:

Code: 
<img src="images/smilies/*.gif" border="0" alt="" 
title="*" class="inlineimg" />

(* being the wildcard that changes from smilie to smilie)

So I input this line into my style sheet:

Code: 
IMG[SRC*="/smilies"]

Directly before the "display: none" script. I'm not a programmer, so I'm being intuitive here. I have tried other lines emulating the code to one degree or another, but nothing has worked thus far. Any ideas?

By the way, thanks to mattmns for giving me this idea in the first place. For whatever reason, it had never even occurred to me.
 
Technology news on Phys.org
Yeah css, is probably the more 1337 way to do it. Adblock is the newb way though :smile: Ohh I guess you can't see that, well :)


edit.. ohh I thought you had figured it out, and were showing it lol. Let me see.
 
Ok, add
Code: 
{ display: none !important }
to the end of that line with a space in between to make:

Code: 
IMG[SRC*="/smilies"] { display: none !important }


Seems to work for me :smile: ohh yeah lol

http://img262.imageshack.us/img262/1986/pfnosmilies0nu.png


Hmm my posts look a bit awkward, as I use smilies to end sentences :)
 
Last edited by a moderator:
That's exactly what I have in there (what I meant by "directly followed by the "display: none" script) and smilies still show.
 
Did you copy the code exactly how it is shown? Because I think the curly brackets are important. Copy it exactly like this: "IMG[SRC*="/smilies"] { display: none !important }" Without the quote marks.

hmmm. You have it in your userContent.css file right? And you have it in your profile_folder/chrome/ directory right?

If not, I am not sure, I am no expert in these things. Here is my userContent.css file though:

Code: 
/*
Name: Ad blocker stylesheet
Author: Jordi Kroon <jordik at gmail dot c o m>
Description: Block ads and banners through CSS. Five sections. 242 lines.
Revision: 27 April 2005
*/

/* ?1: Universal ad banner killer (468 width)  */
[width="468"], [width="468"][height="60"]
{ display: none !important }
/* Fix some of the many false matches caused by the above */
body[width="468"], div[width="468"], table[width="468"],
tr[width="468"], th[width="468"], td[width="468"],
img[width="468"][height="680"]
{ display: inline !important }


/* ?2: Webbugs, useless spacers, and micro-ad trackers */
[width="0"][height="0"], [width="1"][height="1"],
[width="2"][height="2"], [width="3"][height="3"]
{ display: none !important }


/* ?3: match by size. */
/* ad images: any image inside a link with suspect sizes */
a img[width="775"][height="600"], a img[width="768"][height="90"],
a img[width="750"][height="100"], a img[width="730"][height="92"],
a img[width="728"][height="90"], a img[width="700"][height="500"],
a img[width="601"][height="70"], a img[width="600"][height="400"],
a img[width="600"][height="120"], a img[width="529"][height="70"],
a img[width="489"][height="49"], a img[width="468"][height="80"],
a img[width="468"][height="60"], a img[width="470"][height="62"],
a img[width="392"][height="72"], a img[width="360"][height="600"],
a img[width="360"][height="300"], a img[width="336"][height="850"],
a img[width="336"][height="280"], a img[width="336"][height="91"],
a img[width="325"][height="100"], a img[width="325"][height="60"],
a img[width="324"][height="100"], a img[width="300"][height="600"],
a img[width="300"][height="250"], a img[width="234"][height="60"],
a img[width="180"][height="150"], a img[width="165"][height="200"],
a img[width="160"][height="600"], a img[width="156"][height="74"],
a img[width="150"][height="600"], a img[width="150"][height="300"], 
a img[width="150"][height="100"], a img[width="140"][height="200"],
a img[width="128"][height="38"], a img[width="125"][height="800"],
a img[width="125"][height="600"], a img[width="125"][height="300"],
a img[width="125"][height="250"], a img[width="125"][height="125"],
a img[width="125"][height="110"], a img[width="125"][height="65"],
a img[width="123"][height="200"], a img[width="122"][height="602"],
a img[width="120"][height="600"], a img[width="120"][height="300"],
a img[width="120"][height="240"], a img[width="120"][height="60"],
a img[width="88"][height="31"], a img[width="77"][height="28"]
{ display: none !important }

/* iframes: all iframes with ad banner sizes */
iframe[width="775"][height="600"], iframe[width="768"][height="90"],
iframe[width="750"][height="100"], iframe[width="730"][height="92"],
iframe[width="728"][height="90"], iframe[width="601"][height="70"],
iframe[width="600"][height="120"], iframe[width="470"][height="62"],
iframe[width="468"][height="80"], iframe[width="468"][height="60"],
iframe[width="392"][height="72"], iframe[width="360"][height="600"],
iframe[width="360"][height="300"], iframe[width="338"][height="282"],
iframe[width="336"][height="280"], iframe[width="325"][height="100"],
iframe[width="325"][height="60"], iframe[width="324"][height="100"],
iframe[width="300"][height="600"], iframe[width="300"][height="250"],
iframe[width="234"][height="60"], iframe[width="220"][height="600"],
iframe[width="180"][height="150"], iframe[width="165"][height="200"],
iframe[width="160"][height="600"], iframe[width="156"][height="74"],
iframe[width="150"][height="600"], iframe[width="150"][height="100"],
iframe[width="140"][height="200"], iframe[width="140"][height="187"],
iframe[width="125"][height="800"], iframe[width="125"][height="600"],
iframe[width="125"][height="300"], iframe[width="125"][height="250"],
iframe[width="125"][height="125"], iframe[width="125"][height="110"],
iframe[width="125"][height="65"], iframe[width="123"][height="200"],
iframe[width="122"][height="602"], iframe[width="120"][height="600"],
iframe[width="120"][height="240"], iframe[width="120"][height="90"],
iframe[width="120"][height="60"], iframe[width="110"][height="125"],
iframe[width="88"][height="31"], iframe[width="77"][height="28"]
{ display: none !important }

/* Ad sized objects  (Flash) */
object[width="775"][height="600"], object[width="768"][height="90"],
object[width="750"][height="100"], object[width="730"][height="92"],
object[width="728"][height="90"], object[width="700"][height="500"],
object[width="601"][height="70"], object[width="600"][height="120"],
object[width="520"][height="185"], object[width="470"][height="62"],
object[width="468"][height="80"], object[width="468"][height="60"],
object[width="392"][height="72"], object[width="360"][height="600"],
object[width="360"][height="300"], object[width="336"][height="280"],
object[width="300"][height="600"], object[width="300"][height="250"],
object[width="234"][height="60"], object[width="180"][height="150"],
object[width="171"][height="600"], object[width="170"][height="600"],
object[width="165"][height="200"], object[width="160"][height="600"],
object[width="156"][height="74"], object[width="150"][height="600"],
object[width="150"][height="100"], object[width="140"][height="200"],
object[width="130"][height="130"], object[width="125"][height="800"],
object[width="125"][height="600"], object[width="125"][height="300"],
object[width="125"][height="250"], object[width="125"][height="125"],
object[width="125"][height="110"], object[width="125"][height="65"],
object[width="123"][height="200"], object[width="122"][height="602"],
object[width="120"][height="600"], object[width="120"][height="240"],
object[width="120"][height="90"], object[width="120"][height="60"],
object[width="110"][height="125"], object[width="88"][height="31"],
object[width="77"][height="28"]
{ display: none !important }

/* Ad sized embeds (Flash) */
embed[width="775"][height="600"], embed[width="768"][height="90"],
embed[width="750"][height="100"], embed[width="730"][height="92"],
embed[width="728"][height="90"], embed[width="700"][height="500"],
embed[width="601"][height="70"], embed[width="600"][height="120"],
embed[width="520"][height="185"], embed[width="470"][height="62"],
embed[width="468"][height="80"], embed[width="468"][height="60"],
embed[width="392"][height="72"], embed[width="360"][height="600"],
embed[width="360"][height="300"], embed[width="336"][height="280"],
embed[width="300"][height="600"], embed[width="300"][height="250"],
embed[width="234"][height="60"], embed[width="180"][height="150"],
embed[width="171"][height="600"], embed[width="170"][height="600"],
embed[width="165"][height="200"], embed[width="160"][height="600"],
embed[width="156"][height="74"], embed[width="150"][height="600"],
embed[width="150"][height="100"], embed[width="140"][height="200"],
embed[width="130"][height="130"], embed[width="125"][height="800"],
embed[width="125"][height="600"], embed[width="125"][height="300"],
embed[width="125"][height="250"], embed[width="125"][height="125"],
embed[width="125"][height="110"], embed[width="125"][height="65"],
embed[width="123"][height="200"], embed[width="122"][height="602"],
embed[width="120"][height="600"], embed[width="120"][height="240"],
embed[width="120"][height="90"], embed[width="120"][height="60"],
embed[width="110"][height="125"], embed[width="88"][height="31"],
embed[width="77"][height="28"]
{ display: none !important }


/* ?4: Match by ad text. Case-insensitive! */
/* IDs */
#ad, #Ad, #ad-banner, #Ad-banner, #Ad-Banner, #ad_banner, #Ad_banner,
#Ad_Banner, #adbanner, #Adbanner, #adbar, #Adbar, #advert, #Advert,
#advertisement, #Advertisement, #ad-block, #Ad-block, #Ad-Block,
#ads, #Ads, #banner-ad, #Banner-ad, #Banner-Ad, #banner_ad, #Banner_ad,
#Banner_Ad, #dropin, #Dropin, #DropIn, #dwindow, #Dwindow, #DWindow,
#banner1, #Banner1, #banner2, #Banner2, #banner3, #Banner3, #banner4,
#Banner4, #banner5, #Banner5, #banner6, #Banner6, #sponsor, #Sponsor,
#sponsors, #Sponsors
{ display: none !important }

/* Classes */
.ad, .Ad, .ad-banner, .Ad-banner, .Ad-Banner, .ad_banner, .Ad_banner,
.Ad_Banner, .adbanner, .Adbanner, .adbar, .Adbar, .advert, .Advert,
.advertisement, .Advertisement, .ad-block, .Ad-block, .Ad-Block, .ads, .Ads,
.banner-ad, .Banner-ad, .Banner-Ad, .banner_ad, .Banner_ad, .Banner_Ad,
.dropin, .Dropin, .DropIn, .dwindow, .Dwindow, .DWindow, .banner1, .Banner1,
.banner2, .Banner2, .banner3, .Banner3, .banner4, .Banner4, .banner5,
.Banner5, .banner6, .Banner6, .sponsor, .Sponsor, .sponsors, .Sponsors
{ display: none !important }

/* Names */
[name~="ad"], [name~="Ad"], [name~="ad-banner"], [name~="Ad-banner"], [name~="Ad-Banner"],
[name~="ad_banner"], [name~="Ad_banner"], [name~="Ad_Banner"], [name~="adbanner"],
[name~="Adbanner"], [name~="adbar"], [name~="Adbar"], [name~="advert"], [name~="Advert"],
[name~="advertisement"], [name~="Advertisement"], [name~="ad-block"], [name~="Ad-block"],
[name~="Ad-Block"], [name~="ads"], [name~="Ads"], [name~="banner-ad"], [name~="Banner-ad"],
[name~="Banner-Ad"], [name~="banner_ad"], [name~="Banner_ad"], [name~="Banner_Ad"],
[name~="dropin"], [name~="Dropin"], [name~="DropIn"], [name~="dwindow"], [name~="Dwindow"],
[name~="DWindow"], [name~="banner1"], [name~="Banner1"], [name~="banner2"],
[name~="Banner2"], [name~="banner3"], [name~="Banner3"], [name~="banner4"], [name~="Banner4"],
[name~="banner5"], [name~="Banner5"], [name~="banner6"], [name~="Banner6"], [name~="sponsor"],
[name~="Sponsor"], [name~="sponsors"], [name~="Sponsors"]
{ display: none !important }

/* Ad image alt strings */
[alt~="ad"], [alt~="Ad"], [alt~="ad-banner"], [alt~="Ad-banner"],
[alt~="Ad-Banner"], [alt~="ad_banner"], [alt~="Ad_banner"], [alt~="Ad_Banner"],
[alt~="adbanner"], [alt~="Adbanner"], [alt~="adbar"], [alt~="Adbar"],
[alt~="advert"], [alt~="Advert"], [alt~="advertisement"], [alt~="Advertisement"],
[alt~="ad-block"], [alt~="Ad-block"], [alt~="Ad-Block"], [alt~="ads"],
[alt~="Ads"], [alt~="banner-ad"], [alt~="Banner-ad"], [alt~="Banner-Ad"],
[alt~="banner_ad"], [alt~="Banner_ad"], [alt~="Banner_Ad"], [alt~="dropin"],
[alt~="Dropin"], [alt~="DropIn"], [alt~="dwindow"], [alt~="Dwindow"],
[alt~="DWindow"], [alt~="banner1"], [alt~="Banner1"], [alt~="banner2"],
[alt~="Banner2"], [alt~="banner3"], [alt~="Banner3"], [alt~="banner4"],
[alt~="Banner4"], [alt~="banner5"], [alt~="Banner5"], [alt~="banner6"],
[alt~="Banner6"], [alt~="sponsor"], [alt~="Sponsor"], [alt~="sponsors"],
[alt~="Sponsors"]
{ display: none !important }

/* "Click here" for an ad! */
a[target="_top"] img[alt~="click"], a[target="_top"] img[alt~="Click"]
{ display: none !important }

/* ?5: site & network specifics */
/* Misc. */
table[width="844"][border="0"][height="200"], table[width="73%"][border="0"]
{ display: none !important }

/*Gamespy etc. */
#adboxtable, #boxzillabox, #skyScraperAd
{ display: none !important }

/* Google rads */
table[cellspacing="0"][cellpadding="0"][width="25%"][align="right"][bgColor="#black"][border="0"]
{ display: none !important }

/* Begging buttons */
[alt~="donate"], [alt~="Donate"], [title~="donate"], [title~="Donate"], 
[alt="paypal"], [alt~="Paypal"], [title~="paypal"], [title~="Paypal"], 
[alt="Amazon Honor System"]
{ display: none !important }

/* The Inquirer */
tr#tr_topbanner, div#article_body_ad, div#article_body_bottomAd, td#rb,
div a[target="_blank"] img[width="125"][border="0"]
{ display: none !important }

/* The Onion */
table[cellpadding="0"][cellspacing="0"][border="0"][align="right"][valign="top"] 
table[cellpadding="0"][cellspacing="0"][border="0"][align="center"],
table[width="800"][cellpadding="0"][cellspacing="3"][border="0"]
{ display: none !important }

/* SlashDot */
table table table[width="346"][height="280"]
{ display: none !important }

/* ZDnet */
td[width="225"].ModuleContent2
{ display: none !important }

/* MSNBC */
td.textSmallGrey, div.textSmallGrey, div.DColumnBody, div.DCol, div.DColumnAd
{ display: none !important }

/* Aftenposten + Dagbladet */
[class|="sistenytt"], [class|="ad468"], [class|="ad768"], .topp-ad, .ad335, .ad468, 
.ad100x150, .ad180x500, .ad860x448
{ display: none !important }

/* X-E */
td[width="164"]#trmain, p[align="center"] font.font_smallblacknobold
{ display: none !important }

/* Tweakers.net */
#b_468, #b_728, #b_728_bg, #bigad, #b_bigad_tmp, #b_sky, #textad
{ display: none !important }




/*  Remove Google Ads */

/* --- google.com ----------------------------------------------------------- */

/* general: search tip */
body[onload="document.gs.reset()"] table[cellspacing="0"][cellpadding="0"][border="0"] td[valign="bottom"][height="30"] { display: none !important }

/* general: sponsored links: right */
body[onload="document.gs.reset()"] table[width="25%"][bgcolor="#black"][align="right"] { display: none !important }

/* general: sponsored links: top */
body[onload="document.gs.reset()"] p.e table[width="100%"][height="40"][cellpadding="3"] { display: none !important }

/* search: product search (store linkage) */
body[onload="document.gs.reset()"] p.e table[cellspacing="0"][cellpadding="1"][border="0"] { display: none !important }

/* groups: sponsored links: top (everything but header) */
body[onload="document.gs.reset()"] td[id^="taw"].ch { display: none !important }

/* groups: sponsored links: right */
body[onload="document.gs.reset()"] table[width="100%"][cellpadding="3"] tr[valign="top"] td[valign="top"][rowspan="26"] { display: none !important }

/* groups-beta: sponsored links: right */
body[onresize=""][onload="sf()"] table[width="200"][align="right"][style="float: right;"] { display: none !important }

/* gmail: text ads */
div#ad tr[class="metatable"],
td[class="rhh"],
a[class="lc"],
div.c.xs#ad { display: none !important }

/* froogle: sponsored links: right */
form[action="/froogle"][name="gs"] table[width="100%"][style="margin-top: 6px;"] td[width="20%"][valign="top"][align="right"] table[align="bgColor=#black"] { display: none !important }


IMG[SRC*="/smilies"] { display: none !important }
 
Last edited:
This is the complete style sheet:

Code: 
/*
 * This file can be used to apply a style to all web pages you view
 * Rules without !important are overruled by author rules if the
 * author sets any.  Rules with !important overrule author rules.
 */

/* You can find the latest version of this ad blocking css at:
 * http://www.floppymoose.com
 * hides many ads by preventing display of images that are inside
 * links when the link HREF contans certain substrings.
 */

A:link[HREF*="addata"]  IMG, 
A:link[HREF*="ad."]  IMG, 
A:link[HREF*="ads."]  IMG, 
A:link[HREF*="/ad"]  IMG, 
A:link[HREF*="/A="]  IMG, 
A:link[HREF*="/click"]  IMG, 
A:link[HREF*="?click"]  IMG, 
A:link[HREF*="?banner"]  IMG, 
A:link[HREF*="=click"]  IMG, 
A:link[HREF*="clickurl="]  IMG, 
A:link[HREF*=".atwola."]  IMG, 
A:link[HREF*="spinbox."]  IMG, 
A:link[HREF*="transfer.go"]  IMG, 
A:link[HREF*="adfarm"]  IMG, 
A:link[HREF*="adserve"]  IMG, 
A:link[HREF*=".banner"]  IMG, 
A:link[HREF*="bluestreak"]  IMG, 
A:link[HREF*="doubleclick"]  IMG, 
A:link[HREF*="/rd."]  IMG, 
A:link[HREF*="/0AD"]  IMG, 
A:link[HREF*=".falkag."]  IMG, 
A:link[HREF*="trackoffer."]  IMG, 
A:link[HREF*="tracksponsor."]  IMG { display: none ! important } 

/* disable ad iframes */
IFRAME[SRC*="addata"],
IFRAME[SRC*="ad."],
IFRAME[SRC*="ads."],
IFRAME[SRC*="/ad"],
IFRAME[SRC*="/A="],
IFRAME[SRC*="/click"],
IFRAME[SRC*="?click"],
IFRAME[SRC*="?banner"],
IFRAME[SRC*="=click"],
IFRAME[SRC*="clickurl="],
IFRAME[SRC*=".atwola."],
IFRAME[SRC*="spinbox."],
IFRAME[SRC*="transfer.go"],
IFRAME[SRC*="adfarm"],
IFRAME[SRC*="adserve"],
IFRAME[SRC*=".banner"],
IFRAME[SRC*="bluestreak"],
IFRAME[SRC*="doubleclick"],
IFRAME[SRC*="/rd."],
IFRAME[SRC*="/0AD"],
IFRAME[SRC*=".falkag."], 
IFRAME[SRC*="trackoffer."],
IFRAME[SRC*="tracksponsor."]  { display: none ! important } 


/* miscellaneous different blocking rules to block some stuff that gets through */

A:link[onmouseover*="AdSolution"] IMG,
*[ID=inlinead],
*[ID=ad_creative],
IMG[SRC*=".msads."],
IMG[SRC*="/smilies"] { display: none ! important } 



/* turning some false positives back off */

A:link[HREF*="thread."] IMG,
A:link[HREF*="download."] IMG,
A:link[HREF*="netflix.com/AddToQueue"] IMG,
A:link[HREF*="click.mp3"] IMG { display: inline ! important }

/* 
 * For more examples see [PLAIN]http://www.mozilla.org/unix/customizing.html[/PLAIN] 
 */

Everything else works. It blocks out all ads, but it won't block smilies. The section specific to smilies is this:

Code: 
A:link[onmouseover*="AdSolution"] IMG,
*[ID=inlinead],
*[ID=ad_creative],
IMG[SRC*=".msads."],
IMG[SRC*="/smilies"] { display: none ! important }

The only difference between my line and yours is that mine has a space between "!" and "important." I know that line works, though, as it's like that for everything I'm blocking, and everything else has been blocked. The directory for me is actually /library/safari, since I'm using Safari. The directory is different than for Firefox.

Actually, I'm going to try implementing that line in Firefox and see if it works there (I have it installed, just don't ever use it).
 
Last edited by a moderator:
It looks like it should work. Maybe try the code at the very bottom by itself, just for simplification. Maybe try my style sheet in safari.

Other than that, I don't know. Maybe try some Safari forums.
 

Similar threads

HTML/CSS How to Create a CSS Hover Effect That Displays Text?
Replies
3
Views
2K
HTML/CSS Container shrinks at certain screen widths (CSS)
Replies
5
Views
2K
HTML/CSS Why does the img ID not work in this CSS code?
Replies
8
Views
2K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
Replies
5
Views
2K
HTML/CSS Html5 <canvas> element related apps not working
Replies
3
Views
2K
HTML/CSS Understanding XHTML Slide Show w/ Javascript & jQuery
Replies
2
Views
5K
HTML/CSS Cascading Style Sheets in XHTML 1.0 STRICT
Replies
4
Views
3K
HTML/CSS Is There a Way to Indent Tables in XHTML?
Replies
3
Views
3K
HTML/CSS Troubleshooting HTML Image Area Map Issues
Replies
4
Views
3K
JavaScript Problem using dat.GUI controller library
Replies
9
Views
4K

Hot Threads

Recent Insights

Back
Top