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: