Nerd Party: Make your links pop with CSS boxes
A simple way to add bold, bright links to your header, sidebar or post text is with CSS. No need for Photoshop, creating images and matching text to your site. Just follow this tutorial…
First, add a bit of code to your stylesheet for each color:
.red {
float: left;
display: block;
clear: both;
margin-bottom: 10px;
padding: 5px 10px;
font-size: 16px;
color: #fff;
background: #fc2c20;
}
.red a {
color: #fff;
}
Float: Tells the text to align to the left or right
Display: The element is displayed as a block-level element (like paragraphs and headers)
Clear: No other elements are allowed on the left or the right side of the box
Margin: Creates a space 10px high between the boxes
Padding: Creates space inside the box around the words – there will be 5px on the top & bottom and 10px to the right & left. You could also just put 10px which would make the padding the same on all sides or if you wanted each side to be different, it would be something like 5px 8px 10px 5px (top, right, bottom, left)
Color: Makes the words white
Background: Fills the box with a color (find color codes here)
Red a: Tells the link to stay white instead of using the link color from the rest of the site
If you want all the boxes to be the same length add width: 200px;
And if you’d like them to change color on a mouseover add this:
.red a:hover {
background: #000;
}
Next, find your links (header, sidebar, page, etc.) and add this:
<div class=”red”><a href=”http://sillygrrl.com/about”>About</a></div>
<div class=”green”><a href=”http://sillygrrl.com/portoflio”>Portfolio</a></div>
<div class=”teal”><a href=”http://sillygrrl.com/shop”>Shop</a></div>
Your links go in the light gray bits of code.
Easy peasy! Any questions? What else would you like a tutorial for?
CLICK HERE FOR MORE NERD PARTY POSTS
(If you like my Nerd Party posts, a great way to show your appreciation & generate some traffic for your own site is to purchase ad space in my sidebar. I’ve got two opening up tomorrow! Click here for more info)
03.06.13 in nerd party
This looks great but how do I use it with a wordpress theme? I can edit the css but I dont knwow where to find the links.
This is the website im tryin to use it on— http://www.patternmepretty.net/
the original theme is called coraline.
thanks a bunch!
Hey Aneela, this tutorial will work with any blogging platform and template. You may have to do a little more research on html and css to figure it out :)
Hey there,
thanks for the tips! Someone recommended your site and I popped by to have a look. Loving it so far and looking forward to checking it out in more details when I have more time!
Love this idea! I just took a CSS class at school and feel like I’m just at the tip of the iceberg of everything there is to learn about coding. I’d love to learn more tips like this!
I’m not sure why, but this is absolutely not working on Blogger. I inserted the CSS in the “Insert CSS” page, and added the HTML in an HTML widget. All should be well, but nothing happened. I don’t suppose you know if Blogger blocks CSS for some reason? (Although I wouldn’t think so since they have a CSS input page).
I’ve used it on Blogger many times. You may have to add the code to your template file though I would think it would work in the insert css page as well.
Wow! I’m new to your site, but man I’m learning so much. Thank you! Now maybe there is hope for my blog after all.
You’re welcome! Let me know if you have any design questions or technical issues you’re running into. Happy to help
Wow, thank you for this! I’m glad I found your site :)
-V
Pingback: Link Love, Vol. 9 - Break the Sky
Pingback: Friday Link Love at theinbetweenismine.com
I have always wondered how to do this! Who knew it was that easy?! Thanks for the tip :D
Whaaaaaat? My mind is officially blown.
I love learning all of these random things on your Nerd Party entries. It’s been a while since you did one with your favorite WordPress plugins – if you’ve found any new ones you like, I’d love to see those in a future post!
Magic!! Yes, I’ll definitely do another WordPress plugin post – thanks for the suggestion!