Anleitung: Ein werkspezifisches Design erstellen FAQ

Archive FAQ > Anleitung: Ein werkspezifisches Design erstellen

Einleitung

Diese Anleitung zeigt Dir Schritt für Schritt, wie Du im Archive of Our Own – AO3 (Ein Eigenes Archiv) ein werkspezifisches Design erstellen kannst. Am Ende dieser Anleitung wirst Du Dein eigenes werkspezifisches Design erstellt, dabei mit CSS Deinen Stil definiert und dieses Design für ein Werk Deiner Wahl verwendet haben.

Diese Anleitung setzt folgendes voraus:

Du hast bereits Erfahrung mit dem Veröffentlichen von Werken im AO3. Wenn Du noch kein Werk im AO3 veröffentlicht hast, wäre es vielleicht besser, erst die Veröffentlichen und Bearbeiten FAQ zu lesen oder Schritt für Schritt die Anleitung: Ein Werk im AO3 veröffentlichen abzuarbeiten.
Du hast Grundkenntnisse in CSS. Wenn Du einen Überblick über CSS benötigst, bietet die W3Schools CSS Tutorial (W3Schools CSS Einführung), einen kostenlosen Grundkurs an.
Du besuchst die Seite mit dem voreingestellten Design (Archive 2.0). Verwendest Du bereits ein spezielles Design, kann sich die Ansicht Deiner Seite von der, auf die sich diese Anleitung bezieht, abweichen.

Wenn Du Dir nicht sicher bist, welches Design Du verwendest, oder wenn Du lieber ein vorhandenes Design verwenden möchtest, um Dein Werk zu gestalten, informiere Dich bitte in den Designs und Archiv-Schnittstellen FAQ.

Die Konfigurationsseite Create New Skin (Ein Neues Design erstellen) aufrufen

Als erstes, rufe Deine persönliche Skins (Designs)-Seite auf:

Melde Dich an und gehe zu Deiner persönlichen Übersicht, indem Du die Begrüßung "Hi, (username)!" (Hallo, (Benutzername)!) und dann "My Dashboard" (Meine persönliche Übersicht) im Menü auswählst, oder indem Du Dein Profilbild auswählst.
Wähle "Skins" aus dem Menü, das sich am Seitenrand, oder, bei mobilen Geräten, am oberen Rand befindet.

Das bringt Dich zur Seite My Site Skins (Meine Seitendesigns), die Deine benutzerdefinierten Designs auflistet und Buttons zur Verfügung stellt, um aus Deinen persönlichen Werkdesigns und den Standard Designs auszuwählen. Der Unterschied zwischen Seitendesign und werkspezifischem Design wird hier erklärt: Was ist ein Design?

In dieser Anleitung wollen wir ein neues werkspezifisches Design erstellen, daher wähle "My Work Skins" (meine werkspezifischen Designs) und danach "Create Work Skin" (ein werkspezifisches Design erstellen) aus, um zur Konfigurationsseite "Create New Skin" zu gelangen.

Ein neues werkspezifisches Design anlegen

Die einzigen zwingend erforderlichen Felder, um ein neues werkspezifisches Design mit eigenem CSS zu erzeugen, sind: Type (Art), Title (Titel) und CSS. Die anderen Felder sind optional, aber wir werden in dieser Anleitung alle behandeln.

Du kannst diese Felder auch nach der Anwendung des Designs jederzeit wieder ändern (weitere Informationen sind hier zu finden: Bearbeiten Deines werkspezifischen Designs).

