Introduction
A simply stunning theme design, which is sure to be a big-hit with fans of
'light on dark' web design! Nocturnal purposefully opts for a minimalist theme design that places maximum emphasis on the beautiful background artwork and your written content. This theme design would be a great-match for a creative showcase, performing arts or music website. As you would expect, Nocturnal is a fully mobile responsive theme design and compatible with all major web browsers.
Swapping the background for your own
The 'Welsh Mountains Under Stars' background image was created from a rather mundane smartphone snap on a hot sunny day! It was edited in Affinity Photo to introduce an HSL layer, a multiplied colour fill and imitation star field. This
video here may help you. It would certainly be feasible to create your own image using a similar technique. We recommend an image 2000px wide and 1000px tall. Drag and drop your completed image into the
Banner drop zone, within the RapidWeaver Page Inspector. For best results, use an image that fades-down to solid black. The animated blinking jet beacon and shooting star effect can be disabled in the theme
Miscellaneous style settings, if they are not wanted.
Fonts
Inverted colour schemes require bigger fonts with more spacing around the lettering and wording. Nocturnal meets this criteria through use of its embedded Open Sans Pro font face and generous font sizing. The text colour is purposefully a slightly off-white colour (#eaeaea) to make the text look less stark. Links are clearly shown in a deeply contrasting colour.
Slogan and sidebar
Both elements are hidden by default in the theme. If the slogan is enabled, this will be displayed towards the top of your webpage. The sidebar can be floated either left or right of the main content container on desktop screens. Separate colour settings exist for the sidebar.
Navigation
Nocturnal is intended for smaller websites with less pages. On both mobile and desktop devices, the parent page links are shown in a fly-out menu, triggered using the button at the top right. Only parent page links are listed here. You can still build a website that contains subpages, but these will not be shown by the theme. You would need to manually create your own links to any subpages you want shown.
ExtraContent
This theme has 14 ExtraContent containers you can use for the placement of additional content, outside the normal editable boundaries. ExtraContent 1 and ExtraContent 2 are both located within the menu container, and are ideal for some social media buttons. Other ExtraContent containers are located throughout the webpage. As always, use the
Preview ExtraContent Containers option in the theme
Miscellaneous settings to see where each one is located. The ones in the sidebar only show if the sidebar is enabled. You can follow the instructions in the Knowledgebase for getting content into these areas, via the stacks or code snippets.
Customising text labels
The text labels of items in Nocturnal are readily customisable with simple CSS code:
#menu_label:before {
content: 'Menu';
}
#lastUpdated:before {
content: 'Webpage updated: ';
}
#breadcrumb:before {
content: 'Currently viewing ';
}
This makes it easier to translate these text strings into different languages, for multilingual websites.