Skinning Faspex 2.x

IN THIS ARTICLE:

Description

?name=media_1326186244264.png

 
This is the default "look and feel" of the Faspex application. Although Faspex does not yet support skinning, it is possible to modify some files in order to personalize the colors and the logo of the Faspex Application.
 
This article will demonstrate how to modify files that reside in the public folder of the Faspex installation.

Environment

  • Product: Faspex
  • Version: 2.x

 

Folders and files

The path to the public folder is the following, based on your system:
  • Linux: /opt/aspera/faspex/public
  • Windows: C:\Program Files (x86)\Aspera\Faspex\public
 
Some pictures are located in the sub-folder images, while the faspex.css file is located in the stylesheets subfolder. Below is a tree showing the structure of the public folder containing all the style elements:
   |-images
|---custom |---facebox |-javascripts |-stylesheets
|---custom |---yui |-----cssfonts |-----cssgrids |-----cssreset

 

Note: Performing the following operations will overwrite some files so it is important that you backup or save your modifications as any successive upgrade of the application will overwrite your changes.

Once you have modified a file (either an image file or faspex.css), copy this file into the related custom folder. Then when an upgrade is done, all modifications that you have made will be backed up. The upgrade process will overwrite any modifications that you have made to files outside of these custom folders. Having a backup in this way guarantees that your modifications will be preserved, and can be tested and restored after an upgrade.

 

The First Page

?name=media_1326199218631.png

Our goal is to have a login page like the one above.

The first thing we want to change is the logo (1). In the original Faspex Application, this is a gif file called logo_faspex.gif. The image size is 295x51 pixels. We can replace this image by simply overwriting this file with a similar image (in the above example it is green) making sure to keep within the same dimensions as the original (if the new image is too high, it will not fit in the bar).

Changing the blue header bar (2) into a new green one, requires that you first change the picture header_bg.gif (just change the background color) and then make a small modification to the faspex.css in the header section:

div#header {
  width: 100%;
  height:64px;
  color: white;
  background: #10b770 url(../images/header_bg.gif) repeat-x 0px -1px;
}

As we can see, the color of the picture chosen is #10b770. But this chosen color will only fill the background if the gif image is too small. The actual color of the area should be set by the color of the gif image header_bg.gif. The last thing is to change the picture in (3). The easiest thing to do is just edit the image by overwriting the file aspera_logo_grey_83.png.

At this point, we should have our new login page ready. View it by refreshing the page (you may have to clear your cache on some browsers).

 

Inside the application

?name=media_1326201542657.png

The modifications done on the first page do not completely carry over to the internal views of Faspex--the header is preserved but the main bar (1) is still the default one. We will completely change the look and feel of this area.

 

The main bar

?name=media_1326211954922.png

To change the color layout of these buttons we will change the following images:

  • main_tab_active_bg.gif (3)
  • main_tab_hover_bg.gif (2)
  • nav_bg.gif (1)

where (1) is the default color of these buttons, (2) is the hover color and (3) is the color of the current selection.

We need to modify the borders of the main bar, so they fit with the new colors. Open faspex.css and look for the tag .main_tabs as below:

.main_tabs {
  margin:auto;
  float:left;
  width: 100%;
  border: 1px solid  #ffffff;
  border-left: none;
  border-right: none;
  background: transparent url(../images/nav_bg.gif) repeat-x 0% 50%;
  font-weight: bold;
}

 Change the button colors first, then evaluate, you may not need to change the border color at all.

?name=media_1326202941757.png

 

Another area of work could be the submenu of the Server button in the main tab.

We can directly change this in the faspex css file. Edit the h1 tag under the "/*BASE TAGS */" section. We can change it to have a less dark title (Address and Port) and solid dark green line with the following:

h1 {
    font-size: 150%;
    font-family:Arial, Helvetica, sans-serif;
    border-bottom: 2px solid #006e2e;
    padding: 2px;
    color: #666666;
    background-color: white;
}

 

Forms

?name=media_1326203465569.png

 

We may also want to change the color of the Forms legend. Edit faspex.css and find and change the tag shown below:

.form_layout fieldset legend {
  font-family:"Lucida Grande",verdana,helvetica,sans-serif;
  font-size:108%;
  font-weight:bold;
  color: #006e2e;
  background-color: white;
  margin-bottom:  12px;
}

 

Vertical menu

?name=media_1326213258831.png

 

Another area to work on is the vertical menu. In order to change it as shown in the picture above, edit faspex.css and under the /* PAGINATION CONTROLS */ section, change:

.v_menu .selected a {
color: #fff;
background: #c9de96;
background: -moz-linear-gradient(left, #c9de96 0%, #8ab66b 44%, #398235 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235));
background: -webkit-linear-gradient(left, #c9de96 0%,#8ab66b 44%,#398235 100%);
background: -o-linear-gradient(left, #c9de96 0%,#8ab66b 44%,#398235 100%);
background: -ms-linear-gradient(left, #c9de96 0%,#8ab66b 44%,#398235 100%);
background: linear-gradient(left, #c9de96 0%,#8ab66b 44%,#398235 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=1 );
}

 

Drag and Drop picture

?name=media_1326212722304.png

Lastly, it is easy to change the Drag and Drop picture. Just replace the original dragndrop.jpg with an equivalent jpg of your own.

Attachments

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk