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.

...

  • 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 customizations listed below,  open the <THEME_HOME>/css/custom.css file using a text editor and add the appropriate given CSS code blocks block to the end of the file depending on the changes customization you want to apply: 

    • To hide the API Store label on the header:

      Code Block
      languagecss
      .display-block-xs {
           visibility: hidden;
      }

      Applying the code block results in the following:


    • To change the color of the header:

      Code Block
      languagecss
      header.header-default {
          background: #893936 none repeat scroll 0 0;
      }
      

      Applying the code block results in the following:


    • To change the color of the top navigation bar:

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

      Applying the code block results in the following:


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

      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:


    • To change the color of the search button:

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

      Applying the code block results in the following:


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

      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:


    • 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:

      Code Block
      languagecss
      body{
          background: #b7e0ed;
      }
      

      Applying the code block results in the following:


    • 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:

      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:


    • To hide the SDKs tab of APIs:

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

      Applying the code block results in the following:

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

      Code Block
      languagecss
      .truncate-children{
      display:none;
      }
      
      div.body-wrapper div:nth-child(4){
      display: none;

      Applying the code block results in the following:

  • 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:

    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.

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

...