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: 

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

    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.

...