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.

A theme  consists consists of UI elements such as logos, images, landing page text, background colors etc. WSO2 , color scheme, layout, style elements and so on, which contribute towards the overall look and feel of a website. Therefore, a theme directly reflects your brand identity and represent who you are to your partners and customers. WSO2 API Store comes with a default theme called Fancy. The easiest way to change the user interface of the API Store is by customising the default themenamed Fancy, which defines the basic look and feel of the API Store. Since the capability to customize an API portal with your own corporate logos and styles is an important requirement when it comes to APIs, WSO2 API Cloud allows you to customize the look and feel of the API Store depending on your preference

Panel
bgColor#d3d3d3

In this tutorial, you change learn how to apply the most common customizations to the default API Store theme by applying your customizations.

Note

All themes have a folder structure similar to the following: 

Image RemovedImage Added

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

Tipwarning
Tip:
  • To override the default theme, ensure that you
must only
  • upload UI changes, fonts, and images as follows:
    • UI changes as CSS code
, fonts in SVG,
    • .
    • Fonts in TTF, EOT, WOFF, WOFF2
and
    • or OTF formats
, and images
    • .
    • Images in JPG, PNG, SVG,
and
    • or GIF formats.
 
  • Jaggery files or Javascript files
will
  • are not
be
  • allowed in the custom theme due to security reasons.
Any of these files
  • If you include any Jaggery files or Javascript files, such files will be discarded and your theme
might
  • will not work properly.

Let's get started. See the video tutorial here or a

You can either take a look at the following video tutorial or go through the step-by-step walk-through of the video tutorial instructions given  below.

Widget Connector
width900
urlhttps://www.youtube.com/watch?v=6CNYs5aAk44
height600

Here's a step-by-step walk-though of the video tutorialthe steps you can follow depending on the customizations you want to apply:

Anchor
walkthrough
walkthrough

Note
titleBefore you begin,

Download the default

...

theme fancy.zip, unzip it and then rename the folder

...

to the name of your new theme (e.g., ancient). Let's call this

...

folder <THEME_HOME> throughout this section.

  • 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 customizations listed below,  open the <THEME_HOME>/css/custom.css  file using a text editor and add the

...

  • given CSS code block to the end of the file

...

  • depending on the customization you want to apply: 

    • To hide the API Store label on the header:
      Image Added

      Code Block
      languagecss

...

    • .display-block-xs {
           visibility: hidden;
      }

      Applying the code block results in the following:
      Image Added


    • To change the color of the header:
      Image Added

      Code Block
      languagecss
      header.header-default {
          background: 

...

    • #893936 none repeat scroll 0 0;
      }
      

...

    • Applying the code block results in the following:
      Image Added


    • To change the color of the top navigation bar:
      Image Added

      Code Block
      languagecss
      .navbar {
          background: 

...

    • #1ad8d1 none repeat scroll 0 0;
      }
      

...

    • Applying the code block results in the following:
      Image Added


    • To change the color of the search box and its fonts:
      Image Added

      Code Block
      languagecss
      .search-wrap .appm-content-search {
          background: 

...

    • #49d162;
          color: #000000;
      }
      
      .appm-content-search::-moz-placeholder {
          color: 

...

    • #49d162;
      }

      Applying the code block results in the following:
      Image Added


    • To change the color of the search button:
      Image Added

      Code Block
      languagecss
      .search-wrap 

...

    • .btn.wrap-input-right {
          background: #555555;
      }
      

      Applying the code block results in the following:
      Image Added


    • To change the color of the drop-down list of API categories you can search: 
      Image Added

      Code Block
      languagecss
      .search-wrap .btn.dropdown-toggle {
          background: 

...

    • #eb3f3f none repeat scroll 0 0;
          border-color: 

...

    • #444444;
      }
      

...

    • Applying the code block results in the following:
      Image Added


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

      Tip

      You can specify several fonts in order of preference 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 in the list 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:
      Image Added

      Code Block
      languagecss
      body{
          background: 

...

    • #b7e0ed;
      }
      

...

    • Applying the code block results in the following:
      Image Added


    • 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 gradient as it is.

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

    • To hide the social media and collaboration icons from the Overview section of an API:
      Image Added

      Code Block
      languagecss
      .share-container{
      display: none;
        }
      
      #tab0  ul {
      display: none;
      }
      
      #tab0 .col-md-12 .col-lg-9 > .add-margin-top-5x {
      display: none;
      }
      
      #comment-list{
      display:none;
      }
      Note
      titleNote

      To completely hide the comments section. You need to open the <THEME_HOME>/js/script.js file using a text editor and add the following script code:

      Code Block
      $('#comment-list').parent().hide()

      Applying the code block and script.js changes will result in the following:
      Image Added


    • To hide the SDKs tab of APIs:
      Image Added

      Code Block
      languagecss
      .nav-tabs li:nth-child(4){
      display: none;
      }

      Applying the code block results in the following:
      Image Added


    • To hide the More APIs section displayed at the bottom when viewing a particular API via the Store:
      Image Added

      Code Block
      languagecss
      .truncate-children{
      display:none;
      }

...

    • 
      
      div.body-wrapper div:nth-child(4){
      display: none;

      Applying the code block results in the following:
      Image Added

  • If you want to edit the name of the API author, which is displayed as <your_email_address>@<your_organization_key> by default, follow the steps below:
    Image Added
    1. On the API Publisher, browse to the API for which you want change the author, and then click EDIT API.
    2. Navigate to the Manage tab.
    3. Expand the Business Information section and specify appropriate values for the fields. 

      Tip

      The value that you specify in the Business Owner field will be displayed as the API author.

      Image Added

    4. Click Save & Publish. This updates the author of the API. You can go to the API Store to view the updated author.
      Image Added

  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  to archive all the selected files and folders together. Then rename the archive files to ancient.zip.

    Tip

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

  2. Log in to WSO2 API Cloud by going to https://cloud.wso2.com, clicking the Sign In link and then selecting WSO2 API Cloud. 
  3. Click the Admin Dashboard menu under the Configure menu to open

    to create the archive file.

  4. Rename the archive file to  ancient.zip.
  5. Sign in to WSO2 API Cloud. This takes you to the API Publisher Web application.
  6. Click Admin Dashboard under the Configure menu. This opens the Admin Dashboard.
     
  7. The Admin Dashboard opens. Click SETTINGS -> UPLOAD and then click UPLOAD TENANT THEME and upload
  8. Upload your zip file (e.g., ancient.zip).
  9. Open the API Store and the Signup page and note that your UI customizations to take a look at the customizations that are applied.Image Removed 
    Image Removed 

    Tip

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

...

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

Now you have succesfully applied the most common customizations to the API Store.