Skinning Connect Server

IN THIS ARTICLE:

Description

Screen Shot 2012-04-11 at 4.26.47 PM.png

The above screenshot is the default "look and feel" of the Aspera Connect Server.

Although Aspera Connect Server does not have skinning options built it, it is possible to modify some files in order to personalize the colors and the logo used on your Connect Server.

Environment

  • Product: Connect Server
  • Operating System: Linux, Mac OS X, Windows

Files to edit

Below are the files that you can modify in order to customize your Connect Server. You can alter the header with aspdir-header.html, the footer with aspdir-footer.html and the CSS overall with aspera.css. To minimize the required changes (css, etc) you can try to use a logo that is of a similar size as the default Aspera logo.

Note: It is recommended to make a backup of the original files before modification.

Linux

  • /opt/aspera/var/webtools/aspdir-footer.html
  • /opt/aspera/var/webtools/aspdir-header.html
  • /opt/aspera/var/webtools/aspera.css

The logo image to replace to the default Aspera logo needs to be linked to in aspdir-header.html (as shown in the example section) and placed in the following directory:

  • /opt/aspera/var/webtools/images

Mac OS X

  • /Library/Aspera/var/webtools/aspdir-header.html
  • /Library/Aspera/var/webtools/aspdir-footer.html
  • /Library/Aspera/var/webtools/aspera.css

The logo image to replace to the default Aspera logo needs to be linked to in aspdir-header.html (as shown in the example section) and placed in the following directory:

  • Library/Aspera/var/webtools/images

Windows

  • 'C:\Program Files (x86)\Aspera\Enterprise Server\var\www\user\aspdir-footer.html'
  • 'C:\Program Files (x86)\Aspera\Enterprise Server\var\www\user\aspdir-header.html'
  • 'C:\Program Files (x86)\Aspera\Enterprise Server\var\www\aspera.css'

The logo image to replace to the default Aspera logo needs to be linked to in aspdir-header.html (as shown in the example section) and placed in the following directory:

  • 'C:\Program Files (x86)\Aspera\Enterprise Server\var\www\images'

For Windows servers, copy aspdir-header.html and aspdir-footer.html to the custom\www folder (or create if does not exist) at the following location:

  • 'C:\Program Files (x86)\Aspera\Enterprise Server\custom\www\'

The web server will load the modified files automatically.

Example

Below is an example of a way you can skin your Connect Server:

Screen_Shot_2012-04-11_at_4.59.34_PM.png
 
In this example we made changes to the aspdir-header.html file and the aspdir-footer.html file.
 
We edited aspdir-header.html in the following section:

<div id="hd" style="background: #0FB670; color: white;">

  <div class="yui-d0">

    <div class="banner">

      <img align=left src="../images/new_logo.png"/>

       <h1 align=center >Acme  Connect Server </h1>

    </div>

  </div>

</div>        

The changes made were:

  • Inline CSS addition to the hd div tag to change the background and font color
  • Addition of a custom logo image inside the banner div
  • Addition of a custom header tag inside the banner div

We edited aspdir-footer.html in the following section:

<div id="ft" style="background: #0FB670;">
  <div class="yui-0">
    <div class="footer">
      <div class="product" style="color:blue;">
        <h2> Acme Connect Server - Send your feedback to <a href="http://www.acme.com">ACME web site</a></h2>
      </div>
    </div>
   </div>
</div>

The changes made were:

  • Inline CSS addition to the ft div tag to change the background color
  • Inline CSS addition to the product div tag to change the font color
  • Addition of a custom header tag inside the product div

 

 

 

 

 

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk