Tipps & Tutorials, tutorial

Scrollleiste verändern und verschönern

Hallo liebe Leser von CPL, ich bin Lara von My heart feels what my brain doesn’t know. Heute möchte ich euch zeigen, wie ihr schnell und einfach die Scrollbar auf eurem Blog anpassen könnt. Im Normalfall sieht sie ungefähr so aus, wie auf dem Bild was Ihr hier sehen könnt.

Eure Scrollbar muss aber nicht grau und langweilig erscheinen, ihr könnt sie ganz nach euren Wünschen anpassen, d.h ihr könnt die Hintergrundfarbe, sowie die Leiste zum rauf – und runter Scrollen Farbig verändern.

Damit alles genau klappt und nichts schief läuft, haltet ihr euch an die folgenden Punkte:

1. Ihr öffnet den HTML Text eures Blogs (Dashbord – Design – HTML bearbeiten)

2. Sucht mit der Tastenkombination STRG+F nach Headings, dann solltet ihr zu dieser Stelle gelangen:

3. Unter die geschweifte Klammer } setzt ihr nun folgenden Code:

/* Scroll-Balken
---------------------------------- */

::-webkit-scrollbar {
background:#fff;
width: 11px;
}

::-webkit-scrollbar-thumb {
background:#ccc;
}

4. Wenn du alles richtig gemacht hast, sollte es dann so aussehen:

5. Wenn du jetzt auf  “Vorschau” klickst, siehst du, das deine Scrollbar einen weißenHintergrund hat und das ‘bewegliche zum Scrollen’ nun grau ist.

6. Nun könnt ihr eure Vorlage nach euren Wünschen anpassen! 

Kleine Erklärung: Um den weißen Hintergrund zu ändern, müsst ihr den oberen Teil des HTML Textes bearbeiten, heißt: 

/* Scroll-Balken
----------------------------------------------- */
::-webkit-scrollbar {
  background:#fff;
  width: 11px;
}

Also, background:#fff; steht dafür, das der hintere Teil eurer Scrollbar weiß bleibt, soll dieser aber z.b schwarz werden, müsst ihr einfach anstelle von #fff; das hier hinschreiben: #000;

Für andere Farben könnt ihr auf dieser Seite nachgucken, dort könnt ihr nach eurer Farbe suchen und den Code dafür herausfinden.


Wollt ihr nun den beweglichen Teil der Leiste farbig verändern, schaut ihr euch diesen Teil an:

::-webkit-scrollbar-thumb {
background:#ccc;
}

Hier ist es wieder das gleiche, einfach den Farbcode hinter background verädern.

7. Wenn ihr nun alle Farbcodes ausgetauscht habt, könnt ihr – wenn ihr wollt, auch noch die Breite der gesamten Scrollleiste verändern.

Verändert einfach die Zahl bei width vor dem px, je größer die Zahl, desto Breiter die Scrollleiste!

Ich hoffe euch hat das Tutorial geholfen und ihr habt es verstanden, dann zeigt mal her eure neuen Scrollleisten  😉

