Overview

The Lumen & Line website shows the studio's work to people planning a house, an interior, an extension or a public room, and lets them send a project inquiry. Everything a visitor sees, from the Home page slideshow to each project's gallery, is edited in the staff area without touching code.

The staff area has one account, the studio administrator. This manual walks through every page of the staff area in menu order, then the public website and, at the end, installing the site and the first sign-in.

How the pieces fit together

Content edited in the staff area goes live on the website when you save; pictures come from the media library; inquiries from the Contact page arrive in Messages.

What is in this manual

1. Getting Started

1.1 Signing in

Click Staff sign in at the bottom of any public page, or go to /AdminLogin. Type your user name and password and click Sign in.

• A wrong user name or password shows The user name or password is not right.
• After six wrong passwords for one user name within five minutes, the page says Too many wrong passwords. Please wait five minutes and try again.
• You stay signed in while you work. After 8 hours without opening a staff page you are signed out and the next click takes you back to this page.
• Sign out at the top right ends the session on this browser.

1.2 Finding your way around

Every staff page has the same frame.

The staff frame: header, menu on the left, the page on the right. The red number beside Messages counts inquiries nobody has opened yet.

1.3 Searching and paging lists

Projects, Services, Team, Journal and press, Messages, the Media library and the Activity log all work the same way:

• Type in the search box and the list updates a moment after you stop typing.
• Filter buttons such as All, Journal and Press show a count beside each name. Choosing a filter or typing a search goes back to page 1.
• Under the list, a line such as Page 1 of 2 · 14 services and the Previous and Next buttons move between pages.
• After you save, move or delete, the list stays on the page you were on.
• When nothing matches, the list says so, for example No services match.

1.4 Confirmations and unsaved changes

Anything that removes something asks first. The question names what will happen; the red button does it and Keep it steps back.

Left: deleting a team member. Right: closing a window after typing something asks Leave without saving?

• Enter confirms; Esc, a click outside the box or the left button step back.
• Forms with a Save button do not ask again when you save. Closing such a window, or leaving the Pages editor with unsaved changes, asks Leave without saving? first.
• Esc also closes an open window or the phone menu.

1.5 On a phone

The staff area works on a phone. The menu opens from the ☰ button at the top left, and tables become one card per record.

The Dashboard, the menu and Messages on a phone.

2. Dashboard

The Dashboard opens after you sign in. It shows what needs attention and links to every part of the staff area.

2.1 The tiles

2.2 Latest inquiries and recent activity

• Latest inquiries lists the four newest messages with their status. Click one to open it in Messages, or Open inbox for all of them.
• Recent activity shows the last five entries of the activity log; refused actions carry a Refused mark. Open log goes to the Activity log.

2.3 Quick actions

Edit the Home page, Add a project, Open the media library and View the website (in a new tab).

3. Pages

The Pages editor changes the public pages in place: the Home page top and its slideshow, the text sections, the cards, steps and questions. The page is shown as a stack of blocks, in the order they appear on the website.

3.1 Choosing a page

The buttons above the blocks pick the page: Home, Projects, Services, Studio, Journal and press and Contact. The Project page for each project is edited in Projects, not here.

When you have changed something, Unsaved changes shows beside the buttons. Switching to another page then asks Leave without saving?; choose Stay and save first.

3.2 Changing text

1. Click the text you want to change, for example a title or a paragraph, and type.
2. In paragraphs, the small toolbar has Bold, Italic, Link, List and Clear formatting. For a link, select the words first; the box asks for a page name such as Contact or a full address starting with https://.
3. Buttons have two boxes: the button text and where it goes (a page name such as Projects, or a full address).
4. Click Save page. The message Home saved. It is live on the website. confirms it.

3.3 Pictures and videos in a block

Click a picture in a block, or the empty picture box, to open the media library picker. Click a picture to use it; search by name or description at the top, or Upload new to add a file from your computer and use it.

The picker shows the media library. The page top and Picture or video blocks also take MP4 videos.

Under a chosen picture, Change opens the picker again and Remove empties the box. The file stays in the media library.

3.4 The Home page slideshow

The top of the Home page is a slideshow. The picture in the Page top block is the first slide; the Slides list below it holds the others.

