Get the iOS7 look on older devices.

Optimize an iOS 6 app to look like iOS 7.


Including:

  1. Quick install

  2. iOS7 specific styling

  3. iOS7 styling differences

  4. iOS7 frosting on all views

Download demo app

  1. nativeCSS loads styles from styles.css

    with the following lines in the app delegate:

    - (void)applicationDidBecomeActive:(UIApplication *)application{ NSURL *cssURL = [NSURL URLWithString:@"http://localhost:8000/styles.css"]; [UIApplication styleWithCSSFile:@"styles.css" updateFromURL:cssURL refreshPeriod:NCRemoteContentRefreshEverySecond];

    This will also regularly update from a remote url.

  2. To accelerate development, we can host styles.css as a local URL and let the app update itself.

    Find the CSS file in the project folder:



    and start a webserver from the command line:

    python -m SimpleHTTPServer

  1. Run the app in the iPhone 6.0 simulator. It should look a bit like this:



    Not very exciting, let's have a look at the same app on iOS7.



    There are some interesting changes for iOS7, which we'll fix together.

    1) Text is displayed with a new font

    2) Nav bars have no gradient, or text shadow.

    3) Buttons have a specific text color and nothing else.

    4) Nav bars can be frosted.

  1. First off, let's fix the nav bars.

    Open styles.css and uncomment the top chunk:

    max-ios6 button, max-ios6 label{ font-family:"Helvetica Neue"; font-style:"Light"; font-weight:none; text-shadow:none } max-ios6 navbar{ background:white; color:black; font-size:17px; text-shadow:none; }

    The max-ios6 selector only applies to iOS 6.1 and below.

    This CSS tweaks the font and text properties.

    Restart the app and the app should look like this.



    Most restyling doesn't require a restart, but navigation bars are complicated.

  2. Next, let's tidy the edit button.

    Open styles.css and uncomment the next chunk:

    max-ios6 navbar button{ color:#007aff; background:transparent; text-shadow:none; } max-ios6 navbar button:active{ color:#bcd9ff; background:transparent; font-size:18px; }

    This changes the nav button's text and background color.

    Note we are using :active to style the down press of the button.

    Restart the app and the app should look like this.



    We are only restarting due to navigation bar changes.

  3. Next, let's add some frosting

    Open styles.css and uncomment the next chunk:

    #view > view:nth-of-type(2){ filter: frosting; }

    The frosting filter mimics iOS frosting for all UIView's

    Save and the app should automatically refresh:



    Let's compare this against our iOS7.



    Perfect.