1969 Dec 31

How to change the system

All system files are located in the system folder. You can change your website here.

The system/extensions folder contains configuration files and the log file. You can change the appearance of your website in the system/layouts folder and system/themes folder. You can change all layouts and themes as you like. Knowledge of HTML, CSS and JavaScript is required. It is better not to change any files in the system/workers folder.

System settings

The main configuration file is system/extensions/yellow-system.ini. Here's an example:

Sitename: Anna Svensson Design
Author: Anna Svensson
Email: anna@svensson.com
Language: en
Layout: default
Theme: stockholm
Parser: markdown
Status: public

You can use a web browser or your computer to change the system settings. The system settings contain the settings of your website and of all installed extensions. The following settings can be configured:

Sitename = name of the website
Author = name of the webmaster
Email = email of the webmaster
Language = default language, e.g. en
Layout = default layout
Theme = default theme
Parser = default content parser
Status = default page status, supported status values

Language settings

The language settings are stored in file system/extensions/yellow-language.ini. Here's an example:

Language: en
CoreDescription: Core functionality of your website.
CorePaginationPrevious: ← Previous
CorePaginationNext: Next →
CoreTimeFormatShort: H:i
CoreTimeFormatMedium: H:i:s
CoreTimeFormatLong: H:i:s T
CoreDateFormatShort: F Y
CoreDateFormatMedium: Y-m-d
CoreDateFormatLong: Y-m-d H:i
media/images/photo.jpg: This is an example image

You can define the language settings here. A language consist of Language and other settings. The language settings contain the settings of all installed extensions. You can also add your own language settings to the configuration file, for example image captions.

User settings

The user settings are stored in file system/extensions/yellow-user.ini. Here's an example:

Email: anna@svensson.com
Name: Anna Svensson
Description: Developer and designer
Language: en
Access: create, edit, delete, restore, upload, configure, install, uninstall, update
Home: /
Hash: $2y$10$j26zDnt/xaWxC/eqGKb9p.d6e3pbVENDfRzauTawNCUHHl3CCOIzG
Stamp: 21196d7e857d541849e4
Pending: none
Failed: 0
Modified: 2000-01-01 13:37:00
Status: active

You can use a web browser or the command line to create new user accounts. A user account consists of Email and other settings. If you don't want that pages are modified in a web browser, then restrict user accounts. Open the configuration file, change Access and Home. Users are allowed to edit pages within their home page, but nowhere else.

Extension settings

The extension settings are stored in file system/extensions/yellow-extension.ini. Here's an example:

Extension: Core
Version: 0.9.3
Description: Core functionality of your website.
Developer: Anna Svensson
Tag: feature
DownloadUrl: https://github.com/annaesvensson/yellow-core/archive/refs/heads/main.zip
DocumentationUrl: https://github.com/annaesvensson/yellow-core
DocumentationLanguage: en, de, sv
Published: 2024-04-24 14:38:12
Status: available
system/workers/core.php: core.php, create, update

You can see the installed extensions here. An extension consist of Extension and other settings. The extension settings contain information about all installed files. You can also see which developer, designer or translator is responsible for an extension. Find extensions for your website.

Page settings

The following settings can be configured at the top of a page:

Title = page title
TitleContent = page title shown in content
TitleNavigation = page title shown in navigation
TitleHeader = page title shown in web browser
TitleSlug = page title used for saving the page
Description = page description
Author = page author(s), comma separated
Email = email of page author
Language = page language, e.g. en
Layout = page layout
LayoutNew = page layout for creating a new page
Theme = page theme
Parser = page content parser
Status = page status, supported status values
Redirect = redirect to a new page or URL
Image = page image
ImageAlt = description of the page image
Modified = page modification date, YYYY-MM-DD format
Published = page publication date, YYYY-MM-DD format
Tag = page tag(s) for categorisation, comma separated
Generate = option(s) for generating a static website, comma separated
Comment = option(s) for showing comments, comma separated

The following page status values are supported:

public = page is a normal page
private = page is not visible, user needs to enter password, requires private extension
draft = page is not visible, user needs to log in, requires draft extension
unlisted = page is not visible, but can be accessed with the correct link
shared = page is not visible, but can be included in other pages

Log file

The log file can be found in file system/extensions/yellow-website.log. Here's an example:

2024-04-28 14:13:07 info Install Datenstrom Yellow 0.9, PHP 8.1.27, Apache 2.4.33, Mac
2024-04-28 14:13:07 info Install extension 'Core 0.9.9'
2024-04-28 14:13:07 info Install extension 'Markdown 0.9.1'
2024-04-28 14:13:07 info Install extension 'Stockholm 0.9.2'
2024-04-28 14:13:07 info Install extension 'English 0.9.2'
2024-04-28 14:13:07 info Install extension 'German 0.9.2'
2024-04-28 14:13:07 info Install extension 'Swedish 0.9.2'
2024-04-28 14:23:11 info Install extension 'Fika 0.9.1'
2024-04-28 14:23:11 error Process file 'system/workers/fika.php' with fatal error!

Do you have questions? Get help.

1969 Dec 31

How to change the media

All media files are located in the media folder. You can store your images and other files here.

The media/downloads folder contains files for download. The media/images folder is the place to store your images. The media/thumbnails folder contains image thumbnails. You can also add more folders and organise files as you like. Essentially, any media file can be downloaded from the website.

Downloads

You can provide files for download. All file formats are supported, however the upload may be restricted to file formats MP3, OGG, PDF and ZIP. To add a file, copy the file into the media/downloads folder and make a link. You can also upload files in a web browser, then the link will be added at the desired spot.

Making a link, different file formats:

[Download PDF file](/media/downloads/yellow-english.pdf)
[Download ZIP file](/media/downloads/yellow-main.zip)
[Download audio file](/media/downloads/audio-file.mp3)

