Setting the look and feel

You may set the look and feel for a single page or for all pages. You may also edit a theme or CSS, to create a new look and feel. Most settings related to styling are done by Axiell at the time of installation.

About themes

A theme includes a basic set up that applies to all pages. For example, it may set the number of columns, the colouring used in each column, the header bar, the way in which menus are handled, and so on. A theme may exist in different variants called Colour Schemes. Colour schemes may also include other rules within the structure set out in the theme.

Theme settings

All the Arena themes have been supplemented with a group of new settings. The settings have a text input for the value and a check box to turn the setting on and off.

Compatibility mode content

Internet Explorer allows you to define which version’s engine is used to render a page. You can add different values for the X-UA-Compatible META tag telling Internet Explorer how to behave. The most common value and best practice (default) is “IE=edge” which ensures that Internet Explorer always uses the latest version. The latest and current version is also the fastest version.

Meta viewport content

The meta viewport tag gives the browser instructions on how to control the dimensions and scaling of the page, and is a must if you have a site that uses responsive design. Without a proper meta viewport value, mobile devices will render the page at a typical desktop screen width, and then scale it to fit the screen. Our default value is “initial-scale=1.0, width=device-width” but if you have special needs you can change to your own taste, remember to add a comma between the values.

External favicon

You can add a link to an external favicon, which is used for bookmarks and in the URL bar of the browser. There is also the possibility of adding a link to an apple-touch-icon, which is used on Apple devices when you bookmark or add to the home screen. Just add the paths to your images and mark the check box.

Note:
Bookmark icons in the browser are often cached, so don’t expect the bookmark icon to change immediately if you add another image.

Custom head and custom body bottom

These text area fields can be used to add code (javascript, meta tags, CSS etc) to either the head section of the document or to the absolute bottom of the page, just before the closing body tag. Note that Liferay’s page setting has a similar javascript feature where you can paste code that will be executed at the bottom of every page. For the not so experienced user, this is good and very handy for occasional fixes and enhancements. However, if you have a more complex site and javascript functionality, maybe you are using a couple of external plugins or sharing javascripts between sites, the custom head and body bottom can be very useful.

Theme characteristics

Fixed width themes

A fixed width theme is one in which the main wrapper width is fixed. This ensures that all parts of Arena will display on computer screens of limited resolution. A commonly used main wrapper fixed width is 980 pixels. At this width, Arena will display fully on a computer screen that has a resolution of 1024×768, without the need to scroll horizontally to view content that would otherwise be outside the screen area.

Vertical scrolling cannot be eliminated, as page lengths vary according to content. For example, a catalogue search may produce a long list of results.

Advantages of fixing the main wrapper width:

The main readable content area is tightly controlled, without the need to set minimum or maximum values.
Fixed width layouts are sometimes easier to style, depending on the effect you require. Some visual designs may only be achieved in a reasonable manner within a fixed width layout.

Disadvantages of fixing the main wrapper width:

The text size may not be enlarged greatly. This is because the line width does not increase along with text resizing so, at large font sizes, the screen may look very untidy.
On a 980 pixel fixed width site, users with small monitors (800×600 pixels) will need to use a horizontal scroll bar to view content that would otherwise be outside the screen area. Despite the age of such monitors, the problem is still common.
A 980 pixel fixed width site may appear too narrow on large, wide screen displays.

Any theme in which the main wrapper width is not fixed, may be fixed by adding the some CSS to your customer CSS file.

Customer styling

Customer styling may be based on any theme. Customer specific styling is placed in a special CSS file, which is not overridden or removed when Arena application software is updated.

Using themes

Selecting a theme for one page

Sign in to Liferay, and in the menu to the left, click Navigation/Public pages.
In the tree view, click the context menu for the page that will be the parent page for the new page. Select Configure page.
Click the Look and Feel tab.
Select Define a specific look and feel for this page.
Change settings in the theme or click a new theme.
If you want to add a custom CSS to the page, insert it in the CSS field at the bottom of the page.
Click Save.

Selecting a theme for all pages

If you are setting the overall look and feel for Arena, it is useful to apply the same theme to all pages. Later, you may apply other themes to individual pages.

Sign in to Liferay, and in the menu to the left, click Navigation/Public pages.
Select Configure in the context menu.
Change settings in the theme or click a new theme.
The field custom-noscript-content is where you modify the text that appears if the user has turned off or is missing javascript. The setting is on by default.
Click Save.

