[CSS-Feature] Zeigt her eure Styles

Lass den Künstler in Dir frei!

[CSS-Feature] Zeigt her eure Styles

Avatar: クロキューThemenstarter#1

Mit der neuen "Seite" kann man ja sich ja 'n eigenes Style definieren und über CSS mehr, als es früher über die Eingabemaske möglich war, machen. Einige werden sicherlich schon was gemacht haben oder wollen was machen. In diesem Thread kann jeder ja mal zeigen, was er so verbrochen hat.

Ich hab für den Anfang ein paar Beispielseiten genommen, wo man mein Verbrechen in Aktion sehen kann. Bei mir ist die Einstellung gesetzt, dass das CSS für alle Seite verwendet werden soll.

Hauptseite

Anime

Profil


Ärgerlich ist bisher, dass Attribute-Selektoren nicht funktionieren oder die Sachen mit nth-child, so kann man schlecht 'n odd/even hinbekommen oder explizit Farben für Links setzen (bspw. eine Farbe für Mitgliederlinks, eine für normale usw.), aber gut, muss man mit leben. ^^

P.S.: Vielleicht für den einen oder anderen Interessant.
Hier gibt's eine Demoseite für den CSS-Editor mit Themes, die man sich ansehen kann. Es gibt die Möglichkeit die Theme zu ändern, wenn es mit dem eigenen Stil nicht zusammenpassen sollte.
Demoseite
CSS-Stile


Für jene, die's interessiert, hier kann man den CSS-Code von dem Stil finden: Style | CodeMirror-Theme (Twilight)

Hab den Code für die CodeMirror Theme jetzt separiert.
Platt gesagt, ist der Code für die CodeMirror-Theme dafür da, dem CSS-Editor 'n anderes Aussehen zu geben, in meinem Fall war's nötig, damit es mit dem dunklen hier Harmoniert.
Beitrag wurde zuletzt am 07.01.2016 22:12 geändert.
    • ×5
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (8)

Zeige alle Kommentare
Avatar: xShadowLight#2
Sehr schick dein schwarzes Design. Ich bin mir noch nicht ganz sicher, ob ich es so lasse (eventuell kommt noch ein Hintergrundbild oder Footer dazu), aber bis auf die fehlende Transparenz und die Dinge, die du schon angesprochen hast, bin ich erstmal ganz zufrieden damit.

Startseite
Anime
Profil

Code
Beitrag wurde zuletzt am 07.01.2016 13:33 geändert.
    • ×5
    • ×2
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (1)

Zeige alle Kommentare
Avatar: MaDStaN#3
Leider hab ich keine Ahnung von CSS... Hab das anfangs sogar mit CounterStrike in Verbindung gebracht... Echt schade
    • ×0
    • ×4
    • ×4
    • ×0
    • ×0
    • ×0

Kommentare (1)

Zeige alle Kommentare
Avatar: クロキューThemenstarter#4
Also für jene, die wie MaDStaN von sich sagen, keine Ahnung von CSS zu haben und es dennoch probieren möchten (ich hab auch nur ausm Internet angelesenes minimal Wissen davon). Im Internet lässt sich viel zu dem Thema auftreiben, mit Übungsbeispielen usw.

Bei w3schools wird einiges erklärt, auch mit Beispielen, an denen man auch selbst herumfummeln kann usw.

http://www.w3schools.com/css/ (English)
http://www.css4you.de/wscss/index.html (Deutsch)

Und damit ihr herausbekommt, welche Regeln für was zuständig sind, müsst ihr die Web-Tools benutzen. Das beste, was euch da hilft, ist wirklich suchen. Und am besten sucht ihr auch auf Englisch, da findet man immer die besseren Hilfen.
Beitrag wurde zuletzt am 07.01.2016 20:15 geändert.
    • ×3
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: aniSearchler
aniSearchler
#5
2 Präsentationen... nicht viel..klose und Shadow-chan, wie wäre es wenn ihr euren CSS-Code auch dazu packt. Shadow-chans ist gerade mit Header nen nettes Basislayout(Vorlage). Zusätzlich evtl. nicht schlecht die Zeilen in fett zu markieren, wo Farbe oder Grafikdaddy eingesetzt wird. Premium-User kopieren sich dann den Code rein, versuchen es selbst und dieser Thread könnte mehr Postings haben.

