1 / 15

Managing a VIVO installation; Theming and branding

Managing a VIVO installation; Theming and branding. 2012 VIVO Implementation Fest. Theming and branding VIVO . Designer Design graphics, customize CSS and FreeMarker (. ftl ) files Programmer I mplement and deploy the new theme and branding. Wilma look - head er. CTSC look - head er.

sue
Download Presentation

Managing a VIVO installation; Theming and branding

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Managing a VIVO installation; Theming and branding 2012 VIVO Implementation Fest

  2. Theming and branding VIVO Designer Design graphics, customize CSS and FreeMarker (.ftl) files Programmer Implement and deploy the new theme and branding

  3. Wilma look -header CTSC look -header

  4. Wilma look - footer CTSC look - footer

  5. VIVO leverages FreeMarker • FreeMarker is a "template engine” – it simply generates text; it is not a Web app framework • Template (.ftl files) + data-model = output • FreeMarker 2 has been around since 2002 • Supported by IntelliJ, Eclipse, Emacs, Vim and others natively or via plug-in

  6. FreeMarker Templates • FreeMarker adds interpolations, FTL tags and comments to HTML • Interpolations ${…} are replaced by values from the data-model • FTL tags reference <#...> FreeMarker directives or “<@...>” user directives • Comments are delimited by <#-- and --> • Common FTL directives #if, #list, #include – VIVO adds custom directives @widget, @allClassGroups, etc

  7. FreeMarker Data Model • Data-model can be visualized as a tree composed of scalars, hashes and sequences • Scalars store a single string, number, date/time or boolean value • Hashes store other variables and associate them with a unique lookup name • Sequences are containers that store other variables in an ordered sequence retrievable by a 0-based index • More info http://freemarker.sourceforge.net/

  8. Setting the theme – Part 1

  9. Setting the theme – Part 2

  10. The CTSC theme /vivo-rel-1.4.1/themes /ctsc /css /images /js /template (freemarker)

  11. The CTSC theme /vivo-rel-1.4.1/themes /ctsc /css /wilma.css /images /logo_nyp.png /logo_wcmc.png /VIVO-logo.png /js /template /page-home.ftl /footer.ftl

  12. The CTSC theme /vivo-rel-1.4.1/themes /ctsc /css /wilma.css /* BRANDING ------> */ h1.vivo-logo { position: absolute; width: 538px; height: 100px; top: 7px; left: 0; background: url(../images/VIVO-logo.png) 0 0 no-repeat; }

  13. The CTSC theme /vivo-rel-1.4.1/themes /ctsc /template /page-home.ftl <section id="intro" role="region"> <h2>Welcome to the VIVO for the CTSC</h2> <p>VIVO is a research-focused discovery tool that enables collaboration among scientists across all disciplines. VIVO contains information about researchers associated with the <a href="http://weill.cornell.edu/ctsc/" alt="Clinical and Translational Science Center" target="ctsc">Clinical and Translational Science Center</a>.</p>

  14. The CTSC theme /vivo-rel-1.4.1/themes /ctsc /template /footer.ftl <div id="footer_logos"> <ul> <li><a href="http://weill.cornell.edu" target="_blank"><imgsrc="${urls.base}/themes/ctsc/images/logo_wcmc.png" width="171" height="37" alt="WCMC"></a></li> <li><a href="http://www.nyp.org" target="_blank"><imgsrc="${urls.base}/themes/ctsc/images/logo_nyp.png" width="174" height="37" alt="NYP"></a></li> </ul>

  15. Conclusion VIVO codebase is well structured for ease of theming and branding.

More Related