— Sweet Nothings —

Willkommen, Liebling~! Das Aussehen ist alles. Du kleidest dich, um zu beeindrucken, und das ist der erste Schritt.

Wichtig!

Ich habe mehrere Bilddateien verwendet, um diese Vorlage zu erstellen. Alle sind auf Imgur gehostet. HIER ist eine ZIP-Datei mit allen Dateien, die ich verwendet habe. Du kannst sie gern verwenden, wie du möchtest.

------------------------------------

INSTALLATION

1. Kopiere ALLES | (GOOGLE-DOCS-SPIEGEL)

2. Füge es in dein „Über mich“-Feld bei JanitorAI ein.

3. Nimm dort deine Änderungen vor (siehe Spickzettel unten).

4. Speichere, aktualisiere die Seite und überprüfe sie auch auf deinem Handy.

REGELN, DAMIT NICHTS KAPUTTGEHT

1. Keine Leerzeilen. Für einen neuen Absatz schreibe <br><br>

2. Bildlinks müssen direkt sein: https://i.imgur.com/abc123.png

Wenn du ein Bild nicht verwendest, lass es so leer: src="" (leere Bilder verbergen sich und ihre Rahmen klappen zusammen)

3. Ändere nur Wörter innerhalb von „Anführungszeichen“ oder zwischen > und <. Lösche keine Anführungszeichen, < >, { } oder etwas, das class=

