Page Comparison

A theme consists of UI elements such as logos, images, copyrights messages, landing page text, background colors etc. WSO2 API Store comes with a default theme.

...

Because a main theme already has most of the UIs and the syntax and logic of Jaggery code defined, in a typical scenario, you do not have to implement a theme from scratch. Rather, you just add in your edits as a sub theme of the existing main theme as given below:

Download the default main theme from here, unzip it and rename the folder according to the name of your new theme (e.g., ancient). Let's call this folder the <THEME_HOME>.
To change the logo of the API Store, replace the logo.png file inside the <THEME_HOME>/images folder with this logo (or anything else of your choice.)
To change the copyrights note in the footer, open the <THEME_HOME>/templates/page/base/template.jag file using a text editor, search for the word "Copyright" and change the text. For example, let's add our company name as "copyright", "© Copyright 2011 – 2014 My Company."

To change the header's background color, open the Open the <THEME_HOME>/css/styles-layout.css file using a text editor and add the following CSS rule code to the end of the file. It changes the header colorNote the code comments to get an idea what each line of code does.

Code Block

language	css

/* Change the color of the header */
.header{    
    background:#7e3330#002EB8;
}
/* 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:#D6DEF6;
}
/* 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);
}
/* To change the colour of the menus, navigation elements when they are clicked */
.menu-content .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    background:#F0F3FC;
}

As you plan to upload this as a sub theme of the default main theme, delete all the files in your <THEME_HOME> folder except the ones that you edited. The rest of the files will be automatically applied from the main theme.

...

Versions Compared

Old Version 33

New Version 34

Key