- Fork the template repository -> LinkStackOrg/linkstack-default-theme
- Edit the code
- Draft a new release with a version tag
- Open a new pull request or issue on this repository
Read more...
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
.
└── 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/
Make a fork of this template repository. Here you can find the theme files for the default theme.
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.
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.)
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.
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.
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:
<script src="{{themeAsset('your.js')}}"></script> <style>body{background-image: url({{themeAsset('your.png')}});}</style>
You can download all the icons used for the buttons from here.
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.
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.
Once you followed all these steps, you may open a pull request or issue on this repository to get included in the official theme list.