1. Click + Add a slide and choose a photo from the library.
2. Type a caption, for example Entrance hall. It shows in the corner of the picture.
3. Use the arrows under a slide to change the order, or remove it.
4. Click Save page.

• The slides change every 7 seconds. Visitors can also step through them with the arrows and dots, or swipe on a phone.
• Slides are photos only, up to 8 besides the first picture. A slide whose picture was removed from the library is refused when you save: A slide picture is no longer in the media library, or is a video. Choose it again.

3.5 Moving, hiding and removing blocks

Each block has a bar at the top with these controls:

Inside cards, steps, numbers, checklists, people and questions, each item has its own arrows and remove button, and + Add a card (or step, question...) adds one. A block holds up to 12 items.

3.6 Adding a block

Below the last block, Add a block lists the kinds of block. Click one and it appears at the end of the page; move it into place and fill it in.

A page holds up to 40 blocks.

3.7 Blocks that come from your data

Some blocks show records kept on other staff pages. They are marked From your data and carry a short note on where to change them.

These blocks cannot be removed, but you can move them, change their titles and short text, or hide them.

3.8 Saving, viewing and earlier versions

• Save page makes the page live right away.
• View page opens the page on the website in a new tab. With unsaved changes it says Save first to see your changes on the website.
• Versions lists the last five saved versions of the page, with who saved each and when.

To go back, click Restore beside a version and confirm. The page changes on the website right away, and the version you replaced stays in the list, so you can switch back.

4. Media library

Every photo and video on the website lives in the media library: page blocks and slides, project covers, galleries and before and after pairs, service pictures, team portraits and journal covers. Other staff pages choose from it rather than uploading their own copies.

4.1 Uploading photos and videos

1. Click Upload photos or videos and choose one or more files, up to 20 at a time.
2. Wait for 3 files added to the library. (or the number you chose). Large videos can take a minute.

The library checks what each file really contains, not just its name. A file that is not one of these kinds, or is too big, is left out with a line such as plan.pdf is not a JPG, PNG, WebP, GIF or MP4 file.; the others are still added.

4.2 Finding a file

The newest files come first, 24 to a page. All, Photos and Videos narrow the list, and the search box looks in the file name, the description and the staff note. The line above the grid counts photos and videos, and how many are shown when a filter is on.

Each tile shows the kind, the size and how often the file is used, for example Photo · 23 KB · used once.

4.3 Describing a file

Click a picture or Edit to open it.

• Description for screen readers (alt text): say what the picture shows, in a few words. It is read aloud to visitors who cannot see the picture, and used wherever the picture appears. Up to 160 characters.
• Note for staff (optional): for you only, and searchable. Up to 200 characters.
• Used in lists every place on the website that shows the file.

Click Save.

4.4 Deleting a file

A file that is still used cannot be deleted. Clicking Delete on it shows where it is used instead:

1. Open the pages listed under Used in and choose another picture there, or remove it.
2. Come back and click Delete (or Delete file in the file window).
3. Confirm with Delete file. The file is removed from the library and the server for good.

5. Projects

Projects are the studio's portfolio: the cards on the Projects page, a Project page for each with its story, gallery and before and after pairs, and the selection on the Home page.

5.1 The project list

• The buttons All, Houses, Interiors, Cafés and workplaces and Extensions filter by type; the search box looks in the name, the place and the scope of work. Ten projects show per page.
• The status column shows Published or Hidden, and On Home when the project is in the Home page selection.
• The order of the list is the order on the website. Use the up and down arrows to move a project; they show when no filter or search is on.

5.2 Adding or changing a project

Click Add a project, or Edit on a project.

Click Add project or Save project. A field that needs attention shows a red line under it and nothing is saved until it is fixed. View on the website opens the Project page in a new tab.

5.3 The gallery

1. Click Choose gallery pictures.
2. Click pictures to add or remove them; the number on each shows the order. Up to 12.
3. Click Use 6 pictures (the button counts your choice).
4. In the window, type an optional caption under each picture, and use the arrows to change the order or × to take a picture out.

5.4 Before and after pairs

A pair shows the same view before and after the work. On the Project page, visitors drag a handle across the picture to compare them.

