Customizing Your Flipbook Folder Appearance

January 30, 2015 Uberflip Customer Success

You've worked hard to build your brand and you should have your Flipbooks in a reader that reflects your work.  This article will focus on the Appearance and Branding of the Flipbook Toolbar for your end user. Along with setting up your images and color branding!

The Folder is the level at which you can define the appearance of your reader, including colors, logos and background images. 

To set up your Folder's appearance, first you need to be in the Manage Flipbooks view from the Flipbooks section of your account, Choose a Folder then click Edit on the left side of the screen.

Once in the Edit Folder Interface screen click on Basics > Appearance/Branding and you can choose the following (refer to below screenshot for reference).

Notes:

You can always see a preview of what your choices will look like (except option 4 below, background image) in the visual preview window at the top of the edit Folder, which you can choose to hide/show.

You can also preview your choice (if you have a Flipbook already uploaded) by clicking on the Preview Eye button on the bottom right of this screen.

When you are finished making any changes, just click 'Save' (OR click 'Cancel' to ignore any proposed changes you made).

Editing Your Folder's Appearance/Branding Settings

You can easily customize your (1) Banner Color, (2) Banner Logo, (3) Background Color, and (4) Background Image. Each of the below options is explained in more detail below the screenshot: 

Image_10.png

(1) Choose Your Folder's Banner Toolbar Color

  • You can pick your toolbar color by clicking with your mouse on the color picker OR enter the html/hexadecimal color in the text box (i.e. #000000 = Black).
  • Your choice will be reflected in the Banner preview at the top of the edit Folder screen (you can choose to hide this visual if you like).
  • You can also preview your choice (if you have a Flipbook already uploaded) by clicking on the Preview Eye button on the bottom right of this screen.

(2) Choose Your Folder's Banner Toolbar Logo and Link to Website (both optional)

  • Display your logo in the banner toolbar for great brand exposure to your users at all times.
  • There is only a small amount of space so design or adjust your logo accordingly.
  • We recommend you use a transparent PNG file (so the banner color shows through) at 140px by 22px (a rectangular shape will fill the logo space better than a square shape). Just click "Choose File" and find the image on your computer.
  • You can link the logo to a website of your choice as well if you like.  Make sure you start the address with "http://".
  • Your choice will be reflected in the Banner preview at the top of the edit Folder screen (you can choose to hide this visual if you like).
  • You can also preview your choice (if you have a Flipbook already uploaded) by clicking on the Preview Eye button on the bottom right of this screen.
  • If you want to remove that logo, just check the "remove current logo" box and update the folder.
  • If you want to update the logo, just choose another file and update the folder.
  • It may take some experimenting to get the best results here.

(3) Choose Your Folder's Background Color

  • You can pick your background color by clicking with your mouse on the color picker OR enter the html/hexadecimal color in the text box (i.e. #FFFFFF = White).
  • Your choice will be reflected in the Banner preview at the top of the edit Folder screen (you can choose to hide this visual if you like).
  • You can also preview your choice (if you have a Flipbook already uploaded) by clicking on the Preview Eye button on the bottom right of this screen.

(4) Choose Your Folder's Background Image (optional)

  • Instead of a background color, you can choose to display a background image to give your users a more unique experience.
  • It's just like choosing an image for your computer's desktop.
  • Click "Choose File" and find your image on your computer (FILE SIZE LIMIT OF 150 KB to not affect performance).
  • Choose the  "Position" of your image in the drop down menu: center, bottom right, bottom left, top left, top right.
  • Choose "Repetition" of your image in the drop down menu for a "tile" effect:  no repeating, repeat in all directions, repeat horizontally, repeat vertically.
  • Choose our "stretch (beta)" feature if you would like your image to fill the reader's background.
  • If your image is not large enough to span the display screen, the background color chosen will show past the edges of your image.
  • If you want to remove the background image and just display the background color, check the "remove Flipbook background" box and update the folder.
  • If you want to update the background image, just choose another file and options and update the folder.

Editing Your Favicon

A favicon is a custom image that is displayed at the top of an Internet browser beside the folder of a website. It is also used as your home-screen icon when mobile device users on iPhone and Android bookmark your Flipbooks.  Best practice states that you should upload your Favicon image to keep everything in line with your branding!

Image_10.png

 

Video Tutorial

Previous Article
Understanding Your Folder Completion Percentage
Understanding Your Folder Completion Percentage

Folder Completion percentages help you understand how well your Folders are set up to enhance and retain yo...

Next Article
Folder SEO
Folder SEO

Search engines like Google, Bing and Yahoo all have their own ways of indexing and ranking websites/pages o...