Styling static pages

Main Page > User manual > Administer > Manage static pages > Styling static pages

Basic styling of static pages can be achieved by including HTML and inline CSS code directly in the editing interface of AtoM. There are plenty of wonderful online tutorials and resources out there for instruction on HTML and inline CSS use, but a few basic examples commonly employed by ICA-AtoM users have been included here as an example.

Headers and subtitles

To bold a heading and increase its size, wrap the relevant text in <h3></h3> tags, like so: <h3>This is my header</h3>. This will produce the following results:

This is my header

For larger headings, use smaller numbers, such as <h2> or <h1>. Similarly, for smaller headers, use <h4> or <h5>.

Hyperlinks

To create external links on an AtoM static page, wrap the text you would like to act as a link in a hyperlink <a> tag, and include the web address to which you would like the link to point, using the href=" " attribute - the http address would go in the quotations. Remember to close the element after the text you want to link.

For example, to include a link to the ICA-AtoM User manual, the code would appear as such:

This is a link to the <a href="https://www.ica-atom.org/doc/User_manual">ICA-AtoM User Manual</a>

The above code would appear like this on the static page:

This is a link to the ICA-AtoM User Manual

Images

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 host 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 <img> image element, where the src=" " attribute points to the path of the image, similar to how the hyperlinks are used above. For example, if I wanted an image of rabbit, named "bunny.jpg" included on my static page, my code might look like this: <img src=".../path/to/bunny.jpg"> , where "/path/to" represents the internal URL path to the location of bunny.jpg on your host server.

To center the image, you can wrap the <img> image element in <center> tags, like this:

<center><img src=".../path/to/bunny.jpg"></center>

NOTE: The HTML center element is deprecated in HTML 4.01, and is not supported in HTML 5. You can use inline CSS elements to acheive a centered image instead. Since an image position is relative to the rest of the layout, it is difficult to provide a single solution for centering images that will fit all use cases - please consult some online HTML and CSS resources for the best way of doing this.

Boxes and dividers

You can add styled boxes around text by wrapping content in the HTML <div> 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 light blue color, I might use code such as this:

<div style="width:500px; margin-left:auto; margin-right:auto; padding: 5px; background-color:#D2FAF9; border:none;">This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.</div>

This is how the box will appear:

This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.

If you visit the ICA-AtoM demo site, and follow the instructions provided there to log in as an administrator (user: demo@example.com, pass: demo), you can click "edit" on the Welcome static page to see how Artefactual has styled the light yellow box warning users that the data will reset every half an hour. This is what the code looks like:

<div style="padding: 8px; border-style: solid; border-width: 1px; background-color: #fdf5d9; border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);">

And here is the result:

The version hosted here at http://demo.ica-atom.org/ is an easy way to test the latest release of the ICA-AtoM software. You are free to add and change any of the sample data. However, please note that the website will automatically reload the default data every hour, on the hour. So any data that you enter yourself will not be permanently saved. Additionally, there may be more than one demo user logged-in at the same time, so you may see data changes made by others while you are using the software. The demo site is publicly edited and unmoderated - Artefactual Systems accepts no responsibility for the content created by its users. For reasons of security, the digital object link and multiple digital objects import features are currently disabled on the demo site. Additionally, the Import XML and CSV feature is also disabled for reasons of security. Users that wish to test these features must download the Virtual Appliance and run ICA-AtoM on your personal computer.

Further styling of AtoM static pages is possible with other HTML and CSS elements - this brief page has been provided to offer users examples of some of the basic stylings used most often by our user community. If you have put a lot of work into styling a static page in ICA-AtoM and would like to show it off and share how you did it with the community, why not make a post in the ICA-AtoM User's Forum?

---

Below a screen shot of a styled page, using some of the examples above, has been included. Following the screenshot, you will find a copy of the code used to style the page.