Where to put icons

[bibbinuss]

Quick question for the members here.
I'm using a theme created with Tabula Rasa.
I would like to know what code to use to position my journal icons where I want them.
I'd like the icons to appear in the entry title, rather than in the entry itself.
I'm somewhat familiar with CSS.
I also find this community to be very helpful too. :-)

Comments

[ninetydegrees]

Very quickly (and this isn't exactly what you're looking for I think but again very quickly:) :
A good trick is to find a DW style which does this -- such as Bannering, Refried Tablet, Skittlish to name a few -- and looks at its CSS to see how it's done. If you're on Firefox a good extension for this is Firebug. I'm pretty sure there's a similar dev tool on Chrome. Firebug will also let you 'fake-edit' a page's CSS (your own journal's for example) so it's all kind of awesome.
Also, all DW styles are public and you can look at their source code --including their CSS-- at http://www.dreamwidth.org/customize/advanced/layerbrowse (once you've selected a style it's 'Raw Source Code' or for easier reading 'Syntax Highlighted'.

Edit: last but not least congrats on wanting to and making your own thing! CSS is fun to learn. :)

[bibbinuss]

Thank You for your prompt response. :)
I've seen other DW styles that do do that.
Good tip. ;-)
I have been looking at their source codes.
And I do agree that CSS is fun to learn. :-)

Noticed this in the code with respect to the icons:

/* icons */

.sorting-options ul {
margin-left: 0;
}

.sorting-options ul li {
display: inline;
}

.icon-keywords ul {
display: inline;
margin-left: 0;
padding-left: 0;
}

.icon-keywords ul li {
display: inline;

Would that be the area that I need to edit?

Thanks again for your helpful tips. :-)

[syntheid]

Actually I think what you pasted is code for styling the icon page (as in the page that lists all the icons for your account), judging from mention of keywords. You'll want to look for lines about 'userpic' specifically ones related to the 'entry' class (so they'll be stacked like '.entry .userpic' though it may be something like '.entry .contents .userpic' or something too... just so long as it's not the userpic in the sidebar). To do what you're talking about with just CSS, you'll want something like this:

.entry .header {
  margin-left: 100px;
}
.entry .userpic {
  margin-top: -62px;
}

Though you'll probably need to tweak it a bit. Hope that helps?

[el1ie]

Oh, thank you so much, I never knew I wanted that until I saw it, worked a treat, just had to tweak the margin pxs a little to match my header. :))

[bibbinuss]

Thanks very much. :-)
Yes, that does help.

[bibbinuss]

Just tried out that code in the CSS.
Success! :-)
http://i1370.photobucket.com/albums/ag245/bibbinuss/layout_zps0ff90a97.jpg
Going to be doing some tweaking.
I kinda like the way it looks. ;-)
Thanks to all for the very helpful tips. :-D

[ninetydegrees]

\o/ Glad you figured it out!
Another tip if I may: if you reply to your own entry rather than to somebody's comment (via the 'reply to this' link under each comment like I'm doing here) people don't know you answered them because it doesn't send a notification. :/ Just saying in case you didn't know.

[bibbinuss]

Thanks. :-)

[ninetydegrees]

You're most welcome!