Mood and Music Location - Playful Cherry - Expressive and Mixit Layout Help

Mood and Music Location - Playful Cherry

Feb. 6th, 2008 at 11:02 PM

Hello.

I've recently changed from a style contest layout to Expressive - Playful Cherry. I like the layout as it stands but was wondering if it was possible to make a couple of small changes to the way it displays. I'm a total CSS n00b so I have absolutely no idea how easy it would be to do these. I've tried reading the tutorials but I cannot make head nor tail of them and am worried about making matters much, much worse...

The journal is

sevendials. I have made no CSS fixes to the layout as it stands.

First and foremost, I really want to move the 'current mood' and 'current music' text to the top of the entry instead of the bottom, preferably so it displays next to the user icon. This was the way things were set up on the Style Contest theme I was using, and I really liked it. I don't really like the way the journal entry text is indented around the icon and would rather have the mood and music up there instead. Is it possible to move these so they display more neatly?

Secondly, I would quite like to make the sidebar slightly narrower. At present, the gap on the right side of the calendar and user icon is noticeably larger than it is on the left side. Could this be resized so it looks slightly neater?

Any help you could give me regarding this matter would be gratefully appreciated. I checked the tags and couldn't see anything that clarified things for me, but I apologize if it's already there and I overlooked something.

Thanks in advance.

Comments

( 3 comments — Leave a comment )

av8rmike

Feb. 7th, 2008 04:41 am (UTC)

Unfortunately, neither of these are straightforward changes. Well, you can change the widths of the sidebar and main entry, but it won't look right with the background any more. If you want to see what I mean, try this CSS:

#alpha {width: 790px;}
.layout-wt #alpha-inner {width: 750px;}
#beta {width: 150px; float: right;}

Also, moving the metadata around in the entry requires creating a theme layer and re-coding the print_entry() function. I can tell you how to do it, but I won't be able to get to it for several days.

Link | Reply | Thread

sevendials

Feb. 7th, 2008 09:50 am (UTC)

Ah, I was wondering how come this didn't seem to have come up before when I found pretty much all the other fixes I wanted right away. Sorry to have been so troublesome the first time I posted!

I would still like to move the metadata if there is a way to do so, but that does sound like a far more complicated procedure than I realized it would be. (I know very little about CSS, so naively I assumed it was just a matter of moving it to the top of the journal text area, and something that could be achieved with a single override.) I do appreciate that it may take you some time to get around to it, though. I am in absolutely no rush, so I really don't mind waiting, if it's not too much bother for you to do it in the first place. I'm just grateful you'd take the time to do it at all, never mind doing it to a timescale.

As for the sidebar, given the mess that it makes I think I'll just leave well enough alone. I'm a lot less bothered by the irregularity since I moved the column to the right of the layout anyway, so it seems far better to just let it carry on being slightly odd.

Thank you very much for the prompt response, and for all your other fixes elsewhere in this community. I'm sure I've used several of them already.

Link | Reply | Parent | Thread

av8rmike

Feb. 12th, 2008 04:36 pm (UTC)

Here's how you would move the metadata through changing the S2 code. You'll have to create a theme layer to do this; there's a tutorial I wrote for that here.

