HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.

[STYLING] IPhone stylesheet/theme

edited February 2011 in Vanilla 1.0 Help
being css/html illiterate, i can't do this myself, but i'd love a theme that was nice and viewable on my iphone. if it isn't a complicated procedure i might even try it myself. is it just a css sheet, or would you need to make a new theme, and thus get into the html stuff?


  • In theory you can do everything you need to with a style sheet, but if you are looking for something a little more minimal, a full blown theme would be wise.

    Give me an iPhone and I'll do it ;)
  • edited August 2007
    Oh, yes, I would happily do it.... but I would need an iPhone to test it on *looks innocent*

    I would be tempted to just make it a new style, I would strip off the current stylesheet, and would build an iPhone one from scratch, perhaps taking the colours of the current lussumo one as a base.

  • this is cheaper than an iphone: http://iphonetester.com/ i'm playing around with this today, if it doesn't come out too offensively, i'll share what i've done.
  • i'm not sure this is doable with just a style, but i was playing around with the blogger theme, and its definitely possible. need to remove the panel, and move its elements into the header, reformat the header for the narrower display, and then format the text to fit the display. it will not be a very awesome theme on a full sized browser, compared to other vanilla themes. or rather, it won't be if i do it, as i'm not knowledgeable enough to get it to recognize what browsers is viewing it and call the right files. anyway, if anyone with betters skills takes a hack let me know, otherwise i'll keep slogging at this.
  • It can be done with a few different techniques and will look good in any browser size.
    Check this example, it should be suitable for any browser and any media! :)
  • pic

    This Application Mimics an iPhone

    It is supposed to render web sites exactly the same as the iPhone, it even rotates into landscape mode.

    Posted: Thursday, 30 August 2007 at 7:25AM

  • dan39dan39 New
    edited September 2007
    You don't need an iPhone to develop for the iPhone (although, it wouldn't hurt). Everything you need for your iPhone development is here: http://developer.apple.com/iphone/ The iPhone uses Safari 3, which you can download and test out on any Mac or PC.
  • mattmatt ✭✭
    edited May 2008
    I found this on Flickr, it seems somebody has already done it.

  • mattmatt ✭✭
    edited May 2008
    Here are the files that are needed: http://www.gingerbeardman.com/vanilla-iphone.zip

    I'm just packaging up, this was originally created by David Zhou

    edit: I've updated the zip to show how to change head.php to suit.
  • mattmatt ✭✭
    edited May 2008
    Additional work by me

    + Added signed in status and sign in/out links
    + Added Start Discussion link
    + Added support for Start Discussion page
    + Hides Banner and Poll add-ons if you have them installed
    + Resizes inline images within comments

    Thinking about the best way to make this a proper Vanilla theme.
  • edited May 2008
    You could upload it to the addon site for starters :-D

    This could be a theme, and an accompanying addon that enables the theme when needed. (Or does the theme do that on its own?)
  • edited May 2008
    trying to get this to work. Got the modified head.php in /themes and the iphone folder in the root folder still does not come up. HALP
  • mattmatt ✭✭
    edited May 2008
    All I can say is check the paths for the link to the CSS file in head.php
    Check your paths


    Anyway, I've got a work in progress of phase 2 up at: http://www.gingerbeardman.com/iphone/

    Phase 2
    Thinking about how the forum would best work as an iPhone web app (more on this below)
    Coding up all the templates (what I've been doing this afternoon, using Joe Hewitt's iUI library)
    Making a proper Vanilla theme (adding all the Vanilla php into the templates, the most difficult bit)
    Making an associated extension to activate the theme only when iPhone is detected (to work best with Vanilla)

    A more iPhone-like experience
    Easier installation and maintenance
    Better for the Vanilla community - everybody can use it!
    A more iPhone-like experience

    May not support older mobile phones as well as the current iPhone hack
    (there may be some way of running something like both of them)

    I think the things that are left out of this mobile version are as important as the things that make it in: do we need "new post count" and "last comment by" when an updated topic is already in yellow? Do we need the Categories section? I've left these both out.

    It's also worth looking at how topics work: it makes more sense to display most recent comment at the top, to reduce the amount of scrolling needed. Also, I've taken the recommended approach of adding an option to grab older comments on request, rather than automatically.

    Let me know what you think.
  • edited May 2008
    Anyway, I've got a work in progress of phase 2 up at: http://www.gingerbeardman.com/iphone/
    This works beautifully on my iPhone!
  • mattmatt ✭✭
    Can't give a timescale on this, but it should be "sooner" rather than "later"!

    I'm frequently updating the work/test version, though... ;)
  • this is looking super awesome I will just stop messin with it and wait for proper extension thanks for all your work im excited.
  • mattmatt ✭✭
    Thanks man, I'll get it done just be patient

    Enjoy the sun!
  • I'm confused, is it possible to have two themes (one regular, one iphone) for one vanilla installation? If so how?
  • dan39dan39 New
    edited July 2008
    There are a lot of PHP iPhone detector scripts out there that do a nice job that could easily load the proper theme automatically. Just be sure to use one that looks for both the HTTP User Agents 'iPhone' or 'iPod', otherwise you'll exclude all of the iPod Touch users!

    I think something like this would work (though I haven't tried it out):<?php if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strpos($_SERVER['HTTP_USER_AGENT'], 'iPod')) { echo "Some Stuff Here"; } ?>
Sign In or Register to comment.