| <!DOCTYPE html> |
| |
| |
| |
| |
| <html class="no-js"> |
| |
| <head lang="en-us"> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1"> |
| <meta http-equiv="X-UA-Compatible" content="IE=10" /> |
| <title>Custom Theme - Eclipse hawkBit</title> |
| <meta name="generator" content="Hugo 0.56.0" /> |
| |
| |
| <meta name="description" content="IoT. Update. Device."> |
| |
| <link rel="canonical" href="https://www.eclipse.org/hawkbit/guides/customtheme/"> |
| |
| <meta name="author" content="The Eclipse hawkBit Project"> |
| |
| |
| <meta property="og:url" content="https://www.eclipse.org/hawkbit/guides/customtheme/"> |
| <meta property="og:title" content="Eclipse hawkBit"> |
| <meta property="og:image" content="https://www.eclipse.org/hawkbit/images/hawkbit_icon.png"> |
| <meta name="apple-mobile-web-app-title" content="Eclipse hawkBit"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> |
| |
| |
| |
| <link rel="shortcut icon" type="image/x-icon" href="https://www.eclipse.org/hawkbit/images/favicon.ico"> |
| <link rel="icon" type="image/x-icon" href="https://www.eclipse.org/hawkbit/images/favicon.ico"> |
| |
| <style> |
| @font-face { |
| font-family: 'Icon'; |
| src: url('https://www.eclipse.org/hawkbit/fonts/icon.eot'); |
| src: url('https://www.eclipse.org/hawkbit/fonts/icon.eot') |
| format('embedded-opentype'), |
| url('https://www.eclipse.org/hawkbit/fonts/icon.woff') |
| format('woff'), |
| url('https://www.eclipse.org/hawkbit/fonts/icon.ttf') |
| format('truetype'), |
| url('https://www.eclipse.org/hawkbit/fonts/icon.svg') |
| format('svg'); |
| font-weight: normal; |
| font-style: normal; |
| } |
| </style> |
| |
| <link rel="stylesheet" href="https://www.eclipse.org/hawkbit/stylesheets/application.css"> |
| <link rel="stylesheet" href="https://www.eclipse.org/hawkbit/stylesheets/temporary.css"> |
| <link rel="stylesheet" href="https://www.eclipse.org/hawkbit/stylesheets/palettes.css"> |
| <link rel="stylesheet" href="https://www.eclipse.org/hawkbit/stylesheets/highlight/highlight.css"> |
| |
| |
| |
| |
| <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ubuntu:400,700|Ubuntu+Mono"> |
| <style> |
| body, input { |
| font-family: 'Ubuntu', Helvetica, Arial, sans-serif; |
| } |
| pre, code { |
| font-family: 'Ubuntu Mono', 'Courier New', 'Courier', monospace; |
| } |
| </style> |
| |
| |
| <link rel="stylesheet" href="https://www.eclipse.org/hawkbit/css/hawkbit.css"> |
| |
| <link rel="stylesheet" href="//www.eclipse.org/eclipse.org-common/themes/solstice/public/stylesheets/vendor/cookieconsent/cookieconsent.min.css"> |
| |
| <script src="https://www.eclipse.org/hawkbit/javascripts/modernizr.js"></script> |
| <script src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/javascript/vendor/cookieconsent/default.min.js"></script> |
| |
| |
| |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> |
| </head> |
| <body class="palette-primary-deep-purple palette-accent-light-green"> |
| |
| |
| |
| |
| |
| |
| |
| <div class="backdrop"> |
| <div class="backdrop-paper"></div> |
| </div> |
| |
| <input class="toggle" type="checkbox" id="toggle-drawer"> |
| <input class="toggle" type="checkbox" id="toggle-search"> |
| <label class="toggle-button overlay" for="toggle-drawer"></label> |
| |
| <header class="header"> |
| <nav aria-label="Header"> |
| <div class="bar default"> |
| <div class="button button-menu" role="button" aria-label="Menu"> |
| <label class="toggle-button icon icon-menu" for="toggle-drawer"> |
| <span></span> |
| </label> |
| </div> |
| <div class="stretch"> |
| <div class="title"> |
| Custom Theme |
| </div> |
| </div> |
| |
| |
| |
| |
| <div class="button button-github" role="button" aria-label="GitHub"> |
| <a href="https://github.com/eclipse/hawkbit" title="@eclipse/hawkbit on GitHub" target="_blank" class="toggle-button icon icon-github"></a> |
| </div> |
| |
| |
| |
| <div class="button button-github" role="button" aria-label="Gitter"> |
| <a href="https://gitter.im/eclipse/hawkbit" title="@eclipse/hawkbit on Gitter" target="_blank" class="toggle-button icon fab fa-gitter"></a> |
| </div> |
| |
| |
| |
| <div class="button button-github" role="button" aria-label="Docker"> |
| <a href="https://hub.docker.com/u/hawkbit" title="hawkbit on Docker Hub" target="_blank" class="toggle-button icon fab fa-docker"></a> |
| </div> |
| |
| |
| |
| </div> |
| <div class="bar search"> |
| <div class="button button-close" role="button" aria-label="Close"> |
| <label class="toggle-button icon icon-back" for="toggle-search"></label> |
| </div> |
| <div class="stretch"> |
| <div class="field"> |
| <input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck> |
| </div> |
| </div> |
| <div class="button button-reset" role="button" aria-label="Search"> |
| <button class="toggle-button icon icon-close" id="reset-search"></button> |
| </div> |
| </div> |
| </nav> |
| </header> |
| |
| <main class="main"> |
| <div class="drawer"> |
| <nav aria-label="Navigation"> |
| <a href="https://www.eclipse.org/hawkbit/" class="project"> |
| <div class="banner"> |
| |
| <div class="logo"> |
| <img src="https://www.eclipse.org/hawkbit/images/hawkbit_icon.png"> |
| </div> |
| |
| <div class="name"> |
| <strong>Eclipse hawkBit™ </strong> |
| |
| <br> |
| eclipse/hawkbit |
| |
| </div> |
| </div> |
| </a> |
| |
| <div class="scrollable"> |
| <div class="wrapper"> |
| |
| <ul class="repo"> |
| <li class="repo-download"> |
| <a href="https://hawkbit.eclipse.org" target="_blank" title="hawkBit Sandbox" data-action="sandbox"> |
| <i class="fas fa-desktop"></i> Sandbox |
| </a> |
| </li> |
| <li class="repo-stars"> |
| <a href="https://github.com/eclipse/hawkbit/stargazers" target="_blank" title="Stargazers" data-action="star"> |
| <i class="icon icon-star"></i> Stars |
| <span class="count">–</span> |
| </a> |
| </li> |
| </ul> |
| <hr> |
| |
| |
| <div class="toc"> |
| |
| <ul> |
| |
| |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="What is hawkBit" href="/hawkbit/whatishawkbit/"> |
| |
| What is hawkBit |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="Getting started" href="/hawkbit/gettingstarted/"> |
| |
| Getting started |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="Guides" href="/hawkbit/guides/"> |
| |
| Guides |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="Features" href="/hawkbit/features/"> |
| |
| Features |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="Concepts" href="/hawkbit/concepts/"> |
| |
| Concepts |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="Architecture" href="/hawkbit/architecture/"> |
| |
| Architecture |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="Management UI" href="/hawkbit/ui/"> |
| |
| Management UI |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="APIs" href="/hawkbit/apis/"> |
| |
| APIs |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="Community" href="/hawkbit/community/"> |
| |
| Community |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| |
| <li> |
| |
| |
| |
| |
| |
| <a title="Release notes" href="/hawkbit/release-notes/"> |
| |
| Release notes |
| </a> |
| |
| |
| |
| </li> |
| |
| |
| </ul> |
| |
| |
| |
| <hr> |
| |
| <ul> |
| <li> |
| <a href="https://gitter.im/eclipse/hawkbit?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge" title="Chat on Gitter" target="_blank"> |
| <img src="https://badges.gitter.im/eclipse/hawkbit.svg" /> |
| </a> |
| </li> |
| <li> |
| <a href="https://circleci.com/gh/eclipse/hawkbit" title="Circle CI Status" target="_blank"> |
| <img src="https://circleci.com/gh/eclipse/hawkbit.svg?style=shield" /> |
| </a> |
| </li> |
| <li> |
| <a href="https://sonar.ops.bosch-iot-rollouts.com" title="SonarQube Status" target="_blank"> |
| <img src="https://sonar.ops.bosch-iot-rollouts.com/api/badges/gate?key=org.eclipse.hawkbit:hawkbit-parent" /> |
| </a> |
| </li> |
| <li> |
| <a href="https://maven-badges.herokuapp.com/maven-central/org.eclipse.hawkbit/hawkbit-parent" title="Maven Central Status" target="_blank"> |
| <img src="https://maven-badges.herokuapp.com/maven-central/org.eclipse.hawkbit/hawkbit-parent/badge.svg" /> |
| </a> |
| </li> |
| </ul> |
| |
| </div> |
| </div> |
| </div> |
| </nav> |
| |
| </div> |
| |
| <article class="article"> |
| <div class="wrapper"> |
| <h1>Custom Theme </h1> |
| |
| <p>This guide provides details about using and creating themes that control the visual look of Eclipse hawkBit Management UI. Theme customization is done using Sass, which is an extension of CSS (Cascading Style Sheets).</p> |
| |
| <p>The mechanism described below is the rather simple case by customizing the theme by means of configuring a set of variables as defined by the hawkBit default theme. A full customization be means of copying the hawkBit theme and customize it completely is not described here but of course possible.</p> |
| |
| <h2 id="example-app">Example App</h2> |
| |
| <p>An example application with customized theme can be found <a href="https://github.com/eclipse/hawkbit-examples/tree/master/hawkbit-custom-theme-example">here</a>.</p> |
| |
| <h2 id="overview">Overview</h2> |
| |
| <p>Vaadin separates the appearance of the user interface from its logic using themes. Themes can include Sass or CSS style sheets, custom HTML layouts, and any necessary graphics.</p> |
| |
| <p>Theme resources can also be accessed from application code as ThemeResource objects. Custom themes are placed under the src/main/resources/VAADIN/themes/ folder of the application.</p> |
| |
| <p>This location is fixed – the VAADIN folder contains static resources that are served by the Vaadin servlet. The servlet augments the files stored in the folder by resources found from corresponding VAADIN folders contained in JARs in the class path.The base theme and all the corresponding custom themes are placed under the above mentioned folder.</p> |
| |
| <p>If a new custom theme has to be created, it should always be placed under the src/main/resources/VAADIN/themes/ folder.</p> |
| |
| <p>Every custom theme should always refer the base theme and customization can be done by the use of variables mentioned in the XXXXvariable.scss. For details of the creation of the custom theme please refer the next section.</p> |
| |
| <h2 id="procedure-to-create-a-theme">Procedure to create a theme</h2> |
| |
| <ul> |
| <li>Create a new folder <strong>“XXXtheme”</strong> (significant to the new theme) under src/main/resources/VAADIN/themes/ folder.</li> |
| <li>Create a folder named as <strong>“customstyles”</strong>.</li> |
| <li>Create a <strong>XXXvariables.scss</strong> file under <strong>customstyles</strong> folder, putting all the variables inside the same file. For more details about the variables we recommend to take a look at the <a href="https://github.com/eclipse/hawkbit/blob/master/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/hawkbitvariables.scss">hawkBit defaults</a>.</li> |
| <li>Create <strong>styles.scss</strong> file under the <strong>“XXXtheme”</strong> folder.</li> |
| <li>Any images should be placed under the sub folder <strong>“images”</strong> folder.</li> |
| |
| <li><p>Within the <strong><em>styles.scss</em></strong> file, import <strong>XXXvariables.scss</strong> and the base theme (hawkBit theme as mentioned in previous chapter <strong>Overview</strong> . Please find below the syntax:</p> |
| |
| <pre><code class="language-css">@import "../hawkbit/customstyles/hawkbitvariables"; |
| @import "customstyles/examplevariables"; |
| @import "../hawkbit/hawkbittheme"; |
| @import "addons"; |
| |
| .exampletheme { |
| @include addons; |
| @include hawkbittheme; |
| } |
| </code></pre></li> |
| |
| <li><p>Finally the structure should be as in the <a href="https://github.com/eclipse/hawkbit-examples/tree/master/hawkbit-custom-theme-example/src/main/resources/VAADIN">example app</a>.</p></li> |
| </ul> |
| |
| <h2 id="procedure-to-add-a-custom-footer">Procedure to add a custom footer</h2> |
| |
| <ul> |
| <li>Any footer can be added by creating “footer.html” in <strong>src/main/resources –> VAADIN – themes –> {XXXtheme} –> layouts</strong> folder. An example can be found <a href="https://github.com/eclipse/hawkbit/blob/master/hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/layouts/footer.html">here</a>.</li> |
| </ul> |
| |
| <aside class="copyright" role="note"> |
| <div class="logo"> |
| <a href="https://www.eclipse.org" target="_blank"> |
| <img src="/hawkbit/images/eclipse_foundation_logo.png" /> |
| </a> |
| </div> |
| <p class="notice"> |
| |
| © 2019 The Eclipse hawkBit Project – |
| |
| Documentation built with |
| <a href="https://www.gohugo.io" target="_blank">Hugo</a> |
| using the |
| <a href="http://github.com/digitalcraftsman/hugo-material-docs" target="_blank">Material</a> theme. |
| </p> |
| <p class="quickLinks"> |
| <a href="http://www.eclipse.org/legal/privacy.php" target="_blank"> |
| > Privacy Policy |
| </a> |
| <a href="http://www.eclipse.org/legal/termsofuse.php" target="_blank"> |
| > Terms of Use |
| </a> |
| <a href="http://www.eclipse.org/legal/copyright.php" target="_blank"> |
| > Copyright Agent |
| </a> |
| <a href="http://www.eclipse.org/legal" target="_blank"> |
| > Legal |
| </a> |
| <a href="https://www.eclipse.org/org/documents/epl-v10.php" target="_blank"> |
| > License |
| </a> |
| </p> |
| </aside> |
| |
| |
| <footer class="footer"> |
| |
| |
| <nav class="pagination" aria-label="Footer"> |
| <div class="previous"> |
| |
| <a href="https://www.eclipse.org/hawkbit/features/" title="Features"> |
| <span class="direction"> |
| Previous |
| </span> |
| <div class="page"> |
| <div class="button button-previous" role="button" aria-label="Previous"> |
| <i class="icon icon-back"></i> |
| </div> |
| <div class="stretch"> |
| <div class="title"> |
| Features |
| </div> |
| </div> |
| </div> |
| </a> |
| |
| </div> |
| |
| <div class="next"> |
| |
| <a href="https://www.eclipse.org/hawkbit/guides/clustering/" title="Clustering"> |
| <span class="direction"> |
| Next |
| </span> |
| <div class="page"> |
| <div class="stretch"> |
| <div class="title"> |
| Clustering |
| </div> |
| </div> |
| <div class="button button-next" role="button" aria-label="Next"> |
| <i class="icon icon-forward"></i> |
| </div> |
| </div> |
| </a> |
| |
| </div> |
| </nav> |
| |
| |
| |
| |
| |
| </footer> |
| </div> |
| </article> |
| |
| <div class="results" role="status" aria-live="polite"> |
| <div class="scrollable"> |
| <div class="wrapper"> |
| <div class="meta"></div> |
| <div class="list"></div> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| <script> |
| |
| var base_url = 'https:\/\/www.eclipse.org\/hawkbit\/'; |
| var repo_id = 'eclipse\/hawkbit'; |
| |
| </script> |
| |
| <script src="https://www.eclipse.org/hawkbit/javascripts/application.js"></script> |
| |
| |
| <script> |
| /* Add headers to scrollspy */ |
| var headers = document.getElementsByTagName("h2"); |
| var scrollspy = document.getElementById('scrollspy'); |
| |
| if(scrollspy) { |
| if(headers.length > 0) { |
| for(var i = 0; i < headers.length; i++) { |
| var li = document.createElement("li"); |
| li.setAttribute("class", "anchor"); |
| |
| var a = document.createElement("a"); |
| if(!headers[i].id) |
| a.setAttribute("href", headers[i].parentNode.href); |
| else |
| a.setAttribute("href", "#" + headers[i].id); |
| a.setAttribute("title", headers[i].innerHTML); |
| a.innerHTML = headers[i].innerHTML; |
| |
| li.appendChild(a); |
| scrollspy.appendChild(li); |
| } |
| } else { |
| scrollspy.parentElement.removeChild(scrollspy) |
| } |
| |
| |
| /* Add permanent link next to the headers */ |
| var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6"); |
| |
| for(var i = 0; i < headers.length; i++) { |
| var a = document.createElement("a"); |
| a.setAttribute("class", "headerlink"); |
| a.setAttribute("href", "#" + headers[i].id); |
| a.setAttribute("title", "Permanent link"); |
| a.innerHTML = "#"; |
| headers[i].appendChild(a); |
| } |
| } |
| </script> |
| |
| <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script> |
| <script>hljs.initHighlightingOnLoad();</script> |
| </body> |
| </html> |
| |
