New Templates & Custom CSS

We’ve made big changes to the Custom CSS page.

When you click the paint brush icon (now called  the “Look and Feel” page)  you can choose from a number of pre-made templates in addition to uploading your own Custom CSS as before.

Using the New Templates

  • To change your site from the default template to new template, simply click the template name on the left. You can preview your site in the window on the same page.  Once you’ve decided on a template, click save at the bottom of the page, and you’re good to go.
  • To update colors and take the template you chose even farther, you can apply Custom CSS box below the template selector. 
  • To use the Color Sector (the paint can icon) you will need to go back to the default template, and then can work with this to change colors as before.

We only have a few templates up there now, but more templates and color schemes are on the way!

Two of our new templates: 

     Jet Black                                                                                           Purple Haze

           

 

Applying CSS

Just as before, you can apply your own CSS to the mobile site to create a unique look and feel.  The CSS box is now below the templates and you can use this in one of two ways:

1) Layer your own CSS onto one of our templates. If you change templates, your CSS will interact differently with the new template.

2) Apply CSS to the default template.  Just the same as you’ve always done.

If you want to create your own mobile site design but don’t know CSS or just don’t have time, our services team can help. Click here to connect with a Mobile Design Expert.  We manage full site builds, or can quote any CSS work or styling you want to apply to a pre-existing site.

 

Preview: iPhone or Galaxy Nexus

When previewing a site from your desktop computer you can select an iPhone or Galaxy Nexus (Android) emulator. BlackBerry and others are on the way.

Tip: Don’t just use this while designing your site!  Once you have a great looking site, take a snapshot of it inside the previewer.  Then, scroll to the bottom of the site (still inside the previewer), and click the “Desktop”  link at the bottom. This opens the desktop URL – still inside the previewer.   Now, take a snapshot again.  With these two screenshots, you can create a quick “Before and After” slide to present internally, or to your clients!