You are not logged in.

[WBB 3.1.x] Pro breadCrumb eigenes Hintergrundbild

klimi1993

Member

  • "klimi1993" is male
  • "klimi1993" started this thread

Posts: 580

Occupation: Auszubildender Fachinformatiker für Anwendungsentwicklung

  • Send private message

1

Monday, August 8th 2011, 6:27pm

Pro breadCrumb eigenes Hintergrundbild

Hey Leute

wie kann ich es machen, dass ich für jeden breadCrumb abschnitt einen neuen hintergrund habe. also dass es so aussieht wie hier im Forum?
Mit freundlichen Grüßen,

Klima

Tr3kk3r

Member

  • "Tr3kk3r" is male

Posts: 5,550

Location: Ruhrpott

Occupation: Student

  • Send private message

2

Monday, August 8th 2011, 6:30pm

Quoted

also dass es so aussieht wie hier im Forum.?

Was meinst du damit genau? Im Standardstil haben die BreadCrumbs keine abwechselnden Hintergrundbilder?
Best regards,
Sebastian Teumert

klimi1993

Member

  • "klimi1993" is male
  • "klimi1993" started this thread

Posts: 580

Occupation: Auszubildender Fachinformatiker für Anwendungsentwicklung

  • Send private message

3

Monday, August 8th 2011, 6:31pm

oh man -.- hatte Link vergessen einzubauen -.-

etz is er drinn
Mit freundlichen Grüßen,

Klima

Tr3kk3r

Member

  • "Tr3kk3r" is male

Posts: 5,550

Location: Ruhrpott

Occupation: Student

  • Send private message

4

Monday, August 8th 2011, 6:34pm

Dort haben aber alle BreadCrumbs das selbe Hintergrundbild.

Das lässt sich mit ein wenig CSS und einem Grafikprogramm machen, ist aber etwas aufwändiger. Du musst dir passende Grafiken mit Lücken erstellen und diese über ein paar Tricks mit background-repeat; dort richtig reinslicen, das kann etwas frickelig werden, bis es hundertprozentig sitzt.
Best regards,
Sebastian Teumert

Black Rider

Moderator

  • "Black Rider" is male

Posts: 26,112

  • Send private message

5

Monday, August 8th 2011, 6:37pm

Und vor allem muss man das im Grunde für eine unbestimmte Anzahl an breadCrumbs machen, was eigentlich gar nicht möglich ist, da würde der Code ins Unendliche gehen ;)
Mit freundlichen Grüßen
Best regards
KittBlog Stile - Ihr Kit für Stile, Software und Knowhow
Your kit for styles, software and knowhow
Erste Linkliste zu Erweiterungen und Support rund um Burning Board©
First linklist for plugins and support around Burning Board©

Tr3kk3r

Member

  • "Tr3kk3r" is male

Posts: 5,550

Location: Ruhrpott

Occupation: Student

  • Send private message

6

Monday, August 8th 2011, 6:39pm

Quoted from "Black Rider"

Und vor allem muss man das im Grunde für eine unbestimmte Anzahl an breadCrumbs machen, was eigentlich gar nicht möglich ist, da würde der Code ins Unendliche gehen ;)

Das geht ;) Man kann mit 2 Bildern eigentlich recht gute Ergebnisse für Breadcrumbs mit recht hohen Tiefen erreichen.... ;)
Best regards,
Sebastian Teumert

Black Rider

Moderator

  • "Black Rider" is male

Posts: 26,112

  • Send private message

7

Monday, August 8th 2011, 6:40pm

Aber nicht, wenn jeder Teil eine andere Farbe haben soll. Dafür braucht man ja immer eine neue Grafik und somit auch immer wieder neue Code-Zeilen, um die entsprechende Grafik einzubinden. Denn um von der Länge her auch die Kompatibilität zu wahren, kann man nicht mit Sprites arbeiten.
Mit freundlichen Grüßen
Best regards
KittBlog Stile - Ihr Kit für Stile, Software und Knowhow
Your kit for styles, software and knowhow
Erste Linkliste zu Erweiterungen und Support rund um Burning Board©
First linklist for plugins and support around Burning Board©

klimi1993

Member

  • "klimi1993" is male
  • "klimi1993" started this thread

Posts: 580

