StingRay Firmware » Firmware 2.5.x

ID #1084

How do I change the colours in the External Web Interface?

We've worked to make it as easy as possible to edit and customise the colours within the External Web Interface. If blue isn't your colour of choice, then follow these steps and you'll be up and running with your own colours in no time:

1) Log into the StingRay's Internal Interface as an administrator.
2) Navigate to Network Configuration.
3) Under the heading "External Web Access" click "CSS Download" on the bottom right of the category.
4) If a new tab opens with the CSS displayed as a web page, please Right Click > Save as to download the file.
5) Open the file in your preferred text editor. (- Notepad++ is excellent on Windows.)

Immediately you are greeted with a notice: 

/*

EXAMPLE PRIMARY COLOUR: #2c93c4
EXAMPLE SECONDARY COLOUR: #61b1d8  

These will need to be set in the CSS below dependent on how the user wants to customise. 

*/

The Primary colour is the main colour - the slightly darker blue in your External Web Interface.
The Secondary colour is the main blue colour of your buttons and the lighter bottom border on the header.

If you have a Primary and Secondary #colour available, simply find each instance of the #colour and replace it with your own. If you're looking for colour codes, check out Where do I find colour codes to edit the StingRay CSS file?

Primary Colour: 5 instances
Secondary Colour: 9 instances 

Once you're finished, save the file and do the following:

1) Log into the StingRay's Internal Interface as an administrator.
2) Navigate to Network Configuration.
3) Click Edit.
4) To the right of Custom Weblogo or Stylesheet click Choose File.
5) Upload the CSS file you downloaded and click import.

You'll be shown a message of confirmation when the upload completes and the changes will be effective immediately. You may need to refresh the External Web Interface page a few times or clear your cache if you don't see the changes immediately.

If you make a mistake, don't worry - here is the original CSS file, just re-upload it to the StingRay to restore the default colours. Note: This will change ALL colours back to the blue default!! 

Download Default CSS

If you're also wanting to change the colour of the Logout button, check out  How do I change the colour of the Logout button?

If you require any assistance, please contact support.

Tags: css, css stingray, edit css, edit css 3.0, web interface

Related entries:

Last update: 2011-03-09 13:23
Author: Jason Bayton
Revision: 1.1

Digg it! Share on Facebook Print this record Send FAQ to a friend Show this as PDF file
Propose a translation for Propose a translation for
Please rate this FAQ:

Average rating: 0 (0 Votes)

completely useless 1 2 3 4 5 most valuable

You cannot comment on this entry