Images

You can use the image extension to embed images. The image formats GIF, JPEG, PNG and SVG are supported. To add an image, copy the image into the media/images folder and create an [image] shortcut. You can also upload images in a web browser, then the image is added at the desired spot.

Adding an image, different descriptions:

[image photo.jpg Example]
[image photo.jpg "This is an example image"]
[image photo.jpg "This is an especially long description"]

Adding an image, different styles:

[image photo.jpg Example left]
[image photo.jpg Example center]
[image photo.jpg Example right]

Adding an image, different sizes:

[image photo.jpg Example right 50%]
[image photo.jpg Example right 64 64]
[image photo.jpg Example right 320 200]

Adding an image, different sizes with the default style:

[image photo.jpg Example - 50%]
[image photo.jpg Example - 64 64]
[image photo.jpg Example - 320 200]

Image galleries

You can use the gallery extension or slider extension to embed image galleries. The image formats GIF, JPEG, PNG and SVG are supported. To add a gallery, copy images into the media/images folder and create a [gallery] shortcut. You can also upload images in a web browser.

Adding an image gallery with popup, different sortings:

[gallery photo.*jpg name]
[gallery photo.*jpg modified]
[gallery photo.*jpg size]

Adding an image gallery with popup, different sizes:

[gallery photo.*jpg name zoom 25%]
[gallery photo.*jpg name zoom 50%]
[gallery photo.*jpg name zoom 100%]

Adding an image gallery with slider, different sortings:

[slider photo.*jpg name]
[slider photo.*jpg modified]
[slider photo.*jpg size]

Adding an image gallery with slider, different sizes:

[slider photo.*jpg name loop 25%]
[slider photo.*jpg name loop 50%]
[slider photo.*jpg name loop 100%]

Videos

You can use the Youtube extension to embed videos:

Embedding a video, different videos:

[youtube fhs55HEl-Gc]
[youtube wNiyp89pTi0]
[youtube OV5J6BfToSw]

Embedding a video, different sizes:

[youtube fhs55HEl-Gc right 50%]
[youtube fhs55HEl-Gc right 200 112]
[youtube fhs55HEl-Gc right 400 224]

Do you have questions? Get help.

1969 Dec 31

How to change the content

All content files are located in the content folder. You can edit your website here.

The content folder is available on your website. Every folder has a file called page.md. You can add more files and folders. You can also use special characters in file and folder names, for example ÄÖÅ. In other words, what you see in the file manager is the website you get.

Files and folders

Your website is automatically created from your content folder:

  1. Folders can have a numerical prefix for sorting, e.g. 1-home or 9-about
  2. Files can have a numerical prefix for sorting, e.g. 2020-04-07-blog-example.md
  3. Files and folders without a prefix have no special meaning, e.g. wiki-example.md

Prefix and suffix are removed from the address, so that it looks better. For example the folder content/1-home is available on your website as http://website/. The folder content/9-about is available on your website as http://website/about/. The file content/2-wiki/wiki-example.md is available on your website as http://website/wiki/wiki-example.

While most folders are available on your website, there are two exception. The content/1-home folder must not contain subfolders. The content/shared folder may only be included in other folders, it's not directly available on your website.

Text

You can edit your website in a web browser or text editor. At the top of a page you can change Title and other page settings. Below you can change text and images. Text formatting with Markdown is supported. HTML is also supported. Here are some examples:

---
Title: Example page
---
This is an example page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna pizza. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Formatting text:

Normal **bold** *italic* ~~strikethrough~~ `code`

Making a list:

* item one
* item two
* item three

Making an ordered list:

1. item one
2. item two
3. item three

Making a task list:

- [x] item one
- [ ] item two
- [ ] item three

Making a heading:

# Heading 1
## Heading 2
### Heading 3

Making quotes:

> Quote
>> Quote of a quote
>>> Quote of a quote of a quote

Making links:

[Link to page](/help/how-to-make-a-small-website)
[Link to file](/media/downloads/yellow-english.pdf)
[Link to website](https://datenstrom.se)

Adding images:

[image photo.jpg Example]
[image photo.jpg "This is an example image"]
[image photo.jpg "This is an especially long description"]

Making tables:

| Coffee     | Milk | Strength |
|------------|------|----------|
| Espresso   | no   | strong   |
| Macchiato  | yes  | medium   |
| Cappuccino | yes  | weak     |

Making footnotes:

Text with a footnote[^1] and some more footnotes.[^2] [^3]

[^1]: Here's the first footnote
[^2]: Here's the second footnote
[^3]: Here's the third footnote

Showing source code:

```
Source code will be shown unchanged.
function onLoad($yellow) {
    $this->yellow = $yellow;
}
```

Making paragraphs:

Here's the first paragraph. Text can span over several lines
and can be separated by a blank line from the next paragraph.

Here's the second paragraph.

Making line breaks:

Here's the first line⋅⋅
Here's the second line⋅⋅
Here's the third line⋅⋅

Spaces at the end of the line are shown with dots (⋅)

Making notices:

! Here's a notice with warning

!! Here's a notice with error

!!! Here's a notice with tip

Using CSS:

! {.class}
! Here's a notice with custom class.
! Text can span over several lines
! and contain Markdown text formatting.

Using HTML:

<strong>Text with HTML</strong> can be used optionally.
<img src="/media/images/photo.jpg" alt="This is an example image">
<a href="https://datenstrom.se" target="_blank">Open link in new tab</a>.

Using shortcuts with additional features:

[image photo.jpg]    = adding an image or image thumbnail
[gallery photo.*jpg] = adding an image gallery with popup
[slider photo.*jpg]  = adding an image gallery with slider

Do you have questions? Get help.