CSS-Tutorials #3 für das Community Framework

  • WCF 1

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Zwar kann man mit dem Stileditor ohne Kenntnisse schon Stile für das Community Framework erstellen, allerdings bekommt man eine Einzigartigkeit erst dann in den Stil, wenn man selbst Hand anlegt.
Dazu ist das Beherrschen der Darstellungssprache CSS Pflicht.

In dieser Sammlung werde ich etwas auf einzelne Anpassungen eingehen und diese erklären. Man kann also diese Tutorials vor allem dann nutzen, wenn man gerade anfängt, sich mit CSS auseinanderzusetzen.
Ich werde allerdings nicht erklären, warum welcher Code was macht, sondern einzelne Codeschnipsel veröffentlichen und ihre Funktion nennen.

Auch diese Sammlung macht nichts Einzigartiges aus dem eigenen Stil, hilft aber dabei, sich designtechnisch besser mit dem Community Framework auseinandersetzen zu können.
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

938 mal gelesen

Kommentare 25

  • Black Rider -

    Hier ist auch kein Link nötig. Bei diesem Bild einfach Rechtsklick -> Grafik speichern unter... auswählen. :)

  • jbox -

    @Black Rider
    Der Link der 3. Grafik geht nicht .

    könnte jemand die Grafik uploaden ?

  • Klima -

    wie setzt ich den hover fürs first-child?
    mach ich des so: .breadCrumbs li:first-child:hover
    oder .breadCrumbs li:hover:first-child?

    weil wenn ich nur das änder was sie gesagt haben ist beim Hover der erst Crumb auch mit dem Pfeil und nicht so schön abgerundet


    €dit:
    ok ich habs alleine geschafft tut mir leid ich sollt immer erst probieren und dann fragen, wenn interesse besteht kann ich den Code posten

  • Klima -

    ok dann versuch ich des mal xD vielen dank

  • Black Rider -

    Du müsstest einfach .breadCrumbs li:hover und .breadCrumbs li:hover a eine neue Hintergrundgrafik zuweisen ;)

  • Klima -

    wie sieht es denn mit dem Code aus wenn ich jetzt beim Hover ne andere farbe haben möchte ? Wärs möglich den Hover Code noch in den Artikel einzubauen?

  • Klima -

    oh man ... zum glück gibt es fähige leute wie die die unfähigen wie mir die simpelsten sachen erklären müssen ... tut mir leid ;)

  • Black Rider -

    Du musst die Grafik, bevor du sie aus meinem Beitrag hier speicherst, zuerst auf die volle Größe bringen (einfach einmal anklicken). Du hast die verkleinerte Variante gespeichert ;)

  • Klima -

    ahh verdammt -_- hätt ich sehn müssen sorry. .. jetzt sieht es schon besser aus .. aber es ist immer noch verschoben

  • Black Rider -

    Überprüfe bitte nochmals den Pfad, den du bei .breadCrumbs li a angegeben hast. Dort fehlt eine öffnende Klammer.

  • Klima -

    osgymsef.de/index.php?page=Index (beim Stil Simplered)

  • Black Rider -

    Hast du dann vielleicht mal einen Link zu deiner Seite?

  • Klima -

    jap hab ich alles gemacht

  • Black Rider -

    Hast du alle erforderlichen Dateien kopiert und auch den CSS-Code, so wie er da steht, angegeben?

  • Klima -

    ich hab ein kleines Probelm. Bei mir wird der erste Teil des BreadCrumb komplett angezeigt und nach der Spitze kommt nichts mehr nur der name und dann wieder die spitze und dann wieder . also der anfang und der mittelteil fehlen immer

  • Black Rider -

    Bei background-image darf man nur die Grafik selbst angeben. Bei background dagegen kann man noch Informationen wie die Position, vertikale / horizontale Wiederholung und die Farbe einstellen sowie angeben, ob sich das Bild mitbewegt oder nicht.

  • leadduck -

    aha .... es FUNZT!!! BESTEN DANK!

    Ich hatte aber auch noch an anderer Stelle den CSS-Code mit 'background-image' stehen und dort keine Probs gehabt.

    Was hat es also mit dem Befehlsunterschied zu tun?

  • Black Rider -

    In der Tat wird die dritte Grafik gar nicht benötigt. Die ist wohl noch ein Überbleibsel...
    Wird sofort ausgebessert. Danke für deine Aufmerksamkeit.

    Edit:
    Tut mir leid, habe den Fehler gefunden. Es stand noch überall "background-image" anstatt "background". Dadurch konnte dieser Befehl nicht richtig verarbeitet werden. Sollte nun klappen.

  • leadduck -

    .... 1. Frage: Wieso 4 Dateien? Im CSS sind nur 3 Dateien drin?

    .... 2. Frage: Deinen Dateien kann ich speichern - kein Problem! ABER der richtige Dateiname wird nicht angezeigt :(

    ziehe Frage 2 zurück - passt!

  • Black Rider -

    Das habe ich doch. "Dazu werden vier Grafiken benötigt:"
    Einfach dann die darunter zu findenen Grafiken speichern ;)
    kittblog.de/index.php?page=Attachment&attachmentID=572
    kittblog.de/index.php?page=Attachment&attachmentID=573
    kittblog.de/index.php?page=Attachment&attachmentID=574
    kittblog.de/index.php?page=Attachment&attachmentID=575

    Wenn du eigene Grafiken nutzt, musst du natürlich im CSS auch die Namen ändern, falls du andere nutzt. Dasselbe gilt für die Formate.

  • leadduck -

    Ich habe "eigene" Grafiken hochgeladen, aber nur an der Grafik kann es doch nicht liegen, oder?

    Vielleicht kannst Du die Deine Grafiken hilfsweise eindeutig benennen und zur Verfügung stellen?

    das steht jetzt drin der CSS

    .breadCrumbs a{
    color:#000000;
    }
    .breadCrumbs span{
    color:#000000;
    }
    .breadCrumbs{
    color:#00000;
    }
    .breadCrumbs li {background-image: url("../images/udt01/breadCrumbsBG.png");}

  • Black Rider -

    Du hast nun demnach eigene Grafiken genutzt?
    Die Pfade müssen dann eben geändert werden. Hast du jetzt im Moment eine 1:1 Kopie oder eine eigene Version des Codes? Und heißen deine Dateien auch gleich?

    Private Hilfen gebe ich normal nicht, da es dann anderen Benutzern nichts bringt.

  • leadduck -

    ... doch, doch ich habe sogar den Pfad mit der Datei geprüft - passt soweit.

    Das Format PNG oder JPG irgendwie wichtig?

    Kann ich auch schrittweise mit dem Einbau vorgehen?

    Wir können uns auch gerne via TS3 oder SKYPE unterhalten, wenn's vll dadurch einfacher ist.

  • Black Rider -

    Hast du denn die Bilder auch in deinen Bilderordner des Stils kopiert oder passiert rein gar nichts?

  • leadduck -

    Das sieht auf den ersten Blick alles recht simpel aus, ABER funktioniert selbst das einfache 1:1 "kopieren" leider nicht.

    Okay, ich gebe zu, dass meine CSS Kenntnisse nicht wirklich nenneswert sind - ist halt so.

    Dennoch habe ich die beiden CSS-Codes in "Zusätzliche CSS-Deklarationen 1" und "Zusätzliche CSS-Deklarationen 2"
    eingefügt. Bei den Graifiken kann ich schon die Zurordnung Bild zu breadCrumbsLi.png nicht wirklich treffen.

    Ist der Weg bisher den richtig? Die alten CSS EInträge 'BreadCrumbs' habe ich übrigen vorher gelöscht und nur
    die "neuen" hier genommen.