Documentation

Table of Contents:


    Branding and customizing HTML export

    2018-01-04 2018-08-28
    Applies to: 6.x, Article available also for: 7.x (current), 5.x
    You are looking at documentation for an older release.
    Switch to the documentation for Dataedo 7.x (current).

    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 favicon

    Overwrite favicon.ico with a file in ico format. You can create one eg. here, or convert an existing image to a favicon here.

    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 */
    }
    

    Changing user created text

    From Dataedo 6.3 you can set a different style for text written by user (titles, descriptions, etc.).

    For example, to make your text set to RTL direction, just add .user-defined {direction:RTL} below the #content section.

    /* ==============================================================
       4. Content
       ============================================================== */
    #content {
        background-color: white; /* Background */
    }
    .user-defined {direction:RTL}
    

    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
    0
    There are no comments. Click here to write the first comment.