Occupation: Auszubildender Fachinformatiker für Anwendungsentwicklung

  • Send private message

8

Monday, August 8th 2011, 6:42pm

oha hört sich nach viel arbeit an..

BlackRider wie hast du des auf KittBlog gelöst? Weil des sieht i.wie noch viel besser aus ;)

€dit: und ich meinte mit verschieden nicht dass sie anders aussehen sollten sondern dass es nicht ein fetter balken ist. tut mir leid für meine schlechte formulierung
Mit freundlichen Grüßen,

Klima

Tr3kk3r

Member

  • "Tr3kk3r" is male

Posts: 5,550

Location: Ruhrpott

Occupation: Student

  • Send private message

9

Monday, August 8th 2011, 6:44pm

Um unterschiedliche Hintergründe zu haben, ja. Das wird aufwändig. Da würde ich aber einfach nach ner Weile die Farben wiederholen. Oder versuchen, mit CSS3 Properties zu areiten und counter-increment und damit die Farbwerte manipulieren. Müsste ich mal austesten, ob sowas geht....

Das verlinkte Beispiel hat aber nunmal keine unterschiedlichen Hintergründe, und um etwas wie im Beispiel genanntes zu realisieren reichen zwei Grafiken + ein wenig CSS um auch hohe Verschachtelungstiefen noch gut darstellen zu können.
Best regards,
Sebastian Teumert

Black Rider

Moderator

  • "Black Rider" is male

Posts: 26,112

  • Send private message

10

Monday, August 8th 2011, 6:46pm

Quoted from "klimi1993"

BlackRider wie hast du des auf KittBlog gelöst? Weil des sieht i.wie noch viel besser aus ;)
Das sind im Grunde nur zwei Grafiken. Du könntest dir das Ganze mal per CSS anschauen, dann lernst du mehr wie wenn ich dir jetzt einfach den entsprechenden Code gebe ;)
Mit freundlichen Grüßen
Best regards
KittBlog Stile - Ihr Kit für Stile, Software und Knowhow
Your kit for styles, software and knowhow
Erste Linkliste zu Erweiterungen und Support rund um Burning Board©
First linklist for plugins and support around Burning Board©

klimi1993

Member

  • "klimi1993" is male
  • "klimi1993" started this thread

Posts: 580

Occupation: Auszubildender Fachinformatiker für Anwendungsentwicklung

  • Send private message

11

Monday, August 8th 2011, 6:47pm

ok dann schau ich ihn mir mal an ... nur die frage ist wie? xD mit firebug? geht des damit gut?
Mit freundlichen Grüßen,

Klima

Black Rider

Moderator

  • "Black Rider" is male

Posts: 26,112

  • Send private message

12

Monday, August 8th 2011, 6:48pm

Ja, mit Firebug geht das eigentlich am besten ;)
Mit freundlichen Grüßen
Best regards
KittBlog Stile - Ihr Kit für Stile, Software und Knowhow
Your kit for styles, software and knowhow
Erste Linkliste zu Erweiterungen und Support rund um Burning Board©
First linklist for plugins and support around Burning Board©

Tr3kk3r

Member

  • "Tr3kk3r" is male

Posts: 5,550

Location: Ruhrpott

Occupation: Student

  • Send private message

13

Monday, August 8th 2011, 6:49pm

Ja, das geht auch mit Firebug. Ansonsten aber auch ganz klassisch mit Rechtsklick => Seitenquelltext anzeigen. Gibt im Leben eben immer mehrere Wege zum Ziel ;)
Best regards,
Sebastian Teumert

klimi1993

Member

  • "klimi1993" is male
  • "klimi1993" started this thread

Posts: 580

Occupation: Auszubildender Fachinformatiker für Anwendungsentwicklung

  • Send private message

14

Monday, August 8th 2011, 7:16pm

bräuchte kurz ne kleine hilfestellung wie ich da jetzt den code finde weil ich hab so wirklich keine ahnung.... am besten mit firebug
Mit freundlichen Grüßen,

Klima

Tr3kk3r

Member

  • "Tr3kk3r" is male

Posts: 5,550

Location: Ruhrpott

Occupation: Student

  • Send private message

15

Monday, August 8th 2011, 8:11pm

