If you wish only to add a logo to Registry, you may place your logo into local/webroot/img/logo.png
. The logo should be 50px high, have a transparent background, and be in PNG format. For more explicit control over the Logo and other elements, consider creating a Custom Theme (which also provides the option of pointing to an external logo). Custom Themes are available as of v2.0.0.
For versions prior to v1.0.0, you must replace the default image file that is located at app/webroot/img/comanage-logo.png
.
Custom logos per CO are not currently supported when deployed to the file system in this way (CO-1325), but this can be overcome by creating a Custom CO Theme as described below.
If you don't wish to point to a different server for images or other custom resources from your theme and would prefer to keep them on the same server as Registry, you can create a symlink in app/webroot to point at resources in local/webroot. For example from the root of your Registry project:
mkdir local/resources cd app/webroot/ ln -s ../../local/webroot/resources local-resources |
and now you will be able to reference images and other resources at /registry/local-resources/some-image.png.
As of v2.0.0, custom themes can be defined within each CO and used in various contexts. A custom theme defined for the COmanage CO can be applied globally, including unauthenticated contexts.
Themes can be added via Configuration >> Themes, and currently support the following options:
After the theme has been defined, it can be attached to one of the following contexts (which are evaluated in order of priority as listed here):
As of v4.0.0, custom themes can be stacked. Theme stacking mode is configurable (enabled/suspended) in one of the following contexts:
Currently custom Headers and Footers can not be stacked. They are inherited from the top level.
Theme Stacking feature defaults to suspended mode, which matches the behavior prior to v4.0.0.
CSS from a custom theme is applied last in the cascade and can override any part of COmanage's styles. When developing a custom theme, you can choose to include only CSS, or you can include CSS in combination with a custom header, footer, or both.
Output for the custom header will appear above all other elements in the following <header> tag:
<header id="customHeader"> <div class="contentWidth"> <!-- your custom markup will appear here --> </div> </header> |
Similarly, output for the footer will appear below all other elements of the <main> content in the following <footer> tag:
<footer id="customFooter"> <div class="contentWidth"> <!-- your custom markup will appear here --> </div> </footer> |
First, build the theme:
In the header, footer, and CSS fields provided, add the following content:
<!-- example markup for your header field. Note that if you want the title to link to a specific CO, use the correct CO ID in the URL here. --> <h1><a href="/registry/co_dashboards/dashboard/co:2">Custom Site Title</a></h1> <img id="rainbow" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Rainbow_Emoji.png"/> <!-- example markup for your footer field --> <p>Footer is here.</p> <!-- (Note that markup in the header and footer is optional and depends only on your needs.) --> <!-- some quick and dirty example styles for the CSS field (Registry version 3.0) --> #banner { display: none !important; } #customHeader { padding: 1em; background-color: #1d7ab4; color: white; } #customHeader h1 a { color: white; } body.logged-in .mdl-layout__drawer { top: 97px; } #top-menu a { color: white !important; } #rainbow { position: absolute; right: -5px; top: -5px; width: 100px; } #top-menu #user-panel a { color: #222 !important; } #top-menu #notifications a { color: #06c !important; } |
Next, apply the theme:
Your CO should immediately change to look something like this:
First, build the theme:
In the CSS field add the following content:
header.mdl-layout__header, #main-menu .mdl-ripple, #peopleAlphabet a:hover { background-color: #058B8C; } th, .ui-widget-header, .co-grid .co-grid-header, #pagination { background-color: #058B8C; color: white; } a, #main-menu > li li a, #main-menu li li a.selected, .widget-actions .material-icons { color: #028b8c; } |
Next, apply the theme:
Your CO should immediately change to look something like this:
Be aware that using custom markup can break your page layout, so be sure to use valid HTML code in your header and footer. Also, because all recent versions of COmanage are responsive, you may wish to test your theme on phones, tablets, and different desktop sizes.
Image upload is not supported. If you wish to include custom images, they will need to be available on a web server and over HTTPS (for production). See "Custom Resources" above if you wish to serve images and other resources from the Registry server.
See Also: cm_co_themes
At the moment, checking the "Hide Title" checkbox in a theme only hides the title (see: CO-2414). To completely hide the banner with CO Title and COmanage logo, add the following CSS to your theme's CSS field:
#banner { display: none; } |
For legacy reasons, the #customFooter element in Registry is placed within the <main> section of Registry's layout. If you wish to move the footer, add the following code snippet to the theme's Footer field:
<script> $(function() { $("#customFooter").detach().appendTo("#comanage-wrapper"); }); </script> |
Note that this is JavaScript making use of jQuery that ships with registry.
The theme above was built by placing the following values in the theme fields:
Header
<div id="demo-head">Custom Header -- ID: #customHeader</div> |
Footer
<div id="demo-foot">Custom Footer -- ID: #customFooter</div> <script> $(function() { $("#customFooter").detach().appendTo("#comanage-wrapper"); }); </script> |
CSS
#customHeader { font-size: 2em; padding: 2em; background-color: #555; color: white; } #customFooter { font-size: 1.4em; padding: 2em; background-color: #555; color: white; } #banner { display: none; } #navigation-drawer { min-height: calc(100vh - 254px); } |
Note: the #navigation-drawer is set to run the full viewport height when the page does not fill the space from top to bottom. If you wish to keep a clean connection between the navigation drawer and your custom footer without a large gap at the bottom of the screen and without unnecessary scrolling you need to account for the height of the custom banner and subtract it from the viewport height as shown in this example.
There are times - particularly during enrollment flows - in which you may wish to fully hide the left menu drawer from authenticated users. Because of legacy behavior for managing the menu drawer toggle, the menu drawer will unhide when the browser is resized to any desktop dimension. Therefore applying "display: none" to the drawer is not enough. To hide the navigation drawer completely, throw it out of the DOM by adding the following to your theme's footer:
<script> $(function() { $("#navigation-drawer").remove(); }); </script> |
Custom jQuery UI themes are not supported in v2.0.0 and later. As of v2.0.0, use CO Themes instead. jQuery UI will be removed in Registry version 5.0.0. |
If you decide to customize the jQuery UI theme, note that you will need to manually track the correct version of jQuery UI and re-install your customized theme each time you upgrade Registry. ( |
The basic color scheme can be modified by downloading a theme from http://jqueryui.com/themeroller/ and unpacking the theme folder (e.g. smoothness, start, redmond) into app/webroot/js/jquery/ui/css/
. Be sure to use the same jQuery UI version that Registry currently uses, which can be found via Version Dependencies.
Open app/views/layouts/default.ctp
and change the appropriate reference to the location of the css file of the new theme.
The Style macro allows the use of CSS to style content. CSS describes how HTML elements should be displayed. https://www.adaptavist.com/doco/display/CFP/Style+Sheet
.home-banner { background: #ffffff; color: #d44415; font-size: 20px; padding: 20px; } .home-banner h1 { color: #5e2b97; font-size:2.5em; } .title-box { border: 0px solid #ff5b2d padding: 10px; padding-bottom: 30px; line-height: 2; font-size: 1.5em; } .title-box > h2 { /*background: #5e2b97;*/ border-top: 3px solid #c2d6d6; bottom: 10px; /*color: #c2d6d6;*/ /*margin-left: -10px;*/ /*margin-right: -10px;*/ padding: 1em 0 0; position: relative; } .cfm-blog-image > img { display: block; margin-left: auto; margin-right: auto; } .about-box { border-top: 1px solid #c2d6d6; border-bottom: 2px solid #c2d6d6; padding: 10px; padding-top: 30px; padding-bottom: 30px; } .about-box > p { font-size: 0.9em; font-style: italic; } .about-box > h3 { font-size: 0.9em; } } |