Skip to main content

    How to Set up a Custom Linked Data Frontend?

    Abstract

    How to Set up a Custom Linked Data Frontend?

    First, please refer to the documentation here, before you start to customize the Linked Data Frontend:

    Set Up Resources for the Customization

    Customize All Projects at Once

    1. Change the directory to custom:

      cd /opt/poolparty/data/frontendRoot/custom

    2. Copy velocity templates, css style sheets, images, etc. to the custom directory:

      cp -r /opt/poolparty/data/frontendRoot/default/* .

    3. Change path values. Since there are numerous path definitions, especially in .vm files, you have to replace paths to respective resources:

      This will change 'default' to 'custom' in all files at once.

      Execute these commands in the following folder: frontendRoot/custom

      grep -rl 'default' . | xargs sed -i "s|default/|custom/|g"

    Using this setup you can customize all projects at once.

    Customize Particular Projects

    If you intend to customize one or more projects specifically, you have to follow these steps:

    • Copy template, style sheet files etc. into the project specific directory and change paths, similar to steps 2 and 3 above, for all projects.

      Example: In the 'Austrian Music Graph' project, paths would be 'custom/AustrianMusicGraph'.

    Examples of Customization

    I. Add Custom Relations to the Set of Listed Properties

    1. Add property to vars.vm

    2. conf.vm: Enter requested property keys to $listedProperties

    3. To give the property a reader friendly label you can enter them for example in lang/en.vm

    III. Header Logo Customization

    <div id="logo"><a href="http://www.worldbank.org/"><img border="0" src="#frontendLink('custom/images/wb_logo.png')" alt="$serverName" /></a></div>

    IV. Introduce a 'Powered by' Logo at the Bottom of the Page

    1. Copy logo image into /images

    2. Adapt foot.vm to match your requirements.

    V. Footer Logo Customization

    <div id="footer">
      <ul id="nav_bottom">
        <li><a href="http://poolparty.biz/company" target="pp_contact">contact</a></li>
        <li>|</li>
        <li><a href="https://help.poolparty.biz/x/CgCU" target="pp_about">about</a></li>
        <li>|</li>
        <li><a href="http://www.w3.org/2004/02/skos/" target="pp_skos">skos</a></li>
      </ul>
      <p id="poolparty">
        Powered by <a href="http://poolparty.biz"><img class="pplogo" border="0" src="#frontendLink('custom/XYZ/images/pp_logo.png')" alt="PoolParty" /></a>
        </p>
 </div>

    VI. Replace Tile Images

    1. Copy tile image into /images

    2. Change image URL in /css/style.css entry under body:background

    VII. Configure Blank White Background

    Edit css/style.css

    ...
html {
    height: 100%;
    overflow-y: scroll;
    width: 100%;
    background: #ffffff;
}
body {
    background: #ffffff;
    font-size: 0.813em;
    color:#474747;
        padding-bottom: 60px;
}
...

    VIII. Change default serverName

    The default value of the variable serverName can be customized:

    Edit conf.vm

    ## Common settings
..
#set($serverName = "My custom PoolParty server name")
..
    In this section: