Skinning Faspex 3.x

IN THIS ARTICLE:

Description

?name=media_1326186244264.png

This is the default "look and feel" of the Faspex application. While 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: 3.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

Most of the pictures are located in the sub-folder images, while the faspex.css file is located in the stylesheets subfolder. bootstrap.css is located in the third-party/bootstrap for Below is a tree showing the structure of the public folder containing all the style elements:

|-images
|-custom
|-facebox
|-javascripts
|-stylesheets
|-custom
|-third-party
|-bootstrap
|-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 easiest thing to do is just edit the image by overwriting the file aspera_logo_grey_83.png.

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. Depending on the size of your image, you may have to edit the following line in bootstrap.css:

form {
margin: 0 0 18px;
}

Specifically, changing 18px to a larger value will allow you to place a larger image here.

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.pngThe 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.

green_menu_png.png

Another area of change can be made to the submenu of the Server button in the main tab.

We can directly change this in the bootstrap.css file. Edit the following two tags to alter the subtitles:

h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: Verdana, helvetica, sans-serif;
font-weight: bold;
color: inherit;
text-rendering: optimizelegibility;
}

 

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
line-height: normal;
margin-bottom: 20px;
}

and this tag to alter the grey bar at the bottom:

.form-actions {
padding: 17px 20px 18px;
margin-top: 18px;
margin-bottom: 18px;
background-color: #f5f5f5;
border-top: 1px solid #e5e5e5;
*zoom: 1; }

Forms

form_script_green.png

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

legend {
width: inherit;
font-size: 108%;
font-weight: normal;
background: transparent;
line-height: 1.5;
color: #1952bb;
margin: 12px 0;
padding-right: 5px;
border: 0;
}

 

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 alter the following two sections:

.v_menu li a {
display:block;
text-decoration:none;
color:#333;
line-height:30px;
border-top:1px solid #ccc;
padding-left:10px;
cursor:pointer; }

 

.v_menu .active a,
.v_menu .selected a {
color:#fff;
background-color:#343945;
background-image: -moz-linear-gradient(top, #676c79, #343945);
background-image: -webkit-gradient(linear, left top, left bottom, from(#676c79), to(#343945));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff676c79,endColorstr=#ff343945);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff676c79,endColorstr=#ff343945)";
}

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.

Footer

In order to make the footer part floating, and stuck to the bottom of the page, add the following lines at the end of the file : public/stylesheets/faspex.css

html {
    position: relative;
    min-height: 100%; 
}
body {
    margin: 0 0 76px;
}
#footer {
    position: absolute;
    bottom: 0;
    height: 76px;
}
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk