scrollbar

View the tutorial here

Please make sure that you read the tutorial fully, and also all the notes that I have in the folders. If you’re still confused just ask me.

But do not ask me how to create themes, how to create div containers, how to change colors, add pictures, etc. If you any have knowledge about css and html, then you really shouldn’t be asking me any questions

EDIT: You have to name your main div layer #content. YOU HAVE TO!

Necessary files | Ask box | TUTORIAL | Preview
Stylish Scrollbar

<style type="text/css">

::-webkit-scrollbar {

height: 12px;

width: 17px;

background: #CD6090;

}

::-webkit-scrollbar-thumb {

background-image:url(IMAGE URL HERE);

border:1px solid #EEE0E5;

-webkit-border-radius: 5ex;

-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);

}

::-webkit-scrollbar-corner {

background: #transparent;

}

</style

  • Copy the code above and paste it between <head> and </head> tags.
  • You can change the background colour if you want, find this tags ( background: #CD6090; ) change the color with html color code example #FFFFFF for white color.

unfortunately it’s only working on Google Chrome only!

**ask me if not working


UPDATE

how to make your own image for scrollbar

  • Choose anything image and crop it, then resize the image width:8px  height:50px
  • then upload the image at image hosting site like tinypic, photobucket etc to get the url image. 

anonymous asked:

can you do a tutorial on how to put in a custom scrollbar?

Lol, it’s REALLY easy. Go to Customize > Theme (where it shows all your HTML codes and whatnot) and you’re going to see a long list of things that say <meta name=“ blah blah blah” content=“blah blah”/>, so you’re going to want to paste THESE two codelines somewhere in inbetween the <meta name=“ lines, it doesn’t matter where really.

After that you have to paste THIS code into your theme, past all the meta name codelines, under <style type="text/css”> in your theme. It may not say text/css but just paste it under the style type tag. If something’s already under the style type tag then paste it under that. This is the base of your scrollbar.

Then go to your appearance tab (Still on customize), and check the Custom Scrollbar option.

Then, still on appearance, select your scrollbar color.

Whatever color you choose, it should appear:

obviously instead of this scrollbar:

That’s it! Hit save & you’re done. If this doesn’t work for you, you must have a different styled theme, something is different, etc. etc. and this obviously isn’t the right scrollbar tutorial for you. 

Stylish/Customized Scrollbar

All of my themes have this feature. It looks like this:



Paste  THIS code before the </style> tag. In order for you to change its appearance (colors, height & etc), this will serve as your guide:



YELLOW: width of the scrollbar
ORANGE: distance from the top from the starting point of the scrollbar
PINK: color of the distance from the top of the starting point of the scrollbar (you can see an example right in this blog)
BLUE: color of the background of the scrollbar
RED: makes round edges of the scrollbar (if you don’t want any round edges, remove that part)
GREEN: color of the scrollbar
VIOLET: color of the scrollbar when hovered

>>You can use THIS website in picking the colors for your scrollbar.<<


If you want your scrollbar to be an image, add this code beside the GREEN one:

background-image: url(URL OF THE IMAGE);



Click save & done! you have a stylish scrollbar on your blog! :D



themesbyraidshutterbug

how to add a custom scrollbar

1) press ctrl+f & search for <style type=“text/css”>

2) copy & paste this code beneath <style type=“text/css”>

::-webkit-scrollbar {width: 6px; height: 4px; background: #000000; }

::-webkit-scrollbar-thumb { background-color: #4E2134; -webkit-border-radius: 1ex; }

3) change the background color to whichever color you want the scroll to be

example : the background would be black & the scroll would be white

::-webkit-scrollbar {width: 6px; height: 4px; background: #000000; }

::-webkit-scrollbar-thumb { background-color: #FFFFFF; -webkit-border-radius: 1ex; }

4) save using old customization & your custom scroll bar will be in place 

Styled scrollbar (Only for Google Chrome)

In this tutorial I’ll show you how to make

  1. Round scrollbar
  2. Rectangular scrollbar
  3. Scrollbar with a customized background

HTML COLORS: http://immigration-usa.com/html_colors.html

You will see that I’ll mention a lot of times THUMBS OR TRIANGLES, if you don’t know that they’re click HERE to see a full picture and the explanation

———————————————————————-

FIRST TUTORIAL: Round scrollbar

Step 1. Go to customize>theme>use custom HTML

Step 2. Copy THIS code and paste it AFTER <style type=”text/css”> or BEFORE the </style> tag (for beginners)

———————————————————————-

SECOND TUTORIAL: RECTANGULAR SCROLLBAR

Step 1. Go to customize>theme>use custom HTML

Step 2. Copy THIS code and paste it AFTER <style type=”text/css”> or BEFORE the </style> tag (for beginners)

———————————————————————-

THIRD TUTORIAL: SCROLLBAR WITH A CUSTOMIZED BACKGROUND

Step 1. Go to customize>theme>use custom HTML

Step 2. Copy THIS code and paste it AFTER <style type=”text/css”> or BEFORE the </style> tag (for beginners)


Tutorial: customize your scrollbar

Look at ours scrollbar to see an example! —->>>>

01.
Copy THIS code, go to your Customize page (Customize > Edit HTML) and then paste it BEFORE the </style> tag. 

02. This is the code that we’re using in this blog, so probably you will want to customize it to match your theme. The code has some instructions that will help you, but remember:
- If you want to change the color, you have to use a HTML color.
- You can also put a background image, just replace URL HERE with the image’s URL that you choose (it should end in .jpg, .png or .gif), example: http://25.media.tumblr.com/073756d53ecf7f8d4faa06f28020574f/tumblr_mljbpxwsZr1qgxe8oo1_250.jpg
- If you don’t want the rounded corners, just remove this code:
-moz-border-radius: 5px; /*these make bar rounded*/
border-radius: 5px;
- If you don’t want the border, remove this code:
border: 1px solid #cecece; /*border’s color*/
- You can also change the border color, replace #cecece with the color you want using HTML colors.

03.
Save and it’s done.

Credits: http://cindie.tumblr.com/

GREYISH THEME #1 by LEPARISMIDST

Live preview | Code

- Two column

- Webkit Scrollbar

- Link Effects

- Cute Cursor

- Sidebar Shadow

*Credits to (fckkyeatumblr) for the graphics and some tutorials. geee, i forgot his/her url but it’s like that. :3

*Please do LIKE THIS POST or TA ME if you’re going to use it/using it. :)

*Just TA ME for any questions about the theme <3 :)

Want a scrollbar like mine but in a DIFFERENT COLOUR?

I’ve got loads of colours for it and all with glitters! Just message me with the colour you want and I’ll give it. It would be nice if you’ll promo or credit me. That’s all. <3

Customized Scrollbar

  1. Go to your Customize page and click Edit HTML.
  2. Find the <style type=“text/css”> in your theme’s HTML.
  3. Once you’ve found it, place this code below the tag.
  4. In order to change the color of your scrollbar you’ll see the background-color: #8ec4c7; code in the second line. Change the #8ec4c7 to the hex code of your desired color.
  5. Click Update preview to make sure you like the outcome of the scrollbar.
  6. Once satisfied, click Save.