36 Comments

  1. Svenja

    28. September 2012 at 11:33

    Hm also ich bin mir sicher ich hab alles richtig gemacht, Code einfügen kann ja nicht so schwer sein. xD
    Aber verändert hat sich nichts..

  2. Si~ist~Mone

    28. September 2012 at 11:48

    Danke für das tolle Tutorial! Leider klappt das bei mir nicht so richtig. Wenn ich das machen, dann habe ich bei der Vorschau gar keine Scrollleiste mehr 🙁 Wie genau setze ich denn die Farbcodes der Linkseite ein?

    1. Jasmin

      8. October 2012 at 17:07

      Bei mir ist es genauso wie bei dir! Kann uns vielleicht jemand helfen?

    2. Jasmin

      13. October 2012 at 15:41

      es hat jetzt endlich funktioniert.
      ohne euch wäre mein blog nie zu dem geworden, was er jetzt ist. DANKE ♥

    3. Vanjaa.

      30. October 2012 at 16:47

      @Si~ist~Mone

      Warscheinlich hast du das '#' vor dem Farbcode vergessen 🙂

  3. Alina Adé

    28. September 2012 at 11:50

    also ich hab auch alles so gemacht, wie es erklärt wird und bei mir verändert sich auch nichts :s

  4. Stella

    28. September 2012 at 12:10

    bei mir klappt es leider auch nich :s

  5. patrizia

    28. September 2012 at 12:10

    gibt es ja eigentlich schon auf time to steal ideas…

    1. Mira Ho

      28. September 2012 at 12:13

      die autorin wollte es aber noch auf cpl veröffentlichen, problems?

    2. Lara

      29. September 2012 at 11:40

      Verstehe dein Problem nicht, da ich es mir selbst angeeignet habe, es vor eurem Tutorial kannte, kann ich es ja wohl veröffentlichen wo ich möchte?
      By the way habt ihr auch SEHR viele Tutorials die auch hier zu finden sind, so ist das halt wenn man mit HTML Arbeitet. :D<3

    3. patrizia

      6. October 2012 at 9:12

      touché.
      okay, ihr habt ja recht. tut mir leid!

  6. lichtmalerin

    28. September 2012 at 13:50

    Ich geb auch mal meinen Senf dazu…
    Ich würde versuchen im oberen Teil des Codes noch height:15px; hinzufügen, sodass der Code dann so aussieht:

    /* Scrollbar */
    ::-webkit-scrollbar {
    height:15px;
    width: 10px;
    background:#color;
    }
    ::-webkit-scrollbar-thumb {
    background:#color;
    }

    So hat es bei uns funktioniert.

    lg,
    Paula

    lichtmalen.blogspot.com
    time-to-steal-ideas.blogspot.com

  7. Lara

    28. September 2012 at 14:10

    Hallo ihr lieben, bei den vorlagen von 2006 hat es so bei mir jedesmal funktioniert 🙂

  8. Jennifer Wettig

    28. September 2012 at 15:14

    Es kommt auf den Browser an. Diese Codes funktionieren für webkit-basierte Browser, also Safari und Chrome (glaub ich).

    In Firefox etc. funktioniert dies NICHT.

    Nur zur Info, dass es bei einigen scheinbar nicht funktioniert – es funktioniert schon, ihr seht es nur nicht!

    1. Svenja

      30. September 2012 at 12:03

      Ja bei Chrome ist es mir dann auch aufgefallen. 🙂

  9. Sandra PusteBlume.~

    28. September 2012 at 15:30

    Ich weiß gar nicht was ihr habt, bei mir funktioniert das einwandfrei 😉 Gutes Tutorial, weiter so … 🙂

  10. Resaa.

    28. September 2012 at 17:07

    http://sturmwindundfeenstaub.blogspot.de/

    Super Tutorial, hat einwandfrei frunktioniert! ♥

  11. Lynn

    1. October 2012 at 17:44

    Bei mir hat alles perfekt geklappt. Super Tutorial und sehr einfach erklärt!

  12. Anna

    3. October 2012 at 13:05

    Wirklich gut erklärt 🙂 hat bei mir super geklappt! Danke ! 🙂

    http://17moonlounge.blogspot.de/

  13. Désirée kurz - Debbi

    7. October 2012 at 12:43

    Danke schön:)
    Ich finde, den normalen total hässlich aber der hier ist ja richtig schick *:)*

  14. Lari

    9. October 2012 at 21:16

    also bei mir hat es leider nicht funktioniert… schade…

  15. Lara

    10. October 2012 at 19:58

    benutzt mal einen anderen Browser!:)

  16. Anonym

    13. October 2012 at 12:29

    bei mir passt alles. kann ich aber noch einstellen, dass sie nicht so eckig sondern rund ist?

  17. Charlie

    19. October 2012 at 8:05

    Danke!

    Alles Liebe,
    Charlie ♥

  18. Mäxi

    30. October 2012 at 21:57

    Bei mir hat sich da nach kurzer Zeit ein grauer streifen unten an meinem Blog gebildet 🙁

  19. Lena♥

    25. November 2012 at 18:51

    Pefekt funktioniert.. aber wie bekommt man die so rund? Also ich meine, dass der Balken abgerundet ist..?
    Lena♥

  20. Jenny

    16. December 2012 at 20:07

    Ihr seid echt klasse! ♥

    Hier ist meine Blogadresse: http://www.diamondbox1.blogspot.com

  21. Anonym

    15. February 2013 at 13:30

    Dankeschön. Mir hat es jetzt alles andere gelöscht und ich kann mit allem wieder von vorne beginnen, von den Avatar Bildechen bis zu der fixierten Sidebar 🙁

  22. Thanh Mai Tan

    17. February 2013 at 12:49

    Danke für das Tutorial :3
    Endlich geschafft 🙂

  23. Traumtänzerin c':

    27. February 2013 at 20:47

    Hört sich hilfreich an. Hab's aber jetzt nicht ausprobiert weil ich eh öfters mein Windows Skin's wechsle.
    & das ist der Punkt;
    Bleibt die Scrollbar so wie man sie selbst "designet" hat, wenn man ein andere Oberfläche benutzt oder ändert sich das wieder? :-/

  24. Lena

    26. May 2013 at 20:38

    Danke für die tollen Tutorials! Die helfen mir wirklich sehr weiter. Ein paar klappen zwar manchmal nicht, aber das liegt wahrscheinlich an mir.
    Liebe Grüße!

  25. Anonym

    29. May 2013 at 22:12

    Super tut! Danach hab ich schon lang gesucht!
    Lg, michelloi.blogspot.de :-*

Leave a Reply