General Appearance
The General Appearance section contains everything you will need to design your template- the background color, the logo, the toolbar, etc. We have broken it down for you here, to show you all you need to know to design the very basics of your template!
Select Template
Before you begin, you will want to choose the template you will be working with. If you only have one template folder, disregard this. But if you have multiple template folders, make sure to choose the correct one from the drop down menu on the right-hand side in order to begin work.
Background Color and Image
Background Color:
The default background is grey, and you can personalize it to any color you want by either choosing an option from the Background Color drop down menu or by using a color picker to match colors. If Gradient Background is checked, you can use both Background color options to mix colors for the perfect gradient.
Background Image:
A background image is an image you upload to the edition that matches the theme of your template. To do this, use the upload button to choose an image file from your computer and press the upload icon:
The best size to use for your background image is 1024x1788 - JPEG and JPG.
Under Background Display Options, you can choose to stretch or tile the image to best fit the background.
Logo Image and URL
The default logo image in your digital edition is the DCatalog logo. To switch this out and use your branded logo, click on the trashcan to delete the default logo, then use the upload button to upload your logo.
In the logo url box, make sure to place your company's logo. Simply erase the dcatalog website and input your own.
Logo Label
The logo label is related to ADA compliance. When ADA compliance is turned on, it will read the logo out loud.
Toolbar Color
Toolbar Color 1, 2 and gradient work the same as the background color 1, 2 , and gradient.
The default background is white, and you can personalize it to any color you want by either choosing an option from the Toolbar Color drop down menu or by using a color picker to match colors.
If Gradient Toolbar is checked, you can use both toolbar color options to mix colors for the perfect gradient.
Toolbar Position
Click the arrow to bring up the menu options:
Top will always be the default toolbar position. Click on Left, Bottom, or Right to select where you want the toolbar to sit in the viewer.
Language
The language menu allows you to choose what language you would like your catalog to be in.
You have the following languages to choose from: English, Spanish, German, French, Chinese, Japanese, and Portoguese
Use the drop down menu to select the language that best fits to your users and your catalog.
Buttons and Arrows
Button Skins:
Button skins are the type of font you would like to use for the icons in the toolbar at the top of the viewer and the arrow(s) on the side of the viewer to flip the pages. Adjust the skins based on the theme of your template and content.
The following skins options are available in the drop down menu: Classic, Modern, Elegant, and Squared.
Button Color:
Button color changes the color of the buttons in the toolbar. This works similarly to the above color choosing options for the background and toolbar.
The default button color is black and you can personalize it to any color you want by either choosing an option from the Button Color drop down menu or by using a color picker to match colors.
Arrow Color
Arrow color changes the color of the arrows in the toolbar. This works similarly to the above color choosing options for the background and toolbar.
The default arrow color is white and you can personalize it to any color you want by either choosing an option from the Arrow Color drop down menu or by using a color picker to match colors.
fav Icon and Preloader
fav Icon URL
A fav Icon is the icon on the browser tab- the little image to the left of a title of a tab.
This will associate logo with a browser tab, which makes it easier for users to find your link if they have several tabs open.
Preloader URL
The preloader is the splash screen that users will see when they have clicked on the digital edition and it is loading. The preloader always displays the logo that you added in the logo image box.
The preloader url is an animated GIF URL you can link in the splash screen to add a personalized twist to your content.
To add this, find a GIF image you would like to use and copy the image address to get the link. Paste it into the preloader URL box and you will have your GIF image!
Preloader Text:
This text displays a message you would like to share at the bottom of the splash screen. The default is always "Powered by DCatalog." You can change this by deleting those words from the Preloader Text box and writing your own message to display.
Preloader Color:
Preloader color is similar to the background color, toolbar color, button color, etc.
The default preloader color is white, and you can personalize it to any color you want by either choosing an option from the Preloader Color drop down menu or by using a color picker to match colors.
Two Page Spread:
You can choose from single pages to a 2 page spread. The default option is marked to a 2 page spread.
Use Flipping Effect
There are three options to choose from in the way your content moves in the viewer: flip, slide, or hard.
Flip is the default. It's the most popular option and gives the digital edition that "flip book" effect.
Slide makes the pages move in a sliding mode.
Hard is for hardcover. It lends the digital flipbook a more "book-like" effect.
Custom CSS
Custom CSS is a Cascading Style Sheet. CSS (Cascading Style Sheets) is a computer language used to adjust the presentation of a HTML or XML document. Adding Custom CSS allows you to change many elements of your design (e.g., make answers larger, make buttons out of links, etc.) This is an advanced feature within the admin platform that allows customization of the font style, sizing, spacing, and unique button colors.
Zoom Level
Zoom level allows you to set the amount of zoom a user can utilize on your edition. To change the level of zoom, simply click on the menu and set your preferred zoom level.
Bookmark Style
Use the dropdown menu to choose the bookmark style that works best for your content. You can choose from Tab Style or Pop over style.
Pop over allows you to hover with the mouse to reveal the names on each tab:
Tab style clearly displays the name of each section on the tab:
PDF Margins
PDF Margins enables you to edit the margins if you generate a PDF from the HTML generator option. To use it, place the numbers within the top, right, left, and bottom boxes. Remember to Save your changes before your exit.
Save Changes
Once you have finished making your changes, press Save Template to record your changes.
If you need to redo the entire template, you can press Reset to start over from scratch. Now you can move to the tab called Features.
Related Articles
How do I design my template?
You can design the template by using the General Appearances tab, the Features tab and Advanced Features tab. Please check each section to learn more about how to utilize the features.How To Copy Settings in Design Template
Once you set your template up, you may want to keep that design and copy those settings to a new template. This way, you save time and don't have to edit a new template. Here's how to do this. Upload a new PDF to the admin platform: Select your ...What is a template?
A template is a folder to hold the editions. Templates will have a consistent design theme among every uploaded edition. When you upload to a template, you can set design themes that will carry through to every edition uploaded under that folder. If ...Do I need to make a new template each time I upload a PDF?
No, you do not. In fact, think of the template as a folder to hold the editions. Templates have a consistent design theme among every uploaded edition. When you upload a PDF to a template, you set design themes that carry through to every edition ...Adjusting the Zoom Level
There are two options for adjusting the zoom level within your catalog viewing. Option #1: Under Design Template > General Appearance> Zoom Level: Here, you can adjust the Zoom Level. To change the level, simply click on the menu and select your ...