[3.2] Style erstellen

In diesem Forum können Style Autoren ihre Styles vorstellen, welche sich in der Entwicklung befinden. Beachtet bitte, dass solche Styles noch Fehler enthalten könnten.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Style erstellen

Beitrag von Melmac »

Tastenplayer hat geschrieben:Allerdings müsste dann auch die Bezeichnung/Titel des Blocks geändert werden. Der Anmelden/Registrierungsteil hat ja nichts mit Statistik zu tun :lol:
Und wo wäre dabei jetzt das Problem? Der Titel wird durch eine Sprachvariable eingefügt, die durch die Extension selbst mitgebracht wird: einfach passend ändern und auch dieses "Problem" wäre gelöst ...

---------------------
chris1278 hat geschrieben:nur würde ich noch gern wissen wie ich den urspungslogon jetzt ausblende
Öffne /ext/kirk/statblock/styles/[b][i]*name_des_styles*[/i][/b]/theme/statblock.css
suche dort nach

Code: Alles auswählen

.online-list, .birthday-list, .statistics {
und ersetze es durch

Code: Alles auswählen

.online-list, .birthday-list, .statistics, .headerspace {
Der Klassenselektor .headerspace wird nirgendwo sonst in prosilver verwendet.

Beim Codeblock, den Du aus der index_body.html ins Eventfile kopiert hast, musst Du dann nur noch in der Zeile

Code: Alles auswählen

<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
die Klassenzuweisung class="headerspace" rausnehmen (dort solls ja angezeigt werden :wink: )
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Style erstellen

Beitrag von chris1278 »

Prima Melmac das hat super funktioniert.

So ich denke ich hab da wieder was gelernt.

Wenn ich das richtig Verstanden habe, dann werden die Optischen Ausgaben über "class" mit festgelegt. Durch das Hinzufügen von .headersppca dort wo du gesagt hast wird diese classe dann überall ausgeblendet wo das "class=headerspace" enthalten ist.

Ich vermute mal das macht bei der Zeile im Statblock.css der kleine Befehl display: none

Code: Alles auswählen

.online-list, .birthday-list, .statistics, .online-list-not-u-viewonline, .headerspace {
	display: none;
}
Ok aber das würde Wahrscheinlich schwieriger werden wenn das ein class Befehl ist der an verschiedenen Stellen zu finden ist.

Wo werden denn diese Class befehle erzeugt.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Style erstellen

Beitrag von Melmac »

chris1278 hat geschrieben:Wo werden denn diese Class befehle erzeugt.
Diese Frage verstehe ich jetzt, ehrlicherweise, nicht so ganz, sorry.

HTML und CSS sind "Sprachen", die jeweils einem festgelegten Standard folgen: es ist genau definiert, was was bedeutet und was der Browser damit zu tun bzw. anzuzeigen hat, wenn an Stelle X ein bestimmter Code Y vorhanden ist.
Diesen Code auszulesen, ihn zu interpretieren, auzuwerten und als Bildschirminhalt auszugeben ist dann Sache des Browsers und seiner Render Engine.

Wie alle "Sprachen" entwickelt sich auch CSS ständig weiter: es kommt im Laufe der Zeit immer wieder Neues hinzu. Je nachdem, wie alt ein Browser ist (und wie "standardgetreu" seine Render Engine für den zu dieser Zeit jeweils geltenden Standard hin programmiert ist ...), wird dieses dann auch korrekt verarbeitet ... oder eben nur in Teilen oder eben auch gar nicht.

Lies Dir am besten mal in aller Ruhe die oben verlinkten Seiten hierzu auf w3schools.com durch; dort wird Schritt für Schritt erklärt, was es mit CSS auf sich hat, wie es funktioniert und was jede definierte Eigenschaft in einer Regel bedeutet, welche Werte für sie möglich sind und welcher Browser sie ab welcher Version auch unterstützt.
chris1278 hat geschrieben:Ok aber das würde Wahrscheinlich schwieriger werden wenn das ein class Befehl ist der an verschiedenen Stellen zu finden ist.
Jain :wink:
Es kommt, wie bei allem, immer auch auf den Kontext an.
CSS = Cascading StyleSheets => kaskadierende (= aufeinander aufbauende) Stylesheets.
Es gibt verschiedene "Arten" von Selektoren und es gibt verschiedene Möglichkeiten, einen Selektor (der Teil einer Regel, die vor dem { steht) aufzubauen.
Man kann durchaus auch einzelne Elemente, obwohl sie z.B. im HTML die gleiche Klasse zugewiesen bekommen haben, trotzdem ganz gezielt ansprechen, indem man den Kontext, in dem sie stehen, bei der Wahl des Selektors mit berücksichtigt.

Auch das wird auf den verlinkten Seiten beschrieben, inklusive Beispielen hierfür. Auf w3schools.com sind diese sogar interaktiv: man kann an diesen sogar "rumspielen" um zu sehen, wie sich etwas auswirkt, wenn man an "Schraube X dreht" :wink:
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Style erstellen

Beitrag von chris1278 »

Ok Melmac evtl. hab ich meine Frage etwas dämlich formuliert.

Ich wollte gerne folgendes wissen:

Beispiel:

Wenn ich jetzt einen Bestimmten Bereich, wir nehmen jetzt einfach mal dieses Quicklogin was wir in die Extension Verlegt haben, dem eine andere Klassenzuweisung geben möchte evtl.

Code: Alles auswählen

class="testklasse"
.

Dann mus ich diese "Testklasse" doch in einer css datei festlegen damit diese angesprochen wird. ^

Z.B. Steht das in der common.css:

Code: Alles auswählen

.headerspace {
	margin-top: 20px;
}

Wenn ich jetzt also darunter folgendes in die common.css einfüge:

Code: Alles auswählen

.testklasse {
	margin-top: 20px;
}
Dann müsste doch wenn ich bei dem Quicklogin welches ursprünglich mit class=headerspace angesprochen wird diesen doch wnn ich jetzt den begriff headerspace durch testklasse ersetze dadurch angesprochen werden.

So in etwa war mein grundgedanke dazu.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Style erstellen

Beitrag von Melmac »

Verschiedene Punkte hierzu - der Reihe nach:

Natürlich müsstest Du hierfür dann das betreffende HTML-File ändern: die bisherige Klassenzuweisung durch die neue ersetzen, ansonsten kann die neue Formatierung ja nicht greifen.
Nur: dies hat dann aber auch Konsequenzen, die genau bedacht werden sollten:
Jede Extension, die den betreffenden Bereich bzw. dieses jetzt neu definierte Element ansprechen will, wird davon ausgehen, dass für dieses noch die originalen Klassenzuweisungen gelten. Extensions werden auf prosilver hin erstellt und funktionieren nur dann korrekt und ohne weitere Anpassungen, wenn der Code, den sie hierfür aufgreifen, auch im originalen Zustand von prosilver vorhanden ist - was danbn aber nicht mehr unbedingt länger gewährleistet ist.

Was, wenn andere Regeln in den CSS-Files darauf angewiesen sein sollten, dass die ursprüngliche Zuweisung zum Element weiterhin existiert, weil diese einen Teil des Selektors bildet, mir dem genau dieses eine bestimmte Element angesprochen wird?

Stark vereinfachtes Beispiel:
"Formatiere den Hintergrund von a blau, wenn es innerhalb der Liste li im Container div liegt, dem die Klasse whatsoever zugewiesen ist."
Wenn jetzt dieses whatsoever durch catch_me_if_you_can ersetzt wird ... :wink:
Dann wird a so formatiert, wie alle anderen a, die unterhalb einer Liste li liegen - und das kann dann auch "Hintergrundfarbe = rot" bedeuten ...

a hat eine bestimmte "Basisformatierung", die in einem der Stylesheets definiert wird - es kommen dann aber noch zusätzliche Formatierungsanweisungen (in möglicherweise ganz anderen Stylesheets) hinzu, die diese Basisformatierung je nach "Einsatzort", Verwendungszweck, kurz: je nach dem konkreten Kontext, in dem a verwendet wird, ergänzen, ändern, erweitern usw.

Warum willst Du einem Element eine andere Klasse und damit eine andere Formatierungsregel zuweisen, die Du extra dafür definierst?
Würde es denn nicht reichen, die vorhandene Regel zu ergänzen oder zu überschreiben? Genau das ist es ja, was das erste "C" in CSS beinhaltet und ermöglicht.


Tipp für den Anfang: Finger weg von den originalen Klassenzuweisungen in den HTML-Files.
Wenn Du die Formatierung eines Elements ändern willst, dann mache dies ausschließlich dadurch, dass Du die Eigenschaften in der Regel anpasst - und dabei beachtest, dass dies dann aber auch noch ganz andere Elemente im Style mit betreffen kann als nur dieses eine, das Du gerade im Fokus hast :wink:

Maximal kannst Du in der Zuweisung im HTML zusätzliche Klassen (dann auch komplett eigene) hinzufügen. Bsp: statt class="original" dann class="original meinwerk mein_noch_besseres_werk" usw.
Das würde ich persönlich aber nur dann machen, wenn es auch wirklich sinnvoll und "frei von unerwünschten Nebenwirkungen" ist.

Nochmals die Bitte: nimm Dir in Ruhe die w3schools Seite vor, dann wird vieles vielleicht auch verständlicher und nachvollziehbarer.
Um ein paar grundlegende Kenntnisse in CSS (und HTML) kommst Du nicht herum, wenn Du in einem Style eigene Ideen umsetzen willst.
Details kann man dann immer noch in den Referenzen nachlschlagen, wenns benötigt wird, aber die grundsätzliche Funktionsweise von CSS/HTML muss schon verstanden werden.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Style erstellen

Beitrag von chris1278 »

Nein ich will ja nicht erstellen das war ja nur als Beispiel gedacht um zu verstehen. Aber ich sehe dass das ein komplexes Thema da werde ich mich dann wohl doch weiter rein arbeiten müssen aber das ist hierfür das was ich Moment mache nicht erforderlich aber für die Zukunft werde ich mir deine Seiten mal anschauen die du mir verliebt hast.

Automatisch dem Beitrag hinzugefügt nach 11 Minuten 22 Sekunden. Bitte Regel für „Topic-Bumping“ beachten. Danke.

Nein ich will ja nicht erstellen das war ja nur als Beispiel gedacht um zu verstehen. Aber ich sehe dass das ein komplexes Thema da werde ich mich dann wohl doch weiter rein arbeiten müssen aber das ist hierfür das was ich Moment mache nicht erforderlich aber für die Zukunft werde ich mir deine Seiten mal anschauen die du mir verliebt hast.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] Style erstellen

Beitrag von Melmac »

In dem Moment, in dem Du ändernd in den vorhandenen/originalen Code eingreifst, "erstellst" Du auch :wink:
chris1278 hat geschrieben:Aber ich sehe dass das ein komplexes Thema
Wie komplex es ist, hängt davon ab, wie komplex die jeweilige konkrete "Aufgabenstellung" ist; die Basics selbst, die man auch bei einfachen Dingen kennen sollte, sind es, meiner Meinung nach, aber nicht unbedingt, wenn man mal damit angefangen hat, sich mit der Materie zu beschäftigen.
Man kann sich dann ja auch nach und nach in ihr "hocharbeiten", vom Einfachen zum immer komplexeren gehen - wenn man sich vorher zumindest ein grundsätzliches Verständnis der Dinge/Zusammenhänge angeeignet hat :wink:

Wie man das macht, dürfte bei jedem verschieden sein, aber gemacht hat es irgendwann jeder einmal.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Style erstellen

Beitrag von chris1278 »

Ich danke euch auf jedenfall für eure Reichlich informatioven Antworten. Ich habe ja auch hier schon so wie bei dem letzten Style den och um gestalltet einiges gelernt. Und es ist auch teilweise Hängen geblieben.

Ich lerne eigentlich nach der Methode Learning by Doing. Bisher hat es auch immer gut geklappt.

Und sorry wegen meines Doppeposts. mit handy versehentlich doppelt geschickt.
Antworten

Zurück zu „Styles in Entwicklung“