Type (erforderlich): Wenn Du den "Create Work Skin" Button auf der Design-Seite gewählt hast, sollte Dich das standardmäßig zu "Work Skin" (werkspezifisches Design) bringen.
Title (erforderlich): Gib Deinem Design einen selbsterklärenden Namen, damit Du es von anderen Designs unterscheiden kannst, die Du möglicherweise in Zukunft erstellen wirst. Design-Namen müssen einzigartig sein, daher empfehlen wir, Deinen Benutzernamen mit in den Titel aufzunehmen (z.B. "Homestuck Design (Benutzername)").
Beschreibung: Was wird Dein Design tun? Wird es ein spezielles Thema haben? Ein paar Anregungen findest Du in den Design Beschreibungen auf den Seiten Public Site Skins (Standard Seitendesigns) oder Public Work Skins (Standard Werkdesigns).
Eine Vorschau hochladen: Hier kannst Du überprüfen, was Deine CSS-Designs bewirken. Die Vorschau funktioniert auch, wenn Du Dein werkspezifisches Design bereits verwendest.
Dein Design frei zugänglich machen: Diese Funktion ist abgeschaltet. Spezifische Designs können derzeit nicht veröffentlicht werden und das Anhaken dieses Kästchens hat keine Auswirkung auf die öffentliche Verfügbarkeit Deines Designs.
CSS: Im letzten Feld auf der Konfigurationsseite "Create New Skin" trägst Du Dein selbstgemachtes CSS ein. In den nächsten Abschnitten erfährst Du, wie Du die CSS-Anweisungen eingibst, die Dein Werk neu gestalten.

Vielleicht ist Dir oben auf der Seite der Button "Use Wizard" (Wizard benutzen) aufgefallen. Dieser bringt Dich zur Seite "Site Skin Wizard" (Seitendesign-Wizard), die allerdings nur für die Erstellung von Seitendesigns, nicht aber von werkspezifischen Designs verwendet werden kann. (Was ist der Design Wizard?)

CSS benutzen

Aus Sicherheitsgründen kann das AO3 nur eine begrenzte Anzahl von CSS-Eigenschaften und der Werte, die diese Eigenschaften annehmen können, unterstützen. Jeder nicht unterstützte Code wird entfernt, nachdem Du gespeichert hast.

Du erhältst die vollständige Liste unterstützter CSS-Eigenschaften, über das blaue Fragezeichen-Symbol ? oben im CSS-Feld. Für weitere Informationen zu Schriftarten, Farben, URLs usw. schlag bitte hier nach: Welche CSS-Eigenschaften und Werte kann ich in benutzerdefinierten Designs verwenden?.

Dein CSS eingeben

In diesem Abschnitt wirst Du die CSS-Anweisungen eingeben, die die Gestaltungselemente festlegen, die in Deinem Werk verwendet werden können. Füge entweder Dein eigenes CSS hinzu, oder folge dem unten genannten Beispiel.

Angenommen, Du hast ein Werk mit den folgenden HTML-Elementen:

  
<p>Lieber Willi,</p>
<p>Hier ist ein Brief, den ich Dir geschrieben habe. Ich hoffe, Du bist <em>gebührend</em> beeindruckt.</p>
<p>Herzlichst,</p>
<p>Adelheid</p>

Wird kein werkspezifisches Design verwendet, erscheint der Text im Standard-AO3-Design.

Werktext des Beispiels oben im Standardarchivdesign: Schrift: Sans Serif, Farbe: schwarz

Wenn wir das Aussehen des Textes so ändern wollen, dass es einem handgeschriebenen Brief ähnelt, wie im Bild unten, müssen wir mit Hilfe von CSS einige spezielle Gestaltungselemente erzeugen.

Werktext in 'Comic Sans MS' Schrift, eingerahmt von einem dünnen, schwarzen Rand, mit einem Abstand zwischen Rand und Text. 'Adelheid' ist etwas größer und rot. Das Wort 'gebührend' ist zweimal unterstrichen.

Zunächst wollen wir den Text mit einem dünnen, schwarzen Rand versehen sowie die Schriftart und die Schriftgröße ändern. Dazu gib folgendes im CSS-Feld Deines werkspezifischen Designs ein:

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}

Dann wollen wir die Unterschrift ("Adelheid") gestalten. Gib dazu folgende CSS-Anweisung ein, um die Schriftgröße noch weiter zu erhöhen und die Unterschrift in roter Farbe erscheinen zu lassen:

  
#workskin .signature {
font-size: 1.2em;
color: red;
}

Schließlich, um den hervorzuhebenden Text zu unterstreichen ("gebührend") füge noch diese CSS-Anweisung hinzu:

  
#workskin em {
border-bottom: 3px double;
}

