Tweak

InsaneJournal

Tweak says, "herp derp"

Username: 
Password:    
Remember Me
  • Create Account
  • IJ Login
  • OpenID Login
Search by : 
  • View
    • Create Account
    • IJ Login
    • OpenID Login
  • Journal
    • Post
    • Edit Entries
    • Customize Journal
    • Comment Settings
    • Recent Comments
    • Manage Tags
  • Account
    • Manage Account
    • Viewing Options
    • Manage Profile
    • Manage Notifications
    • Manage Pictures
    • Manage Schools
    • Account Status
  • Friends
    • Edit Friends
    • Edit Custom Groups
    • Friends Filter
    • Nudge Friends
    • Invite
    • Create RSS Feed
  • Asylums
    • Post
    • Asylum Invitations
    • Manage Asylums
    • Create Asylum
  • Site
    • Support
    • Upgrade Account
    • FAQs
    • Search By Location
    • Search By Interest
    • Search Randomly

Ally -- are you already gone? ([info]wastintime) wrote in [info]rp_tutorials,
@ 2011-09-24 21:36:00

Previous Entry  Add to memories!  Tell a Friend!  Next Entry
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. :)


(Post a new comment)


[info]aqua_regia
2011-09-25 03:48 am UTC (link)
Most of this is complete gibberish to me, but I didn't want to comment on this:

*insert Kermit yay*

Thank you for the best laugh of my whole week! :-D

(Reply to this) (Thread)


[info]__ambrosia
2011-09-27 01:00 pm UTC (link)
Is it possible to make the "link" link disappear? So that I only have "reply" and "# comments" showing? Thanks!

(Reply to this) (Parent) (Thread)


[info]wastintime
2011-09-27 03:10 pm UTC (link)
Yep! Hold on a sec and I'll give you the code to add to the end of the stylesheet. :)

(Reply to this) (Parent)


[info]wastintime
2011-09-27 03:24 pm UTC (link)
Do you want the "edit" links to show up for users that have the ability to edit the post and do you want the "Posted at" to show up?

(Reply to this) (Parent) (Thread)


[info]__ambrosia
2011-09-27 03:29 pm UTC (link)
Thank you SO MUCH for helping me. But no, I'd like nothing but the reply and the number of comments. When I make an entry unable to be commented on, I'd like nothing to show up in that footer, if possible. :))) Thanks again! <3

(Reply to this) (Parent) (Thread)


[info]wastintime
2011-09-27 04:12 pm UTC (link)
No problem! The Bloggish layout automatically nixes the entry footer when you disable comments, so yay for that.

And here's your code. I wasn't sure what you wanted the justification of the text in the footer to be, so I set it "center" just because that was the last one I checked. You can set it to "left", "right", "center", or "justify" (don't know why you would set it to the last one but it'll work.)

(Reply to this) (Parent) (Thread)


[info]__ambrosia
2011-09-27 04:18 pm UTC (link)
Ah! You have saved me! <3 Thanks so much. I used this here:
[Error: Irreparable invalid markup ('<lj-user="england1876">') in entry. Owner must fix manually. Raw contents below.]

Ah! You have saved me! <3 Thanks so much. I used this here: <lj-user="england1876">. (It's not open yet!)

(Reply to this) (Parent) (Thread)


[info]__ambrosia
2011-09-27 04:18 pm UTC (link)
[info]england1876

(Reply to this) (Parent) (Thread)


[info]wastintime
2011-09-27 04:28 pm UTC (link)
Oooo! Pretty!

Do you want the links to be underlined like that? You can change it by changing the above to add the text-decoration: none; line like this:

.entry-footer a {
font-size: 10px;
padding: 0 5px;
display: inline-block;
text-decoration: none;
}

If you want them to be underlined but don't want the spacing underlined, you could also changing the above to add this:

.entry-footer a.permalink, .entry-footer a[href*=reply], .entry-footer a[href*=editjournal], .entry-footer a[href*=edittags], .entry-footer a[href*=memadd], .entry-footer a[href*=tellafriend], .entry-footer a[href*=subscriptions] {
font-size: 0;
padding: 0;
text-decoration: none;
}

.entry-footer a:after {
font-size: 10px;
text-decoration: underline;
}

(Reply to this) (Parent) (Thread)


[info]__ambrosia
2011-09-27 04:31 pm UTC (link)
AH! Thanks. :D I was going to fiddle with where to put that text-decoration. :) Saved me the effort! <3

(Reply to this) (Parent) (Thread)


[info]wastintime
2011-09-27 04:58 pm UTC (link)
:D

I have a quick question though, what is the character used on the holds page to separate the links supposed to be and what type of computer are you using? Because I'm on Windows 7 and all I'm seeing is the unicode substitute character, which means whatever the character is, I don't have it on my system so it's getting replaced with the 'substitute' character.

See: http://i.imgur.com/eKog1.png

(Reply to this) (Parent) (Thread)


[info]__ambrosia
2011-09-27 06:34 pm UTC (link)
It's supposed to be an arrow! Shows up in all my browsers... I.E, AOL, Google Chrome... It's Windows 7! How odd. But in any case, I AM remodeling all those pages. Are you getting the same character when you glance at the application, too?

(Reply to this) (Parent) (Thread)


[info]wastintime
2011-09-27 06:37 pm UTC (link)
Yep, I am! That's really weird because I have Quivira and LastResort installed now (see my newest post to this comm to see why that matters) and I'm still getting the substitute character, which means not even LastResort knows what it is. D:

(Reply to this) (Parent)


[info]wastintime
2011-09-27 06:38 pm UTC (link)
Did you copy paste symbol from, like, Word or are you using the character entity code like this: &#CODE;

(Reply to this) (Parent) (Thread)


[info]shes_free
2011-09-28 12:09 pm UTC (link)
I totally copied and pasted. Which is absolutely why it isn't working. (And yet I can still see it in every browser! So weird.)

(Reply to this) (Parent)


(Anonymous)
2013-05-17 07:46 pm UTC (link)
Thanks so much for posting this great information! I have been trying to learn more about bc anchors (http://swc.bc.ca/services)... Do you happen to have any information about this?

(Reply to this)

(Reply from suspended user)

Home | Site Map | Manage Account | TOS | Privacy | Support | FAQs