NB:
If you’re already using a custom theme layer (check “your layers”; if there’s a highlighted layer with type “theme”, you’re using it), edit the layer and add:
function Entry::print_metadata() { if (size $.metadata) { var string position = ($*entry_metadata_position == "top") ? " top-metadata" : " bottom-metadata"; """<div class="metadata$position">\n<ul>\n"""; foreach var string m ( [ "mood", "location", "music", "groups", "xpost" ] ) { if ($.metadata{$m}) { var string metadata_name = lang_metadata_title($m); """<li id="metadata-$m"><span class="metadata-label metadata-label-$m">$metadata_name</span> """; if ($m == "mood") { " $.mood_icon "; } if ($m == "mood") { """<span class="mood-$.metadata{$m} metadata-item metadata-item-$m">$.metadata{$m}</span></li>\n"""; } else { """<span class="metadata-item metadata-item-$m">$.metadata{$m}</span></li>\n"""; } } } "</ul>\n</div>\n"; } }
Otherwise, go to the “your layers” page and under “create a layout-specific layer”, select “Theme” and whichever style you’re currently using (you can check this on the customisation pages – it’ll be listed as “for X” in the “current theme” box, and it’s probably Tabula Rasa if you’re not using one of the official Dreamwidth styles).
Once the new layer has been created, paste in the following:
layerinfo type = "theme"; layerinfo name = "moods"; function Entry::print_metadata() { if (size $.metadata) { var string position = ($*entry_metadata_position == "top") ? " top-metadata" : " bottom-metadata"; """<div class="metadata$position">\n<ul>\n"""; foreach var string m ( [ "mood", "location", "music", "groups", "xpost" ] ) { if ($.metadata{$m}) { var string metadata_name = lang_metadata_title($m); """<li id="metadata-$m"><span class="metadata-label metadata-label-$m">$metadata_name</span> """; if ($m == "mood") { " $.mood_icon "; } if ($m == "mood") { """<span class="mood-$.metadata{$m} metadata-item metadata-item-$m">$.metadata{$m}</span></li>\n"""; } else { """<span class="metadata-item metadata-item-$m">$.metadata{$m}</span></li>\n"""; } } } "</ul>\n</div>\n"; } }
Save and compile the layer. If you were editing a custom layer you’re already using, that’s it for this step. Otherwise, if you just made a new layer, go to the “Your Styles” page and click the edit button beside the style displayed in bold. Set the theme layer to the one called “moods”, and save the changes.
The images you want to use should be uploaded to the internet, accessible via hotlinking, and a suitable size for use as a mood theme (probably no more than 50 x 50 pixels).
In the examples below, replace YOURNAME
with your journal’s URL. If your URL contains a hyphen/underscore, it’s the underscore you should be using.
If you want to set a mood theme for only your own posts and not for others’ posts viewed in your style (e.g. on your reading page), add the following to your journal’s custom CSS:
.poster-YOURNAME li#metadata-mood img { display: none; }
Otherwise, add this:
li#metadata-mood img { display: none; }
Then, add a CSS declaration like the below for every mood option (I’m using “okay” as an example). If you’re setting the mood theme for only your own posts, use this:
.poster-YOURNAME .mood-okay:before { content: url("IMAGEURL"); }
If you’re setting it for all posts viewed in your style, use this:
.mood-okay:before { content: url("IMAGEURL"); }
You can group any moods using the same image, e.g. .poster-YOURNAME .mood-enthralled:before, .poster-YOURNAME .mood-mischievous:before
if you’re using the same image for “enthralled” and “mischievous”.
For a list of all moods that need to be set, see here.