mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-06-13 02:39:27 +00:00
docs, more theme stuff
This commit is contained in:
tobi
parent
13b4e191a6
commit
dbba95f11e
30
docs/admin/themes.md
Normal file
30
docs/admin/themes.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
# Themes
|
||||
|
||||
Users on your instance can select a theme for their profile from any css files present in the `web/assets/themes` directory.
|
||||
|
||||
GoToSocial comes with some theme files already, but you can add more yourself by doing the following:
|
||||
|
||||
1. Create a file in `web/assets/themes` called (for example) `new-theme.css`.
|
||||
2. (Optional) Include the following comment at the top of your theme file to title and describe your theme:
|
||||
```css
|
||||
/*
|
||||
theme-title: My New Theme
|
||||
theme-description: This is an example theme
|
||||
*/
|
||||
```
|
||||
You can use any text you like for these fields, but bear in mind whatever you write here will appear in the settings panel to help users when selecting a theme, so keep it short and sweet.
|
||||
3. Fill out your custom CSS in the rest of the file. You can use one of the existing CSS files to guide you. Also see [this page](../user_guide/custom_css.md) for some rough guidelines about how to write accessible CSS.
|
||||
4. Restart your instance so that the new CSS file is picked up.
|
||||
|
||||
!!! info
|
||||
If you're using Docker for your deployment, you can mount theme files from the host machine into your GoToSocial `web/assets/themes` directory instead, by including entries for them in the `volumes` section of your Docker configuration.
|
||||
|
||||
For example, say you've created a theme on your host machine at `~/gotosocial/my-themes/new-theme.css`, you could mount that theme into the GoToSocial Docker container in the following way:
|
||||
|
||||
```yaml
|
||||
volumes:
|
||||
[.... some other volume entries ...]
|
||||
- "~/gotosocial/my-themes/new-theme.css:/gotosocial/web/assets/themes/new-theme.css"
|
||||
```
|
||||
|
||||
Bear in mind if you mount an entire directory to `/gotosocial/web/assets/themes` instead of mounting individual theme files, you'll override the default themes.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 102 KiB |
|
|
@ -22,6 +22,15 @@ A preview of the image as it will appear on your profile will be shown. If you'r
|
|||
|
||||
If you navigate to your profile and refresh the page, your new avatar / header will be shown. It might take a bit longer for the update to federate out to remote instances.
|
||||
|
||||
### Select Theme
|
||||
|
||||
GoToSocial provides themes for you to choose from for the web view of your profile, to change your profile's appearance and vibe.
|
||||
|
||||
To choose a theme, just select it from the profile settings page, and click/tap "Save profile info" at the bottom of the page. When you look at your profile in the web view (you may need to refresh the page), you'll see the new theme applied, and so will anyone else visiting your profile.
|
||||
|
||||
!!! tip "Adding more themes"
|
||||
Instance admins can add more themes by dropping css files into the `web/assets/themes` folder. See the [themes](../admin/themes.md) part of the admin docs for more information.
|
||||
|
||||
### Basic Information
|
||||
|
||||
#### Display Name
|
||||
|
|
@ -109,9 +118,14 @@ Turning on the discoverable flag may take a week or more to propagate; your acco
|
|||
|
||||
#### Custom CSS
|
||||
|
||||
If enabled on your instance by the instance administrator, [Custom CSS](./custom_css.md) allows you to theme the way your profile looks when visited through a browser.
|
||||
If enabled on your instance by the instance administrator, custom CSS allows you to further customize the way your profile looks when visited through a browser.
|
||||
|
||||
When this setting is not enabled by the instance administrator, the text input box is read-only.
|
||||
When this setting is not enabled by the instance administrator, the text input box is read-only and custom CSS will not be applied.
|
||||
|
||||
See the [Custom CSS](./custom_css.md) page for some tips on writing custom CSS for your profile.
|
||||
|
||||
!!! tip
|
||||
Any custom CSS you add in this box will be applied *after* your selected theme, so you can pick a preset theme that you like and then make your own tweaks!
|
||||
|
||||
## Post Settings
|
||||
|
||||
|
|
|
|||
|
|
@ -120,6 +120,7 @@ nav:
|
|||
- "admin/media_caching.md"
|
||||
- "admin/spam.md"
|
||||
- "admin/database_maintenance.md"
|
||||
- "admin/themes.md"
|
||||
- "Federation":
|
||||
- "federation/index.md"
|
||||
- "federation/glossary.md"
|
||||
|
|
|
|||
|
|
@ -18,17 +18,17 @@
|
|||
--blurple11: #33009a;
|
||||
|
||||
/* Restyle basic colors to use blurple */
|
||||
--white1: var(--blurple1);
|
||||
--white2: var(--blurple2);
|
||||
--blue1: var(--blurple4);
|
||||
--blue2: var(--blurple6);
|
||||
--blue3: var(--blurple8);
|
||||
--white1: var(--blurple2);
|
||||
--white2: var(--blurple3);
|
||||
--blue1: var(--blurple6);
|
||||
--blue2: var(--blurple8);
|
||||
--blue3: var(--blurple10);
|
||||
|
||||
/* Basic page styling (background + foreground) */
|
||||
--bg: var(--white1);
|
||||
--bg: linear-gradient(var(--blurple2), var(--blurple1));
|
||||
--bg-accent: var(--white2);
|
||||
--fg: var(--gray2);
|
||||
--fg-reduced: var(--gray1);
|
||||
--fg: var(--gray1);
|
||||
--fg-reduced: var(--gray2);
|
||||
|
||||
/* Profile page styling (light) */
|
||||
--profile-bg: var(--white2);
|
||||
|
|
|
|||
159
web/assets/themes/halloween.css
Normal file
159
web/assets/themes/halloween.css
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/*
|
||||
theme-title: Midnight Trip
|
||||
theme-description: Woah
|
||||
*/
|
||||
|
||||
/* Theme colors */
|
||||
:root {
|
||||
--acid-green: rgb(63, 255, 0);
|
||||
--acid-green-light: #79FF4D;
|
||||
--acid-green-dark: #269900;
|
||||
--magenta: rgb(153, 50, 204);
|
||||
--darkred: rgb(58, 0, 15);
|
||||
--darkblue: rgb(0, 0, 58);
|
||||
--darkmagenta: rgb(47, 1, 65);
|
||||
|
||||
/* Override */
|
||||
--orange2: var(--acid-green);
|
||||
--gray1: rgb(20, 21, 23);
|
||||
--blue1: var(--acid-green-dark);
|
||||
--blue2: var(--acid-green-light);
|
||||
--blue3: var(--acid-green);
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(-45deg, black, var(--darkmagenta), var(--darkblue), var(--darkred));
|
||||
background-size: 400% 400%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media not (prefers-reduced-motion) {
|
||||
body {
|
||||
animation: gradient 30s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
/* Funky scroll bar */
|
||||
scrollbar-color: var(--acid-green) var(--gray1);
|
||||
}
|
||||
|
||||
/* Instance display name */
|
||||
.page-header {
|
||||
grid-column: 2;
|
||||
align-self: start;
|
||||
margin: 1rem 0 1rem 0;
|
||||
background-color: var(--gray1);
|
||||
border: 0.25rem solid var(--magenta);
|
||||
border-radius: var(--br);
|
||||
}
|
||||
|
||||
/* Header card */
|
||||
.profile .profile-header {
|
||||
background-color: var(--gray1);
|
||||
border: 0.25rem solid var(--magenta);
|
||||
}
|
||||
|
||||
/* About + Pinned posts headers */
|
||||
.profile .col-header {
|
||||
background: var(--gray1);
|
||||
border: 0.25rem solid var(--magenta);
|
||||
}
|
||||
|
||||
.profile .about-user .col-header {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Make about sections transparent */
|
||||
.profile .about-user .fields, .profile .about-user .bio, .profile .about-user .accountstats {
|
||||
background: var(--gray1);
|
||||
border-left: 0.25rem solid var(--magenta);
|
||||
border-right: 0.25rem solid var(--magenta);
|
||||
}
|
||||
|
||||
/* Fiddle around with borders on about sections */
|
||||
.profile .about-user .fields .field:first-child {
|
||||
border-top: 0.25rem dashed var(--magenta);
|
||||
}
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: 0.25rem dashed var(--magenta);
|
||||
}
|
||||
.profile .about-user .accountstats {
|
||||
border-top: 0.25rem dashed var(--magenta);
|
||||
border-bottom: 0.25rem solid var(--magenta);
|
||||
}
|
||||
|
||||
/* Statuses + threads */
|
||||
|
||||
/* Thread column header */
|
||||
.thread .col-header {
|
||||
background: var(--gray1);
|
||||
border: 0.25rem solid var(--magenta);
|
||||
}
|
||||
|
||||
/* Main status body */
|
||||
.status, .status.expanded {
|
||||
background: var(--gray1);
|
||||
border: 0.25rem solid var(--magenta);
|
||||
}
|
||||
|
||||
/* Code snippets */
|
||||
.status .text .content pre, .status .text .content code {
|
||||
background: black;
|
||||
color: var(--white2);
|
||||
}
|
||||
|
||||
/* Block quotes */
|
||||
.status .text .content blockquote {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* Media wrapper for attachments */
|
||||
.status .media .media-wrapper {
|
||||
background: var(--bg-nearly-opaque);
|
||||
}
|
||||
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
||||
border: 0.2rem dashed var(--magenta);
|
||||
}
|
||||
|
||||
/* Polls */
|
||||
.status .text .poll {
|
||||
background-color: black;
|
||||
border: 0.25rem solid var(--magenta);
|
||||
}
|
||||
|
||||
.status .text .poll .poll-info {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* Status info bars */
|
||||
.status .status-info, .status.expanded .status-info {
|
||||
background: black;
|
||||
}
|
||||
|
||||
/* Back + next links */
|
||||
.backnextlinks {
|
||||
background: var(--gray1);
|
||||
padding: 0.5rem;
|
||||
border: 0.25rem solid var(--magenta);
|
||||
border-radius: var(--br);
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
margin-top: 2rem;
|
||||
background-color: var(--gray1);
|
||||
border-top: 0.25rem solid var(--magenta);
|
||||
}
|
||||
|
|
@ -439,7 +439,7 @@ section.with-sidebar > div, section.with-sidebar > form {
|
|||
display: grid;
|
||||
max-width: 60rem;
|
||||
grid-template-columns: 70% 30%;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-rows: auto;
|
||||
gap: 1rem;
|
||||
|
||||
.files {
|
||||
|
|
|
|||
|
|
@ -145,12 +145,17 @@ function UserProfileForm({ data: profile }) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<label className="theme">
|
||||
<b>Profile Theme</b>
|
||||
<div className="theme">
|
||||
<div>
|
||||
<b id="theme-label">Theme</b>
|
||||
<br/>
|
||||
<span>After choosing theme and saving, <a href={profile.url} target="_blank">open your profile</a> and refresh to see changes.</span>
|
||||
</div>
|
||||
<RadioGroup
|
||||
aria-labelledby="theme-label"
|
||||
field={form.theme}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section-docs">
|
||||
|
|
|
|||
Loading…
Reference in a new issue