Working with your custom theme in the new look and feel

Klipfolio is rolling out a new look and feel on May 2nd. It offers a fresh experience for users with easier to read dashboards and many usability enhancements. Here are a few things that customers using Custom Themes need to keep in mind:

  • The New Look and Feel is a system-wide change to Klipfolio.
  • Customers will automatically be switched to the new look by May 2nd, 2016.
  • You need to upload updated CSS files, otherwise, your users (and clients) will see the default Klipfolio new look. See how below.
  • Logos, hosted images and scripts are not impacted. 

What you need to do

If you use custom CSS, here is what you need to do before May 2nd:

  • Before you update your CSS, check out the new look and feel
  • Check your old CSS with the new look
  • Update your CSS for the new look
  • Work with Images and Javascript
  • Switch all users to the new look

How to see the new look

The new look and feel is already live. You have two options for turning it on:

You can turn the new look on/off immediately for just you by changing the URL:

  • Turn it on with: app.klipfolio.com/dashboard?newlook=true (replace with your URL if using custom domain).
  • Turn it off with: app.klipfolio.com/dashboard?newlook=false (replace with your URL if using custom domain).

Or, you can turn it on in Settings. Use this method when you are satisfied with your CSS in the new look. (Note to partners: Your clients of partners will also ). To turn it on for your account and all users:

  • Go to Account > Settings > General.
  • Click on the Edit link next to Preview the New Look & Feel.
  • Click the checkbox to turn it on.
  • You can turn it off, by unchecking the checkbox.

Check your old CSS with the new look

You’ll need to set up your CSS for the new “New Look” slots in the custom theme UI for them to apply when the new look is active. If CSS files are not uploaded by May 2nd, your users and clients will see the new Klipfolio look by default. Here’s how:

  • Navigate to Account → Settings → Branding → Manage Theme and CSS,
  • Use the buttons next to Dashboard CSS - New Look and Application CSS - New Look to select your current CSS files.

  • Press Apply Now.
  • Turn on the new look or use the URL to see the updates.
  • Check your dashboard and/or application user interfaces to see how your custom CSS is affecting the new look.

 

Adapt your CSS for the new look

Assuming you need to make some changes, you’ll want to make copies of your CSS, adjust them, upload them, and assign them to the correct slots in the Custom Theme UI.

Caution: If you change the CSS assigned to the old look, your users will see changes right away.

  • Download your existing CSS via the links in the Custom Theme UI
  • Give them unique names, like “dashtheme-newlook.css”, so you can identify them more easily later.
  • Make changes as per the Custom Theme Guide
  • When you’re done, upload your new CSS and select it for Dashboard CSS - New Look and/or Application CSS - New Look
  • Press Apply Now and check your changes

 

Note: Based on feedback from customers, we may make changes to the Klipfolio look and feel that will impact your CSS. 

Using Images and JavaScript

Klipfolio treats images and JavaScript files as assets you can utilize in both the old and the new look at the same time. Just make sure to reference the right image in the appropriate CSS and you’re good to go.

For JavaScript, use the following to target users only with the new look:

if (KF.user.env.useStyle201512) {

...

}

Note: The new look often uses SVG files instead of PNGs, JPEGs or GIFs. You can override these with PNGs, JPEGs or GIFs if you like.

Switching all users to the new look

When you’re confident that you’re ready to make the switch, go to Account > Settings > General and enable the new look.

Note: Your users will not see the new look and your new custom theme until they’ve signed out and back in again.

Additional resources

For more information on changes to the UI, see the New Look and Feel.