Using CSS Style-Sheet to Exclude Smilies

  • Context: HTML/CSS 
  • Thread starter Thread starter loseyourname
  • Start date Start date
  • Tags Tags
    Css
Click For Summary

Discussion Overview

The discussion revolves around using CSS to hide smilies in a web application. Participants explore various methods and share their experiences with CSS styling, specifically focusing on the syntax and placement of CSS rules to achieve the desired effect of excluding smilies from display.

Discussion Character

  • Technical explanation
  • Debate/contested

Main Points Raised

  • One participant shares their initial attempt to hide smilies using the CSS selector IMG[SRC*="/smilies"] but reports that it is not working as expected.
  • Another participant suggests adding { display: none !important } to the CSS rule to ensure it takes precedence, claiming it works for them.
  • A different participant expresses that they have already implemented the suggested CSS rule but still sees smilies, indicating a potential issue with their implementation.
  • Further clarification is provided regarding the importance of exact syntax, including the use of curly brackets and the correct file location for the CSS.

Areas of Agreement / Disagreement

Participants do not reach a consensus on the effectiveness of the CSS rule, as some report success while others continue to experience issues. The discussion remains unresolved regarding the specific reasons for the differing outcomes.

Contextual Notes

There are mentions of potential dependencies on file structure and the exactness of CSS syntax, which may affect the implementation's success. However, these factors are not fully explored or resolved in the discussion.

loseyourname
Staff Emeritus
Gold Member
Messages
1,840
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 ·
Replies
3
Views
2K
HTML/CSS Container shrinks at certain screen widths (CSS)
  • · Replies 5 ·
Replies
5
Views
3K
HTML/CSS Why does the img ID not work in this CSS code?
  • · Replies 8 ·
Replies
8
Views
2K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
  • · Replies 5 ·
Replies
5
Views
3K
HTML/CSS Html5 <canvas> element related apps not working
  • · Replies 3 ·
Replies
3
Views
2K
HTML/CSS Understanding XHTML Slide Show w/ Javascript & jQuery
  • · Replies 2 ·
Replies
2
Views
5K
HTML/CSS Cascading Style Sheets in XHTML 1.0 STRICT
  • · Replies 4 ·
Replies
4
Views
3K
HTML/CSS Is There a Way to Indent Tables in XHTML?
  • · Replies 3 ·
Replies
3
Views
3K
HTML/CSS Troubleshooting HTML Image Area Map Issues
  • · Replies 4 ·
Replies
4
Views
4K
JavaScript Problem using dat.GUI controller library
  • · Replies 9 ·
Replies
9
Views
4K