Meta data, images, navigation, meta data spacing and a whole lot of noobsauce.

[elf_fu]

Hello everyone!

Long time Live Journaler, still trying to adjust to dream width. I know a LITTLE about custom layers and css. Enough to use too much pink and frighten people with it. I'm not the brightest bulb in the pack, so any help with these issues I am having would be great!

Account type: Paid
Journal: http://elf-fu.dreamwidth.org/
Style: Transmorgified
Layout: Transmogrified: Open Skies/Based on Elegant Grunge theme by dee found here: http://dreamwidthlayouts.dreamwidth.org/25847.html



1.) I would like to have my navigation links (Recent Entries, Archives, Tags, etc) to be images. I remember back on the place of the LJ this sometimes involved custom layers and perhaps sacrifices. I seem to be having a hard time finding any tutorials on replacing navigation links with images. Can anyone shove me in the right direction?

2.) My journal title is shoved off to the left on a very busy background. How may I center it please?


3.) Read Comments image is cut off slightly, and I am unsure where or how that happened. How may I adjust that?


4.) When reading comments, the entire comment area seemed squished, like so:

I'm not sure what I broke that needs fixing :p

5.) Mood, music and location all have icons in front of them. I'd like to add one in front of the crossposted link as well. Where would I add that in the css?

5a.) You might also note in the above image, my meta data (Mood, music, location, tags, cross post) seems very spaced apart. I'd like to have less space between them but I am not sure what controls the spacing for it.

Given it's been so long since I hesitantly poked CSS with a very long stick, I am pretty sure half my problems stem from editing things I shouldn't have. I appreciate any head pats, advice and help in advance! Thank you!

Comments

[ex_awakened208]

I know it's been a few days but I just checked my read page and thought I could help!

2.) To center your title, use this css:
#title span {
width: 100%;
margin: 0 }

#title {
text-align: center; }

I will probably try to see what I can come up with the other ones soon.

[ex_awakened208]

3.) I'm not sure if you wanted the one inside the bubble or not, but here is how to get the icon from being cut off w/ the one outside of the bubble:

.entry-readlink a {
width: 20px; }

[ex_awakened208]

4.) Maybe try this?

.comment-poster span {
margin-top: 0; }

span.ljuser {
margin-top: 2em; }

5.)
.metadata-item-xpost {
background-image: url("image url");
background-repeat: no-repeat;
margin-left: 0.6em;
padding-left: 26px;
margin-top: 1em;
margin-bottom: 1em;
height: 16px; }

5.a) Couldn't figure out how to change the space between the currents and the tags, but here is the code to change the space between the currents:
.metadata-item {
margin-top: 0 !important;}

I think that's about as much help as I can give! Good luck!

[elf_fu]

THANK YOU so much for replying! And apologies from me for taking so long. We're in the middle of trying to buy a house and so my online presence is less. Tomorrow I'll be out of the house all day taking a course for said house buying--so I won't have time to test any of this code. As SOON as I do, I will letcha know if I broke anything else.

Thanks so much again, for helping me out!

[ex_awakened208]

Not a problem! I hope that it all works out well when you are able to test it! Take all the time you need.

Good luck with your house!

[elf_fu]

Thank you so much! I've just FINALLY applied these fantastic suggestions to my CSS and they mostly work!

I think one of the issues with the squished commentary is the threaded/nested comments that grow smaller in smaller in size as they are replied to (does that make sense?)

I still have two very small nitpicks about the layout--one about padding around my entry icons and another about text above comment actions (reply, screen, freeze etc)--I'd put screenshots up about what I mean but you've helped me SUPER a lot already and don't want to assume on your time!