?

Log in

No account? Create an account
spire。
the smooth sailing fangirl
tutorial: hide the dash in the subject (smooth sailing) 
Dec 11 08
archangel
The new subject permalinks aren't all that bad -- not only do they make it easier to access your posts when your layout doesn't have an "Edit" option, but you can also use them to hide the dash in the Smooth Sailing post subjects! This is a picture of what I'm talking about:


You can see the fix in action at spire's current layout.

This tutorial assumes you're working from a base Smooth Sailing stylesheet, although I'm sure you can extrapolate from this information.

1. In your CSS, you will find something like this:
.entryHeader {
background-color:#D4DDEE;
color:#454B74;
font-size:12px;
padding:4px 0 4px 8px;
}
.entryHeader a {
color:#6B7DA6;
}
.entryHeaderSubject {
font-weight:bold;
}
.entryHeaderSubject a, .entryHeaderSubject a:hover, .entryHeaderSubject a:visited {
color:#454B74;
text-decoration:none;
}
You need to add the .entryHeaderDate class so you can style the date/time. Add this code to your CSS:
.entryHeaderDate {

}
2. Now make these changes (highlighted in red) and additions (highlighted in green) to the code.
.entryHeader {
background-color:#D4DDEE;
color:#454B74;
font-size:0px;
padding:4px 0 4px 8px;
}
.entryHeader a {
color:#6B7DA6;
}
.entryHeaderSubject {
font-weight:bold;
}

.entryHeaderSubject a, .entryHeaderSubject a:hover, .entryHeaderSubject a:visited {
color:#454B74;
text-decoration:none;
font-size: 12px;
}
.entryHeaderDate {
font-size: 12px;
margin-right: 5px; /* readds the space between the date and the subject */

}
What does this do? What we're doing is shrinking all of the subject header text, then selectively enlargening what we want to be visible -- the date and post subject link.

You could also simply paste the new codes at the bottom of your stylesheet instead of editing them; however, I don't prefer this method as duplicate selectors tend to get messy. (EDIT: I stripped out the irrelevant properties and selectors.)


And we're done!


WARNING: This tweak will break if you put a regular or user link into the subject header. A more foolproof alternative is available if you have a Paid account.
Comments 
Dec 11 08 (UTC)
your css ninja skeelz amaze me! D:
Dec 12 08 (UTC)
8D! *ninjas* I spend way too much time on this stuff rofl...
Dec 11 08 (UTC)
:O sneaky sneaky!
Dec 11 08 (UTC)
Thanks for this. (:
Dec 12 08 (UTC)
Awesome~
I was wondering how you did that with your last layout.
Thanks for sharing ♥
Dec 12 08 (UTC)
No problem, glad to help! :3
Dec 12 08 (UTC)
Oh god, thanks :B
Dec 24 08 (UTC)
Wonderful. Thanks; will credit.
Sep 27 09 (UTC)
Thanks for sharing!

However, I tried this with mameshiba and the fugly dash is still there~ Any idea how to fix it? Thanks!
This page was loaded Oct 19th 2019, 4:44 am GMT.