diff --git a/docs/I-want-to/add-logo-to-the-viewer.md b/docs/I-want-to/add-a-logo-to-the-viewer.md similarity index 73% rename from docs/I-want-to/add-logo-to-the-viewer.md rename to docs/I-want-to/add-a-logo-to-the-viewer.md index e1e7c6c55..ac76df0c3 100644 --- a/docs/I-want-to/add-logo-to-the-viewer.md +++ b/docs/I-want-to/add-a-logo-to-the-viewer.md @@ -1,44 +1,40 @@ -# Add Logo to the Viewer +# Add a Logo to the Viewer - -The OHIF Framework provides **[ohif-header](https://github.com/OHIF/Viewers/tree/master/Packages/ohif-header)** package to add a header into application layout. **ohif-header** package is designed as a [custom block helper](http://blazejs.org/api/spacebars.html#Custom-Block-Helpers) named **header** to define your own header context. +The OHIF Framework provides [**ohif-header**](https://github.com/OHIF/Viewers/tree/master/Packages/ohif-header) package to add a header into application layout. **ohif-header** package is designed as a [custom block helper](http://blazejs.org/api/spacebars.html#Custom-Block-Helpers) named **header** to define your own header context. If you would like to add SVG logo to header please follow these steps. - -1. Add your SVG logo into public folder. + +1. Add your SVG logo into public folder. 2. Add **header** content block which will be located on the top of the application layout into your application's main template. You can also pass some parameters to **header** content block to customize the header. * headerClasses: the list of classes which will be applied to header element * brandHref: the url of the logo to link - - ``` - {{#header headerClasses="header-big bg-blue" brandHref="your logo link"}} - - .... - - {{/header}} +{% raw %} +``` html +{{#header headerClasses="header-big bg-blue" brandHref="your logo link"}} +... +{{/header}} ``` - +{% endraw %} 3. Create a section called as **brand** in **header** content block and add your logo content which is displayed on the left side of the header as default into section **brand**. - ``` + + {% raw %} + ``` html {{#header}} - {{#section 'brand'}} - .... - + {{#section "brand"}} - +