Dreamwidth Layouts

At heart, I'm a geek, and CSS and graphics are a huge time sink. A lot of times you'll notice that I'll update a single thing on my journal layout. In boredom, I decided to share some coding with you guys that you might appreciate!

JOURNAL INTERACTION LINKS

LIVE PREVIEW: stormy

( On to the coding! )

Copy and Paste Center

For easy breezy links, simply copy and paste the following code into the bottom of the great big box on this page: http://www.dreamwidth.org/customize/options?group=customcss and feel free to ignore my blabbering on how it all works.
ul.entry-interaction-links li { display: inline; list-style: none; font-weight: bold; color:#333333; margin-left: 2px; padding: 2px 10px; text-transform: uppercase; background: #EEEEEE url(http://i.imgur.com/atVUl.png); border: 1px solid #DDDDDD; -moz-border-radius: 2px; } ul.entry-interaction-links li:hover { background: #EEEEEE url(http://i.imgur.com/atVUl.png); border: 1px solid #DDDDDD; border-top: 4px solid #C1272D;} ul.entry-interaction-links a { color: #888888; text-shadow: 1px 1px 0 #FFF; } ul.entry-interaction-links a:hover { color: #888888; text-shadow: 1px 1px 0 #FFF; } li.entry-readlink, ul.entry-interaction-links li.entry-readlink, ul.entry-interaction-links li.readlink { display: inline; list-style: none; font-weight: bold; font-size: 1.0em; color: #FFFFFF; margin-left: 2px; text-transform: uppercase; padding: 2px 10px; background: #C1272D url(http://i.imgur.com/atVUl.png); text-shadow:-1px -1px 0 #111111; -moz-border-radius: 2px; border: 1px solid #9D090E; } li.entry-readlink:hover, ul.entry-interaction-links li.entry-readlink:hover, ul.entry-interaction-links li.readlink:hover { color: #FFFFFF; background: #A30207 url(http://i.imgur.com/atVUl.png); border: 1px solid #760105; text-shadow:-1px -1px 0 #111111; } ul.entry-interaction-links li.entry-readlink a { color: #FFFFFF; text-shadow:-1px -1px 0 #111111; }

( And if you want the color codes, I have those too! )