1. Click Add a before and after pair.
2. Choose the Before and the After picture, and type an optional caption.
3. Remove this pair takes it out again.

Up to 4 pairs per project. Each pair needs both pictures; a pair with one missing is refused with Each before and after pair needs both pictures from the media library.

The before and after slider on the Maple Row Kitchen page.

5.5 Deleting a project

Click Delete and confirm with Delete project. The project is removed from the website; its pictures stay in the media library. To take a project off the website for a while, untick Show on the website instead.

6. Services

Services are what the studio offers. They appear on the Services page with their points and typical duration, and as cards on the Home page.

6.1 The service list

Search by service name or summary; ten services show per page. The arrows set the order on the website and show when no search is on.

6.2 Adding or changing a service

Click Add a service, or Edit on a service.

6.3 Deleting a service

Click Delete and confirm with Delete service. The service is removed from the website; its picture stays in the media library.

7. Team

Team holds the people shown on the Studio page, in this order. These are website profiles, not sign-in accounts.

7.1 The team list

Search by name or role; twelve people show per page. Each person is Shown or Hidden. The arrows set the order on the Studio page and show when no search is on.

7.2 Adding or changing a person

Click Add a person, or Edit on a person.

• Name and Role are required, for example Project architect.
• Short bio: up to 400 characters.
• Portrait (optional): from the media library; it shows in a circle.
• Show on the Studio page: untick to hide the person without deleting them.

Click Add person or Save person.

7.3 Deleting a person

Click Delete and confirm with Delete person. The person is removed from the Studio page; their portrait stays in the media library.

8. Journal and press

One page on the website shows two kinds of entry, newest first: journal entries written by the studio, which open as an article on the website, and press pieces, articles elsewhere that mention the studio, which link to the publication.

8.1 The list

• All, Journal and Press filter by kind; the status list shows All statuses, Published or Hidden only.
• The search box looks in the title, the topic and the publication. Ten entries show per page, newest date first.

8.2 Writing a journal entry

1. Click Add a journal entry.
2. Fill in Title, Date and Short summary (at least 10 characters, shown on the cards).
3. Type a Topic, for example Materials. Entries with the same topic share a filter button on the Journal page; the box suggests topics already in use.
4. Write the Entry text, at least a couple of sentences.
5. Choose an optional cover picture, keep Show on the website ticked, and click Add entry.

8.3 Adding a press piece

1. Click Add a press piece.
2. Fill in Title, Date and Short summary.
3. Type the Publication and the Address of the article, starting with https://. On the website the card opens that address in a new tab.
4. Choose an optional cover picture and click Add entry.

8.4 Hiding and deleting entries

Untick Show on the website to hide an entry; it stays in the list as Hidden. Delete asks first and, after Delete entry, removes it from the website for good.

9. Messages

Messages holds the project inquiries sent from the Contact page. Replies go by email or phone; set the status here to keep track of who has had an answer.

9.1 How an inquiry arrives

A visitor fills in the form on the Contact page and clicks Send inquiry.

The form, and the thank-you note with the visitor's reference.

• Name, email, a short description of the project and the You may contact me about this inquiry. tick are required. Phone, place, type of project, budget and start time are optional; the budget and start-time choices come from Settings.
• The thank-you note shows a reference such as iq-br8hur. The same reference is in the message, so you can find it when the visitor quotes it.
• The new message shows at once with the status New, and the red number beside Messages in the menu goes up by one.
• One connection can send 5 inquiries in 10 minutes. After that the form says Too many inquiries from this connection. Please try again in a few minutes, or call the studio.

9.2 Statuses

9.3 Opening and answering a message

1. Use the status buttons (All, New, Read, Replied, Archived) or search by name, email or message. Unread messages have a red dot. Ten show per page.
2. Click a message. Opening a New message marks it Read.
3. Reply by email or phone: the email address and phone number in the window are links.
4. Set Status to Replied and write a Private note, for example when you called and what was agreed. The note is never shown to the visitor; up to 600 characters.
5. Click Save.

Delete message asks first and removes the message for good; this cannot be undone. To clear the list without losing anything, set the status to Archived instead.

