diff --git a/docs/I-want-to/add-logo-to-the-viewer.md b/docs/I-want-to/add-logo-to-the-viewer.md new file mode 100644 index 000000000..e1e7c6c55 --- /dev/null +++ b/docs/I-want-to/add-logo-to-the-viewer.md @@ -0,0 +1,44 @@ +# Add 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. + +If you would like to add SVG logo to header please follow these steps. + +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}} + +``` + + +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**. + ``` + {{#header}} + {{#section 'brand'}} + .... + + + + + +