Social Sidebar (Gimp/HTML/CSS: Beginner Friendly)
Learn how to create a stylish following social networking sidebar for your website, designing in Gimp, and coding it in HTML, and CSS.
Today what we're going to do is create a "Social Sidebar" example preview displayed below.
NOTE: You can head to the downloads page on GimpPimp to download the files for this project.
Step 1: Getting Started Before we begin make a new folder on your desktop, and name it "social sidebar" inside that folder make another folder called "images" (This is where you should save all your images in Step 2) Inside your "social sidebar" folder make two text documents, 1 being index.html and the other being style.css.
Step 2: Sidebar Design To make things easier take a screenshot of your website by going to your website, and pressing the PrtSC button by your backspace button on your keyboard.
Then open up Gimp and set the dimensions of the project to the dimensions of your desktop. Paste the screenshot (CTRL-V) and then anchor the layer (CTRL+H)
Make 3 new layers, and name then from this order from bottom to top, "borderblur", "border", "insidegradient"
Now we're going to have our sidebar on the right side of our website, so lets grab our Rectangle Select Tool "R" and make a good selection you think would be decent for a sidebar, and fill that in with black "#000000".
Now right click your border layer and select "Alpha to Selection" then go to Select/Shrink and shrink it by 4px now grab your rectangle select tool, or your free select tool and change the mode (in the tools options) and choose "Add to the current selection" and make sure you fill in that part that got shrunk on the edge of our sidebar then grab your gradient tool and choose the gradient "FG to Transparent" and fill that selection from right to left as seen in the screenshot below.
Before we go ahead make sure to save the top part of the sidebar as 1 image, the middle as it's own (the width of all 3 of these should be the same, and the height of this middle image set it as 1px), and the bottom as it's own with all 3 having a transparent background. Our sidebar is nearly complete in designing, yet we still need to add in the social networking icons like facebook, twitter, etc:
So do a Google Image search for the social networking icons you're looking for, and add them into Gimp. Grab your scale tool (Shift+T) and make sure the width of the icons are all the same, and somewhat small. (I made mine all 30px in width)
Then set one icon by one below the other one with some space left between it, then merge all the social networking icons together (make sure they're separated though) then change the name of that layer to "socialicons" and set the opacity of that layer to 45%.
[optional] Now give the "socialicons" a Drop Shadow (Filters/Light and Shadow/Drop Shadow) (I set my X offset to 0, Y offset to 4, and the blur radius can be whatever you want, just make sure it's small. 8px should be good for this project) then change the opacity of the "socialicons" layer back to 100% merge it down to the newly created "Drop Shadow" layer and set the opacity back to 45%, and change the name from "Drop Shadow" to "socialicons" if not already done so.
As you guys can see in the screenshot above I chose RSS, Facebook, and Twitter so grab your Rectangle Select Tool "R" and delete the facebook, and twitter icons in each layer then go to Layer/Autocrop Layer and on each layer then Image/Autocrop Image. Go to Image/Canvas Size and make the height x2 of what it is, but the width the same. For example if the image is 30x30 set it to 30x60. Then move the "socialicon2" layer right below the "socialicon" layer then save that image as name.png (I save my rss image as rss.png) Then do that to the rest of the social networking icons. (Don't forget to undo (Edit/Undo or CTRL+Z) so you can do this same process for the other social networking icons)
[optional] Now I decided to make a background image so we don't have a plain background color, if you wanna do this, just open the warning pattern into Gimp select the yellow line with your Color Select Tool "O" and change it from Yellow to #3b3b3b, and save it as bg.png.
Step 3: The Stylesheet
Now open up your style.css file you created when starting this tutorial.
This code tells us our body (aka background) will be at 2000px in height, that way we have a scrollbar, it also tells us we set the bg.png image we made above as our background image, and that it's displayed in the top left, and that it'll repeat for the whole website.
This is the code that's gonna position our images so that they stay in the same spot, so what it's telling us is that we called this div sidebar, it's position is set to fixed, so that it'll stay put when we scroll, it'll go down 100px from the top, aligned directly on the right side of the browser, and the width is set to 82px (this should be the width of the sidebar you created when we began).
This part of the code tells us that the div we created is called topsidebar, it's width is 82px (width of the sidebar, remember), the height is 42px (this is the height of the top sidebar we saved), and we also embedded the topsidebar image we created earlier as it's background image.
Here we created a div for the middle part of the sidebar, now it actually went 2px to the left instead of staying directly on the right side, so I fixed that with margin-left:2px; so it'll stay on the right, we then gave it's width, set it's background image, and had it repeat vertically so each time we add a social networking site, our sidebar will expand :)
We create this div so that our social networking icons will be right in the middle of the sidebar, as without this div, they'll be positioned a little on the left of our sidebar, and we want them in the middle, which is why we created this div.
This div is to display out bottom sidebar, as you can see the width, and height of this div is of our bottom siderbar image we saved, and we set that as the background color of this div.
Now here we created an image rollover, the class for this rollover is named RSS, which here we set the width of the RSS image we created, but the height is half the size of the original image, as we set the background image, and it's positioned on the top left, but when overed over it shows the bottom left. For a better understanding of css image rollovers view my video tutorial here on one image rollovers in CSS.
This is just the rest of the code for the class of the image rollovers for the facebook, and twitter links.
Here's our the full CSS code.
Step 4: The HTML
Now open your index.html file and lets begin marking everything up.
First we need to startout with our HTML tags
We then need to add our head and title tags for the name of the page.
Now lets add in our style sheet we created earlier.
Now lets add in our body tags, and then lets get our sidebar in here.
Now we add in our topsidebar div. (Notice the sidebar div it's self is going to be the last to close with the sidebar, the reason for this is to make sure everything is positioned right, and inside that div, cause remember that's the div we used for positioning. the top sidebar will be put in first, and closed to display that as the top sidebar)
Now here we added in out midsidebar div.
Now here we added our socialmedia div inside the midsidebar div so that how many rollovers you have you can embed all thoughs inside (like I did) and it'll keep expanding.
Now here all we need to do is put our bottomsidebar div outside of the midsidebar, and socialmedia div's so it'll display on the bottom of our siderbar div.
There you guys go on how to create the Social Sidebar :)
TIP: If you click and drag the index.html file we created into a web browser you'll be able to see the social sidebar we created in action.
Download the project file on GimpPimp's downloads page.
View the Tutorial →