Mood image to left of metadata

[tropicsbear]

I was wondering if there's any way to get my metadata to look like this:



Edit: Clarification — the image is the mood theme image. I was wondering if there were a way to get it to be on the left of the metadata.

Comments

[seleneheart]

You add a background image to the .metadata {background: url();} and then on the .metadata .metadata label put in a left margin that will align the text of the metadata where you want it.

[tropicsbear]

Ah, the image is actually the mood image, not just a background image.

Sorry, I wasn't clear enough ^^;;

[ex_awakened208]

Someone asked about that in this entry. I don't think it works for the tags though.

[tyger]

!! THANK YOU SO MUCH FOR THAT! I've been wondering how to do it via the theme layer for AGES, and that has some code for that!

(OP, I highly recommend you do it via the theme layer; the CSS doesn't deal with people using moodthemes other than yours very well, and it can get a bit buggy.)

/reposts because apparently can't click on the right 'reply' button. ¬¬;;

[ex_awakened208]

You're welcome! I wish that code worked for tags though.

[tyger]

I bet you could make it work! ...I don't know enough about S2 to have the foggiest about how, though. =/ I might try and figure it out tomorrow; if I do I'll let you know?

[ex_awakened208]

I don't know much about S2 either. If you do figure it out, I would love to have the code for it, thank you!

[tyger]

I tried! And failed miserably, but asking on #dreamwidth prompted Afuna to help me make it work! She is the best, yup.

Anyway, should be able to copy-paste this into your theme layer:

===============================
##Moodtheme image on left mmmag (http://style-system.dreamwidth.org/15122.html?thread=88594) + add tags to the metadata, thanks to Afuna's awesome (#dreamwidth)
##===============================

function Entry::print_metadata()
{
# ---------------------------------------------------- CUSTOMIZATION ---------------------------------------------------- #

var bool show_loc_link = false; # set to true to display the Google Map link

var bool show_groups_link = true; # set to true to display the custom friends group link

var bool show_music_link = true; # set to false to hide the last.fm link to the artist/song pages

var bool print_table = true; # set to false to display the mood icon inline with the mood text (default FS style)

var string alignment = "left"; # set the side of the mood icon (left or right of the currents) - only if printed in table

# set the order in which you want mood, music, location, tags, security and custom friends group to appear
# any metadata you want to hide journalwide, delete from this list
var string[] metaorder = ["mood", "music", "groups", "location" ];

# optional:
# put in the URLs to the pics you want to use instead of the currents' text labels
# if you leave it blank, the text label will be used instead
var string{} metapics = { "mood" => "IMAGE URL",
"music" => "IMAGE URL",
"location" => "IMAGE URL",
"groups" => "IMAGE URL" };


# ---------------------------------------------------- CUSTOMIZATION END ---------------------------------------------------- #

var string currents = """<div class="metadata">\n""";# here all metadata will be added to print currents container



if (size $.metadata) {


# display mood and moodicon?
var bool display_mood = false;
foreach var string moodtest ($metaorder) {
if ($moodtest == "mood") { $display_mood = true; }
}

# table and mood icon
if (defined $.mood_icon and $display_mood and $print_table) {
$currents = ($alignment == "left") ?
$currents + """<table border="0"><tr><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td><td>""" :
$currents + """<table border="0"><tr><td>""";
}

# step through metadata in the order the user wants
foreach var string k ($metaorder) {

var string text; # the actual value of the metadata
var string label; # the label of the metadata as set in the wizard or set-statements


# handling all other metadata
if ($k != "" and $.metadata{$k} != "") {

# metadata value
$text = $.metadata{$k};

# label as image or text
$label = clean_url($metapics{$k}) != "" ? "<img src=\"$metapics{$k}\" title=\"" + lang_metadata_title($k) + "\" alt=\"" + lang_metadata_title($k) + "\" border=0>" : lang_metadata_title($k);

# strip location/music/groups link
if ((not ($show_loc_link) and ($k == "location"))
or (not ($show_music_link) and ($k == "music"))
or (not ($show_groups_link) and ($k == "groups"))) {
$text = striphtml($text);
}

# inline mood image
if (not ($print_table) and $k == "mood" and defined $.mood_icon) {
$text = """<img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" align="middle" />""" + $text;
}

} #end metadata

# skipping empty metadata
else { continue; }

# assemble the individual currents
$currents = $currents + """<div><span class="metadata-label metadata-label-$k">$label:</span> <span class="metadata-item metadata-item-$k">$text</span></div>""";

} # end foreach

println $currents;
$this->print_tags();


# table and mood icon
if ($display_mood and defined $.mood_icon and $print_table) {
$currents = ($alignment == "left") ?
"""</td></tr></table>""" :
"""</td><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td></tr></table>""";
}

# close currents container and print
println $currents + """</div>\n""";
}
}


##===============================
## Removing the second tags box thanks to Afuna (#dreamwidth)
##===============================
function Page::print_entry(Entry e)
"The meat of each new layout. Describes how each page will look. In nearly all cases, the logic and decision-making processes should come from pre-existing functions in core2, and should not get written here. If you limit the structure of the page to HTML, function calls, and attached CSS, then you will be able to pick up all of the enhancements and accessibility requirements managed by core2."
{
## For most styles, this will be overridden by FriendsPage::print_entry and such.
$e->print_wrapper_start();
"""<div class="header">\n""";
"""<div class="inner">\n""";
$e->print_subject();
$e->print_metatypes();
$e->print_time();
"""</div>\n""";
"""</div>\n""";
"""<div>\n""";
"""<div class="contents">\n""";
"""<div class="inner">\n""";
$e->print_userpic();
$e->print_poster();
if ($*entry_metadata_position == "top") { $e->print_metadata(); }
$e->print_text();
if ($*entry_metadata_position == "bottom") { $e->print_metadata(); }
"""</div>\n""";
"""</div>\n""";
"""</div>\n""";

"""<div class="footer">\n""";
"""<div class="inner">\n""";
$this->print_entry_footer($e);
"</div>\n</div>\n";

$e->print_wrapper_end();



[turlough]

Awesome! This is going to be so useful when I finally get off my ass and make a DW native layout instead of using a ported FS one. *bookmarks*

[tyger]

^^ I'm glad! I figured a few people would want it; I think it's actually a fairly common modification.

[tyger]

....aaaand it turns out I messed up copy and paste! So I put up a fixed-code entry instead.

[tropicsbear]

I am a complete noob at CSS or coding so excuse the stupid question — you just C&P this to the custom CSS code area?

[ex_awakened208]

It doesn't go into the CSS code area; it goes into your theme layer. Here is a tutorial on making a theme layer.

[tyger]

I actually messed up the code a bit. ^^;; So I put up an entry about it instead.

[tropicsbear]

Thanks!

[ex_awakened208]

Awesome! I went to go and test it out but I got errors. Wwo hashes are missing from the front of the very top line of dashes (before the credit for Afuna) and there's no ending brace on the very last line. But once those are fixed, it works great. Thanks!

[tyger]

COPY PAST FAAAAIL. /o\ Sorry! You think I should redo it?

[ex_awakened208]

Maybe just post it as a tutorial under the "!tips and resources" tag (unless there's a better place for that)? It'll be easier for people looking for that sort of thing to find it that way.

[tyger]

I CAN DO THAT! I guess that's a decent enough way to do it, anyway~

[tyger]

Here!

[ex_awakened208]

Right on, right on.