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 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 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 To change the color of the top navigation bar:

      Code Block
      languagecss
      .navbar {
          background: #555555 none repeat scroll 0 0;
      }
      
    • Add the following to 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 you can 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.

...