Ally -- are you already gone? (wastintime) wrote in rp_tutorials, @ 2011-09-24 21:36:00 |
|
|||
Entry tags: | layouts: journals, resources: tutorials |
Bloggish: Customize that standard entry footer!
If you're creating custom styles for S2 Bloggish, chances are that you already know how to use CSS to change the colors, fonts, padding, etc. so I'm not going to go into that or explain stylesheets to you. I'm going to assume you know what those are because there are tons and tons of tutorials on those. What I'm here to tell you about is something rather nifty: using CSS to remove or alter the text in the entry footer. Basically, I'm going to show you how to grab each element in the footer and change it using pseudo-elements and attribute selectors. OOO SCARY BIG WORDS! Don't worry, it's not that hard. :)
Picking out the pieces
Some of the pieces are easy to spot and style, for example...
.entry-footer specifies the entry footer's class
.entry-footer .separator specifies the class for the link separators (the styling for the "|" pipes, in this case)
.entry-footer a specifies the group of links (technically known as anchors) in the footer
By using these in the custom CSS style, you can achieve quite a bit, but there are limitations if you don't know how to use pseudo-elements and attribute selectors.
I'm certain that if you've ever tried to alter the entry footer in CSS you've probably run into the problem of not knowing how to specifically select each piece (e.g. the date, the reply link, the track link, etc.) Since they do not have ID or CLASS attributes, you might be thinking that altering these links is impossible and the only choice you have is to change their color, size, and font. Did you that you can use the other attributes of the anchors to grab them in CSS? Well, you can! Here's how...
.entry-footer .permalink bet you already knew that this styles the "Link" anchors
.entry-footer a[href*=reply] bet you didn't know this styles the "Reply" anchors
.entry-footer a[href*=editjournal] and this styles the "Edit Entry" anchors
.entry-footer a[href*=editags] and this styles the "Edit Tags" anchors
.entry-footer a[href*=memadd] and this styles the "Add to Memories" anchors
.entry-footer a[href*=tellafriend] and this styles the "Tell a Friend" anchors
.entry-footer a[href*=subscriptions] and this styles the "Track Entry" anchors
Now, that's a lot of anchors, but there is one missing. Unfortunately, you cannot directly access the "# Comments" anchors from CSS. Boo. You can still style them indirectly, though! I'll show you how, in just a sec. So, what are we doing here? Well, if you'll notice, in each bracket there is attribute listed. In this case, we're looking at the href="" attribute and saying we want to specifically select the elements that contain the given text at least once. There are a lot of ways to select attributes, but I'll leave it up to the experts to explain it to you. Now that we know how to select our specific elements, we need to know how to give them new content...
A lesson in attributes and pseudo-elements
Unfortunately, there is currently no option to grab the contents of a HTML tag (e.g. the code between the anchor <a></a> tags) from CSS. You can, however, grab the contents of an attribute (e.g. the URL set in the href="" attribute), but you cannot alter the attribute's contents with the one exception of the style="" attribute. So, how do we change, or I should really say "change" the text of an anchor? By using pseudo-elements.
To help explain pseudo-elements, let's consider pseudo-classes. A pseudo-class refers to the state of a tagged element. For instance, there are several pseudo-classes for anchors (e.g. the :hover and :visited pseudo-classes) and each refers to a different state. We use pseudo-classes to style elements when they are in a particular state. Pseudo-elements on the other hand, refer to what's being printed. Currently, there are two pseudo-elements :before and :after which are available for every element. Whatever you put into the :before pseudo-element will come before the main element and whatever you put into the :after pseudo-element will come after the main element.
So, why do we like and use these two pseudo-elements? Because you can give them styled content! *insert Kermit yay*
How do you give them content? By altering the content property, which only exists for the pseudo-elements. You have several options (check out this list) for what the content can be, including (but not limited to) strings, contents of an element's attribute, and images. The great thing about this is that you can combine these options in any order to come up with whatever you need. The only drawback is that any HTML you put into the content string will not work because it is being read as a string not HTML. You can, however, style the content like you would any other element. This leads us, finally, to the whole purpose of this post...
Changing the default anchor text
Still with me? Want to strangle me for taking so long? I know that was a lot of TL;DR, but honestly, you need to know the story behind the code before actually using it or you're going to be extremely confused.
First things first, you cannot alter the anchor text for the "# comments" link through CSS. If you want to alter what that says, you can go to the "Look & Feel" tab of your Journal Style settings and alter the text there. If only it was that easy for the rest of entry footer links.
Secondly, here is the code to wipe out all of the text in the entry footer and add new text for each link. It needs to be entered in the "Custom Stylesheet" box under "Look & Feel" in your Journal Style settings. Yes, you can keep any previous stuff you have in there. Just tack this onto the end. But be aware, adding it to the end will counteract any style properties given to the elements in the previous code.
As you can see, I did not style anything beyond giving some padding between each element and giving content to the pseudo-elements. Now, if you only want to show certain links and don't want varying sized gaps between the links, you'll need to use some longer code because in this code I bunch the styling together. However, I will also provide you with code that breaks it down, element by element so you can choose which ones you want to turn on and which ones you want to turn off. As you look at the code, note that the first style rule wipes out all of the text (including the date, the separators, and the links) in the entry footer. If you want to keep the date in the footer, do not use this rule and hide the individual links like I will show you below. Also note that I am setting the display by changing the font-size. Why? because altering the display property for nested elements doesn't work in this case.
The above is setup to show the post date, hide the separators, and show the "link", "reply" and "# comments" links with their altered content.
And thus concludes this post. Nifty, eh?
Questions/Feedback?
Leave a comment below, thanks!
ETA: If you just want the time to show up in the footer without the "posted at" I can help you with that code because I just figured it out, but it'll be a little different for every layout. :)