Die Frage ist möchte man sich damit(CSS) extra beschäftigen? Ich nutze zwar das olle, am Farbrädchen drehen kann jeder, aber testen kann nichts schaden.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (1)

Zeige alle Kommentare
Avatar: クロキューThemenstarter#6
@Kaori, ich wollte dafür später eigentlich lieber 'n extra Thread machen, um das dort aufzubewahren, aber gut, kann man auch hier machen.

@topic
Ich hab meinen Code jetzt auch mal hinzugefügt. In meinem ersten Beitrag ist der Link dazu drin. ^^
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (1)

Zeige alle Kommentare
Avatar: Lisa-Marie
V.I.P.
#7
Ich habe mich nun auch mal etwas länger damit beschäftigt und bin mit meinem Endergebnis ganz zufrieden. Beim neuen Design werde ich mein Layout wohl nicht so häufig ändern wie beim Alten, denn wenn man sich damit nicht auskennt, ist das doch ziemlich zeitaufwändig. Demnächst werde ich noch eins in Rosa-Tönen machen, damit ich ab und zu wechseln kann. 

Startseite

Anime


Forum

Profil
    • ×3
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Asaki
V.I.P.
#8
Bin jetzt mit meinen Experimenten auch mal fertig und so weit eigentlich ganz zufrieden. Einzig was mir noch nicht so gefällt ist der Footer, bzw. der Hintergrund den ich benutze. Wenn ich da am Wochenende etwas mehr Zeit habe, werde ich den auf jeden Fall noch austauschen. Den ein oder anderen Farbcode werde ich eventuell auch noch ändern, aber da muss ich erstmal gucken, welche Töne ich benutzen will. Dafür hab ich aber am WE genug Zeit für.

Soweit bin ich aber wie gesagt ganz zufrieden, dafür das es die ersten Versuche waren, ich denke auch wenn man es erstmal raus hat, wird manches auch viel besser gehen. 

Startseite:

Anime (Manga Seiten sehen ziemlich genauso aus):

Forum:

Profil:

Footer (ändert sich noch):
    • ×2
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: aniSearchler
aniSearchler
#9
Hab auch die Zeit genutzt und versucht es an mein olles Design anzupassen. Alles was unnütz ist bzw. stört...weg oder ausgeblendet. Meine Clubheader haben ihre Verwendung, indem eine GIF-Variante vom Header gemacht wurde, guter 10 Sekundenwechsel. Evtl. paar Feinheiten testen später(mit Grafiken), aber das orange ging überhaupt nicht. Auf dem Smartphone schaut auch schick aus.

DarkMagenta-Night

Meine nun ja sehr sehr sehr schlichte Startseite:

Forum(Abos)

Anime:

Charaktere:

Personen:

Profil (komplett)

Charakter-Eintragen:


    • ×4
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Mahou Shounen
Freischalter
#10
Ich habe den Abend damit verbracht, meins endlich mal zu machen. Mein altes Design habe ich, so gut wie es geht übernommen. Ich bin noch nicht ganz fertig und ein paar Sachen muss ich noch verbessern, weil einige Bereiche schwer zu lesen sind. Für heute reicht es mir allerdings erst einmal. Danke an Klose and Shadow für die Codes, ich habe eure mal genommen und angepasst.





    • ×0
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: -Shizuma-
V.I.P.
#11
Auch fertig. Erstmal. Muss noch etwas optimiert werden. Weiß nur noch nicht genau wie.
Hab am Ende den Code von Shadow genutzt.

Startseite


Profil


Der Footer fehlt noch aber der will nicht so wie ich das gerne hätte. Falls da wer den CSS-Abschnitt für hat (also nur für den Fußteil), wäre es sehr nett wenn er mir den per PN zukommen lassen könnte, der fehlt mir und ich bin was das angeht echt zu blöde um das selber hinzubekommen.^^
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (1)