10. Settings

Settings holds the studio details shown in the footer and on the Contact page, the choices in the inquiry form and the largest video the media library accepts.

10.1 Studio details

10.2 Inquiry form

Budget ranges and Start times are the choices in the Budget and start-time fields of the Contact form. Write one per line, up to 8, each up to 40 characters. Each list needs at least one line.

10.3 Media library

Largest video (MB) sets the biggest MP4 file the media library accepts, a whole number from 1 to 100. Photos can always be up to 8 MB.

Click Save settings. The website shows the new details at once.

11. Activity log

The Activity log records every change made in the staff area and every refused request, newest first. It answers questions such as when was the Home page last saved? or who changed this message?

• Each line shows When, Who, the Action, its Target and the Result: Done or Refused.
• All, Done and Refused filter the list; the search box looks in the action and the target. Fifteen entries show per page.
• Refused entries include wrong passwords at the sign-in page and deletes that were not allowed, such as a media file still in use.
• The latest 5,000 entries are kept; older ones drop off.

12. My account

My account changes the name and role shown at the top of every staff page, and your password.

12.1 Your details

Type your Name and the Role shown in the header, for example Studio director, and click Save details. The user name, admin, does not change.

12.2 Changing your password

1. Type the Current password.
2. Type the New password twice. Use at least 8 characters, different from the current one.
3. Click Change password.

Changing your password signs you out of every other browser; the one you are using stays signed in.

13. The Public Website

The website has seven pages. Each is listed here with where its content is edited.

On a phone the menu folds into the ☰ button and the slideshow fills the width.

13.1 The pages

The Projects page and the Studio page.

13.2 A visitor's path

The Start a project button in the header of every page opens the Contact page. Every page footer also has Staff sign in.

14. Installation & Setup

This chapter is for the person who puts the website online. It runs on ASP.NET Core (.NET 10) and keeps its content in files, so no database is needed.

14.1 Run mode

The file appConfig/application.cfg has the line app.app.runmode. As delivered it is 0, a setting for trying the site out: the sign-in form is filled in for you. Before going live, change it to:

app.app.runmode | 1

With 1, the administrator signs in with a real password.

14.2 The first start

The first time the site starts with run mode 1, it clears the records that came with the template, once:

• Removed: the inquiries in Messages, the activity log and any sign-in account.
• Kept: pages, projects, services, team, journal and press, settings and the media library. Replace the invented studio content with your own in the staff area.

It then writes data/initialized.txt. While that file is there, later starts never remove anything.

14.3 The first sign-in

1. Open /AdminLogin in a browser on the computer the site runs on. A First sign-in box shows the user name admin and a password made for this site. The same two lines are in appConfig/initial-admin.txt.
2. Type them and click Sign in.
3. The page asks you to Choose your own password to continue. Type a new password twice, at least 8 characters and different from the first one, and click Sign in.
4. The Dashboard opens. The box no longer shows and initial-admin.txt is deleted. Set your name in My account.

The First sign-in box (password hidden here) and the step that asks for your own password.

• Lost the first password before using it? Delete appConfig/initial-admin.txt and open the sign-in page again; a new one is made.
• Forgot your own password? Delete data/staff.json and open the sign-in page again. The site makes the admin account again with a new first password. Your content is not touched.

14.4 Putting the site online

1. Publish the project with its web.config (IIS) and use HTTPS.
2. Give the application pool permission to change files in data/, temp/, appConfig/ and images/uploads/. Without it, saving and uploading fail, for example could not be saved. Check that the server may write to images/uploads.
3. In a browser, check that /data/staff.json and /appConfig/initial-admin.txt answer 404. The web.config hides these folders.

14.5 Backups and updates

All content lives in two places: the data/ folder (pages, projects, services, team, journal, settings, messages, the activity log and the sign-in account) and images/uploads/ (files uploaded to the media library).

• Copy both folders regularly; together they are the whole website.
• When you publish a new version of the site, download the live data/ and images/uploads/ first, or leave them out of the publish. Publishing copies the project's own files over the live ones.

15. Reference

15.1 Limits

15.2 Status words

15.3 Keys

16. Quick Answers

16.1 Common questions