Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/LinkStackOrg/linkstack-themes

A list of themes for LinkStack. Customize the look of your LinkStack instance with themes. Themes allow you to change the look and feel of your site with a few clicks. Users can submit themes they created for everyone to download and use.
https://github.com/LinkStackOrg/linkstack-themes

linkstack

Last synced: 9 days ago
JSON representation

Host: GitHub
URL: https://github.com/LinkStackOrg/linkstack-themes
Owner: LinkStackOrg
Created: 2022-05-18T09:39:29.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2024-09-18T10:36:58.000Z (about 2 months ago)
Last Synced: 2024-09-18T14:11:30.772Z (about 2 months ago)
Topics: linkstack
Language: HTML
Homepage: https://linkstack.org/themes
Size: 140 KB
Stars: 66
Watchers: 3
Forks: 3
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

🖌️ LinkStack Themes

LinkStack themes to customize your personal page.

⚠️ Note that this page contains user generated content

Alternative Site

🫂 Contribute

Contribute by making your own custom themes.

1. [Fork the template repository](#1) -> [LinkStackOrg/linkstack-default-theme](https://github.com/LinkStackOrg/linkstack-default-theme)
2. [Edit the code](#2)
3. [Draft a new release with a version tag](#3)
4. [Open a new pull request or issue on this repository](#4)

### Theme V2 update:

Theme V2 is the update to the theme system that allows theme-makers to make use of long awaited features.

**These features include:**
- Ability to disable custom styled buttons created by the button editor.
- Ability to open links in the same tab
- Ability to use custom code such as Blade, PHP, HTML, JS and CSS
- Ability to use custom assets and files such as CSS, JS or image files
- Ability to add custom icons
- Ability to make use of other file types for the custom icons instead of being limited to SVGs

#### File tree:


.

└── your-theme/

    ├── animations.css

    ├── brands.css

    ├── config.php

    ├── preview.png

    ├── readme.md

    ├── share.button.css

    ├── skeleton-auto.css

    └── extra/

        ├── custom-body-end.blade.php

        ├── custom-body.blade.php

        └── custom-head.blade.php

			├── custom-assets/

			└── custom-icons/

## 1. Fork the template repository
Make a fork of this [template repository](https://github.com/LinkStackOrg/linkstack-default-theme). Here you can find the theme files for the default theme.

## 2. Edit the Code

**Note:** Before committing your new theme to this theme repository, edit the readme.md to fit your created theme. Make sure to include all additional assets used to create your custom CSS.

Make sure to include a preview image of your theme. This preview image should show both dark and light mode, if applicable. You may add custom text or descriptions to this image, just make it an adequate representation of your theme. Please keep this image in a `16:9` aspect ratio and don't scale it higher than `1920x1080p`. Make sure to use a PNG as the file type.

### 2.1 Edit the CSS

Customize the files to fit your idea.

Default theme uses `prefers-color-scheme` to switch between dark and light mode. You can either keep this format and adjust the colors to your liking, or set one color theme for both modes.

(for CSS only themes this is the only step you'll need.)

### 2.2 Edit the config

The theme config allows you to configure how LittleLink Custom should treat your theme.
All settings are explained with comments in the config file.

If you edited your buttons in the previous step, your theme may not be compatible with custom buttons created by the Button Editor.
You can disable the use of custom buttons in the config.

If you want to use custom code like HTML, JavaScript or custom icons in your theme you can enable this here as well.

### 2.3 Adding custom code

The new theme system allows you to inject custom code at three places on your page: in the head, body and at the end of the body tag.

You can add your custom code with 3 individual files in the "extra" folder with the files:


custom-body-end.blade.php

custom-body.blade.php

custom-head.blade.php

Here you can write your code in the following languages: Blade, PHP, HTML, JS and CSS.

Further instructions are provided in the individual files as comments.

### 2.4 Adding custom assets

The theme system gives you the option to add custom assets to your page.

You will have to declare these additions in the file custom-head.blade.php (others work too if required).

Custom assets are stored in the 'custom-assets' directory found inside the 'extra' folder.
Custom assets can be any file you would like to use in your theme.
For example: JS, CSS or image files.

You can load these custom assets with a built-in function, 'themeAsset()'.
Add the file you want to add to your 'custom-assets' folder, and include the name with the file extension in the function.

For this the file and custom code have to be enabled in the config.php



Down below, you can find a few examples using this function:

body{background-image: url({{themeAsset('your.png')}});}

### 2.5 Add custom icons

You can download all the icons used for the buttons from [here](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FLinkStackOrg%2FLinkSTack%2Ftree%2Fmain%2Flittlelink%2Ficons).

For custom icons to apply you have to enable them in the config first.

Include your edited icons in the "custom-icons" folder while keeping the original file names.

You can use other file types like PNG, JPG, etc. by defining a custom file extension in the config.

## 3. Draft a new release with a version tag
Create a new release for your theme in your forked repository. The download URL for that release will later be used to download the font. Create a new tag for your new release. Your first tag should always be v1.0.

**Note:** Please keep the final release file below 2 Megabyte to insure maximum compatibility. For this, it is recommended to compress any images used. This can easily be done online on a site like [tinypng.com](https://tinypng.com).

## 4. Open a new pull request or issue on this repository
Once you followed all these steps, you may [open a pull request or issue](https://github.com/LinkStackOrg/linkstack-themes) on this repository to get included in the official theme list.

### [For any questions and easier communications, make sure to join our discord community](https://discord.linkstack.org)