Make a wish

erstmal danke fürs kompliment! <3 ich hab den wunsch als erledigt markiert, aber vielleicht schreibe ich trotzdem mal ein ausführlicheres tutorial dazu! eigentlich ist es ganz simpel 🫶🏻

ich erklärs mal hier, damit du nicht so lange warten musst (wir arbeiten momentan am neuen design für designfreaks):

der sinn von den custom properties ist, dass man die werte wiederverwenden kann und zentral an einer stelle hat. im prinzip kann man "fast alles" als property oben definieren und dann mit var() im rest seiner css datei benutzen. "ob es nötig ist", kommt also immer darauf an, wie viele farben man hat und wie oft sich diese wiederholen. aber du kannst darauf auch komplett verzichten und die farben "normal" reinschreiben.

anstatt also bei allen elementen padding: 15px zu schreiben, kannst du oben ein einziges mal --padding: 15px festlegen und dann bei allen anderen elementen, z.b. deinem content, padding: var(--padding); schreiben.

wenn du irgendwann mal den wert ändern möchtest, musst du ihn nur ein einziges mal oben im :root {} bereich ändern, anstatt überall in der ganzen css datei.

alle properties schreibst du also in den :root bereich - das bedeutet, diese werte sind für alle anderen elemente global zugänglich.

das einzige, was du beachten musst, ist, dass du keine sonderzeichen im namen benutzt, also z.b. nicht "--überschrift". leerzeichen und ähnliches sind ebenfalls nicht erlaubt. also am besten die namen immer schön simpel halten. 😅

und zu deiner frage "wann und wo": eigentlich immer dann, wenn sich werte oder farben wiederholen. das hängt vom design ab, aber meistens hat man ja eine grundpalette, also z.b. dass alle boxen hellgrau sind oder dass man eine akzentfarbe hat. damit musst du nicht immer wieder den gleichen hexcode an 20 verschiedenen stellen einfügen, sondern definierst ihn einmal oben als property.

das ganze klappt wie gesagt mit fast allem, was sonst auch bei css erlaubt ist - bildern, verläufen und so weiter. 🥰

:root {
--padding: 15px;
--accent-color: #85BCFF;

--bg-light: #EEEEEE;
--bg-dark: #222222;

--header-image: url('header.png');
}

/* und dann einfach im rest vom css verwenden */
#container {
background: var(--bg-dark);
padding: var(--padding);
}

#header {
background: var(--header-image);
}


besonders hilfreich wird das, wenn man auf seiner webseite einen "light/dark mode toggle" hat, denn dann brauchst du nicht durch hunderte farbcodes gehen, sondern änderst sie nur oben einmalig. ☺️ ein tutorial dazu hab ich hier geschrieben, falls es dir hilft.

falls du noch fragen hast, kannst du dich gerne nochmal melden oder mich einfach bei discord anschreiben! 🫶🏻

sure thing! ✨ if you still need help, feel free to contact us! 🫶🏻

do you mean a content management system for writing blog entries, uploading images, and creating pages? we currently do not have an "all in one" script for that, but you can use dannys Sitemanager to create php pages, or use the Simple Uploads Companion together with one of the add-ons depending on your content type (images, designs, downloads).

aw, thank you! we're actually constantly adding more. is there anything specific you're missing at the moment? <3