API Cloud
Try WSO2 Cloud for Free
Sign in

All docs This doc
Expand all   Collapse all

Versions Compared

Old Version 43

changes.mady.by.user Nisrin Sheriff

Saved on

compared with

New Version 44

changes.mady.by.user Nisrin Sheriff

Saved on

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.

...