style_system | is there a way to switch the order the metadata is displayed in?

yestoday posting in

hello! i have a kind of specific question:

is there a way to switch the order the metadata is displayed in? the metadata originally displays in the order of mood, then location, then music--so, is there something i can put into my code to make it so that it shows, say: music, then location, then mood?

thanks!

Flat | Top-Level Comments Only

From:

cimorene

That is controlled on the layout level, so the way to change it will be specific to every layout. To change it, you have to find the section of the layout that controls it and override that.

From:

cimorene

I mean, I or someone else at this community would probably be happy to help you get the override code right beyond this, but we'd need to know what layout you're using, and probably what theme.

From:

yestoday

ah, i see! for my theme i'm using Dryads by rising for Five AM, and here is the code. thanks! ^^

/* -------------------------------------

[ M I N I M A L ]
- for FIVE AM -

theme by vorador

------------------------------------- */

/* general */
html{font:normal 1em 'Lato','sans-serif'; color:#000; background:#fff; line-height:120%;}
body{margin:2em 8em;}
a{text-decoration:none; color:#5ce; transition:all .4s ease;}
a:hover{color:#000; transition:all .4s ease;}
blockquote{margin:10px; padding:5px 10px; border-left:1px solid #000;}
ul,ol{list-style-type:none!important; margin:0!important; padding:0!important;}
img {width:auto; max-width:600px;}

/* disabled */
#secondary, #tertiary, h1#title, h2#subtitle, h2#pagetitle, #footer, li.entry-permalink, .topnav{display:none!important;}

/* header */
#header {width:80%; max-width:600px; margin:80px auto; text-align:center; font-size:.8em; text-transform:lowercase;}
li.module-list-item {text-align:center; display:inline-block;}
li.module-list-item a{padding:10px; color:#000;}
li.module-list-item a:hover {color:#5ce;}

/* entries */
#content {margin:40px auto; width:80%; max-width:600px;}

.entry-wrapper {padding-bottom:40px; border-bottom:1px solid #000; margin-bottom:80px;}

.header {margin-bottom:10px;}
h3.entry-title{margin-bottom:0;}
h3.entry-title a {color:#000; font-size:.75em; font-weight:600;}
h3.entry-title a:hover {color:#5ce;}
span.datetime{font-size:.6em;}
span.datetime a{color:#000;}
span.datetime a:hover{color:#5ce;}

.userpic {width:44px; height:44px; float:left; position:relative; margin-left:-54px; margin-top:-63px;}
.userpic img {width:44px; height:44px; opacity:1; transition:all .4s ease;}
.userpic img:hover {opacity:.5; transition:all .4s ease;}

span.poster {float:left; position:absolute; display:inline-block; margin:-10px 0 0 -54px!important; font-size:.5em; font-weight:400; color:#000; background:#f6f6f6; padding:2px 5px 0 5px; text-transform:uppercase;}
span.poster img {display:none;}
span.empty {display:none!important;}

.entry-content{font-size:.75em; margin:20px 0; padding:20px 0;}
.entry-content li{padding-left:20px; position:relative; margin-left:20px;}
.entry-content li::before{content:""; position:absolute; left:0px; top:.7em; width:.7em; height:1px; background:#000;}

/* entry footer */
.footer{font-size:.65em; text-transform:lowercase; margin-top:30px;}
ul.entry-management-links, ul.entry-interaction-links{list-style-type:none;display:inline-block;}
li.link, li.entry-replylink, li.entry-readlink {display:inline-block; margin-right:10px; text-transform:uppercase;}
.footer a{color:#000;}
.footer a:hover{color:#5ce;}

.bottomnav {display:block; font-size:.65em; text-transform:uppercase; padding:5px;}
li.page-back, li.page-separator, li.page-forward {list-style-type:none; display:inline; padding:0 5px 0 0;}

/* archive page */
#archive-year {width:80%; max-width:600px; margin:20px auto;}
#archive-year .navigation ul {margin:0; padding:0;text-align:center;}
#archive-year .navigation ul li {list-style-type:none; display:inline-block; margin:0 5px; padding:5px; font-size:.8em;}
.month .header h3 {font-size:.7em; text-transform:uppercase; text-align:center; padding:10px;border-bottom:1px solid #000;}
table.month {width:100%; display:table;}
caption{display:none;}
td,th{display:table-cell; background:#f6f6f6; padding:10px; border:1px solid #fff; font-size:.8em; width:calc(100% / 7); height:20px;}
td.day{padding:10px; text-align:center; background:rgba(246,246,246,.4); border:1px solid #fff;font-size:.7em; height:40px}
td.day-empty{background:#fff;}

/* tags page */
.tags-container{width:100%;}
.tags-container .header h2{font-size:.8em; text-transform:lowercase;}
.tags-container .contents{margin:-20px 0 0 10px; font-size:.7em;}
ul.ljtaglist {margin:0; padding:0;}
ul.ljtaglist li {padding:4px 0;}

/* lj_controlstrip */
#lj_controlstrip{background:#fff; display:none;}
#lj_controlstrip a{color:#000;}
#lj_controlstrip a:hover{color:#5ce; text-decoration:none;}
#Logout{border:0; padding:2px 4px!important; background:#f6f6f6!important;}
#lj_controlstrip_user,#lj_controlstrip_actionlinks{border:0!important;font-weight:700!important;}
#lj_controlstrip_statustext{color:#000;font-size:1em;}
#lj_controlstrip_user,#lj_controlstrip_actionlinks,#lj_controlstrip_search{font:normal .7em 'Lato'!important;}

/* contextual popup */
.ContextualPopup {margin:10px 0 0 25px; background:rgba(249,249,249,.95)!important; font-size:.7em!important; border:0!important; border-radius:0!important; box-shadow:none!important; padding:20px!important;}
div.ContextualPopup .Actions {padding:0; margin-right:60px!important; margin-left:-30px!important; background-color:#fff!important;text-transform:lowercase!important;}
div.ContextualPopup .Relation {font-weight:700!important; text-transform:uppercase!important; padding:0;}
.ContextualPopup .Userpic {padding:0; margin:0; border:none!important;}
.ContextualPopup .Userpic img {width:40px; height:40px; opacity:1; padding:3px; background:#fff; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease;}
.ContextualPopup .Userpic img:hover {opacity:.6; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease;}
.ContextualPopup .Userpic a, .ContextualPopup .Userpic a:hover {border:none!important;}
.ContextualPopup .Actions a{color:#000!important; text-decoration:none!important; font-weight:400!important;}
.ContextualPopup .Actions a:hover {color:#5ce!important; font-weight:400!important;}
.ContextualPopup ul {margin:0 0 0 40px!important; padding:0; float:left; position:relative;}

/* tiny icons */
img[src*='user.png'], img[src*='user_staff.png'] {width:0; height:0; background:url('https://40.media.tumblr.com/d67657689d29bbda67930210775c77eb/tumblr_inline_nte4bsUKwI1tr4gs8_500.png') top left no-repeat; padding:16px 16px 0 14px;}
img[src*='community.png'], img[src*='comm_staff.png'] {width:0; height:0; background:url('https://40.media.tumblr.com/37059e40a013ba145b2f477abdf2a2bd/tumblr_inline_nte4p5jmIb1tr4gs8_500.png') top left no-repeat; padding:16px 0 0 12px;}

/* cut icons */
img[src*='collapse.svg'], img[src*='collapseAll.svg'], img[src*='expandAll.svg'] {display:none;}
span.cuttag_container {text-align:center; font-style:normal!important; color:transparent!important; background:url(http://i.imgur.com/z1ySPWo.gif) no-repeat left center; padding-left:5px; margin-left:10px;}
span.cuttag_container a {font-weight:400; font-style:italic; color:#5ce;}
span.cuttag_container a:hover {color:#000;}

/* post restrictions */
.sticky-entry-icon img {display:none;}
.sticky-entry-icon:before {content:'PINNED'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; padding:5px;}
.security-private .entry-title:before {content:'PRIVATE'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;}
.security-custom .entry-title:before {content:'CUSTOM'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;}
.security-protected .entry-title:before {content:'LOCKED'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;}
.access-filter img, .restrictions img {display: none;}
.restrictions-NSFW .restrictions:before {content:'NSFW'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;}
.restrictions-18 .restrictions:before {content:'18+'; font-size:.55em; font-weight:400; color:#000; background:#f6f6f6; margin-right:5px; padding:5px;}

tag ul li {list-style-type:none; display:inline; margin-right:2px;}
span.tag-text {float:left; position:relative; margin-right:5px;}
.metadata {font-size:.75em; text-decoration:underline;}

From:

cimorene

I figured it out! It took longer than I thought because I was completely wrong - it isn't layout specific, it's part of the Dreamwidth core style system and none of the other layouts have bothered to override it. But I made a test style and it worked!

What you have to do is put this override into your theme layer. I do this in the Advanced Customization section, so you create your own theme layer and put this at the end of it - if you use Dryads as a base, it already has a function at the bottom, so you would just add this at the end. (If you have a free account you might have to do this using the custom css box on the wizard though. I don't remember exactly how that works.) If you search the public layer of Dreamwidth's S2 core for print_metadata, you can find this function, and the order of the metadata in the list is the order they appear, so I just swapped mood and music positions in the list for this override.

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 ";
                }
                """<span class="metadata-item metadata-item-$m">$.metadata{$m}</span></li>\n""";
            }
         }
        "</ul>\n</div>\n";
    }
}

Edited (clarity) Date: 2022-04-08 05:05 pm (UTC)

From:

yestoday

sorry for the late reply! so i went into the css box for the five am layer on wizard through advanced customization, and i pasted that at the end of the code, but it didn't seem to work.

this is what i have; i'm most likely just doing something dumb wrong haha

From:

cimorene

I'm not sure how the advanced customization wizard works. It might have different requirements... let me see if I can find some documentation about that...

From:

cimorene

Okay, the problem is that Wizard layers cannot override functions and set properties. https://wiki.dreamwidth.net/wiki/index.php/S2_Guide:_Style_System_Overview#Layer_Basics

You need to create a theme layer instead. If you want to use the content of an official theme layer and still add your overrides to it, you need to copy the content of the official theme layer and paste it into a new layer first. This is a little bit of a hassle, but it's not hard! Go to the Public Layers page and find the layer you want. You can search in page for it. Dryads is here. Then click on "Raw Code" or "Syntax Highlighted" (it's the same just the text is colored in syntax highlighted). You see the complete text of the layer. Just select all, copy, and put it in a text file or something.

Then go back to Create New Layer and make a Theme layer instead of a Wizard layer. When you open it to edit, simply delete the lines at the top and then paste the entire contents of the theme layer you saved into it. This will preserve the credit to the original theme layer author as well. (You can also change the credit or the name if you want.) Then make your modifications! And in terms of the override, it's just pasting it at the end. I don't think you have any brackets missing or anything like that. It should save and compile correctly.

Edited (fix link) Date: 2022-04-14 02:03 pm (UTC)

From:

yestoday

ah! thank you so much! this all makes sense, but when i try to create a new layer, it says i've already reached the maximum amount. i figure i can just delete the other ones... but i wanted to ask to confirm whether these are okay to delete? as in, if i delete them, it wouldn't affect/mess up anything else, right? sorry for bothering you so much haha

From:

cimorene

Nah, it's fine! People were around here answering my questions when I was figuring this stuff out and I'm just glad to pay it forward :D

But anyway, yeah, you can delete the wizard layer no problem. It'll just remove anything you might have done using the wizard in the regular non-advanced customization area - you probably didn't do anything there since you had coded your modifications by hand, but if you ever use the wizard to change the colors or text, you'll lose those if you delete the wizard layer. But anything in a wizard layer can go in a theme layer, so if you did have data there you can just copy it from the wizard layer and put it in your theme layer.