How to Make a Simple Sidebar
Wondering how to make a sidebar? No worries! Sidebars are basically the hardest part of theme construction. It’s also the reason I deleted my first 5 themes. If you’re having trouble with creating a sidebar, then read on.
First of all, I recommend that you start making the sidebar from scratch, as in nothing else in the html.
Now, if you’re experienced with html you may know what CSS is. It’s basically the design of whatever you would like to add into the theme. To make the sidebar, I’d start with something along the lines of this:
If you’re too lazy to copy down all of that, you may also copy and paste it from here. If you hit “update preview” and nothing is coming up in the preview, nothing will come up. Don’t worry, you’re not doing it wrong!
Anyways, I’m going to explain what the codes to. “Width” and “height” is self-explanatory, I assume. But we need a border! Try this: “border: 1px solid black”. That means the border would be 1px thick, the line is solid (rather than dashed or dotted), and then you can choose the color.
Wow! We can’t see their description! The font should be bigger! Try this: “font-size:” and “font-family:”. You may add any font you would enjoy. And “text-align: center” makes the text aligned to the center, while left would align the text to the left side, and the right to the right side.
"Background-color:" should be self-explanatory, I hope. "margin-top:" and "margin:left" would apply to how far the sidebar is from the top and left.
No!! The sidebar still isn’t there!! Don’t worry, you’re doing it right. Now we’re going to go over how to insert the sidebar.
Write after “</style>”, you’re going to write “<body>”. The “<div id=”sidebar” is referring to the CSS code that says “sidebar. So writing that will show you the sidebar coming onto the preview. This is what it should look like all together:
We can all agree that the sidebar we have just created is hideous, so we can go back to the CSS and play around with the effects.
Play with the effects! Here, I changed the small white box to this:
If you have any questions or concerns, feel free to send me a message.
Please like or reblog if you are going to or planning to use this as a reference!
gamechangershow
yousharknotpass
theartofmadeline
jimmyeatworldofficial
turnnoffyourmind
amandla
