WSO2 API Cloud documentation is getting a whole new look at cloud.docs.wso2.com.
Try WSO2 Cloud for Free
Sign in

All docs This doc

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Let's customise the default theme. See the video tutorial here or a step-by-step walk-through of the video tutorial below.

 

Widget Connector
width900
urlhttps://www.youtube.com/watch?v=feSN4zi8VX0&feature=youtu.be
height600

 

Here's a step-by-step walk-though of the video tutorial:

Anchor
walkthrough
walkthrough

  1. Download the default theme (i.e., Fancyfrom here, unzip it and rename the folder according to the name of your new theme (e.g., ancient). Let's call this folder the <THEME_HOME>.
  2. To change the logo of the API Store, replace the logo.png  file inside the<THEME_HOME>/images folder with this logo (or anything else of your choice.)
  3. Open the <THEME_HOME>/css/styles-layout.css file using a text editor and add the following CSS code to the end of the file. Note the code comments to get an idea what each line of code does.

    Code Block
    languagecss
    /* Change the color of the header */
    .header{    
        background:#002EB8;
    }
    /* Change the font of the menus, headings, labels etc. to Verdana. You give several fonts here to ensure maximum compatibility, if in case one font fails in a given browser/OS. Fonts will be applied in the order you list them.  */
    body,textarea,pre,.navbar-search .search-query{
        font-family: Verdana, Arial, Helvetica, monospace, san-serif;
    }
    label, input, button, select, textarea{
        font-family: Verdana, Arial, Helvetica, monospace, san-serif;
    }
    h1,h2,h3,h4,h5{
        font-family: Verdana, Arial, Helvetica, monospace, san-serif;
    }
    /* To change the background color of the body */
    body{
        background:#D6DEF6;
    }
    /* To change the color of the buttons. Note that changing only the background color will not have a visual impact if you leave the gradients as they are  */
    .btn-primary {
      background-color: #800004;
      background-image: linear-gradient(to bottom, #cc0022, #cc0044);
    }
    /* To change the colour of the menus, navigation elements when they are clicked */
    .menu-content .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
        background:#F0F3FC;
    }
  4. Since you plan to upload this as a sub theme of the default main theme, delete all the files in your <THEME_HOME> folder except the ones that you just edited. The rest of the files will be automatically applied from the main theme.
  5. Go inside the <THEME_HOME> folder, select all the files/ folders inside it (Ctrl+A) and right click to archive all the selected files and folders together. Then rename the archive files to ancient.zip.
  6. Log in to WSO2 Admin Dashboard Web application (api.cloud.wso2.com/admin-dashboard). Your user name appears in the top, right-hand corner of the screen.
  7. The Admin Dashboard opens. Click the Upload Tenant Theme menu and upload your zip file.
  8. Open the API Store and note that your UI customisations are applied.

...