Post #516

Applying CSS to external services

3rd November 2004, late afternoon | Comments (20)

I was nosing through Mr Kottke’s site the other day and clicked on a link ("Who are you planning to vote for in the 2004 US Presidential election?") that took me through to a polling web site. I didn’t know I was going to go to an external site and was rather surprised when its horrible blue screen loaded up.

How nice it’d be, I thought, if Jason could have styled that polling page to fit in with his site. Hmm, how would you do that?

Well, a simple solution would be for misterpoll.com to add in a CSS URL field to their poll creation page. Users would enter all the relevant poll data as normal (name of poll, description, question, and answers) and then in the new field they’d enter the URL of a CSS file (no doubt stored on their site), which would be used to style their poll pages.

If Mr Poll also published an outline of its HTML code, and gave the various elements ids or classes, it’d be a piece of cake to make this external service fit in visually with Jason’s site.

Screen shot showing a mockupd polling form
A quick demo of what I’m talking about

Of course, Mr Poll probably doesn’t want to blend in, it needs visitors to know that Mr Poll is providing the service, not Mr Kottke… so, maybe this idea could become a feature of its premium package?

Just a thought.

Jump up to the start of the post ↑

Comments (20)

Jump down to the comment form ↓

  1. Kyle:

    I like that idea. A lot.

    I just ran through some major polling/surveying with pollmonkey/surveymonkey for a client's site. It looks bad when you have to have the ugliest polls in the world just because the client chose a trusted polling service. An option to style with CSS would have given me exactly what I needed. Not to mention, implementing the survey was impossible to do in the clients site - it forced them to use a popup. Ugh.

    Maybe an idea for a new business/site. Just a thought.

    Posted 1 hour, 7 minutes after the fact
  2. Jaimie:

    We do exactly that for many clients, and we use the absolutely fabulous polling/questionnaire phpESP http://phpesp.sourceforge.net (runs on php and MySQL). At times we have linked to the same poll through various organizations, and each one shows the poll with their own branding even though it's the same poll. Works like a charm. The nice thing about phpESP is that its form creation is entirely web-based. Nice reporting too.

    BTW, something's broken with the auto URL thingie for preview. My plain text link get's all mangled on preview. Let's see if it post fine. Here it goes.

    Posted 1 hour, 31 minutes after the fact
    Inspired: ↓ Andy
  3. Jeff Wheeler:

    I noticed the exact same thing when viewing this, and thought a similar thought. However, I came up with a different method.

    Couldn't they somehow use server-side includes to include a section of the code on mister poll's site and then integrate it into other's sites, and simply have the form link to an full url that would then send them immediately back with a header tag? That would be simple enough to do if they felt like it. At least I imagine it would be...

    Posted 3 hours, 41 minutes after the fact
  4. Rob Mientjes:

    Good thinking, but yes, of course Mr. Poll wants to retain its (his?) branding. It would be a great opportunity, like Dave Shea's Hack Hotbot and CSS Zen Garden. I think I should implement such a function for my next design...

    Posted 5 hours, 44 minutes after the fact
  5. Tom:

    If it were possible to add your own style sheet, wouldn't everyone immediately start adding things like;
    div#ad
    {
    display: none !important;
    }

    Posted 6 hours, 58 minutes after the fact
    Inspired: ↓ Dunstan, ↓ Richard Soderberg
  6. Philipp Lenssen:

    This kind of poll would indeed be nice. I did something similar, but for a search engine. At http://www.findforward.com you can use the css= parameter in the URL to use your own stylesheet. The search result page is XHTML with a lot of ids and classes.

    http://www.findforward.com/?q=google // default
    http://www.findforward.com/?q=google&css=blog.outer-court.com%2Fsearch-css%2Fmars.css // CSS applied

    Posted 7 hours, 56 minutes after the fact
  7. Andy:

    Jamie, I really like the look of phpesp - thanks for the tip

    Posted 10 hours, 19 minutes after the fact
    Inspired by: ↑ Jaimie
  8. Shade:

    I completely agree... Good on ya man!

    -Shade

    Posted 12 hours, 31 minutes after the fact
  9. Mark Wubben:

    Just make sure there is no JavaScript in those CSS files...

    (Dunstan, the spell checker is broken, it's JavaScript, not Java-Script!)

    Posted 13 hours, 20 minutes after the fact
  10. Jonathan Snook:

    Tom: Mr. Poll could set up styles after the included stylesheet to overrule specific styles to help ensure the important stuff doesn't get hidden. Now, there's always ways around it but 98% of people likely wouldn't care.

    For the Mr. Poll branding, his logo and extra information could still be presented on the page, ensuring that everybody knows it's coming from him. Something like "This poll was brought to you by Mr. Poll. _Create your own poll now!_" with a fancy logo. I think there's definitely an opportunity to generate more traffic.

    And Dunstan: I was just as perplexed when I clicked on the poll link. I thought to myself..."oh, okay... I'm on a different site now." Very unsettling.

    (btw: nice spell-checker... it made sure I spelled your name right!)

    Posted 13 hours, 44 minutes after the fact
  11. Michael Pierce:

    I agree, services like this would be very nice to have. Folks like me with wimpy ISP’s could greatly enhance the power of their sites and yet maintain a consistent look and feel. Would be nice...

    I know the concept is different, but the RSS reader I use (http://server.com/WebApps/NewsApp/) allows you to identify your own CSS file for formatting the newsfeeds. That and the ability to get my news from any machine/browser is why I use it. I’ve come up with a 2-column layout that I like for reading feeds. You can see my newsapp here:
    http://server.com/WebApps/NewsApp/news-read.cgi?profile=2460

    Posted 14 hours, 44 minutes after the fact
  12. Turnip:

    This is a good idea, and we'll probably see features like this come into place over the next few years I'd expect. Mr Poll could still leave their name on the site, and maybe even a note saying it has been styled remotely and it would work beautifully.

    This is why I really like the Zen Garden, it is living proof that CSS can be used to totally change the look of a page with exactly the same markup.

    Posted 15 hours, 8 minutes after the fact
  13. Phil Baines:

    This would be a nice service to offer to web developers that need a fast solution. Maybe I will convince the guys on my team to knock one up some day!

    Posted 16 hours, 16 minutes after the fact
  14. David Barrett:

    I think this is a project for that, er, small project volunteer thing whose name escapes me.

    Posted 20 hours, 55 minutes after the fact
    Inspired: ↓ David Barrett
  15. Mike Henderson:

    Mr Poll could easily block the blocking of ads, by simply putting the #ad code inline. That would block anyone from using #ad { display: none; }, wouldn't it?

    Posted 23 hours, 8 minutes after the fact
    Inspired: ↓ Dunstan
  16. Dunstan:

    Tom, as Mike says all it would need would be a very specific rule placed in a style sheet which was declared after the users style sheet, and Mr Poll would have control over things such as adverts.

    Of course, it this was only offered on their premium service, adverts probably wouldn't be there.

    Posted 23 hours, 50 minutes after the fact
    Inspired by: ↑ Tom, ↑ Mike Henderson
  17. Web:

    I was thinking of that for a long time now too. I really think that many websites will be offering external (your own) styles to use with their site. That would just make sense. And user would be able to contribute their own design and other users can just pick one they like.

    Regarding some people overriding some styles you want to exists (ads, nav, etc...). You can have another style right AFTER custom style defining all those things again.

    Posted 1 day, 16 hours after the fact
  18. David Barrett:

    LazyWeb. That's it.

    Posted 3 days, 1 hour after the fact
    Inspired by: ↑ David Barrett
  19. Richard Soderberg:

    The URLid extension for Firefox does wonders for advertising blocking with CSS; it provides for a unique-per-site id on the BODY tag of sites loaded in Firefox. One of the entries in my custom CSS preferences is related to advertising; the rest are usability adjustments for sites I frequent.

    /* Hide ugly sponsor ads on Friendster. */
    BODY#www-friendster-com DIV.sponsorsAd
    { display: none !important; }

    /* De-italicize Slashdot. */
    BODY#slashdot-org > TABLE > TBODY > TR > TD > TABLE > TBODY > TR > TD *
    { font-style: normal !important; }

    Posted 1 week after the fact
    Inspired by: ↑ Tom
  20. Xopher Detto:

    Didn't read EVERY post, so hopefully this isn't redundant, but basically what's being described here is simply content syndication. Basically Dunstan has just discussed a new method to do it.

    1. The idea of using your own style sheet is pretty cool (and simplifies the process). In fact, this would be an interesting way to handle Atomz search results (instead of the web based template system) or other ASP services where the user is directed to an external URL.

    2. The idea of just the poll being an include that you could pull into your own site is available through third party syndication services/software (http://www.webcollage.com).

    3. There's always HTML scraping for the nerdy folks out there.

    4. The REAL way to do syndication. Simply have an alternate version of the poll results returned as XML if you append an argument to the poll URL (?xml=true) or something. Then you can simply pull the XML stream into your page and format as needed. We are talking web services, RSS, XSL here, all of the things that have been developed over the years to satisfy this EXACT need.

    My two major points: 1) I think Dunstan's idea is cool 2) If anyone is going put forth the effort to make their services "skinnable" I'd prefer they do it in a standard way, and in this case, the XML standard already exists, so although far more complicated to implement then viewing the source of the desired page (to discover ids and classes used in HTML) and submitting your own style sheet URL, I think it's the best way.

    Posted 2 weeks, 2 days after the fact

Jump up to the start of the post ↑

Add your comment

I'm sorry, but comments can no longer be posted to this blog.