...
- As a CO administrator, visit Configuration --> > Themes.
- Click "Add Theme" (or edit an existing theme).
- Provide a name for your theme in the Name field, e.g. "Test Theme".
- In the header, footer, and CSS fields provided, add the following content:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!-- example markup for your header field -->
<h1>Custom Site Title</h1>
<div class="customElement">custom element</div>
<div class="customImage"><img src="https://upload.wikimedia.org/wikipedia/commons/1/16/NPS_map_symbols_spring.png"/></div>
<!-- example markup for your footer field -->
Custom Footer
<!-- (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 -->
body {
padding-bottom: 100px; /* offset custom fixed footer */
}
#customHeader,
#customHeader .contentWidth {
position: relative;
}
#customHeader {
padding: 1.5em;
color: #fff;
background: linear-gradient(black,green);
}
#customHeader h1 {
font-weight: 700;
font-size: 3em;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin-top: 6px;
}
#customHeader .customElement {
position: absolute;
right: 10px;
bottom: -1em;
}
#customHeader .customImage img {
position: absolute;
right: 0;
top: -1em;
width: 120px;
height: auto;
}
#customFooter {
bottom: 0;
color: #fff;
font-size: 1.4em;
margin-top: 2em;
padding: 1em 0 1.5em;
position: fixed;
text-align: center;
width: 100%;
background: linear-gradient(green,#222);
} |
- Select the checkboxes to "Hide Title" and " and Hide Footer Logo".
- Save your theme.
Next, apply the theme:
- Visit Configuration --> > CO Settings. (Alternately, visit Configuration --> Enrollment Flows and edit an enrollment flow to apply a the theme just to itthe entire CO).)
- At the bottom of the settings form, select your newly created theme from the drop-down list. Remember that any theme applied to the COmanage CO will render globally unless overridden by a more local theme applied to a CO or Enrollment Flow.
- Save the formconfiguration.
Your CO should immediately change to look something like this:
Caveats
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, if your version of COmanage is responsive, you may wish to test your theme on phones, tablets, and different desktop sizes.
...