Dein CSS-Feld sollte nun Anweisungen für drei unterschiedliche Stilelemente enthalten:

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#workskin .signature {
font-size: 1.2em;
color: red;
}
#workskin em {
border-bottom: 3px double;
}

Die W3Schools CSS Reference (W3Schools CSS Referenzen) liefert eine praktische Liste von zusätzlichen CSS-Eigenschaften, die Du auf Dein Werk anwenden kannst.

Weitere Beispiele findest Du auf der Seite Public Work Skins (Standarddesigns).

Hinweis: Es ist erforderlich, dass Du Deine CSS-Selektoren (z.B. den .letter, .signature und die em Elemente) unter einem #workskin ID-Bezeichner einbettest, damit Deine Designs nur für den ausgewählten Werksinhalt angewendet werden: alles unter dem Blurb und über dem "Top" (Oben) Button auf Deiner Werksseite. Solltest Du vergessen haben, Deinen CSS unter einem #workskin ID-Bezeichner einzubetten, werden wir das automatisch für Dich tun, wenn Du Deinen Code übermittelt hast.

Dein neues werkspezifisches Design sichern

Wenn Du Dein CSS überprüft hast und zufrieden mit Deinem Code bist, wähle den "Submit" (Senden) Button, um Dein neues werkspezifisches Design zu sichern. Dein Design wird auf kein Werk angewendet, bis Du das Design dem entsprechenden Werk manuell zugewiesen hast (wir behandeln dies in Dein werkspezifisches Design anwenden).

Wenn Du "Submit" ausgewählt hast, werden wir allen nicht unterstützten Code entfernen und sicherstellen, dass alle Selektoren unter einem #workskin ID-Bezeichner eingebettet sind.

Dein werkspezifisches Design bearbeiten

Sofort nachdem Du Dein neues werkspezifisches Design gesendet hast, kannst Du Deinen Code überprüfen und den "Edit" (Bearbeiten) Button auswählen, um Änderungen durchzuführen.

Dein werkspezifisches Design verwenden

Du hast ein neues werkspezifisches Design erstellt - jetzt kannst Du es für jedes Deiner Werke im AO3 verwenden. Einige Hinweise, die Du beachten solltest:

Für ein Werk kann nur ein Design verwendet werden.
Ein Design kann für mehrere Werke verwendet werden.
Wenn Du ein Design löschst, werden Werke, die dieses Design verwenden, ihre besondere Formatierung verlieren.
Wenn Du ein Werk zusammen mit anderen Schöpfer*innen erstellt hast, können diese Dein werkspezifisches Design für Euer gemeinsames Werk verwenden.

Wenn Du weißt, für welches Werk Du Deine neue Formatierung verwenden möchtest, öffne die Edit Work (Werk bearbeiten) Seite Deines Werkes. Falls Du weitere Informationen dazu benötigst: Wie bearbeite ich ein Werk?

Wähle im Abschnitt Associations (Verknüpfungen) der "Werk bearbeiten"- Seite, den Titel Deines werkspezifischen Designs aus der Liste "Select Work Skin" (werkspezifisches Design auswählen).

Wenn die CSS-Selektoren in Deinem werkspezifischen Design bereits HTML-Elementen Deines Werkes entsprechen (wie z.B. alle <p> oder <em> Tags), dann überspringe den nächsten Abschnitt und gehe direkt zu Sichern und Vorschau. Wenn Du z.B. allen kursiv geschrieben Text in Deinem Werk doppelt unterstreichen möchtest, würde die Verwendung von folgendem CSS automatisch eine doppelte Unterstreichung zu dem Text hinzufügen, der mit den <em> Tags:

  
#workskin em {
border-bottom: 3px double;
}

gekennzeichnet ist.

CSS-Selektoren im HTML Deines Werkes verwenden.

Wenn die CSS-Selektoren noch nicht den HTML-Elementen Deines Werkes entsprechen, ist es jetzt an der Zeit, <div> und <span> Tags, Klassen, und ID-Bezeichner zum Markup (Textauszeichnung) Deines Werkes hinzuzufügen. Du kannst das Markup Deines Werkes bearbeiten, indem Du zum Abschnitt Work Text (Werk Text) Deiner "Werk bearbeiten" Seite gehst. Überzeuge Dich, dass der "HTML" Button ausgewählt ist.

