Configuration

This page covers how to configure each web part in DIY Intranet Home. All settings are managed through the property panel on the right-hand side of the page — no code or technical knowledge is required.

To open the settings panel, edit the page and click the Edit Properties (icon) on any web part.

Understanding Layouts

Every web part supports two layout options that can be switched at any time from the Layout settings group.

Layout	Description
Layout 1 — Standard	Clean card-based style with borders on all sides of each item.
Layout 2 — Accent Bar	Modern style with a coloured top border only.

Understanding Theme Colours

All colour dropdowns in DIY Intranet Home read your site's theme palette automatically. When you select a colour, a swatch preview appears below the dropdown so you can see the result before saving. You can also use the full colour picker to enter any custom hex value.

1. Welcome Banner

The Welcome Banner greets each employee by name with a live clock and a customisable background image. Below the greeting, personal dashboard cards surface the user's meetings, tasks, and training from their Microsoft 365 account.

⚙️ General Settings

Name	Purpose	Control Type
Welcome message	The greeting text displayed on the banner. Use `{firstName}`, `{lastName}`, or `{fullName}` as placeholders replaced with the logged-in user's name (e.g. `Welcome back, {firstName}!`).	Text field
Format Date and Time	Controls how the date and time are displayed below the greeting.	Dropdown
Change background	Upload or select a background image for the banner. Stored in Site Assets.	File picker
Background Image Scaling	How the background image fills the banner area. Options: Cover, Contain, Auto, Stretch, Center.	Dropdown
Dashboard URL	The web address for the "Go to My Dashboard" link on the banner. Leave blank to hide the link.	Text field

📸 View General Settings Screenshots

📐 Layout Settings

Name	Purpose	Control Type
Choose Layout	Switch between Layout 1 (standard banner) and Layout 2 (banner with a separate dashboard panel below).	Dropdown

📸 View Layout Settings Screenshots

🎨 Appearance Settings

Name	Purpose	Control Type
Text color (Greeting + date/time)	Colour of the greeting text and clock.	Colour picker
Background color (Greeting + date/time)	Background colour behind the greeting text area. Useful for readability over busy photos.	Colour picker
Dashboard card color	Background colour for the personal dashboard cards. Visible when the dashboard is shown.	Colour picker
Dashboard background gradient	Choose a gradient from your site's theme palette for the dashboard section background. Available in Layout 2 when gradient is enabled.	Dropdown
Dashboard background color	Solid colour for the dashboard background. Shown when gradient is disabled in Layout 2.	Colour picker
Enable Gradient	Toggle the gradient effect on or off for the dashboard background.	Toggle
Hide Dashboard	When on, the personal dashboard cards are hidden and only the greeting banner is shown.	Toggle

📸 View Appearance Settings Screenshots

🤚🏻 Draggable Configuration

Name	Purpose	Control Type
Enable Draggable Components	When on, users can drag user welcome cards around and their positions are saved.	Toggle
Reset Component Positions	Moves cards back to their original default positions.	Button

📸 View Draggable Settings Screenshots

2. Announcement

The Announcement web part shows a rotating carousel of company messages. Each announcement can include a link, an expiry date for automatic removal, and an optional icon image.

Announcements