Post by FallenSamurai on Jul 22, 2014 14:43:25 GMT -5
Hiding Scrollbars with Images
At one point or another you have probably come across a profile or two that somehow have managed to hide those hideous looking things called scrollbars. "What sorcery is this?!" you may ask yourself and I shall answer with the simple reply of "HTML, CSS, and a little Photoshop".
I shall also note that some browsers will allow you to change the appearance of the scrollbar with just CSS. However each browser is different and the codes they like won't transfer/work in a different browser and some browsers won't let you do anything at all
. Until they make these codes universal this tutorial will be your best bet.
For this tutorial I used the following programs: Photoshop CS6, Firefox, and Firebug (FF plugin).
If anythings seems unclear, please let me know.
TIP: Drag the images into your browser's tab bar to see the full-size images.
Start with your profile
To make the scrollbars vanish, you will first need to start with your profile. For this tutorial I will be using one of my old profiles.
With your profile open in your image in Photoshop, (I am using Photoshop CS6), figure out where you want to place your scrollbars. Since scrollbars appear on the right side of the content that is where I will be placing mine. Next I create a new image with a width of 17px and a random guess of height for the content. Both of these values can be changed later. Take your new image and drag it into the profile.
Note: I have found in PS CS6 that if you take the Rectangle tool and click once on your canvas a prompt will come up allowing you to input width and height values and will make a rectangle to the inputted values.
Using this rectangle as a base, you can now go about creating a "cover" for the scrollbar.
For this profile I created a triangle shape with the polygon tool to show "up" and "down". I also created a pattern that would show up as a dashed vertical line. I messed around with the layer styles to achieve a desired effect. The base rectangle that I dragged in was transformed (Ctrl+T) to the height of the content. These layers were then grouped together. I then duplicated the group and moved the copy into the second content box. The third box is for the comment box which will not scroll, therefor it did not need a scrollbar cover.
"Cutting out" your scrollbar cover
So now that you have created your covers, you will now need to "cut" them out. In Photoshop, in your tools and under the Crop (C) tool is the Slice tool. Using the slice tool, select the area around your covers making the selection slightly bigger than the cover (See images below).
Once you have your covers "sliced", go to File > Save for Web... A window will pop-up that will allow you to pick slices and choose their output file type. You will want to select the slices of the cover(s). If selecting more than one slice hold shift down as you select. For the file type I usually choose the PNG-24. I would stay away from GIF, since it may degrade the image. Click Save. When the next window pops up, make sure that Selected Slices is, well, selected. Click Save.
Your covers should now be saved.
Coding your scrollbar cover
With your profile still open, we will now begin the coding process. Using the slice tool once again figure out where you want your text to go and slice.
Using these slices, you will now be able to position everything perfectly. You may want to refer to the Div Positioning Tutorial at this point if you have not read it before.
Grab the values of the slices and write them down somewhere.
Note that we will be changing the values of the width for the content div so that we can cover the scrollbars.
With this profile that I am using as an example, this is how I set up my profile.
Left Column: Most of the profile stuff I wanted to show up
Middle Column: Pet Images
Right Column: Comment Box and a blank section
In the blank section I would set up the following HTML:
In the CSS, I coded everything out using the values I gathered earlier. As you can see, the scrollbars are not covered up, yet.
Next, what I do is slightly increase the width of #column1 and #column2 so that the scrollbars begin to be covered up. You may have to nudge it pixel by pixel. If the scrollbar is not being covered, make sure that the z-index for the scrollbars is set to 1.
This is what my CSS code looked like for the columns and the scrollbar.
Final words
Those disgusting scrollbars should now be covered up. If you are still having trouble, post here or shoot me an sMail or post on the Profile board over at Subeta.
At one point or another you have probably come across a profile or two that somehow have managed to hide those hideous looking things called scrollbars. "What sorcery is this?!" you may ask yourself and I shall answer with the simple reply of "HTML, CSS, and a little Photoshop".
I shall also note that some browsers will allow you to change the appearance of the scrollbar with just CSS. However each browser is different and the codes they like won't transfer/work in a different browser and some browsers won't let you do anything at all
. Until they make these codes universal this tutorial will be your best bet.For this tutorial I used the following programs: Photoshop CS6, Firefox, and Firebug (FF plugin).
If anythings seems unclear, please let me know.
TIP: Drag the images into your browser's tab bar to see the full-size images.
Start with your profile
To make the scrollbars vanish, you will first need to start with your profile. For this tutorial I will be using one of my old profiles.
With your profile open in your image in Photoshop, (I am using Photoshop CS6), figure out where you want to place your scrollbars. Since scrollbars appear on the right side of the content that is where I will be placing mine. Next I create a new image with a width of 17px and a random guess of height for the content. Both of these values can be changed later. Take your new image and drag it into the profile.
Note: I have found in PS CS6 that if you take the Rectangle tool and click once on your canvas a prompt will come up allowing you to input width and height values and will make a rectangle to the inputted values.
Using this rectangle as a base, you can now go about creating a "cover" for the scrollbar.
For this profile I created a triangle shape with the polygon tool to show "up" and "down". I also created a pattern that would show up as a dashed vertical line. I messed around with the layer styles to achieve a desired effect. The base rectangle that I dragged in was transformed (Ctrl+T) to the height of the content. These layers were then grouped together. I then duplicated the group and moved the copy into the second content box. The third box is for the comment box which will not scroll, therefor it did not need a scrollbar cover.
"Cutting out" your scrollbar cover
So now that you have created your covers, you will now need to "cut" them out. In Photoshop, in your tools and under the Crop (C) tool is the Slice tool. Using the slice tool, select the area around your covers making the selection slightly bigger than the cover (See images below).
Once you have your covers "sliced", go to File > Save for Web... A window will pop-up that will allow you to pick slices and choose their output file type. You will want to select the slices of the cover(s). If selecting more than one slice hold shift down as you select. For the file type I usually choose the PNG-24. I would stay away from GIF, since it may degrade the image. Click Save. When the next window pops up, make sure that Selected Slices is, well, selected. Click Save.
Your covers should now be saved.
Coding your scrollbar cover
With your profile still open, we will now begin the coding process. Using the slice tool once again figure out where you want your text to go and slice.
Using these slices, you will now be able to position everything perfectly. You may want to refer to the Div Positioning Tutorial at this point if you have not read it before.
Grab the values of the slices and write them down somewhere.
Note that we will be changing the values of the width for the content div so that we can cover the scrollbars.
With this profile that I am using as an example, this is how I set up my profile.
Left Column: Most of the profile stuff I wanted to show up
Middle Column: Pet Images
Right Column: Comment Box and a blank section
In the blank section I would set up the following HTML:
<div id="sb_c1"></div>
<div id="sb_c2"></div>In the CSS, I coded everything out using the values I gathered earlier. As you can see, the scrollbars are not covered up, yet.
Next, what I do is slightly increase the width of #column1 and #column2 so that the scrollbars begin to be covered up. You may have to nudge it pixel by pixel. If the scrollbar is not being covered, make sure that the z-index for the scrollbars is set to 1.
This is what my CSS code looked like for the columns and the scrollbar.
#column1 {
position: absolute;
left: 161px;
top: 398px;
width: 406px;
height: 252px;
overflow-y: auto;
overflow-x: hidden;
}
#sb_c1 {
position: absolute;
background-image: url(SCROLLBARL_URL);
left: 550px;
top: 394px;
width: 25px;
height: 260px;
z-index: 1;
}
#column2 {
position: absolute;
left: 582px;
top: 398px;
width: 135px;
height: 252px;
overflow-y: auto;
overflow-x: hidden;
}
#sb_c2 {
position: absolute;
background-image: url(SCROLLBAR_URL);
left: 702px;
top: 394px;
width: 25px;
height: 260px;
z-index: 1;
}Final words
Those disgusting scrollbars should now be covered up. If you are still having trouble, post here or shoot me an sMail or post on the Profile board over at Subeta.