search

sveltia / sveltia-cms

Alternative to Netlify/Decap CMS. Fast, lightweight, Git-based headless CMS. Modern UX, first-class i18n support, open source & free. Made with Svelte.
MIT License
819 stars 38 forks source link

Custom Theme-ability... #29

Open rchrdnsh opened 1 year ago

rchrdnsh commented 1 year ago

I would absolutely love to be able to customize the look and feel of the CMS UI in the following ways:

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 ( ありがとう :-)

kyoshino commented 1 year ago

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!

rchrdnsh commented 1 year ago

yeah, was hacking around in the dev tools, to show you an example:

Screenshot 2023-06-19 at 6 20 03 PM

...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 :-)

rchrdnsh commented 1 year ago

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 :-)

rchrdnsh commented 1 year ago

Been messing around with CMS ideas myself in the last year or so:

https://svelte.dev/repl/14075540b84440008848739b6fcb70a1?version=3.59.1

XD

rchrdnsh commented 1 year ago

messed around with the layout of the editor without the preview on...

Screenshot 2023-06-19 at 9 03 17 PM

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 :-)

rchrdnsh commented 1 year ago

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 :-)

kyoshino commented 1 year ago

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>
rchrdnsh commented 1 year ago

great, thank you XD

kyoshino commented 1 year ago

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!

rchrdnsh commented 1 year ago

no worries, you are doing amazing stuff so far and I am very grateful for this :-)

rchrdnsh commented 1 year ago

ok, got some custom menu styles going:

Screenshot 2023-06-20 at 12 07 14 PM

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 :-)

rchrdnsh commented 1 year ago

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...

naton commented 11 months ago

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.