The main story layout has more of a Windows PC theme, but I really wanted the layout to be customisable and it was much easier to do that with a Mac theme.

I put a lot of work into it and it was probably the layout that took me the longest. but since I lack knowledge in code, it is a bit fragile, feel free to DM me if you have any problems with the layout. I also have no issues if you’d rather use a different one as long as the content is the same. For the time being please do not take this layout and use it for anything other than an app for this story, thank you. 

And once again credit to edelweiss open source codes as I took direct snippets from it and I wouldn’t have been able to do it without them.

Here is a brief tutorial:

Use shift + enter, for new line.

While in the editor the layout will look a bit off, but it should look fine when published, so I wouldn’t recommend mucking with that. 

How to change the background image

Most of the photos in the app can be changed by double-clicking on the photo in the editor. The background is the one exception. You have to go into the source, it's one of the first things up the top, but the current photo is "https://imgur.com/bEtxM4s.gif".
Simply remove that and add the link to your desired image or gif. (Either will work). I'd use Imgur to avoid any problems, though sometimes when you copy an Imgur link it doesn't include the file type like this "https://imgur.com/bEtxM4s" so make sure to add .gif/jpg/png to it otherwise it won't work. The size is 940 width x 776 height.

To change colours:

The round dots colour can be changed in the text editor the same way you would any other text.

To change any other colour go into the source editor and simply search for the code listed below of the thing you want to change (crtl or cmd f) and replace it with the colour of your choice. You can use a hex code finder like here.

Keep in mind that some colours are used multiple times for visual cohesion.

The border - #343434
Music player - #C0C0C0
Sticky notes / trivia - #FBF4BE
 Photobooth, anything else section, and top bars of pretty much everything. #ededed
Background for basics section / profile #BCD9EA
Accent colour for basics section / profile #5D918C
Border colour for the photo on the basics section / profile #7b78bf
Background for personality, background and wiki: #fafafa
The very thin borders around most of these are #555

How to change the song:
Btw it's totally fine to not change the song, it's just there as an option for people who want to use it ^^

1: First go to Soundcloud and search for the song you want to use, and copy the link.
2: Go back to the layout,  double click the “frame” or you can do it directly in the source code editor crtl/cmd + f soundcloud.
3: The highlighted text here is the part you need to swap, do not remove anything outside of the highlighted text otherwise the sound will stop working entirely.
https://w.soundcloud.com/player/?url=https://soundcloud.com/newjeans-music/ditto&show_artwork=false&color=000
You need to remove the highlighted part above, and then paste in the Soundcloud link you copied.

For example
https://w.soundcloud.com/player/?url=https://soundcloud.com/ive59257/either-way?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing&show_artwork=false&color=000

I think it depends on how you copy it, but the link will often have the part about social sharing, it doesn’t seem to have any impact on if it works, so don’t worry if it looks slightly different. Some Soundcloud links might also be longer than others the main thing is you need to keep these parts:
https://w.soundcloud.com/player/?url= (insert song link) &show_artwork=false&color=000 
It should work.

For aesthetics, this is how to change the play button colour. You see the part that is &show_artwork=false&color=000  just change the 000 to whatever colour you want's hex code code such as #5b9cb0, but you can't use the hash. So just go &show_artwork=false&color=5b9cb0 

Things that are more tricky to change
I wanted the music player to be customisable, but it's not as easy as I'd like it to be.  the progress bar & back, next, buttons are photos. I actually got them off Figma here, if you open this up on Figma you can quite easily change the colour download it and swap out that version. But that may be complicated if you've never used Figma before. So you can also just find photos that fit the colours you want instead or, download the photos and change the colours in whatever software you're most familiar with.

The red Photo Booth icon is also a photo. If you want you could swap it out for a different icon or save the image and change the colour yourself.

Source code ( app in italics lol) here. 

I apologise me adding a note to the beginning of the layout seemed to have put it all in italics and I didn't realise chdihdi3o3. Part of me wonders if it looks better like that actually, but since it wasn't the way I originally intended I've also added the og code that isn't in italics. Use whichever one you prefer. 

Orginal intended layout source code