function print_entry(Page p, EntryLite e, Color bgcolor, Color fgcolor, bool hide_text) {
    var bool showposter = false;
    if (not $e.poster->equals($e.journal)) { $showposter = true; }

    var Comment c;
    var Entry en;
    if ($e isa Comment) {
        $c = $e as Comment;
    } else {
        $en = $e as Entry;
    }

    var string id = "";
    if (defined $c) {
        $id = " id=\"asset-$e.journal.username-$c.talkid\"";
    } else {
        $id = " id=\"asset-$e.journal.username-$en.itemid\"";
    }

    """
    <div$id class="post-asset asset">
      <div class="asset-inner">
        <div class="asset-header">
          <div class="asset-header-inner">
            <div class="asset-header-content">
              <div class="asset-header-content-inner">
                <h2 class="asset-name page-header2">""";

    if (defined $en) {
        if (defined $en.security_icon) {
            """<span class="lj-entry-securityicon">$en.security_icon</span> """;
        }
    }

    var string subject  = "";
    var string datetime = "";

    if ($e.subject != "") {
        $subject  = striphtml($e.subject);
        $datetime = lang_posted_by_date_and_time($e, $showposter, true, true);
    } else {
        $subject  = lang_posted_by_date_and_time($e, $showposter, true,  false);
        $datetime = lang_posted_by_date_and_time($e, $showposter, false, true);
    }

    """<a href="$e.permalink_url">$subject</a>""";
    "</h2>";

    """
          <div class="asset-meta">
            <ul class="asset-meta-list">
              <li class="item"><span><abbr class="datetime">$datetime</abbr></span></li>
            </ul>
          </div>
        </div></div></div>
        </div> <!-- end asset-header -->
        <div class="asset-content">
            <div class="asset-body">""";

    var bool showuserpic = $*opt_userpic_main;
    if ($p.view == "friends") {
        $showuserpic = $*opt_userpic_friends;
    }
    if ($p.view == "entry") {
        $showuserpic = $*opt_userpic_entrypage;
    }

    var string userpic = ($showuserpic and defined $e.userpic) ? ($e.userpic + "<br />") : "";
    if ($showuserpic) {
        if ($bgcolor) {
            """<div class="user-icon" style="border: 1px; padding: 2px; background-color: $bgcolor;">$userpic""";
        } else {
            """<div class="user-icon">$userpic""";
        }
    }

    var string posted = "";
    if ($p.view == "friends") {
        if (not $e.poster->equals($e.journal)) {
            $posted = $posted + colored_ljuser($e.poster, $bgcolor, $fgcolor) + "<br />";
        }
        $posted = $posted + colored_ljuser($e.journal, $bgcolor, $fgcolor);
    } else {
        if (not $e.poster->equals($e.journal)) {
            $posted = $posted + $e.poster;
        }
    }
    print "$posted";

    if ($showuserpic) {
        print "</div>";
    }
    # Re-position the metadata after the user-icon
    if (defined $en) {
        $en->print_metadata();
    }

    $e->print_text();

    "</div>\n";
    "</div>\n";
    $p->print_reply_container({"target" => "entrycomment", "class" => "quickreply"});
    $e->print_linkbar();

    """<div class="asset-footer"></div>\n</div>\n</div>\n""";
    if ($*entry_footer != "") {
        println safe $*entry_footer;
    }
}

Link | Reply | Parent | Thread

( 3 comments — Leave a comment )

March 2016
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

!announcement [18]
!beginners guide [7]
!obsolete [13]
!tutorial [14]
$acct level
- basic or plus [18]
- paid or perm [68]
advanced [22]
bug [5]
- browser issues [24]
- lj issues [22]
comments [38]
- colors [12]
contribution [8]
css
- base themes [11]
- compatibility [3]
- guide [3]
- in layers [7]
- starter sheets [4]
entries
- background [11]
- blockquotes [9]
- divider [13]
- header [30]
  - colors [9]
  - font [5]
  - ornament [16]
- linkbar [44]
- links
  - colors [12]
- metadata [54]
- misc [19]
- overflow [4]
- sticky post [15]
- text [9]
  - font [6]
- timestamp [26]
- user icons [44]
footer
- image [5]
header [5]
- image [95]
- nav links [38]
  - colors [18]
  - font [16]
  - placement [30]
how to
- instructions [25]
lj icons
- security [10]
- userinfo [15]
misc [20]
- counter [5]
- extra content [9]
page
- alignment [10]
- backgrounds [25]
- borders [14]
- fonts [8]
- links [5]
  - colors [11]
- size [37]
- skiplinks [14]
- text
  - colors [4]
pageviews
- day [1]
- entry [9]
- friends [16]
- month [3]
- reply [7]
- tags [4]
- year [7]
s2
- theme layer [72]
sidebar
- backgrounds [22]
- borders [18]
- calendar [11]
- custom [35]
- designedby [3]
- headers [14]
  - colors [11]
  - font [4]
- linklist [8]
- placement [17]
- profile [13]
  - user icon [9]
- size [10]
- summary [8]
- syndicate [3]
- tags [23]
- text
  - alignment [3]
  - colors [12]

Log in

Mood and Music Location - Playful Cherry

Tags:

Comments

Profile

Latest Month

Community Links

Related LJ FAQs

S2 Help Communities

Tags

Page Summary