Knowledge Base/3.0 Enhance your reader and publication/3.1 Enhance your reader (FOLDER)

3.1.1 Basics - Appearance/Branding

Nathan Virtue
posted this on July 01, 2011 11:20 am

Click Here for Video Tutorial

You've worked hard on your brand and you should have your digital editions displayed in a reader that reflects your branding.

edit_title_-_appearance-options_flipbook_screenshot.jpg

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

To set up your Folder's appearance, first you need to be in the "manage Folder's and Issues" view (1 below), Choose a Folder(2 below) then click Edit on the right side of screen (3 below)

Edit Folder Access Screenshot

Manage_Titles_and_Issues.png

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 (4)background image) in the visual preview window at the top of the edit title, which you can choose to hide/show

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

When you are finished just click on the "UPDATE" button to save changes OR click GO BACK to cancel any changes and go back to the manage titles/issues screen

(1)Choose your Title's Banner Toolbar Colour

  • You can pick your toolbar colour by clicking with your mouse on the colour picker OR enter the html/hexadecimal colour in the text box                 (eg #000000 = BLACK)
  • Your choice will be reflected in the Banner Visual preview at the top of the edit title screen (you can choose to HIDE this Visual if you like)
  • You can also preview your choice (if you have an issue already uploaded) by clicking on the Preview Eye button on the bottom right of this screen

(2)Choose your Title'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 amout of space so design or adjust your logo accordingly
  • We recommend you use a transparent PNG file (so the banner colour 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 Visual preview at the top of the edit title screen (you can choose to HIDE this Visual if you like)
  • You can also preview your choice (if you have an issue 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 title
  • If you want to update the logo, just choose another file and update the title
  • It may take some experimenting to get the best results here

(3)Choose your Title's Background Colour

  • You can pick your background colour by clicking with your mouse on the colour picker OR enter the html/hexadecimal colour in the text box        (eg #FFFFFF = WHITE)
  • Your choice will be reflected in the Banner Visual preview at the top of the edit title screen (you can choose to HIDE this Visual if you like)
  • You can also preview your choice (if you have an issue already uploaded) by clicking on the Preview Eye button on the bottom right of this screen

 

(4)Choose your Title's Background Image (optional)

  • Instead of a background colour, 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 150KB to not affect performance)
  • Choose the  "Position" of your image in the dropdown menu: center, bottom right, bottom left, top left, top right
  • Choose "Repetition" of your image in the dropdown menu for a "tile" effect:  no repeating, repeat in all directions, repeat horizontally, repeat vertically
  • If you want to display a single image that spans your flipbook, use a larger image so it will display in full on most screen's display resolution (1920X1200 will ensure a full image will display on large monitors, and smaller laptops screens alike)
  • A single image does not stretch/shrink to fit the viewing display screen, which is why we recommend the larger image to accommodate most devices.
  • If your image is not large enough to span the display screen, the background colour chosen will show past the edges of your image
  • If you want to remove the background image and just display the background colour, check the "remove flipbook background" box and update the title
  • If you want to update the background image, just choose another file and options and update the title

Edit Title - Appearance/Branding Screenshot

Appearance_and_Branding.png
 

Video Tutorial