enthält.4. Füge niemals /* Kommentare / oder die Zeichen < und ~ in den >style

-Teil ein: JanitorAI schneidet dort das Stylesheet ab.@import5. Bleib unter 70.000 Zeichen (die Vorlage hat etwa 57.900), sonst wird das Ende des Codes abgeschnitten. Füge Bilder nur per Link hinzu. JanitorAI löscht jedes CSS url(...),

und eingebettete (data:) Bilder, diese können also nicht verwendet werden.>SPICKZETTEL: Suche danach (Strg/Cmd + F) –

und ändere es

DEIN NAME

content:"Your Name" dein Anzeigename oben auf der Seite.

Der echte JanitorAI-Benutzername wird ausgeblendet und stattdessen dieser Text angezeigt. Schreib also hinein, was du möchtest (lass die Anführungszeichen stehen). Er wird in Großbuchstaben in Cinzel Decorative angezeigt. Er befindet sich in der Regel, die mit .pp-uc-title::after beginnt. Lange Namen sollten in eine zweite Zeile umbrechen, damit nichts abgeschnitten wird.

PROFIL-TEXTE

content:"Bewunderer" das Wort nach der Follower-Zahl

content:"Beigetreten: mm.dd.yy" dein Beitrittsdatum. Gib dein Datum ein.

content:"Bewundern" / "Bewundert" die Folgen-Schaltfläche

content:"Lieblinge" der Bot-Tab

content:"Liebesbriefe" der Skript-Tab

content:"Lieblinge" / "Liebesbriefe" das Wort neben der Anzahl

<ANREDEPRONOMEN><div class="xb-pron">span<Anredepronomen></span>span<hier></span>

/div

Gib deine Anredepronomen (oder wirklich irgendetwas) in die spans ein. Füge nach Bedarf spans hinzu oder lösche sie.

BILDER VON DIR

(Transparente PNGs sehen am besten aus)

class="xb-sona" das hohe Bild im Header, auf der rechten Seite

class="xb-intro-img" das hohe Bild neben der Vorstellung. Es verändert nie die Größe des Feldes: Es wird passend zugeschnitten und kann über das Feld hinausragen. Wenn das Headerbild leer ist, wird stattdessen dein normales Profilbild in einem runden Rahmen mit einem Perlenring angezeigt. (Die Perlen sind in der Regel .pp-uc-avatar-container::before. Lösche sie, um sie zu entfernen.)

HINTERGRÜNDE

Die Seite ist von hinten nach vorne in Ebenen aufgebaut:

1. die sanfte rosa Seitenfarbe

2. dein bildschirmfüllendes Bild (class="xb-bg"), mit halber Deckkraft, damit das Rosa es einfärbt. Ändere opacity:.5 in der Regel .xb-bg. Lass src="" stehen, wenn du kein Bild möchtest.<3. das X/O-Hintergrundmuster (class="xb-wall"), ein durchscheinendes PNG, das mit 30 % Deckkraft darübergelegt wird. Ändere opacity:.3 in der Regel .xb-wall img. Das Muster ist ein einzelnes Bild mit 3456 x 1728 Pixeln (enthalten als „X-O Wallpaper 3456x1728.png“) und bereits intern verlinkt. ><div class="xb-wall"><img src="...">/div

. Tausche diesen Link aus, um dein eigenes Bild zu verwenden, oder lösche das ganze div, um es zu entfernen.

DAS STERNENBAND-MUSTER<Das rosa Sternenband hinter der Vorstellung ist EIN nahtloses Bild mit 3840 x 4800 Pixeln (enthalten als „Sweet Nothings - Star Pattern 3840x4800.png“), bereits intern verlinkt in ><div class="xb-pat"><img src="...">/div

. Es wird in seiner Originalgröße von oben links aus angezeigt, sodass die Sterne nie gestreckt werden. Um dein eigenes Muster zu verwenden, ersetze den Link. Erstelle es mit 3840 x 4800 Pixeln (ein größeres Bild wird einfach zugeschnitten, ein kleineres lässt auf riesigen Bildschirmen leere Stellen frei) und halte die Datei unter 1 MB, damit Imgur sie nicht erneut komprimiert. Es gibt kein CSS-Ersatzmuster. Wenn der Link nicht funktioniert, ist das Band einfach rosa. An der oberen und unteren Kante geht das Band fließend in das Hintergrundmuster über.

STATUS

Wenn du auf den Umschlag tippst, wird die Seite abgedunkelt und ein Brief mit deiner Nachricht erscheint langsam. Tippen außerhalb des Briefs schließt ihn.

<class="xb-status xb-online" ändere xb-online zu xb-away oder xb-offline>b<Liebesbrief>/b

< das Wort auf dem Umschlag. Der Teil „- öffnen“ danach erscheint automatisch.>span class="xb-msg"<...>/span< die Nachricht >i<...>/i

das Datum (davor wird „geschrieben“ angezeigt)

VORSTELLUNG

class="xb-title" die Überschrift

<class="xb-hl" die hervorgehobene erste Zeile>p<...>/p

der Bio-Text

class="xb-chips" Tag-Kapseln. X- und O-Formen wechseln sich automatisch ab.<Links: >

<a href="PASTE-LINK-HERE" class="xb-link"><img src="">span<Name></span>i<kleine Zeile></i>

/a

Drei Links sind eingerichtet (eine dreispaltige Zeile).

SCHLEIFENSchleife am Vorstellungsfeld<: >img class="xb-bow" src="..."

am Anfang des div xb-intro-text (ihre Größe ist in der Regel .xb-intro-text .xb-bow festgelegt)Schleife am Umschlag <:><span class="xb-seal"><img src="...">/span

(ihre Größe ist in der Regel .xb-seal auf width:140px festgelegt)Schleifen bei Serien<: >img class="xb-bow" src="..."< in der >summary

jeder Seriencover-Karte (ihre Größe ist in der Regel .xb-sitem .xb-bow festgelegt)<Lösche ein >img class="xb-bow" um eine Schleife zu entfernen

. Für ein neues Seriencover kopiere eine ganze Cover-Zeile, damit die Schleife mitkopiert wird.SCHLEIFEN NEU EINFÄRBEN

: CSS kann die Farben eines Bildes nicht bearbeiten, aber es kann

sie verschieben. Füge der Regel für die betreffende Schleife beispielsweise einen Filter hinzu:

filter:hue-rotate(-70deg)

Für eine rosa Schleife: -70deg lavendelfarben, -115deg blau, +55deg orange oder gold, +150deg grün. Weiße Bereiche bleiben weiß. Füge danach saturate(1.3) oder brightness(1.1) hinzu, um die Darstellung anzupassen. So kannst du keine exakte Hex-Farbe treffen (dafür musst du das PNG selbst bearbeiten). Beachte, dass ein neuer Filter den sanften Schatten der Schleife ersetzt. Füge ihn also erneut hinzu: filter:hue-rotate(-70deg) drop-shadow(0 4px 4px #d9648b40)

DAS BIO-FELD (X X X)@keyframesDas Feld öffnet sich mit einem sanften Überblenden und Gleiten. Um es zu ändern, bearbeite

xb-drop und den Teil animation:xb-drop .7s der Regel .xb-bio. Es schließt sich sofort. Lösche beides, um wieder zum einfachen Aufklappen zurückzukehren.

ÜBER MICH

class="xb-photo xb-p1" und „xb-p2“ zwei ovale Porträts (src="" für keines; wenn beide leer sind, nehmen die Felder die volle Breite ein)<class="xb-cap" der Sticker auf den Fotos ><div class="xb-box">b<Info></b>p< drei Felder. Die Beschriftung steht in >b<, der Text in >p

.

PROJEKTPLAN

(im Feld „Extra“, unter dessen Text)

<Vier kleine Projektfelder, die du durch Antippen öffnen kannst. Jedes sieht so aus:><details class="xb-job xb-done"><summary>span<Titel>

</span></summary>p<Details kommen hierhin.></p>

/details

Die Klasse legt das Aussehen fest:

xb-job xb-done fertig: ausgefülltes Herz, Titel durchgestrichen

xb-job xb-now in Bearbeitung: pulsierendes Herz und rosa Rand

xb-job geplant: Herzumriss<Kopiere eine Zeile, um ein Projekt hinzuzufügen, oder lösche eine Zeile, um eines zu entfernen. Um den gesamten Projektplan zu entfernen, lösche den >div class="xb-road"<-Block (vom öffnenden >div< bis zum passenden >/div

). Das Wort „Projektplan“ über der Liste stammt aus der Regel .xb-road::before.

SCHAUFENSTER

(das Serienregal)

<Jede Serie besteht aus einem passenden Paar:>details class="xb-sitem xb-s1" ...

< das Cover (Bild + Name)>div class="xb-sinfo xb-i1"

die Seite, die sich öffnet. s1 gehört zu i1, s2 zu i2 und so weiter. Lass die Zahlen aufeinander abgestimmt. Auf der Seite: Bannerbild, Titel, Beschreibung und Link (füge deinen Serien-Tag dort ein, wo YOURTAG steht). Fünf Serien sind eingerichtet. Wenn du weniger brauchst, lösche beide Teile eines Paares. Die Coverzeile lässt sich auf allen Bildschirmgrößen seitlich scrollen, du kannst also mehr als fünf hinzufügen: Kopiere ein Cover, gib ihm die nächste Nummer (xb-s6, xb-i6) und füge dann xb-s6 und xb-i6 zur langen Regel im CSS hinzu, die s1-s5 und i1-i5 aufführt (die Regel, die mit .xb-series:has(.xb-s1[open]) beginnt). Der Platz unter den Covern bleibt immer frei, damit die Seite nicht springt, wenn du eine Serie auswählst. Nur das cremefarbene Fenster wird ein- und ausgeblendet.

GALERIE-MODUS

(Falls du keinen Serienbereich möchtest)<1. Füge das Wort xb-gallery zur Klasse des Schaufenster-Blocks hinzu: >

div class="xb-drawer xb-series xb-gallery" id="xb-series"<2. Lösche den gesamten >div class="xb-sdisplay"< ... >/div

-Block (alle xb-sinfo-Seiten), damit kein leerer Platz übrig bleibt.<3. Füge jeden Bildlink in das >img src=""< eines Covers ein und behalte den Namen bei oder lass ihn leer. Ein leeres ><b>/b

verbirgt das kleine Banner.

Die Cover sind dann nicht mehr anklickbar, und du kannst so viele hinzufügen, wie du möchtest, indem du eine Cover-Zeile kopierst. Ändere den Titel „Schaufenster“ in etwas wie „Galerie“.

<BESTIES><a href="PASTE-LINK-HERE" class="xb-pal">

<img src="">span<Name></span>

/a

<OBSESSIONEN><a href="PASTE-LINK-HERE" class="xb-fav">

<img src="">span<Bot-Name></span>

/a

Beide sind Zeilen, die sich seitlich scrollen lassen. Eine Zeile = ein Eintrag. Kopiere eine

Zeile zum Hinzufügen, lösche eine zum Entfernen. Besties und Obsessionen befinden sich beide

unter dem Tab „Sammlung“.

ABSCHNITTSÜBERSCHRIFTEN

Die Reihe aus x o x o unter jeder Überschrift stammt aus der Regel

.xb-title::after (ändere die Wörter in content:"" oder lösche

die Regel).

CHARAKTERKARTEN@nameJede Bot-Karte sieht aus wie ein Instagram-Beitrag: oben Herz + Bot-Name + Punkte, ein quadratisches Bild in einem rosafarbenen Rahmen und unten eine Leiste mit der Chat-Anzahl, Token-Anzahl und einem „xoxo“-Skript. Die Karte wird nur aus den eigenen Bestandteilen der Website zusammengesetzt, daher sind das Herz- und Chatblasen-Symbol dekorativ. Auf einem Computer: Fahre mit dem Mauszeiger über eine Karte, dann gleitet ein „Kommentare“-Blatt mit der Bot-Zusammenfassung, dem Namen der Erstellerin oder des Erstellers

neben einem Herz und den unten aufgeführten Tags nach oben. Auf Handys und Tablets gibt es kein Hover, daher öffnet ein Tippen einfach den Bot und das Blatt wird möglicherweise nicht angezeigt.

TABS, SUCHE UND SORTIERUNG

Die Tabs „Lieblinge“ / „Liebesbriefe“, die Suchleiste, die Filterschaltfläche und das Sortiermenü sind in Creme und Gold neu gestaltet und passen so zur Seite. Siehe PROFIL-TEXTE, um die Tabs umzubenennen.

EXTRAS

FALLENDE BLÜTENBLÄTTER<die Zeile, die mit >div class="xb-petals"

beginnt (X, O und Herzen, die nach unten treiben). Lösche sie, um die Blütenblätter zu entfernen.

PULSIERENDES XOXO

Ein rosa „xoxo“ in der Ecke des Vorstellungsfeldes. Das ist die Regel .xb-intro-text::after: Ändere das Wort, die Größe oder die Farbe oder lösche die Regel. Auf breiten Bildschirmen lassen die Tag-Kapseln dafür Platz; auf Handys liegen sie darüber.

WASSER

Das sanfte rosa, kräuselnde Wasser und die Glitzerpunkte am unteren Rand der Header-Karte stammen aus den Regeln .xb-hdr::before (Wellen) und .xb-hdr::after (Glitzer). Lösche beide, um sie zu entfernen. Das sanfte Leuchten des Namens stammt aus der Regel .pp-uc-title::before.

SEITENTIERCHEN<Ein kleines Tierchen läuft am unteren Bildschirmrand über allen anderen Elementen entlang und wechselt nach dem Zufallsprinzip zwischen Stillstehen und Laufen, mit einem dezenten Stauchen und Dehnen. Beim Laufen nach links dreht es sich um. Finde am Ende des HTML-Texts >div class="xb-pet"

. Füge dein erstes Bild (im Leerlauf) in das img von xb-pet-idle und dein zweites Bild (beim Laufen) in das img von xb-pet-walk ein. Jedes img befindet sich in einem eigenen span. Lass die spans unverändert. Lösche das ganze xb-pet-div, um@keyframesdas Tierchen zu entfernen. Auf Handys läuft es direkt über der unteren Menüleiste der Website. Die Route wiederholt sich alle 80 Sekunden. Um sie zu ändern, bearbeite die Prozentwerte in

xb-petmove (die left:-Werte) und halte die entsprechenden Prozentwerte für xb-petidle, xb-petwalk und xb-petflip synchron.

REDUZIERTE BEWEGUNG

Wenn bei einem Besucher „Bewegung reduzieren“ aktiviert ist, bleiben die Animationen stehen und das Laufen des Tierchens wird ausgeblendet (es ist dann im Leerlauf zu sehen).

KEINE VARIABLEN

JanitorAI entfernt CSS-Variablen (die --something

-Zeilen), daher verwendet diese Vorlage keine. Die Farben&sind in jeder Regel ausgeschrieben, daher funktioniert „Suchen und

Ersetzen“ überall.

FARBEN

Hauptfarben (suche und ersetze, um die Farben zu ändern):

#fb9ebb Rosa #f2799f Dunkelrosa (Schaltflächen)

#fedcdb Rouge #ffe6ee Blassrosa

#f6c3d3 Sanfte Ränder #5a3228 Überschriften (dunkelbraun)

#43261f Fließtext #86594c Sanftes Braun (Beschriftungen)

#fffafa Perlweiß #d8b97c Goldverzierung

#d9648b Rosé (Kartenrahmen)

CREDITS

Sweet Nothings CSS von @Ru1nous

Du kannst es frei verwenden und bearbeiten, wie du möchtest! Eine Namensnennung ist willkommen, aber nicht erforderlich.

Die kleine Zeile „SWEET NOTHINGS CSS by Ru1nous“ am Ende der Seite kann stehen bleiben

oder entfernt werden – ganz wie du möchtest.