Documentation

Table of Contents:


    Branding and customizing HTML export

    2018-06-15
    Applies to: 7.x (current), Article available also for: 6.x, 5.x

    Dataedo 6.0 includes an option to customize HTML export. You can add your logo, change font styles, link colors, backgrounds, footers and headers.

    This feature requires Pro edition

    Creating new template

    To customize HTML export you need to create your own custom template. To do so, select existing HTML template in HTML export window as a base template, then click Customize template button on the bottom.

    Dataedo will open new template's location, and it will be shown on the templates list.

    Template files

    The template will be created and the folder containing it will open. You should see 5 files in this folder:

    • How to customize HTML template.url - link to this page
    • logo.png - overwrite it with your logo, it should have at least 30px of height
    • meta.xml - do not edit this file
    • thumbnail.png - do not edit this file
    • user.css - edit this file to change style of your HTML export

    Changing logo

    Overwrite logo.png with a file in png format containing your logo. The image should be at least 30px of height and have a white or transparent background.

    Changing font styles

    You can edit the font style by changing contents of user.css file. Open the file in any text editor, then find 1.1. Font section. There, you can change font family, size and line height for the body of your document, and font family and weight for headers. Additionally, in section 5. Footer you can edit the font color for the footer.

    /* 1.1. Font
    =============================================================== */
    body {
       font-family: "Segoe UI", "Open Sans", Arial;
       font-size: 13px;
       line-height: 150%;
    }
    h1, h2, h3,
    h4, h5, h6 {
       font-weight: normal;
       font-family: "Open Sans", Arial;
    }
    

    Changing color of links

    You can color of hyperlinks and their color on mouse hover by changing contents of user.css file. Open the file in any text editor, then find 1.2. Link color section.

    /* 1.2. Hyperlink color
    =============================================================== */
    a { color: #4679C6; }
    a:hover { color: #04589f; }
    

    Changing backgrounds and borders

    You can edit backgrounds and borders by changing contents of user.css file. Open the file in any text editor, then depending on which background you want to change, edit the fields background-color and border-color in sections 2. Navigation, 3. Menu, 4. Content, 5. Footer.

    /* ==============================================================
       2. Navigation
       ============================================================== */
    #nav {
        background-color: white; /* Background */
        border-color: #cccccc; /* Border */
    }
    
    /* ==============================================================
       3. Menu
       ============================================================== */
    #aside,
    #aside .tree,
    #aside .tree ul li:last-child ,
    #aside .tree ul li.expand:last-child,
    #aside .tree ul li.narrow:last-child {
        background-color: white; /* Background */
    }
    
    /* ==============================================================
       4. Content
       ============================================================== */
    #content {
        background-color: white; /* Background */
    }
    
    /* ==============================================================
       5. Footer
       ============================================================== */
    #footer {
        background-color: white; /* Background */
        border-color: #cccccc; /* Border */
        color: #999999; /* Font color */
    }
    

    Sharing custom templates

    Custom templates are saved in the %USERPROFILE%\Documents\Dataedo\Templates\HTML folder. Each new template will have its own folder. You can share your template with other users just by copying this folder to their corresponding %USERPROFILE%\Documents\Dataedo\Templates\HTML folder.

    Found issue with this article? Comment below
    Comments (0)