sα΄α΄Κα΄Κ (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
stormy) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
dreamwidthlayouts2010-09-25 10:25 pm
stormy) wrote in dreamwidthlayouts2010-09-25 10:25 pm
Entry tags:
[Tutorial/Codes] Stormy's Comment Links
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!
LIVE PREVIEW:stormy
JOURNAL INTERACTION LINKS
LIVE PREVIEW:
stormyFirst, a little information...
On your journal, there are two types of links at the bottom of your entries. TheENTRY MANAGEMENT LINKSandENTRY INTERACTION LINKS. The links to reply, read comments, and link to an entry are called the Interaction. And the Management links are the images or text to edit, add to memories, share, and so on. I'm going to focus on theINTERACTIONlinks today.
I've included an image of mine above. The Link button was the one I was currently hovering over. The Reply button is how the links normally look, and then there's the Comments button, which is also known as yourREADLINK. This is known as a class, and basically what it allows you to do is have a different appearance for the link to read your comments. As you can see on mine - I've made it very obvious when I have an entry that has comments. I like seeing a bright red button. Dreamwidth has hundreds of classes to make customizing your layout as complex as you want it to be.
Style Sheets for your journal are written in CSS (Cascading Style Sheets). There are a lot of handy places to look up information online. One of my favorites for reference is www.w3schools.com.
But for now, we'll concentrate on the only on the Interaction Links that I have above. What you might be surprised to know is that I've only used one image in my code, and you can easily change the color of those buttons to any color! The image is a mostly transparent gradient, basically sheer at the bottom with a transparent white at the top to give that glossy look. Everything else is done with CSS. I use Firefox, but these should look nice on the other browsers as well.
When you're looking at your links, what you're really looking at is a list that is either being told to place each part of the list in a straight line horizontally or a list going down. Below UL stands for unordered list, and LI stands for list item. A is the shorthand for a link, and you'll recognize that if you've ever written a link in HTML. It begins with A. CSS is all about knowing these little shorthands for writing out how you want things to look.
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;
}
First up, the interaction links!
Now, you might think these are the links themselves, but that's not true. There's no a. This is basically the space the link is in. In this case, I am telling the site that I want my links to (as broken down by each line):
Be in a straight row.
With no little bullets next to them.
The text needs to be bold!
With a dark gray font.
To be spaced apart a little. 2 pixels of space, to be exact. (margin)
To have space around the text. 2 pixels above and below, and 10 to the right and left. (padding)
The text needs to be all uppercase/in caps.
The background is #EEEEEE - a light silver and it has that sheer image over it.
I want a border that is 1 pixel thick, a solid line, and is #DDDDDD, a slightly darker gray.
And I want Firefox to round the corners by 2 pixels. Otherwise, this would be a perfect rectangle.That's a lot!
That's actually nothing in the span of code. But you know know what each one of those lines in that code does to make that space a little more interesting. On my journal, when you hover over one of these, you can see they get this thick red line at the top in the same color as other parts of my journal. You can make almost anything in your journal change when your mouse goes over it by adding:hoverto the end of the class. The code to accomplish the lines looks like this:
ul.entry-interaction-links li:hover {
background: #EEEEEE
url(http://i.imgur.com/atVUl.png);
border: 1px solid #DDDDDD;
border-top: 4px solid #C1272D;}
Notice that it starts out the same as before, and the only addition is :hover. You don't have to include all the lines from above. I chose to include the background color and border from before in case I wanted to change it to a totally different color when I hover over it! The code that makes the line appear on the top is the last line up there:border-top: 4px solid #C1272D;and the color of my red is #C1272D, which is pretty close to the Tropo Red Site Scheme. Now, something important to remember is that CSS reads from top to bottom, like we read a book. If you have the same code at the top and the bottom, but the bottom one is a little different - it'll use the bottom one. So in my code above, you can see I have a 1 pixel border around the whole thing, but then I go back and tell it that I want a 4 pixel border on the top.Now, the links..
Before I said that links were A. So you'll see the same entry interaction code as before, and this time with an A after it, to specify that I want to change the text of my links. Below, I have both codes for my links - how they appear normally, and how they look when you hover over them. If you notice on my journal, the link text doesn't change. It stays gray with this small bit of highlight on the bottom that makes it look like it's been embossed into the button.
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;
}Change
TIP: If you want the links to change color?
#888888inul.entry-interaction-links a:hoverto a color of your choice. I use a color picking program to do this, but a site I love is www.december.com for its color codes. A HEX code is the six digit code that represents a color.So the links are done! You could stop there, but...
If you want to color theREADLINK, or the link that displays how many comments you have, then there's a bit more coding. Remember that READLINK has its own class so that we can make it special. Just like we decorated the space behind the text before, we're going to do it again with nearly the same code. The only thing we're changing is telling it different colors. I wonder if you can figure out what this does by now:
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;
}
I'm sure this is starting to look familiar by now! You'll notice only a few changes from our first block of code. There's a bit of extra class code at the top before the { bracket. That's just me making sure that it knows just which links I want it to change. The background color is #C1272D, which is that Tropo Red color. The border is a darker shade of red, #9D090E, the font color is #FFFFFF, which is the HEX code for white. The other big change is this code:text-shadow:-1px -1px 0 #111111;. Again, I'm putting a shadow behind the text, but this time - I'm putting it above the text so it looks inset like it's casting a shadow. You really don't need to mess with this code, but the shadow is a very dark color, almost black: #111111.Now for the :hover effects!
You'll notice the :hover, and the only other big changes are the background and border colors to be darker. You can pick any colors, including making them lighter instead of darker. And the code...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;
}The background is #A30207 and border is #760105. The shadow is the same color.The text!
And last, but not least, the text itself for ourREADLINK. The color I chose for the background is dark, so we want LIGHT text. We'll go with white! Because it was white, I didn't change the color of the text when you hover over it, but if I wanted to I could just copy the code below a second time, add:hoverto the end of the A and changecolor: #FFFFFF;to a different shade.
ul.entry-interaction-links li.entry-readlink a {
color: #FFFFFF;
text-shadow:-1px -1px 0 #111111;
}In closing,
I bet you're sick of all the explanations, but maybe this will enable you to play around with your CSS a bit more. There's a lot more you can do to your links. and a lot of places that can help you. If you need help with the code, feel free to ask here or atCopy 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.COLORS AND IMAGES, RECAP!
Background image: http://i.imgur.com/atVUl.png
LINK COLORS
#888888
#FFFFFF
BACKGROUND COLORS
#EEEEEE
#C1272D
#A30207
BORDER COLORS
#DDDDDD
#9D090E
#760105
TEXT-SHADOW COLORS
#111111
#FFFFFFRemove
DISPLAY:INLINE;Add
text-decoration: none;to a new line on your codes, make sure this is between the { and } brackets.Originally Posted Here
I'd love it if you could leave your comments there, thanks!
no subject
I've submitted several help requests and have gotten great suggestions on a few tweaks, but I really want to do more than I think I can ask DW help for. Would you be willing to help me make the necessary changes to my CSS to get the results I really want?
Thanks for your consideration.