Customising Journal Website Pages with HTML

If you would like your journal website to look more distinctive than the standard text editor allows, you can add your own HTML and CSS directly into your pages and snippets. This lets you create layouts such as welcome banners, Editorial Board cards, key-fact boxes and step-by-step guides.

🚨Important: Custom HTML and CSS is an advanced option and is not officially supported by the JAMS team. We may update the design of journal websites from time to time, which could affect how your custom styling appears. Please keep a copy of your code and check your pages after JAMS updates.

To see what is possible, take a look at our demo journal website at demo.jams.pub. Every page there has been styled using the steps in this article.

Step 1: Set Your Theme Colours

Before styling individual pages, set the main colours for your whole website. In Journal Website Management, scroll to the Theme section and click 'Add new'. A Theme is a set of colours applied across every page of your journal website.

You can choose three colours:

The top navigation bar background
The footer background
The page background

When you're happy with your colours, click 'Save'. Then, click the tick icon next to your new Theme to enable it.

💡 Top Tip: Make a note of the colour codes you choose. The demo journal uses #1f3a5f (navy) for the navigation bar and reuses the same code for headings, buttons and card borders, so every page matches the rest of the website.

For more on setting up your website, see Setting up a Journal Website.

Step 2: Choose Where to Add Your Styling

You can add custom styling in two places.

Pages are menus with the Page type. Each one has its own URL and appears as a tab on your website. The Editorial Board and About the Journal pages on the demo site are Pages. To create one, go to Journal Website Management, click 'Add New' in the menus section and set the 'Type' to Page.

Snippets are blocks of content shown on the built-in Home, For Authors, For Editors and For Reviewers pages. The demo site's welcome banner is a Home snippet, and its Author Guidelines are a For Authors snippet. To add one, scroll to the relevant snippets section in Journal Website Management and click 'Add New'.

📝 Note: You must add a 'Root' link to use the Snippets. So for 'For Authors', you must have a Root Link created in the Journal Menus with the Link end: /authors

Step 3: Open the Source View

In the content editor toolbar, click 'Source'. This switches the editor from the normal text view to the underlying HTML code.

📝 Note: If you can't see the 'Source' button, the toolbar may be collapsed. Click the small arrow at the top-right of the toolbar to expand it.

Step 4: Add Your HTML and CSS

Delete anything already in the box. Then, paste or type your code. There are two ways to add styling.

Inline styles are added directly to an individual element using a style attribute. The Editorial Board page on the demo site uses inline styles. For example, this creates a navy heading with a line underneath:

<h3 style="color:#1f3a5f; border-bottom:2px solid #1f3a5f; padding-bottom:6px;">Editor-in-Chief</h3>

A style block is a set of CSS rules placed at the top of your content, inside <style> tags. You define a style once and reuse it on as many elements as you like. The About the Journal page on the demo site uses a style block:

<style>
  .fact { display:inline-block; width:23%; min-width:150px; padding:18px 10px; background:#ffffff; border:1px solid #dde3ec; border-radius:8px; text-align:center; }
  .fact-number { font-size:22px; font-weight:bold; color:#1f3a5f; }
</style>
<div class="fact"><div class="fact-number">28 days</div>Median time to first decision</div>

📝 Note: A style block only affects the page or snippet it is added to. To style several pages the same way, add the same code to each one.

When you have added your code, click 'Source' again to return to the normal view and check how it looks. Then, click 'Save' at the bottom of the page.

Open your journal website in a new tab and refresh it to check the result on the live page.

Linking Within a Page

On long pages, you can add links that jump straight to a section. Give the section heading an id , then link to it with a # . The "On this page" links on the demo site's Author Guidelines work like this:

<a href="#checklist">Submission Checklist</a>
...
<h3 id="checklist">Submission Checklist</h3>

Suggestions for Good Results

Build your page outside JAMS first. Write and preview your HTML in a code editor or an online tool such as CodePen, then paste the finished code into Source view. This is much easier than editing long code inside the page editor.
Keep a backup copy. Save your code in a separate file. If the page is accidentally changed, or your styling needs updating later, you won't have to start again.
Prefer inline styles. Inline styles only affect the element they are written on, so they are the least likely to clash with the rest of your website.
Check how it looks on mobile. Use percentage widths (such as width:48% ) with a minimum width (such as min-width:220px ) so that cards and columns stack neatly on smaller screens. The Editorial Board cards on the demo site show two per row on a computer and one per row on a phone.
Check your links. Make sure buttons such as 'Submit a Manuscript' point to your journal's real submission page before you save.
Use readable colours. Make sure there is strong contrast between text and background colours so that everyone can read your content comfortably.
Style your own content only. Avoid CSS that hides or changes the standard JAMS parts of the page, such as the menu, sidebar or search. These may change in future updates and your rules could stop working or hide the wrong thing.
Do not add scripts. Please don't add <script> tags or JavaScript to your pages. They can cause problems with your website and may be removed.
Check your pages after updates. If we announce changes to journal websites, take a quick look at your styled pages to make sure everything still displays as expected.