EvoCloud CMS 2.0

USER GUIDE — FOR DESIGN STAFF

Design Admin: Editing Your Site's HTML

Design Admin is where a Design Manager edits the HTML templates, stylesheets, and scripts that wrap every page of your website. This guide covers the Templates screen — the place to change the header, footer, navigation, and page layouts.

Please consider the environment before printing.

Before you begin

You need the Design Manager role (or Administrator). If you do not see Design Admin under Site Admin, ask your site administrator — roles are set in the Administration guide.

You should be comfortable reading HTML. Everything in Design Admin is site-wide: a template edit changes every page built on that template, the moment you click Save. There is no draft or preview step, so make small changes and check the public site after each one.

Which HTML do you want to edit?

"How do I edit my HTML?" has two answers in EvoCloud, and they live in different places:

You want to change...Where to do itWho can
The content of one page (the text, images, or an embed code inside a page, news post, FAQ, or event)Open that item, go to the Content tab, and click the Source (</>) button on the Page Editor toolbar. See Editing the HTML of a page.Any staff member who can edit that page
The design around every page (header, footer, navigation, page layouts, the site-wide look)Site Admin › Design Admin › Templates — this guide.Design Manager
Rule of thumb: if the thing you want to change appears on more than one page, it is in a template. If it appears on only one page, it is in that page's content.

1 Open Design Admin

In the left menu, open Site Admin and choose Design Admin. The Design Admin menu has these screens:

ScreenWhat it holds
TemplatesThe HTML files that lay out your pages. This is where the header, footer, and navigation live.
CSSYour stylesheets — colors, fonts, spacing.
ScriptsJavaScript files loaded by your templates.
ThemesThe named design your templates, stylesheets, and scripts belong to.
Theme SettingsSite-wide design choices that do not require editing code.
Widget BuilderBuild menus, news displays, galleries, and more, then paste one snippet. See the Widget Builder guide.
Widget GuideReference for the widget snippets you can place in a template.

2 Edit a template's HTML

Go to Site Admin › Design Admin › Templates. The Manage Templates list shows each template's name, its theme, and when it was last updated. A yellow banner reminds you that changes to design files may lead to unexpected results — take it seriously.

  1. Click the template you want to change. The template's HTML opens in a code editor.
  2. Make your edit. Keep the placeholders that look like {{content}}, {{css}}, {{js}}, {{main_menu_root}}, and {{html_title}} exactly as they are — EvoCloud replaces them with the page content, stylesheets, scripts, navigation, and title when a visitor loads the page. Removing one removes that part of the page everywhere.
  3. Click Save. The change is live on your public website immediately.
  4. Open your website in a new tab and check a few pages that use that template.
Careful: A template edit is site-wide and instant. If you are trying something new, use the Copy bulk action on the Manage Templates screen to make a spare copy first, or plan to use the Version tab (below) to step back.
Which template is which? A Base view template is the outer shell (the <html>, header, and footer shared by everything). An Inner view template is the layout placed inside that shell for a page. Department and group pages have their own kinds. See the settings reference below.

Template settings reference

Alongside the code editor, each template has these settings:

SettingWhat it does
TitleThe template's name as it appears in the Manage Templates list and in the template picker on a page.
ThemeThe theme this template belongs to.
KindWhat the template is for: Base view template, Inner view template, Newsletter template, Group home page template, or Group interior page template.
Raw HTMLWhen checked, the template is served exactly as written and is not wrapped in the base template. Use it for standalone pages such as a landing page with its own complete HTML.
StylesheetsWhich stylesheets from the CSS screen this template loads, and in what order.
ScriptsWhich scripts from the Scripts screen this template loads, and in what order.
Allow Public API AccessLets the template's HTML be fetched by other systems through the public API. Leave it off unless EvoGov support asks you to turn it on.
Version tabEvery saved version of the template, with a Restore link. See Undoing a change.
Permissions tabWhich roles may edit this template.

3 Undo a change with the Version tab

Every Save creates a new version. If a change breaks the site, open the template, click the Version tab, find the last good version by its date, and click Restore. Then Save. The public site returns to that version right away.

Tip: Stylesheets and scripts have the same Version tab, so a bad CSS edit can be stepped back the same way.

Stylesheets and scripts

The CSS and Scripts screens work the same way as Templates: a manage list, click to open, edit in the code editor, Save, and a Version tab to step back. A stylesheet or script only reaches the public site when a template lists it under its Stylesheets or Scripts setting, so after adding a new one, open the template and add it there too.

Next steps

Need a hand? Contact EvoGov support or visit help.evogov.com.