Try WSO2 Cloud for Free
Sign in
||
Skip to end of metadata
Go to start of metadata

theme consists of UI elements such as logos, images, landing page text, background colors etc. WSO2 API Store comes with a default theme called FancyThe easiest way to change the user interface of the API Store is by customising the default theme. 

In this tutorial, you change the default API Store theme by applying your customizations.

All themes have a folder structure similar to the following: 

Because the default theme already has most of the UIs and JSON logic defined, in a typical scenario, you do not implement a theme from scratch. You can customise the default theme by bundling up the changes (e.g., CSS code, images) as a .zip file and uploading it through the Admin Dashboard Web application. Once uploaded, the files in the .zip override the corresponding files in the default theme. The rest is inherited from the default theme. 

Tip: To override the default theme, you must only upload UI changes as CSS code, fonts in SVG, TTF, EOT, WOFF , WOFF2 and OTF formats, and images in JPG, PNG, and GIF formats

Jaggery files or Javascript files will not be allowed in the custom theme due to security reasons. Any of these files you include will be discarded and your theme might not work properly.


Let's get started. See the video tutorial here or a step-by-step walk-through of the video tutorial below.

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

  1. Download the default theme from fancy.zip, 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 <THEME_HOME>/libs/theme-wso2_1.0/images/logo-inverse.svg with the preferred logo.

  3. To change the favicon of the API Store, replace <THEME_HOME>/images/favicon-store.png with the preferred icon.
  4. To change the logo of the API Store's Self Signup page, replace <THEME_HOME>/images/logo-white.png with the preferred logo.
  5. Open the <THEME_HOME>/css/custom.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.

    /* Change the color of the header */
    header.header-default {
        background: #555555 none repeat scroll 0 0;
    }
    
    /* Change the color of the Top Navigation Bar */
    .navbar {
        background: #555555 none repeat scroll 0 0;
    }
    
    /* Change the color of the search box and its fonts */
    .search-wrap .appm-content-search {
        background: #ffffff;
        color: #000000;
    }
    
    .appm-content-search::-moz-placeholder {
        color: #000000;
    }
    
    /* Change the color of the Search box dropdown button */
    .search-wrap .btn.dropdown-toggle {
        background: #555555 none repeat scroll 0 0;
        border-color: #555555;
    }
    
    /* Change the color of the Search box search button */
    .search-wrap .btn.wrap-input-right {
        background: #555555;
    }
    
    /* 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: #D0D0D0;
    }
    
    /* 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);
    }
  6. 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.
  7. 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.

    Tip: Be sure to create the archive file by selecting all the files/folders (Ctrl+A) and right clicking on all the selected artifacts.

  8. Log in to WSO2 API Cloud by going to https://cloud.wso2.com, clicking the Sign In link and then selecting WSO2 API Cloud. 
  9. Click the Admin Dashboard menu under the Configure menu to open the Admin Dashboard.
     
  10. The Admin Dashboard opens. Click SETTINGS -> UPLOAD TENANT THEME and upload your zip file (e.g., ancient.zip).
  11. Open the API Store and the Signup page and note that your UI customizations are applied.
     

     

    Tip: It can take up to 15 minutes for a new theme to be applied to the API Store.

In this tutorial, you applied a few selected UI changes to the API Store.

  • No labels