Mirror/Cultivation
1
0
Fork 0
mirror of https://github.com/Grasscutters/Cultivation.git synced 2026-02-04 09:25:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Run prettier formatter

Browse Source
This commit is contained in:
Brian Bowman
2022-07-19 04:37:38 -05:00
parent e9df0f17db
commit eb9aa34323
67 changed files with 1157 additions and 1071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
THEMES.md
View File

@@ -2,7 +2,7 @@
1. Download your favorite theme! (You can find some in the `#themes` channel on Discord)
2. Place the unzipped theme folder inside of `%appdata%/cultivation/themes` (The path should look something like this: `cultivation/themes/theme_name/index.json`)
4. Enable within Cultivation!
3. Enable within Cultivation!
# Creating your own theme
@@ -16,16 +16,16 @@ You will need CSS and JS experience if you want to do anything cool.
`index.json` is where you tell Cultivation which files and images to include. It supports the following properties:
| Property | Description |
| :--- | :--- |
| `name` | The name of the theme. |
| `version` | Not shown anywhere, the version of the theme. |
| `description` | Not shown anywhere, the description of the theme. |
| `includes` | The files and folders to include. |
| `includes.css` | Array of CSS files to include. Example: `css: ["index.css"]` |
| `includes.js` | Array of JS files to includes. Example `js: ["index.js"]` |
| `customBackgroundURL` | A custom image URL to set as the background. Backgrounds that users set in their config supercede this. Example: `"https://website.com/image.png"` |
| `customBackgroundFile` | Path to a custom background image file. Backgrounds that users set in their config supercede this. Example: `"/image.png"` |
| Property | Description |
| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | The name of the theme. |
| `version` | Not shown anywhere, the version of the theme. |
| `description` | Not shown anywhere, the description of the theme. |
| `includes` | The files and folders to include. |
| `includes.css` | Array of CSS files to include. Example: `css: ["index.css"]` |
| `includes.js` | Array of JS files to includes. Example `js: ["index.js"]` |
| `customBackgroundURL` | A custom image URL to set as the background. Backgrounds that users set in their config supercede this. Example: `"https://website.com/image.png"` |
| `customBackgroundFile` | Path to a custom background image file. Backgrounds that users set in their config supercede this. Example: `"/image.png"` |
A full, complete `index.json` will look something like this:
@@ -55,15 +55,17 @@ Below are some small examples of what you can do:
```css
/* Change the font */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
```
```css
/* Remove the news section */
.NewsSection {
display: none;
}
```
```css
/* Change the right bar width */
.RightBar {
@@ -72,6 +74,7 @@ body {
```
## How can I change XYZ element?
Every element is documented and describe [here](/docs/elementIds.md). Every\* single DOM element is assigned an ID to allow for easy and hyper-specific editing.
## Writing your JS
@@ -83,24 +86,26 @@ Below are some examples of what you can do:
```js
/* Change the version number every 500ms */
setInterval(() => {
document.getElementById("version").innerHTML = "v" + Math.floor(Math.random() * 100);
}, 500);
document.getElementById('version').innerHTML = 'v' + Math.floor(Math.random() * 100)
}, 500)
```
```js
/* Load a custom font */
const head = document.head
const link = document.createElement("link")
const link = document.createElement('link')
link.href = "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
link.rel = "stylesheet"
link.type = "text/css"
link.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'
link.rel = 'stylesheet'
link.type = 'text/css'
head.appendChild(link)
```
```js
/* Create a new button that does nothing */
const newButton = document.createElement("button");
newButton.innerHTML = "New Button";
const newButton = document.createElement('button')
newButton.innerHTML = 'New Button'
document.body.appendChild(newButton);
document.body.appendChild(newButton)
```