When you want to be really prescriptive on a websites' presentation you can enforce specific styles to be used in a specific locations on the page - for example you can restrict users from being able to put anyting other than a Heading at the top of the page.

In XPOR we call Style Sheets "Atom Themes", because they are the themes that you may use .  In fact the Atom Theme "inherits" an XPOR Object Type called SASS Style Sheet, which stands for "Syntactically Awesome Style Sheets".  These are an extension of the old "CSS" version, bringing in more control and features.   Atom Themes are objects that are grouped together into a "Theme Package" which is subsequently associated to a Web Page Template, to provide pre-configured styles onto the Web page.

Atom Themes

The drawing opposite shows that Atom Themes are at the very bottom of the style path to configuring a Web Page.  Their name, "Atom Themes" is a little misleading.  They  have no association to Atoms BUT they are used to configure how some Atoms work.  For example, a Menu Atom can be added to a web page - though it won't do anything other than list links on the web page, unless it can find an Atom that provides it the "style" details, such as colours, locations and actions.

Web pages are all built from Templates.  The Template is first made in XPOR backend  and A typical template would have several Atoms on it, for example a Menu atom, an HTML atom and a News atom.  These are built in Object   "Atom Theme", a Core "Atom Theme" and (perhaps) a News "Atom Theme".

Instead of adding these themes individually, they are "contained" in a Theme Package, which itslef is then assoicated to the Web Page Template.

The Core Theme is the first Atom Theme to consider.  This will contain all of the "usual" style types, such as Headings and Paragraph styles.  Your website is provided with a Core Atom Theme, to get you off the ground.  It is also provided with the following outline Atom Themes;

• Blog+ Theme
• Calendar + Theme
• Core Theme
• Ecommerce Theme
• Event Mangement Theme
• Forum Theme
• Gallery Theme
• Menu Theme
• News Theme
• Notifications Theme
• Social Theme

You can use these Atom Themes "out-of-the-box", gaining access to the Styles that we have provided.  They are fairly basic, however, so you will probably want to style the website to your own requirements.  In which case you can edit the these Atom Themes and /or create new Atom Theme objects, as you require. 

Editing an Atom Theme type is fairly straightforward, though knowledge of what can be done with style sheets is something of an art..  This is one place you might nbeeed to refer to Google OR ask for some technical help.  It's not a case of being limited in what you can do but of not knowing what you can do!

Theme Packages

Theme Packages are the containers that bundle the Atom Themes together.

To apply styles to a website, a Theme Package containing relevant Atom Themes needs to be associated to your CMS Template by type “Template Style Sheets”.

Every Theme Package needs, at bare minimum, one Atom Theme, to provided some basic styling for your website pages.

What are Atom Themes?

Atom themes are standardised styles bases on the SCSS standard.  This means that they can be compiled to standard CSS using variables generated from what the user changes within the form. 
IE. 

Font Size: The font size being set to 14px would be a variable that is then reused within the SCSS file any time the standard font size is referenced.  This includes setting default sizes for the heading tags as multiples of this standard font size, etc.

What are Theme Types?

We will go into each in depth in their own help articles, but as a general rule each atom theme is required if you have an atom of that type on the pages that are made from that template.  The only exception to this is the Core Theme.  This contains the styling required to implement the column-type layout we utilise in the template editor in modeller. All other Theme Types inherit the base information found within the core (font sizes, padding, colours, etc) so that you can quickly style your webpages without having to edit every single one individually.  Based on this Core Theme is mandatory for any template styling.

• Blog Theme
• Calendar Theme
• Core Theme
• Ecommerce Theme
• Forum Theme
• Gallery Theme
• Menu Theme
• News Theme
• Notifications Theme
• Social Theme

What are sub-themes?

You may have noticed next to Theme Type is a text box labelled “Sub Theme Name”

[image]

The purpose of this is to allow you to differentiate between multiple Atom Themes of the same Theme Type within a theme package.
For example, my website has 4 menu atoms on its content pages

• The main one at the top#
• Categories in a left hand column
• Two in the footer:

o   Quick links

o   Relevant links.

If I was to define one menu theme then all of these atoms would end up styled the same way, and my design calls for different colours and spacing for each section.

If I create one Atom Theme without a name in the “Sub Theme Name” this counts as the default theme.  I would use this for the top menu.
Another Atom Theme should be created for the left menu, and named (anything the user desires, but it’s best to keep it relevant so “Left Menu”)
Another Atom Theme should be created for both menus in the footer, since they are meant to look the same (call it “Footer” or “Footer Menu”)

Style each of these up as required, then when you are setting up your menu atom simply select the sub-theme you want to use (see Menu help for details)

How do themes work?

Atom Themes are sets of standardised style sheets, designed to reduce or remove entirely the need for a designer or developer to create responsive stylesheets from scratch.  By editing the Atom Theme forms and changing the variables there the most common elements (font type and size, basic colour schemes, padding, etc) required to set up a site can be compiled into a single stylesheet for the Theme Package.

An example of the requirement for themes would be that if you added a Menu Atom to your webpage, but did not have an Atom Theme of type ‘Menu Theme’ then all you would see would be an unordered list of hyperlinks.  The Atom Theme contains all the styling elements to lay out the menu, size it, apply effects to the links, etc.

Within the Atom Theme editor the user can also add custom style elements if they are versed in CSS.  This would be done within the black text editor that takes up the lower section of the Atom Theme editor form.  The styles generated by the form are visible within this editor and are contained by the /*core*/ and /*endcore*/ tags.  This section is rebuilt every time the form is updated, so the user should not attempt to add their own styles here.  It should be done either before or (more commonly) after.  The reason why it is more common to add afterwards is that styles are hierarchical, and the last class will override previous classes that it could inherit from.

Summary

• To style a website, the templates your pages use should have a Theme Package containing at bare minimum an Atom Theme of type ‘Core Theme’. 
• For each atom type that can be styled (refer to list of theme types above) an Atom Theme of that type should be added to the Theme Package. 
• All Atom Themes inherit styling information from the Core Theme.
• Custom CSS can be added to any of the Atom Themes as long as it is done outside of the /*core*/ and /*endcore*/ tags.