sveltia-cms
sveltia-cms copied to clipboard
sveltia
Custom Theme-ability...
I would absolutely love to be able to customize the look and feel of the CMS UI in the following ways:
- Typography
- Colors
-
- Toolbar Color
-
- Toolbar Font Color
- Logo
- Spacing
-
- Input Field height and border-radius
-
- List row height
-
- Paragraph Height
-
- Line Height
-
- Metadata spacing
-
- other things I cannot think of at the moment
- Font Size Everywhere
I would basically love the ability to customize the general look and feel for clients and configure all that in a css file or something...
Please consider this in the near future, thank you ( ありがとう :-)
Not sure if I can do it in the near future, but it makes sense. I also have clients using Sveltia CMS (as is). WIll put this on my to-do list!
yeah, was hacking around in the dev tools, to show you an example:
...but maybe having an app.css file that is exposed or something with a list of the custom properties needed to do something like the above picture would be super awesome :-)
Brand colors and adjusting spacing and fonts, etc...
Thank you for all your work on this project, Netlify CMS has been failing more and more for us :-)
TBH cannot use it until Rich Text Editing is in place, because of the non technical people that would be using it, but excited for that day to come :-)
Been messing around with CMS ideas myself in the last year or so:
https://svelte.dev/repl/14075540b84440008848739b6fcb70a1?version=3.59.1
XD
messed around with the layout of the editor without the preview on...
set a width on the 'content' div, made it grid and gap'd everything, removed the horizontal lines from each section as they looked a bit funny when not running from each to edge and made the heights and spacing more comfy and forgiving :-)
Not sure what to do about the three vertical dots...they feel...odd...no better solution ATM, tho :-)
I think most things are controlled by css custom properties, so maybe being able to override the interval style sheet with another user generated one might be all that I need for now...dunno how easy that would be to include, of course :-)
Yeah, some basic colours, fonts, etc. are written with CSS variables, so you can override them by adding a stylesheet to /admin/index.html where sveltia-cms.js is loaded 😺 Later I’ll make everything customizable.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" />
<title>Sveltia CMS</title>
</head>
<body>
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script>
<style>
body {
--font-family--default: Verdana;
/* and whatever */
}
</style>
</body>
</html>
Well, I need to say, Sveltia UI is still early/private beta with no documentation, and some (many) of these property names may probably change without notice in a couple of months. My plan is to ship the first public beta by August. CSS variables are very convenient anyway!
no worries, you are doing amazing stuff so far and I am very grateful for this :-)
ok, got some custom menu styles going:
With some css that took a little effort to figure out 🤣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Content Manager</title>
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
<!-- <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> -->
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script>
<style>
body {
--tertiary-background-color: white;
--font-family--default: Varela Round;
}
.outer > .toolbar-wrapper > .sui.toolbar.horizontal {
background-color: hsl(220, 40%, 40%);
}
.outer > .toolbar-wrapper > .sui.toolbar.horizontal > button:hover {
background-color: hsl(220, 40%, 60%);
}
.outer > .toolbar-wrapper > .sui.toolbar.horizontal > button[aria-pressed="true"] {
background-color: hsl(220, 40%, 50%);
}
.outer > .toolbar-wrapper > .sui.toolbar.horizontal > button > span {
color: white;
}
</style>
</body>
</html>
...but so far so good :-)
hmmm...I was thinking...maybe just add custom theming classes to the elements in the cms...like...haven't thought this through too much, but simply adding some classes to elements and not styling to those classes. so that I could create a css file like and grab horizontal-toolbar for example, then style away...
not sure how easy and/or feasible that is, though...
and/or css custom properties for more of a configuration approach...
One way to migrate to more variables is to skip adding them in a centralized place (for now) and just start using them where fit, with current values as fallback. E.g. 4px would become var(--gap-s, 4px) or something, making it overrideable for others via the --gap-s variable. Just an example.