Wenn Du in Eingabe Deiner CSS Deine eigenen CSS-Anweisungen eingefügt hast, leg los und füge Deine entsprechenden CSS-Selektoren zum Markup Deines Werkes hinzu. Andernfalls machen wir dort weiter, wo wir mit unserem vorherigen Beispiel aufgehört haben.

In diesem Beispiel hast Du ein Werk mit folgendem Markup:

  
<p>Lieber Willi,</p>
<p>Hier ist ein Brief, den ich Dir geschrieben habe. Ich hoffe, Du bist <em>gebührend</em> beeindruckt.</p>
<p>Herzlichst,</p>
<p>Adelheid</p>

Um alle drei Stilelemente des werkspezifischen Designs zu verwenden, musst Du die HTML-Elemente und -Attribute einfügen, die Deinen CSS-Selektoren entsprechen:

Um das Brief-Stilelement zu verwenden, packe den gesamten Textblock in einen <div> Tag mit der .letter Klasse, die in Deinem werkspezifischen Design eingetragen ist.
Um das Unterschrift-Stilelement zu verwenden, füge die .signature Klasse aus Deinem werkspezifischen Design zum letzten Paragraphen hinzu.
Um das Unterstreichen-Stilelement zu verwenden, wird kein zusätzlicher Code benötigt, weil der em Selektor, den Du im CSS Deines werkspezifischen Designs verwendet hast, bereits dem <em> Tag in obigem Markup entspricht.

Dein neues Markup sollte nun folgendermaßen aussehen:

  
<div class="letter">
<p>Lieber Willi,</p>
<p>Hier ist ein Brief, den ich Dir geschrieben habe. Ich hoffe, Du bist <em>gebührend</em> beeindruckt.</p>
<p>Herzlichst,</p>
<p class="signature">Adelheid</p>
</div>

Sichern und Vorschau

Du kannst Dir eine Vorschau Deines Werkes im neuen Design ansehen, indem Du den "Preview" (Vorschau) Button auswählst, oder Deine Änderungen direkt speichern, indem Du "Post Without Preview" (Veröffentlichen ohne Vorschau) auswählst.

Glückwunsch, Dein Werk sieht jetzt toll aus!

Wenn Du dem Beispiel in Eingabe Deiner CSS und CSS-Selektoren im HTML Deines Werkes verwenden gefolgt bist, sollte Dein Werktext jetzt wie ein handgeschriebener Brief aussehen.

Wenn Du Dein werkspezifisches Design gleichzeitig zu mehreren Werken hinzufügen möchtest, gehe bitte zu Wie bearbeite ich mehrere Werke gleichzeitig? Bitte beachte, dass Du dennoch die CSS-Selektoren Deines Designs einzeln in das HTML jedes Werkes einfügen musst, falls Du es noch nicht getan hast.

Für weitere Informationen zum Veröffentlichen und Bearbeiten von Werken, schlag bitte im Veröffentlichen und Bearbeiten FAQ nach. Eine Schritt-für-Schritt Anleitung ist hier zu finden: Ein Werk veröffentlichen.

Wo kann ich weitere Informationen bekommen, falls meine Frage hier nicht beantwortet wird?

Für weitere Informationen zu Designs des Archive of Our Own - AO3 (Ein Eigenes Archiv), einschließlich Seitendesigns und Standarddesigns, schlag in den Designs und Archiv-Schnittstellen FAQ nach. Einige häufig gestellte Fragen (FAQ) über das Archive of Our Own – AO3 (Ein Eigenes Archiv) werden in den allgemeineren AO3 FAQ beantwortet. Fragen und Antworten zu unseren Nutzungsbedingungen sind in den Nutzungsbedingungen FAQ zu finden. Vielleicht wirst Du auch in unseren Known Issues (Bekannte Probleme) fündig. Falls Du darüber hinausgehende Hilfe benötigst kontaktiere bitte den Support.

Archive of Our Own^beta