Quick Customisation
Tyk Enterprise Developer Portal
If you are interested in getting access contact us at [email protected]
Introduction
In this section we will explain how to apply your branding (styling - CSS) on the portal elements with your own colours and logo within minutes.
Prerequisites
- A Tyk Self-Managed installation
- A login for the portal admin app
- Access to your Tyk portal file system
Step by step instructions
Part 1 - Changing the portal logo
- Access the file directory for the Developer portal
- The default logo is located in
/themes/default/assets/images/
and is calleddev-portal-logo.svg
. - Replace the default image with your own, keeping the same file name and in
.svg
format, ensuring thatxmlns="http://www.w3.org/2000/svg"
is included within your<svg>
tag.
Note
If you want to use different naming, path reference or extension, the code is <img src="/assets/images/dev-portal-logo.svg">
and is found on line 6 from the /themes/default/partials/footer.tmpl
template.
Part 2 - Changing brand colours
Let’s now explain how to manage borders and change the colors of buttons, texts and backgrounds. The file we’ll be looking at is /themes/default/assets/stylesheets/main.css
which contains some CSS variables that are used throughout the app. Let’s take a closer look.
You can apply some changes in the portal based on your preferences. For example, you can change the navigation background colour, the text colour and the different button theme colours. Furthermore, you can change table border colour and radius.
If you want to change the navigation background colour you need to edit the variable called --tdp-nav-bg-color
Similarly other variables as you can see where/how each one is used:
Note
tdp
stands for Tyk Developer Portal
Background colours
--tdp-nav-bg-color
navigation background colour--tdp-body-bg-color
App background colour
Text colours
--tdp-text-color
default text colour--tdp-link-color
links (anchor tags)--tdp-nav-link-color
navigation links
Borders
--tdp-card-border-radius
Card component--tdp-border-color-on-error
input color if there’s an error--tdp-table-border-color
table--tdp-border-radius
radius--tdp-primary-border form
elements (such as<input>
and<select>
) if active--tdp-form-element-border
form elements (such as<input>
and<select>
)
Buttons
Buttons have four different concepts and each one of them has two or more variables:
Primary
--tdp-primary-btn-color
background colour--tdp-primary-btn-border
border colour
Secondary
--tdp-secondary-btn-color
background colour--tdp-secondary-btn-border
border colour
Danger
--tdp-danger-btn-color
background colour--tdp-danger-btn-border
border colour--tdp-danger-outline-btn-border
border colour of the outline variation
Warning
--tdp-warning-btn-color
background colour--tdp-warning-btn-border
border colour--tdp-warning-outline-btn-border
border colour of the outline variation