Info: Dieser Blog wurde 2014 eingestellt. Dies hat viele Gründe, die an dieser Stelle jedoch nicht relevant sind. Die meisten der hier veröffentlichten Tutorials sind inzwischen nicht mehr aktuell, verlasst euch also nicht auf das hier geschriebene.
Zusammen mit dem Blog sind auch unsere E-Mail, unser ask.fm und unser facebook eingestellt.

Scrollbalken anpassen



Hallo ihr lieben Leser von It's Time To Steal Ideas.
Heute zeige ich euch, wie ihr die Scrollbar eures Blogs persönlich anpasst. So wie auf dem wahrscheinlich schlecht zu erkennendem Bild hier rechts an der Seite.

(via Welcome to reality)

Für alle, die fragen:
Die Scrollbar ist das 'Dings' an der Seite, mit dem ihr über die Seite scrollt.
(btw, das hier farbige, hellblaue Teil ist das mit dem gescrollt wird, wo ihr raufklickt. Im Tutorial nenne ich es nur 'Dings')








Zuerster öffnet ihr den HTML Teil eures Blogs und sucht mit STRG+F nach outer-wrapper , sodass ihr zu dieser Stelle kommt:
(wenn ihr eine neue Vorlage benutzt, dann sucht ihr nach Headings und fügt alles was nun kommt über Headings ein.)




Direkt über dem bei mir orange markierten fügt ihr folgenden Code ein:


/* Scrollbar */
::-webkit-scrollbar {
height:15px;
width: 10px;
background:#color;
}
::-webkit-scrollbar-thumb {
background:#color;
-moz-border-radius:20px;-webkit-border-radius:20px;}
Ich erkläre kurz, was die verschiedenen Teile bedeuten. 

height:15px; - Gibt an, wie hoch das 'Dings' ist, mit dem gescrollt wird

width:10px; - Gibt an, wie breit die gesamte Scrollbar ist

background:#color; - Gibt es zweimal. Der Erste gibt den Hintergrund der Scrollbar an - im Beispiel oben weiß. Der Zweite gibt die Farbe des 'Dings' an. Eine Tabelle mit den Farbcodes gibt es hier. (Achtung: Das # darf nur einmal da sein - wenn ihr den Farbcode kopiert, müsst ihr darauf achten das eine # zu entfernen!)

Das grau hinterlegte fügt ihr ein, wenn ihr wollt, dass eure Scrollbar abgerundet ist, so wie bei mir.

Fertig sieht euer Code etwa so aus:



So, ich hoffe dieses Tutorial war halbwegs verständlich - mir fiel es sehr schwer es zu erklären :D

Paula

Dies funktioniert nicht beim unendlichen Scrollen

Kommentare:

  1. Das habe ich schon total lange gesucht, allerdings wenn ich das einfüge ändert sich die Breite meines Blogs. :o

    AntwortenLöschen
  2. Bei mir gibt es gar nicht die Stelle 'outer-wrapper' :(

    AntwortenLöschen
  3. bei mir kann ich alles einfügen, über heading und so, aber das 'dings' bekommt bei mir keine farbe, auch wenn ich den farbcode einfüge. :s
    hast du irgendeinen tipp was schief gelaufen sein könnte?

    xoxx, sabrina.

    AntwortenLöschen
  4. alles klar, danke (: jetzt hats sehr gut geklappt (:

    xoxx, sabrina.

    AntwortenLöschen
  5. höhö, nicht zwei rauten machen.. immernoch peinlich :D Das Tutorial ist echt toll, das wollte ich schon lange mal wissen, aber habs nicht gefunden :)

    AntwortenLöschen
  6. Danke schön, es hat meinem Blog echt gut getan ;D

    AntwortenLöschen
  7. gibts das nicht fürs unendliche scrollen irgendwie?
    ;oooo

    AntwortenLöschen
  8. Wie bekommt man einen ganz normalen Scrollbalken, so wie hier auf der Seite?
    Ich hab ein Themen kopiert &'nd da war schon ein neuer Scrollbalken mit dabei, leider ist das Ding ziemlich dünn &'nd relativ unpraktisch.. Ich hoffe man versteht jetzt was ich meine. Ich habe versucht es wieder zu verändern, aber ich glaub, ich bin einfach zu dämlich dafür.. x.x

    AntwortenLöschen

Wie schon an anderer Stelle dieser Seite bemerkt, ist der Blog eingestellt. Das bedeutet leider auch, dass wir als Blogautoren auf deinen Kommentar nicht eingehen werden.