---
title: "Maintaining Colour Schemes in the Trade Portal"
canonical: "https://kb.myframeworks.com.au/space/TPUG/28803102/Maintaining%20Colour%20Schemes%20in%20the%20Trade%20Portal"
format: markdown
---
The following areas of look and feel can be modified on the customer’s Trade Portal client by modifying the css.css configuration file located on the Frameworks Linux server.

The deployed file is located: /var/lib/tomcat/webapps/tradeportal{instance}/config/css.css.

> ⚠️ <span style="color: #003366">The Backup master file is the one you should be changing:</span> /prostix/{demo/live/train}/bat/tradeportalcustom/config/css.css
> ⚠️ 
> ⚠️ You can also change the deployed css.css file if you want the changes to be applied immediately to your Live, however the Backup master file must also be modified at the same time, otherwise the next upgrade will overwrite the deployed css file with the contents of the backup.

> ❌ **Only modify the below settings with the css.css file if you are confident using vi (unix visual editor) on the Linux server.**
> ❌ 
> ❌ If you wish to further customise your Trade Portal, contact [Support](https://kb.myframeworks.com.au/page/support) for assistance.

## <span style="color: #003366">Top Button Bar – Modifying the Background Colour</span>

<span style="color: #333333">To modify the top bar banner colour of the Trade Portal, perform the following:</span>

![image-20250212-114506.png](media://047f84de-0493-4f34-90f6-a279eb39c1ae)

1. Open the file ‘css.css’ using vi
2. Locate the following text:  
/* TOP TOOLBAR */  
<span style="color: #333333">/* Top Toolbar Background Color */</span>  
<span style="color: #333333">#top_toolbar-body { background: #</span><span style="color: #333333">**0372D2**</span><span style="color: #333333">;}</span>  
<span style="color: #333333">/* Thin line at bottom of toolbar */</span>  
<span style="color: #333333">#top_toolbar { border-bottom: 4px solid #</span><span style="color: #333333">**F37021**</span><span style="color: #333333">;}</span>
3. <span style="color: #333333">Modify the ‘background-color:’  and ‘border-color:’ as displayed in </span><span style="color: #333333">**blue**</span><span style="color: #333333"> text above to the required html hex colour code (for example: White is #FFFFFF)</span>

## <span style="color: #003366">Top Button Bar - Modifying the Button Colours</span>

To modify the background and border colour of the Top Bar buttons, perform the following:

1. <span style="color: #333333">Open the file ‘css.css’ using vi</span>
2. <span style="color: #333333">Locate the following text:</span>

<span style="color: #333333">/* TOP BAR BUTTONS */</span>

<span style="color: #333333">#top_toolbar .x-btn,</span>  
<span style="color: #333333">#top_toolbar .x-btn-inner {</span>  
<span style="color: #333333"> color: #FFFFFF !important; /* Normal Text color */</span>  
<span style="color: #333333"> background-color: #</span><span style="color: #333333">**0372D2 **</span><span style="color: #333333">!important;</span>  
<span style="color: #333333"> text-transform: uppercase;</span>  
<span style="color: #333333"> border-color: #</span><span style="color: #333333">**0372D2**</span><span style="color: #333333">;</span>  
<span style="color: #333333"> height: 30px;</span>

3. <span style="color: #333333">Modify the 'background-colour' and 'border-colour' as displayed in </span><span style="color: #333333">**blue**</span><span style="color: #333333"> text above to the required html hex colour code (generally these will be the same as the top toolbar background colour)</span>

## <span style="color: #003366">Bottom Links Bar - Modifying the Background and Font Colour</span>

<span style="color: #333333">To modify the background and border colour of the Bottom Links Bar, perform the following:</span>

1. <span style="color: #333333">Open the file ‘css.css’ using vi</span>
2. <span style="color: #333333">Locate the following text:</span>

<span style="color: #333333">* BOTTOM LINKS BAR */</span>

<span style="color: #333333">/* Bottom Toolbar background Color */</span>  
<span style="color: #333333">#bottom_toolbar { background: #</span><span style="color: #333333">**F37021**</span><span style="color: #333333"> !important;}</span>

<span style="color: #333333">/* Bottom Toolbar Text Color */</span>  
<span style="color: #333333">#bottom_toolbar, </span>  
<span style="color: #333333">#bottom_toolbar a {</span>  
<span style="color: #333333"> color: #</span><span style="color: #333333">**fff **</span><span style="color: #333333">!important;</span>  
<span style="color: #333333"> text-transform: uppercase;</span>

3. <span style="color: #333333">Modify the 'bottom_toolbar' and Text 'colour' as displayed in </span><span style="color: #333333">**blue**</span><span style="color: #333333"> text above to the required html hex colour code.</span>

## <span style="color: #003366">Modifying the Breadcrumb Text Colour on the Trade Portal Home Page</span>

<span style="color: #333333">To modify the colour of the breadcrumbs on the Trade Portal, perform the following:</span>

![image-20250212-114703.png](media://1fdbc483-c339-4ac2-99a0-77487e7984d8)

To modify the colour of the breadcrumbs on the Trade Portal, perform the following:

1. <span style="color: #333333">Open the file ‘css.css’ using vi</span>
2. <span style="color: #333333">Locate the following text:</span>

<span style="color: #333333">/* SITE TEXT */</span>

<span style="color: #333333">.breadcrumb_text { color: #</span><span style="color: #333333">**F37021**</span><span style="color: #333333">;}</span>

3. <span style="color: #333333">Modify the 'breadcrumb_text' as displayed in </span><span style="color: #333333">**blue**</span><span style="color: #333333"> text above to the required html hex colour code.</span>

# Additional Information

> ✅ - Refer to the [Trade Portal FAQs](https://kb.myframeworks.com.au/space/TPF/720044037) to browse or search for a solution.
> ✅ - If you are still unable to find a solution, contact [Support](https://kb.myframeworks.com.au/page/support).