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.

...

Panel
bgColor#d3d3d3

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

Note

All themes have a folder structure similar to the following: 

Since the default theme already has most of the UIs and JSON logic defined, in a typical scenario, you would not implement the theme from scratch. You can customize the default theme by bundling together 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. 

...

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

Anchor
walkthrough
walkthrough

...

Before you begin, download the default theme from fancy.zip, unzip it and rename the folder to the name of your new theme (e.g., ancient). Let's call this folder <THEME_HOME> throughout this section.

...

Then, follow the steps below depending on

...

the changes you want to apply to the theme:

  • To change the logo of the API Store, replace <THEME_HOME>/libs/theme-wso2_1.0/images/logo-inverse.svg with a preferred logo.
  • To change the logo of the API Store's self sign up page, replace the <THEME_HOME>/images/logo-white.png with a preferred logo.
  • If you want to make any of the changes given below,  open the <THEME_HOME>/css/custom.css file using a text editor and add the appropriate CSS code blocks to the end of the file depending on the changes you want to apply: 
    • Add the following to change the color of the header:

      Code Block
      languagecss
      /* Change the color of the header */
      header.header-default {
          background: #555555 none repeat scroll 0 0;
      }
      

...

    • Add the following to change the color of the top navigation bar:

      Code Block
      languagecss
      .navbar {
          background: #555555 none repeat scroll 0 0;
      }
      

...

    • Add the following to change the color of the search box and its fonts:

      Code Block
      languagecss
      .search-wrap .appm-content-search {
          background: #ffffff;
          color: #000000;
      }
      
      
      
      .appm-content-search::-moz-placeholder {
          color: #000000;
      }

...

    • To change the color of the drop-down list of API categories to search: 

      Code Block
      languagecss
      .search-wrap .btn.dropdown-toggle {
          background: #555555 none repeat scroll 0 0;
          border-color: #555555;
      }
      

...

    • To change the color of the search button:

      Code Block
      languagecss
      .search-wrap .btn.wrap-input-right {
          background: #555555;
      }
      

...

    • To change the font of the menus, headings, and labels to Verdana:

      Tip

      You can specify several fonts to ensure maximum compatibility in case one font fails in a given browser/OS. If the first font you have listed fails, the next font that you've listed will be applied.

      Code Block
      languagecss
      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:

      Code Block
      languagecss
      body{
          background: #D0D0D0;
      }
      

...

    • To

...

    • change

...

    • the

...

    • color

...

    • of the buttons:

      Tip

      When changing the color of buttons, changing only the background color will not have a visual impact if you leave the gradients as they are.

      Code Block
      languagecss
      .btn-primary {
        background-color: #800004;
        background-image: linear-gradient(to bottom, #cc0022, #cc0044);
      }

    Once you are done with all the

...

  • required customizations, you are ready to upload your theme changes as a sub-theme of the default main theme. 

    Info
    titleNote

    Before you upload your theme customizations, you need to delete all the files except the ones that you just edited in your <THEME_HOME> folder. The rest of the files will be automatically applied from the main theme.

Follow the steps below to upload your theme customizations:

  1. Go to the <THEME_HOME> folder, select all the files/folders inside it, then (Ctrl+A) and right click to archive all the selected files and folders together.

    Tip

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

  2. Rename the archive file to ancient.zip.
  3. Sign in to WSO2 API Cloud. This takes you to the API Publisher Web application.
  4. Click Admin Dashboard under the Configure menu. This opens the Admin Dashboard.
     
  5. Click SETTINGS and then click UPLOAD TENANT THEME
  6. Upload your zip file (e.g., ancient.zip).
  7. Open the API Store to take a look at the customizations that are applied.
    Image Removed 
    Similarly, open the sign up page to take a look at the customizations applied there.
    Image Removedthe customizations that are applied.

    Tip

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

    Image Added
    Similarly, open the sign up page to take a look at the customizations applied there.
    Image Added

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

...