The themes available

Arena includes the themes Urban, Modern, Arena Go and Agile, each one designed to suit different types of functionality in Arena.

Arena Urban Theme

This theme includes the following settings:

A header with logo.
A menu positioned at the absolute top of the page.
Responsive width. Layout columns get stacked below a certain screen size (768 px). The menu changes in look and behaviour at the same breakpoint.

Background image

To change the background image to an image of your own choice, use the following css:#wrapper {background-image: url( the/path/to/your/image.jpg );}

Special feature

Giving a Liferay article the custom CSS class “urbanFooter” (Look and Feel/Advanced styling) places the article as a footer on the page.

Arena Urban theme has the following schemes:

Urban
Rural

Arena Modern Theme

This theme includes the following settings:

Fixed width, which ensures that things stay in place
Special layout-templates optimized for this theme
Big header with search portlet
Overall grey colour design with analogue textures for an up to date look and feel
Lar file includes article with suggestion for a footer; use freely or adapt to your own needs

Arena Modern has the colour schemes:

Default: red
Variation: the idea with this colour scheme is to provide a base to build further upon, for example, there are no background images and also the header is smaller than the default colour scheme.

The screen layout

Arena includes a range of layout templates, so that you may arrange the screen in many ways.

Changing the screen layout has a major effect on the layout of applications. Note the following:

If you choose a layout template that has fewer areas than the currently used layout template, applications located in lost areas will be relocated automatically to the most appropriate available areas. For example, if you switch from a three-column layout template to a two-column layout template, applications located in the right column will be relocated from the lost third column to one of the available columns.
The layout template applies to the currently displayed page only.
The look and feel of individual portlets can also be configured.

Setting the screen layout

Follow the instructions under Configuring pages.
In the Type dropdown select Layout and select the template that you wish to use.
Click Save.

Note:
The Toolbar theme has been deprecated in Arena 4.

Adding a logotype

The standard placement of the logotype is in the upper left corner of the page. You can select a new logotype for your site (the default logotype is the one of Axiell’s). How to add a logotype varies slightly between Arena 4 and previous versions of Arena.

In the menu to the left click Control Panel/Navigation/Public pages. In the context menu (next to Public pages in the menu), select Configure and make sure that the Look and feel tab is opened.
Scroll down, and under Logo, click Change.
In the dialog that opens, browse for the new logotype.
Click Save.

CSS files

A Cascading Style Sheet (CSS) is a style sheet language used to describe the appearance and formatting of a document written in a markup language, such as HTML, XHTML and XML. CSS may also allow a markup page to be presented in different styles for different rendering methods, such as on-screen, in print, and others. Each document is usually linked to a CSS. However, readers of that document may use a different CSS to override the one the author has specified. The settings for CSS files are the same for different versions of Arena.

arena.css

arena.css contains the default style for every Arena portlet. Every Arena portlet must have a default style stored in this file. This CSS is theme-independent, so all the CSSs within the file apply to all themes. The default styles must be based on the Liferay classic theme, which you change as required within each of the Arena themes. IDs should be avoided within arena.css, because these styles are most likely to be overridden by the themes.

arena-default.css

arena-default.css contains the theme styles for Arena portlets. This CSS is theme-dependent, so only styles that relate to that theme are placed there.

custom.css

custom.css contains the styles for each theme. It is theme-dependent but must not contain styles for Arena portlets. This file contains everything apart from the Arena portlet styles, including page structure, Liferay buttons, the banner, Liferay portlets, etc. These styles may be overridden in the colour schemes. The colour schemes css files are then imported through the custom.css file within each theme, as shown in the following example:

@import url(blue.css);

@import url(green.css);

@import url(orange.css);

colour scheme.css

Every colour scheme CSS file within each theme is loaded onto the relevant page but, because each colour scheme has a unique class before any of its declarations, the styles only apply to the colour scheme when the user is viewing the page. This class is added to the body tag in the HTML code, thus:

The colour scheme’s class should normally appear at the beginning of each declaration; for example, .green div.portlet-topper. The only exception to this rule is when you want a browser-specific style; for example,

.ie9 .green div.portlet-topper

Any styles from any part of Arena may be put into the colour scheme file.

Customer.css

Any changes that a customer wants to make should be placed in the customer.css file (added manually). This file will be the last to be loaded and it will override any of the default styles included above.