note for servicely versions prior to 1 9, if you have any questions, please reach out to support as of 1 9, we have simplified this process logo and colours prior to configuring any of the below, please set up a custom portal style first if you have not already done so note that naming it after your company name for the first custom portal style is recommended example below if you want to name the style as “company abcd” once this has been completed, return to the portal definition and populate the base style as the portal style you just created and can update the logo and background/hero image of your instance in the portal definition these link to resource records that you can upload to the resource table within servicely (noting that you will want to make logo publicly available) this can be found in the menu by navigation to administration > configuration > resources below shows a default logo and hero image if you do not populate your portal definition’s logo resource and background image resource for your hero image, we suggest that its left part is a single uniform colour, so that it can contrast the greeting text’s colour on the left once done, updating the colours within your environment is largely based on populating fields on the colors tab of the new portal style you created earlier when you are on this tab, you will see a few different colour fields you can update to help with this, we typically ask the following questions in terms of what we currently do for portal styling for new customers noting that the language used in these dot points, matches the fields on this tab and record as you will see, we now offer more options (such as changing the colours of table column headers and the colour text highlights as) please note, there are other colour fields we do not initially set up for customers that are listed in that tab although you are welcome to experiment with it, we would typically only suggest the ones below at the moment these numbers line up to the image below what logo do you wish to use in the top right of your instance? (done via the portal definition) what do you want the base menu background colour to be? what did you want the menu section background colour to be? what did you want the menu subsection background colour to be? what did you want the menu text colour to be? what did you want the top bar text colour to be? what did you want the top bar background colour to be? what did you want the primary colour to be? what did you want the primary "bright" colour to be? what did you want the "secondary" colour to be? what colour would you like the introductory text colour to be (note that this is handled via the css styles described later with the portal search welcome, portal search welcome question, suggested searches label classes see below) as mentioned in the 11th point though, some may require you to update the css tab of the portal style you created specifically the styles that are commonly used, are as follows it should be noted that outside of this, we would strongly suggest not updating the css css knowledge is recommended all colours are in hexadecimals for the example below, you’ll need to at least review and if necessary, update the color and the text shadow variables in lines 3 and 4 then, decide if you want any of the sb portal before styling / helps with the introductory text that is typically ontop of the hero image / portal search welcome, portal search welcome question, suggested searches label{ color #ffffff; text shadow 2px 2px 2px #aaaaaa; } / hides the suggested search options for sofi / suggested searches { color white !important; display none; } / if you want to use the sb portal before styling below, please only use one of them / / determines where the hero/background image is positioned on the homepage, you can try the different options to the two css attributes of background size and background position as you need to / sb portal before { background size cover !important; background position right top !important; } / alternative to the above, if you don't want the background size css attribute for sb portal before , your hero image may not cover the entire width of the hero section however, you can apply a css background to the left of the hero image, with the same colour as the hero image's left part replace our example background color below with the colour you want / sb portal before { background color #edf2f8; } instance specific header a servicely instance can be provided with a label that can help differentiate a customer instance to another, e g labelling a development instance so it is not mistaken with the production one to do this, set up an application property with following fields and values note that you may leave the rest of the fields with their default values field name field value application properties key instance override instance header text property type string application properties value label that you want, e g “staging” example resulting screenshot after the application property is set up instance specific header background color you can set your non production instances to have different header background color that what your production uses on top of the instance header one above, this further helps in identifying the different servicely instances you are working on field name field value application properties key instance override header background color property type string application properties value color that you want, e g #ff0000