Zeige alle Kommentare
Avatar: SkyFief
V.I.P.
#12
Bin auch soweit mit dem ersten Versuch Fertig, habe aber sicherlich noch das ein oder andere vergessen. Aber so ganz sicher bin ich mir bei der Sache noch nicht, vielleicht werde ich nochmal einen Versuch auf Basis einer anderen Farbe starten. Header und Footer sind noch in Arbeit.
Das Ganze ist auf Basis von xShadowLight's Code (danke dafür), habe nur das ein oder andere noch hinzugefügt/entfernt.

Anime:
Beitrag wurde zuletzt am 11.01.2016 12:10 geändert.
    • ×2
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: chihiroyin#13
Ich probiere ja gern rum, aber die Seite im CSS- Style umzugestalten fällt mir doch schwer. Orientiere mich stark am Code von xShadowlight, weil ich mit dem Code von Klose kaum was anfangen kann, die Befehle verstehe ich da nicht. Aber das Farbschema hilft mir sehr.
Meine Seite ist noch weiter in Arbeit, deswegen gibts auch hier kein Bild. Aber ich hab gerad kb die weiter zu bearbeiten. Es gibt zu viele Farbmöglichkeiten und manchmal sehe ich auch erst im Nachhinein, was ich denn überhaupt gefärbt habe. Ich wollte nur mal so ein kleines Feedback geben von Jemanden, der sich bis Dato noch nie mit CSS beschäftigt hat. Auch die Seiten, die von Klose als Hilfe, verlinkt worden, haben mir wenig Hilfe bei der Anwendung auf aS gebracht, dafür habe ich einigermaßen verstanden, wie xShadowLight vorgegangen ist. Auch wenn es mir rätselhaft bleibt, woher man weiß, wie man alles benennen soll. Wenn der Beitrag hier nicht passt, kann er ja gelöscht werden.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (2)

Zeige alle Kommentare
Avatar: クロキューThemenstarter#14
@chihiroyin
Also mich würde es interessieren, was bei mir so groß unterschiedlich ist, was den CSS-Code betrifft. Bis auf kleine Dinge und schlechten, englischen Kommentaren, ist es im Grunde nur Farbenändern mit background-color; color; border usw., also der Großteil bedient sich der gleichen Syntax, die Shadow genutzt hat. ^^

Was die CSS-Hilfsseiten angeht: Die waren jetzt nicht dafür gedacht, dass man 2x was liest und schon alles kann. Die Seiten sollten einen Einstieg vermitteln, wie CSS geht und wie man selbst was machen kann. Bei w3c hat man ja die Möglichkeit selbst das Gelernte auszuprobieren. Die Seiten Zielen darauf ab, dass man sich damit ein wenig beschäftigt. MIt dem Wissen, dass man später daraus zieht, hätte man viel hier verwenden können. Das nur so am Rande, weil es keine Schnellhilfe sein sollte. ^^

@Allgemein
Aber wenn jemand mal Lust hat, ich nicht ^^, kann er ja mal 'n Thread aufmachen, um Hilfestellung zu geben, wie man da herangehen kann usw. Dann geht das vielleicht auch einfacher für viele, als sich zu versuchen, an den Beispielen hier zu orientieren, besonders meines ist ja eh keine wirkliche Vorlage für jeden. ^^
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (1)

Zeige alle Kommentare
Avatar: chihiroyin#15
@Klose91
Ahh sorry, hab mich vertan mit deinem CSS-Code. Hatte ein anderes dafür gehalten und zwar, dass was du unter Demoseite verlinkt hast. Hab mir jetzt deinen angeschaut und der ist nachvollziehbar, nur haste kaum zu deinen Befehlen kommentiert, aber das erwähnt ja auch schon SkyFief.

QuelleWas die CSS-Hilfsseiten angeht: Die waren jetzt nicht dafür gedacht, dass man 2x was liest und schon alles kann.
Ja hab mich überschätzt, dachte die würden das da so erklären, dass ich das direkt anwenden könnte xD. Aber ich wusste schon gar nicht was die gemeint hatten ...Und ob ich direkt den CSS anweden kann oder erstmal die html angeben muss (falls du verstehst was ich meine). Habs ja jetzt verstanden :).
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (2)

Zeige alle Kommentare