style_system | Metadata and tags to the side of mood theme image.

Edit: Fixed the theme layer code and the CSS code now!

Not sure how many people have noticed, but a while back I discovered that this code to make metadata and tags float around mood theme images wasn't working correctly. I didn't know where to begin to fix it at the time but I attempted to tinker with today and apparently fixed it!

This goes into the theme layer:

##===============================
##Moodtheme image on left by 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

# 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

# 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
"""</td></tr></table></div>\n""";
}

##===============================
## Removing the second tags box thanks to Afuna
##===============================
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();
}

The code above has places to change the metadata label text to your own custom images. If you would also like to change the tag label text to a custom image, put this in your Custom CSS box:

If anyone has any problems with the above codes, I'll try to do what I can to help. Fair warning: while I do know some CSS, I'm not that good with layer editing.

Flat | Top-Level Comments Only

From:

ex_awakened208

This css ought to fix it:

.tag ul { display: inline; padding: 0; }
.tag ul li { display: inline; }

I wonder why it wasn't working right, though. The tags weren't doing that on a Dreamwidth layout that I had on another journal with this code. Weird.

tyger

Logically that should fix it! But... it's.. not, I don't even know. *facepalm* Fucking CSS. Might be a Marginless bug? Dunno.

Try this instead:

.tag ul {display: inline !important;}
.tag ul li {display: inline !important;}

Nope. :/

Hmm... the code doesn't seem to show up in the custom css for your journal...did you put it in the custom css box?

I've got it in set custom_css in the theme layer, since I had that open anyway; you think it'd make a difference if I put it in the wizard CSS box?

Don't think I've ever tried to set custom_css in the theme layer before. I think if you're going to set it in a layer, it would usually go into the wizard layer. But either the wizard layer or the Custom CSS box should work.

I use it to make the calendar work how I want, and stuff, so yeah.

BUT HEY APPARENTLY THAT WORKS, I don't even know. CSS! *throws up hands!*

ETA: does need the !important, though.

Edited (ETA) Date: 2013-11-26 12:37 am (UTC)

Ah. After messing around with it, it seems that if a user already has custom CSS set in their wizard layer, it won't let them add or override it through the theme layer. But it looks like CSS just set in the theme layer only will work.

....huh! There you go. We learned a thing today, at least?

Yep!

S	M	T	W	T	F	S
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Dreamwidth style system discussion

Metadata and tags to the side of mood theme image.

Metadata and tags to the side of mood theme image.

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

October 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags