This feature is available in FileCloud v7.0 and later.
You can specify an alternative Cascading Style Sheet (CSS) to customize any element of the User Portal's interface.
Some in-depth knowledge of CSS is required.
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.
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 the Custom CSS Path
In the Admin Dashboard, navigate to "Customization" tab and select "Advanced" tab. Set the relative path to custom CSS file.
For example, set the "Custom CSS Path" entry to be "theme1/style.css", if the CSS file is created under <WEB_ROOT>/resources/customization/css/theme1/style.css.
Important Notes
- Supporting images referred in the CSS file should also be placed under <WEB_ROOT>/resources/customization/css folder, along with the CSS file.
- The directory CSS isn’t there by default. So the user has to create it.
- Some Linux systems might need apache user set as owner and group of the 'css' directory (for example RHEL, set apache:apache)
- Some Linux systems might also need permission for owner of 'css' directory to be set with read/write/execute.
Step 3: Configure Custom CSS Entries
In the admin UI, navigate to "Customization" tab and select "Advanced" tab. Enter additional CSS entries in the field "Custom CSS Entries".
Note: Additional CSS entries will be enforced in addition to the file specified in the custom CSS field.
Step 4: Create CSS Content
Once the above three 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.
The following sample CSS will change your user UI background and top bar color.
Sample CSS
.navbar {
background-color: lightyellow;
}
.btn {
background-color: #808080;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Before Custom CSS
After Custom CSS
Overview
Content Tools