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.

...

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

...

  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 folder <THEME_HOME> throughout this section.
  2. Follow the steps below depending on the customizations you want to apply to the theme:
    • To change the logo of the API Store,
    replace
    • replace <THEME_HOME>/libs/theme-wso2_1.0/images/logo-inverse.svg with
    the
    • a preferred logo
    .To change the favicon of the API Store, replace <THEME_HOME>/images/favicon-store
    • .
    png with a preferred icon.
    • To change the logo of the API Store's self sign up page, replace
    the
    • the <THEME_HOME>/images/logo-white.png with a preferred logo.
    Open
    • 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

    following
    • appropriate CSS code blocks to the end of the file

    . Take a look at the code comments to understand what each line of code does.
    • depending on the changes you want to apply: 

      Code Block
      languagecss
      /* 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);
      }
    Since you plan to upload this
    • 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

    in your <THEME_HOME> folder
    • except the ones that you just edited

    . The
    • in your <THEME_HOME> folder. The rest of the files will be automatically applied from the main theme.

  3. Go inside 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 .

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

    to create the archive file.

  6. Rename the archive file to ancient.zip.
  7. Sign in to WSO2 API Cloud. This takes you to the API Publisher Web application.
  8. Click Admin Dashboard under the Configure menu. This opens the Admin Dashboard.
     
  9. The Admin Dashboard opens. Click SETTINGS -> UPLOAD and then click UPLOAD TENANT THEME and upload
  10. Upload your zip file (e.g., ancient.zip).
  11. 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 Similarly, open the sign up page to take a look at the customizations applied there.
    Image Added

    Tip

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

...