Versions Compared

Old Version 8

changes.mady.by.user Madzy Soetman

Saved on

compared with

New Version Current

changes.mady.by.user Madzy Soetman

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

A theme Use the Theme Editor to create a theme, which determines the look of your site.

...

You manage your themes in the Refined Administration > Themes.

...

Theme Editor

...

Theme Editor anatomy

To the left of the editor, the preview area shows the look of your theme. It automatically updates when The preview shows the changes you make a change in the theme’s settings, so you can play around with your design before publishing it. To see how the theme looks in different parts of your site, use click the drop-down list at the top to switch between . You can choose the views: start page Landing pages, header Header, Confluence page, and issue Issue/request.

Settings tab

To the right of the editor, you edit your theme in the Settings tab. Read more about the settings below.

...

History tab

Click the History tab to view and restore previous versions. A version is generated every time you hit the save button.

...

Settings

...

General

Click one of the three icons to decide how much background is shown behind the header and body: only at the top, partial or full.

Setting

Description

Font family

  • Arial

  • Poppins

  • Roboto Condensed

  • Cormorant

  • Playfair Display

Background

Set a

colour

color, gradient or image as background.

Customise

Scroll down this page to learn how to use the color picker.

Customize images with these

additional

settings:

  • Full, repeat or without repeat

  • Position the image

  • Filter (blur, shade, monochrome, vintage)

  • Underlying

colour

  • color

Banner height

Enter the amount of pixels for the header image.

Secondary background

By default, the background is white. Choose Gray if you want to alternate between sections

that you create in the Layout Editor

on landing pages.

Info

This setting only applies to pages created with the legacy Layout Editor, and doesn’t apply to pages created in the Page Builder

- the

. The Page Builder gives you more freedom in designing backgrounds.

Content

Customise

Customize the area’s content with:

  • Effects (shadow)

Colour

  • Color of the shadow (scroll down this page to learn how to use the color picker)

  • Corners (toggle on to round the corners)

Header

The header is located at the very top of your pages.

Setting

Description

Background

Set a single

colour

color, gradient, or image as background

. Customise

. Scroll down this page to learn how to use the color picker.

Customize images with these

additional

settings:

  • Full, repeat or without repeat

  • Position the image

  • Filter (blur, shade, monochrome, vintage)

  • Set an underlying

colour

  • color

Width

Determine your menu's width:

  • Percentage (%) - Always relative to the browser window and suitable for responsive designs.

  • Pixels (px) - A fixed value. We apply your pixel-value as a max-width property to make sure your site is mobile responsive.

Font

colour

color

Set the

colour

color of all text and icons in the navigation menu. Scroll down this page to learn how to use the color picker.

Text size

Set the size of all text in the navigation menu.

Item background

colour

color

Set the background

colour

color of all navigation menu items. Scroll down this page to learn how to use the color picker.

Menu type

Set the menu

behaviour

behavior:

  • Static - The menu stays at the top of the screen when you scroll. Good for when you want to save some screen space.

  • Fixed - The menu stays at the top of the screen while you scroll. Good for when you want to have the navigation available at all times.

  • Shy - The menu disappears when you scroll down, and shows up again when you scroll up. Good for when you want to save some screen space, but want the navigation handy at the same time.

Spacing

Choose if you want the menu’s distance from the top of the page to be default or spacious

Border

Set a border around the header. Once enabled, you can pick the border’s

colour

color: Scroll down this page to learn how to use the color picker.

Shadow (Effects)

Drop a shadow behind the header. Once enabled, you can pick the shadow’s

colour

color: Scroll down this page to learn how to use the color picker.

Content

Customise

Customize the area’s content with:

  • Effects (shadow)

Colour

  • color of the shadow

  • Corners (toggle on to round the corners)

Style

Set the background shape of all navigation menu items.

Alignment

Set the alignment

colour

color of all navigation menu items.

Dropdown

Scroll down this page to learn how to use the color picker.

Drop-down style

Set the style of navigation menu drop down lists: light or dark.

The footer is located at the bottom of the site.

Info

If you last edited the footer before 31 May, it may look different than expected when you edit it. This is because we updated our editor.

The look of a footer used to be determined by settings located in two different places: in the Theme Editor and in the editor on your site. This used to be the outdated Layout Editor, which is now replaced by the Page Builder. Now you conveniently control all settings right in the Page Builder.

Because we moved the settings from the Theme Editor into the Page Builder, the footer may look differently than expected at first. It’s easy to change the design in the Page Builder before publishing the page. Additionally, the design may look different than expected if you use custom CSS on the site or HTML modules in the footer.

Setting

Description

Background

Set a single

colour

color, gradient or image as background

. Customise

. Scroll down this page to learn how to use the color picker.

Customize images with these additional settings:

  • Full, repeat or without repeat

  • Position the image

  • Filter (blur, shade, monochrome, vintage)

  • Set an underlying

colour

  • color

Header

colour

color

Set the

colour

color of all text headers. Scroll down this page to learn how to use the color picker.

Text

colour

color

Set the

colour

color of all body text. Scroll down this page to learn how to use the color picker.

Link

colour

color

Set the

colour

color of all the text that links to another page. Scroll down this page to learn how to use the color picker.

Border

Set a border around the footer. Once enabled, you can pick the border’s

colour

color. Scroll down this page to learn how to use the color picker.

Shadow (Effects)

Drop a shadow behind the footer. Once enabled, you can pick the shadow’s

colour.

...

color. Scroll down this page to learn how to use the color picker.

Landing pages

Setting

Description

Width

The default width is 1200px (75 rem). You can set a new width by percentage (of browser window width), pixels, or rem.

Fill background

Makes the content fill out the full width of the browser window. This has the same effect as setting the Width to 100%. When the background is filled, you

are not able to

can’t set the width manually. 

Row style

  • No style - every horizontal section is white.

  • Alternating - sections alternate between white and grey. 

  • Separating line - a thin grey line separates the sections

(

  • . This setting is only applicable to pages build in the Layout Editor

:

  • .

Info

This setting only applies to pages created with the legacy Layout Editor, and doesn’t apply to pages created in the Page Builder. In the Page Builder, you can add dividers

yourself, which gives you more control over your design)

where you see fit, giving you more freedom in designing backgrounds.

Title position

Position the title to the left, center or right.

Jira issues and JSM requests

These settings apply to the Jira issues and JSM requests content in your site’s body area. See the Main appearance General section above for more body settings.

Setting

Description

Width

The default width of Jira issues and JSM requests is 1200px (75 rem). You can set a new width by percentage (of browser window width), pixels, or rem.

Confluence pages

These settings apply to the Confluence pages and blogs in your site’s body area. See the Main appearance General section above for more body settings.

Setting

Description

Width

The default width of Confluence pages is 1200px (75 rem). You can set a new width by percentage (of browser window width), pixels, or rem.

...

Color picker

There are multiple ways to pick a colour in the colour selection popupcolor:

  • Select the shade and hue at the top of the popup.

  • Enter an rgbRGB, rgbaRGBA, or hex code.

  • Click the eyedropper icon to select a colour color from anywhere on the page (available in the browsers Firefox and Edge).

  • Pick Click one of the recently used colourscolors.

Use the vertical slider located in the middle of the popup to control the colour’s color’s opacity.