Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Introduction

Beginning v7.0, FileCloud allows admins to configure custom CSS for their user web UI. It is possible to customize any element of the UI using this custom CSS feature. Some in-depth CSS knowledge is required to fully utilize this feature.

Enabling Custom CSS

Step 1: Enable rewrite rules

When FileCloud is installed or upgraded, this step should be already done for you. But admins should ensure that the following rules are enabled in their htaccess file.

Typical location of a htaccess file
On Windows: C:\xampp\htdocs\.htaccess
On Linux: /var/www/.htaccess

Depending on the Apache version that you are running,ensure the appropriate lines are present in your htaccess file. Note the order of rules is important.

Rewrite rules for Apache 2.2

RewriteEngine On
RewriteRule ^upload/?$ core/index.php?op=upload&%{QUERY_STRING} [L]
RewriteRule ^getaudio/?$ core/index.php?op=geta1dio&%{QUERY_STRING} [L]
RewriteRule ^getvideo/?$ core/index.php?op=getv1dio&%{QUERY_STRING} [L]
RewriteRule ^download/?$ core/index.php?op=downloadfile&%{QUERY_STRING} [L]
RewriteRule ^storage/index.php?$ storage/index.php?%{QUERY_STRING} [L]
# componant inside filecloud server
RewriteRule ^serverbackup/index.php?$ app/serverbackup/index.php?%{QUERY_STRING} [L]
# standalone backup server
RewriteRule ^backupclient$ resources/backupserver/index.php [L]

#Use this rule for customization for Apache 2.2
RewriteRule ^custom/css/(.*)$ resources/customization/css/$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)/?$ core/index.php?op=$1&%{QUERY_STRING} [L]

Rewrite rules for Apache 2.3+

RewriteEngine On
RewriteRule ^upload/?$ core/index.php?op=upload&%{QUERY_STRING} [L]
RewriteRule ^getaudio/?$ core/index.php?op=geta1dio&%{QUERY_STRING} [L]
RewriteRule ^getvideo/?$ core/index.php?op=getv1dio&%{QUERY_STRING} [L]
RewriteRule ^download/?$ core/index.php?op=downloadfile&%{QUERY_STRING} [L]
RewriteRule ^storage/index.php?$ storage/index.php?%{QUERY_STRING} [L]
# componant inside filecloud server
RewriteRule ^serverbackup/index.php?$ app/serverbackup/index.php?%{QUERY_STRING} [L]
# standalone backup server
RewriteRule ^backupclient$ resources/backupserver/index.php [L]

#Use this rule for customization for Apache 2.3+
RewriteRule ^custom/css/(.*)$ resources/customization/css/$1 [END]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)/?$ core/index.php?op=$1&%{QUERY_STRING} [L]

Step 2: Configure CSS Path

In the admin UI, navigate to "Customization" tab and select "Advanced" tab. Set the path to custom CSS file.

Important Notes

  • The CSS files and supporting images have to be placed under <WEB_ROOT>/resources/customization/css folder.
    In the above example, custom CSS was placed under  <WEB_ROOT>/resources/customization/css/theme1/style.css

Step 3: Create CSS Content

Once the above two steps are completed, admins can create custom CSS content to fully modify their user UI. Look into the next section for a sample custom CSS.

Sample Custom CSS

Following sample CSS will change your user UI background and  top bar color.

Sample CSS
body{
	background-color: #FDFFC8;
}
.navbar-fixed-top{
	background-color: #ADD8E6;
}

Before Custom CSS
 

After Custom CSS 

  • No labels