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'}} + .... + + + + + + + +
Logo Text
+ + .... + {{/section}} + {{/header}} + ``` + + For example, see how it works in [OHIF Viewer](https://github.com/OHIF/Viewers/blob/master/OHIFViewer/client/components/ohifViewer/ohifViewer.html#L2) \ No newline at end of file diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index 731564c1e..81806a78c 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -27,6 +27,7 @@ - [Security](deployment/security.md) - I Want To... - [Add a Tool to the Viewer](I-want-to/add-a-tool-to-the-viewer.md) + - [Add Logo to the Viewer](I-want-to/add-logo-to-the-viewer.md) ---- - Example Applications