Firebug unten auf HTML stellen, und dann auf das Symbol mit dem Kasten und der maus klicken - dann werden alle HTML Elemente, über die du die maus hältst, mit einem blauen rahmen unterlegt und unten im Inspektionsfenster die entsprechenden Quelltexte angezeigt.
Best regards,
Sebastian Teumert

klimi1993

Member

  • "klimi1993" is male
  • "klimi1993" started this thread

Posts: 580

Occupation: Auszubildender Fachinformatiker für Anwendungsentwicklung

  • Send private message

16

Monday, August 8th 2011, 8:22pm

ahh ok vielen Dank...wie kann ich jetzt anstatt den 2 kleinen >> z.B eine weiße Pfeilspitze stehen lassen so wie es bei KittBlog der Fall ist?
Mit freundlichen Grüßen,

Klima

Black Rider

Moderator

  • "Black Rider" is male

Posts: 26,112

  • Send private message

17

Monday, August 8th 2011, 8:23pm

Die Pfeilspitze ist eine entsprechende Grafik und das Zeichen habe ich nicht entfernt (da man sonst eine Menge Templates patchen müsste), sondern einfach in der Farbe der Hintergrundgrafik eingefärbt ;)
Mit freundlichen Grüßen
Best regards
KittBlog Stile - Ihr Kit für Stile, Software und Knowhow
Your kit for styles, software and knowhow
Erste Linkliste zu Erweiterungen und Support rund um Burning Board©
First linklist for plugins and support around Burning Board©

klimi1993

Member

  • "klimi1993" is male
  • "klimi1993" started this thread

Posts: 580

Occupation: Auszubildender Fachinformatiker für Anwendungsentwicklung

  • Send private message

18

Monday, August 8th 2011, 8:25pm

und wie kann ich zw jeden breadCrumb so eine grafik einfügen? und wie kann ich die Zeichen färben ?? tut mir leid wegen den vielen Fragen aber bin heut echt nicht gut dabei ..
Mit freundlichen Grüßen,

Klima

Black Rider

Moderator

  • "Black Rider" is male

Posts: 26,112

  • Send private message

19

Monday, August 8th 2011, 8:26pm

Tr3kk3r hat dir doch erklärt, wie du den entsprechenden Code untersuchen kannst. Rechts stehen dann immer die jeweiligen CSS-Anweisungen des ausgewählten Elements.
Mit freundlichen Grüßen
Best regards
KittBlog Stile - Ihr Kit für Stile, Software und Knowhow
Your kit for styles, software and knowhow
Erste Linkliste zu Erweiterungen und Support rund um Burning Board©
First linklist for plugins and support around Burning Board©

Tr3kk3r

Member

  • "Tr3kk3r" is male

Posts: 5,550

Location: Ruhrpott

Occupation: Student

  • Send private message

20

Monday, August 8th 2011, 8:29pm

Quoted from "klimi1993"

wie kann ich jetzt anstatt den 2 kleinen >> z.B eine weiße Pfeilspitze stehen lassen so wie es bei KittBlog der Fall ist?


Das zeigt dir doch eigentlich Firebug bzw. der Quelltext. Der Trick ist, dass man die Pfeile eben nicht entfernt, sondern sie in der Farbe der Hintergrundgrafik färbt (dazu darf die Hintergrundgrafik keinen Verlauf haben). Der weiße Pfeil, den du da siehst, ist entsprechend einfach in die Hintergrundgrafik eingearbeitet und passend dort eingesliced.

Quoted

und wie kann ich zw jeden breadCrumb so eine grafik einfügen? und wie kann ich die Zeichen färben ??

Wie wärs wenn du mit dem Suchbegriff "CSS Tutorial" mal einw enig das Netz durchsuchst bzw. mit "CSS Farbe" oder "CSS Grafik" oder ähnlichem? So schwer sind diese Anweisungen jetzt nicht herauszufinden. Und wenn du es dir schon mit Firebug ansiehst, siehst du ja eh, wies gemacht wird.


Falls du jetzt aber versuchst das "Stell dich doof dann gehts dir gut" Spielchen zu spielen und so lange blöde zu Fragen, bis sich jemand deiner erbarmt und es dir macht, so hast du dich geschnitten...
Best regards,
Sebastian Teumert

Similar threads