Manage static pages¶
A default welcome message appears on the Home page when first logging into AtoM.
The About page provides additional information about the application and the project. To access the About page, click on the Quick links menu in the main menu located in the header bar and select “About”.
For more information on navigating in AtoM, see Access content.
All static pages in AtoM, including the three default static pages described above, can be customized by logged-in administrators via the user interface. New static pages can also be created, and all static pages (except the home page) can be deleted from the application.
Below are instructions on how to edit and add static pages in AtoM:
- Static pages and security configuration
- Edit an existing static page
- Add a new static page
- Add links to a new static page
- Add a custom sidebar menu with links to your static pages
- Styling static pages
Static pages and security configuration¶
As of version 2.2, AtoM now has advanced configuration settings that will allow a system administrator to enable htmlpurifier on static pages. htmlpurifier is:
…a standards-compliant HTML filter library written in PHP. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C’s specifications.
By default, htmlpurifier is not turned on in AtoM, to allow a broad use of
HTML and inline CSS on static pages. System administrators interested in enabling
all possible security settings and mitigating the risk of XSS-based attack vectors
can enable the library by altering the
config/app.yml file. For more
When the configuration is set to
true, htmlpurifier will limit the available
html elements to the following:
'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong', 'em', 'abbr[title]', 'acronym', 'address', 'blockquote', 'cite', 'code', 'pre', 'br', 'a[href]', 'img[src]', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'table', 'tr', 'td', 'th', 'tbody', 'thead', 'tfoot', 'col', 'colgroup', 'caption', 'b', 'i', 'tt', 'sub', 'sup', 'big', 'small', 'hr'
'class', 'title', 'src', 'href'
Any elements used that do not match these parameters when htmlpurifier is engaged will not render in the browser, meaning they will not be visible in your static page. Make sure you review the content you have added to your static pages before engaging this security setting!
Edit an existing static page¶
This section contains instructions on how to edit static pages in AtoM. There are potentially two ways to edit static pages. The primary method is by clicking the the Admin and selecting “Static pages” from the drop-down menu. This option will route you to a “List” page, where all static pages in the application will be listed. Navigate to the static page you wish to edit by clicking on the blue menu name.
Additionally, if to the target static page has been added to the Quick links menu in the main menu, you can use the Quick links menu to navigate to the static page you would like to modify - an “Edit” button will appear at the bottom of the static page.
Edit the “Home page”¶
To edit the “Home page” in AtoM:
Start by navigating to the Home page. Do this by either:
- Clicking on the AtoM site logo located in the top-left corner of the AtoM header bar;
- Clicking the Quick links menu in the main menu of the header bar and selecting “Home” from the drop-down menu; or
- Clicking the Admin menu in the header bar and selecting “Static pages” from the drop-down menu. Once you are directed to the “List page” for static pages, click on the “Welcome” blue menu.
Add and/or revise data as required. Editing the “Title” field of the Home page will edit the static page’s title, and will also affect the blue menu links shown in Manage > Static pages. For example, if you change “Welcome” to say “Hello!”, the page title in Manage static pages will also change to “Hello!”, as will the heading on the page.
The main body content of the home page can be edited by changing the data in the “Content” section of the edit page.
You can quit the edit process at any time by clicking the “Cancel” button in the button block; any data already entered will not be saved. Note that simply navigating away from the page by any other means, without first clicking “Save” will also result in no edits being saved.
To save the changes made to the Home page, click the Save button located in the button block at the bottom of the edit page. AtoM will reload the home page in view mode so you can review the results of your edits.
Edit other existing static pages¶
To edit an existing static page in AtoM:
Navigate to the static page you would like to edit. You can do this by:
- Clicking the Admin menu in the header bar and selecting “Static pages” from the drop-down menu. Once you are directed to the “List page” for static pages, click on the name of the static page you would like to edit.
- AtoM will redirect you to the static page. To switch from the main view page to edit mode, click on the edit button in the button block at the bottom of the static page.
- On loading, the edit page will display a “Title” field, a Slug field and a “Content” field.
Add and/or revise data as required. Editing the “Title” field of the static page will edit the static page’s title, and will also affect the blue menu links shown in Manage > Static pages. For example, if you change “About” to say “Hello!”, the page title in Manage static pages will also change to “Hello!”, as will the heading on the page.
The main body content of the static page can be edited by changing the data in the “Content” section of the edit page.
Users can use Markdown, and/or HTML and inline CSS code to the “Content” field to format content, add hyperlinks, or further style the page contents. See below for information on how to style static pages. See also: Formatting.
- You can quit the edit process at any time by clicking the “Cancel” button in the button block; any data already entered will not be saved. Note that simply navigating away from the page by any other means, without first clicking “Save” will also result in no edits being saved.
- To save the changes made to the static page, click the Save button located in the button block at the bottom of the page. AtoM will reload the static page in view mode so you can review the results of your edits. Repeat steps 3-6 as needed.
Add a new static page¶
In AtoM, new static pages can be added at any time by any authenticated (i.e. logged-in) administrator. Similar to both the Home page and the About page, you may wish to add a new static page in order to include permanent, or “timeless” content to your webpage. Static pages may be customized to offers users instructions or help in navigating the site (i.e. a “Help” page), provide contact information (i.e. a “Contact Us” page), or feature website content, categories, and/or contributors.
To add a new static page in AtoM:
You will be directed to a “List pages” page, where all existing static pages will be listed.
The slug indicates the word, or sequence of words that will be visible to users in the URL link when they are navigating on a specific static page (e.g.: the slug in the URL www.artefactual.com/help is help). The slug should be indicative of the content of that specific static page.
When creating a new static page, the slug field can either be customized or left blank. If you choose to customize the slug, make the slug all lowercase, keep it short, and avoid accented characters (e.g.:
û) and punctuation (e.g.:
If you leave the field blank, AtoM will automatically generate a slug based on the “Title” you have indicated for your page (e.g.: If your “Title” is About Us, the slug for that static page will automatically be generated as
about-us). Note that AtoM will automatically replace all accented characters with letters from the English alphabet and punctuation will either be removed or replaced by a dash “-” or percent-encoding (e.g.: If your “Title” is Instructions & More, the slug for that static page will automatically be generated as
instructions-more, unless otherwise indicated). The slug will also appear in the once-blank “Slug” field and can be viewed when switching from the view page to the edit page of that static page.
A slug cannot be duplicated once it has been generated in AtoM. If you duplicate a slug, AtoM will automatically generate a “-2 (or the next subsequent number) at the end of the slug to distinguish it from the other one in the same name (e.g.: Two slugs titled information will result in the second of the two becoming information-2). If you remove an AtoM automatically generated slug from the slug field of a static page you’ve created, AtoM will not re-generate the original slug, regardless of whether or not the “Title” of your page has changed; rather, it will generate a new slug in the form of a series of letters and numbers. This should be avoided, as it creates confusion because it does not accurately indicate the content of that static page. To avoid this, simply enter a custom slug.
The “Content” section is where the main page content of your new static page should be added. You can add Markdown, and/or HTML and inline CSS code to the “Content” field to format content, add hyperlinks, or further style the page contents. See below for information on how to style static pages. See also: Formatting.
You can quit the creation process at any time by clicking the “Cancel” button in the button block; any changes made will not be saved. Note that simply navigating away from the page by any other means, without first clicking “Save” will also result in no new static page being created.
Styling static pages¶
Basic styling of static pages can be achieved in two ways.
The first method is to use AtoM’s Markdown formatting to style content. For more information on formatting content using Markdown, see:
The second method of styling AtoM static page content is by adding HTML and inline CSS code to the static page’s editable area. There are plenty of online tutorials and resources out there for instruction on HTML and inline CSS use, but a few basic examples commonly employed by AtoM users have been included here as an example.
You can use a mix of Markdown and HTML in static pages. Note that HTML content is not supported outside of static pages in AtoM.
See below for instructions on how to use HTML to create and edit:
Remember, if you enable Markdown formatting in AtoM, you don’t need to write any HTML! For more information, see:
Headers, subtitles, and emphasis¶
To increase the size of a heading or subtitle, wrap the relevant text in
<h3> </h3> tags, like so:
<h3>For more information, please contact</h3>.
This will produce the following results:
For larger headings, use smaller numbers, such as
Similarly, for smaller headers, use
To bold, italicize or underline headers and subtitles, simply wrap the relevant
<strong></strong> for bold,
<em> </em> for italics, or
<u> </u> for underline. Typing
<strong>Artefactual Systems Inc.</strong>
will produce the following results:
If you have access to the server on which your AtoM instance is located (i.e.,
if you are hosting it yourself, or can ask the hosting provider to include a file
for you), you can place images in a directory on the host server, and use a
local URL to point to them. Images can then be used via the HTML
image element, where the
src=" " attribute points to the
path of the image, similar to how the hyperlinks are used above. For example, if
you wanted an image of email, named “contact-image.jpg” included on your static
“Contact Us” page, the code might look like this:
/path/to represents the internal URL path to the location of
contact-image.jpg on your host server, or the path to a web-accessible image.
To center the image, you can wrap the
<img> image element in a
element, with a
text-center" class, like this:
<div class="text-center"><img src=".../path/to/contact-image.jpg"></div>
You can also reuse some of the existing image classes from Bootstrap, to further
style your images. For example, you can round the corners with the
<img class="img-rounded" src="../path/to/my-bunny-image.jpg">
Or if you’re using a Bootstrap 5 theme, use the
rounded class instead.
<img class="rounded" src="../path/to/my-bunny-image.jpg">
Make an image circular using the
img-circle bootstrap class:
<img class="img-circle" src="../path/to/my-bunny-image.jpg">
Or if you’re using a Bootstrap 5 theme, use the
rounded-circle class instead.
<img class="rounded-circle" src="../path/to/my-bunny-image.jpg">
Or give your images a frame, like on our digital object browse page, using the
<img class="img-polaroid" src="../path/to/my-bunny-image.jpg">
Or if you’re using a Bootstrap 5 theme, use the
img-thumbnail class instead.
<img class="img-thumbnail" src="../path/to/my-bunny-image.jpg">
To link to external images using Markdown instead of HTML, see:
Boxes and dividers¶
You can add styled boxes around text by wrapping content in the HTML
element, and then using inline CSS to modify the
appearance of the box. For colors, use the HTML or RGB values for the color you
would like to use, rather than generic names such as “red,” “blue,” etc. - most
browsers support a limited pallette of colors using names such as this, and the
results may be inconsistent across browsers. There are many free HTML color
wheels available that allow you to choose a color and copy its HTML# or RGB
values; for example: http://www.colorpicker.com/
For a small centered box with a green color, you might use code such as this:
<div style="width:600px; margin-left:right; margin-right:right; padding: 5px; background-color:#39BF34; border:none;">Here is a list of ways that we can be contacted with any questions or concerns you may have:</div>
This is how the box will appear:
The above example will not work if you have htmlpurifier engaged in AtoM. For more information, see the section above, Static pages and security configuration for more information. The examples below, reusing existing Bootstrap classes, will work even when htmlpurifier is engaged.
Another example of this is the light yellow box that appears on the AtoM demo’s “Welcome” static page warning users that the data will reset every hour. This yellow box is reusing an existing style class from the Bootstrap CSS framework that AtoM uses - you can make use of existing Bootstrap classes to help with styling, like so:
<div style="alert">Welcome message appears here</div>
And here is the result:
Other Bootstrap alert classes that can be used to style containers include
If you are using a Bootstrap 5 theme, your alert will not have a background
color by default. You can include an
alert-primary class or one of the
other alert classes listed above if you wish to apply a background color
and border on your alert.
<div style="alert alert-primary">Welcome message appears here</div> <div style="alert alert-secondary">Welcome message appears here</div> <div style="alert alert-info">Welcome message appears here</div> <div style="alert alert-warning">Welcome message appears here</div> <div style="alert alert-danger">Welcome message appears here</div>