Log in

No account? Create an account

Previous Entry | Next Entry

One-line calendar

  • Dec. 10th, 2008 at 8:20 AM
Is it at all possible to tweak an Expressive layout (using either CSS or a theme layer) to display a calendar in a single bar at the top of the page, just like Nebula?


( 9 comments — Leave a comment )
Dec. 10th, 2008 01:46 pm (UTC)
Sure, it's possible, but it's definitely a theme layer change and it wouldn't look exactly like it does in Nebula.
Dec. 10th, 2008 02:38 pm (UTC)
I don't really want it to look exactly like Nebula, anyway. :) I just want to get it all in one row like that, then I figure I can customise the way it looks with CSS.

What do I have to put in a theme layer to get it to display in a single row?
Dec. 17th, 2008 02:38 pm (UTC)
Hey, I wanted to let you know that I haven't forgotten about you! Just been a little busy with a variety of project, but I plan to get to it in the next few days.
Dec. 18th, 2008 12:33 am (UTC)
Hey Mike, no problem. :) I really appreciate you taking the time to help!
Dec. 18th, 2008 04:24 am (UTC)
This was an interesting challenge, but I basically just ended up copying the code from the Nebula layer. The calendar goes above the header image, which I hope is where you want it. I even changed the month heading into a link to the proper Month page, but you can take that out if you don't like it. I'll post the CSS in a separate comment so I don't hit the comment limit.
function Page::lay_print_header_links() {
    # Print Nebula-style linear calendar above the header
    var string calendar = "";
    var YearMonth m = $this->get_latest_month();
    var string month = $m->month_format();
    if($m.has_entries) {
        $calendar = """
      <div class="MiniCalContainer" align="center">
        <table class="MiniCal">
          <tr><td nowrap="nowrap" class="MiniCalDay"><i><a href="$m.url">$month</a></i>  </td>
        var YearWeek[] theWeeks = $m.weeks;
        foreach var YearWeek w ($theWeeks) {
            var YearDay[] theDays = $w.days;
            var int start = $w.pre_empty;
            foreach var YearDay d ($theDays) {
                $start = $start + 1;
                $calendar = $calendar + "\n          <td valign=\"top\" class=\"";
                if ( $start == 1 or $start == 7 ) {
                    $calendar = $calendar + "MiniCalWeekend ";
                if ($d.num_entries) {
                    $calendar = $calendar + """MiniCalDayPosts"><a href="$d.url">""" + $d.day->zeropad(2) + "</a></td>";
                } else {
                    $calendar = $calendar + """MiniCalDay">""" + $d.day->zeropad(2) + "</td>";
        $calendar = $calendar + "\n          </tr>\n        </table>\n      </div>\n";
    print $calendar;
    # Menu start
    """<div id="message-window" class="hidden"></div>\n""";
    """<div id="header-photo">\n<div id="header-photo-inner"></div>\n</div>\n""";
    """<div id="header-text"><ul class="nav">\n""";

    # Standard Journal Pages (Recent, Archive, Friends, Userinfo)
    foreach var string v ($.views_order) {
        var string url   = $.view_url{$v};
        var string text  = lang_viewname($v);
        var string class = "item";
        if($v == $.view) {
            $class = $class + " current";
        if($v == $.views_order[0]) {
            $class = $class + " first";

        $class = " class=\"$class\"";

        print """<li$class><a href="$url" title="$text">$text</a></li>""";

    var Link memories_url = $.journal->get_link("memories");

    # Memories
    if($memories_url.url != "") {
        println safe """<li class="item"><a href="$memories_url.url" title="$*text_view_memories">$*text_view_memories</a></li>""";

    # Menu end
    <div id="header-name">""";
    var string base_url = $.journal->base_url();
    var string friends_url = $.view_url{"friends"};
    if ($this isa FriendsPage) {
        print safe """<a href="$friends_url">""" + $this->view_title() + """</a>""";
    } else {
        print safe """<a href="$base_url">$.global_title</a>""";

    if(not $this isa FriendsPage) {
        print safe """
      <div id="header-description">$.global_subtitle</div>""";

    </div><span id="header-content-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header Content -->
    </div><span id="header-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header -->""";
Dec. 18th, 2008 12:17 pm (UTC)
Hey Mike,

It's put the calendar up there (yay!), but to my consternation it seems to have wreaked havoc on my custom CSS. If you look at my journal, you'll see that the content has gotten shoved way over to the right side for no reason that I can fathom. :(

Here's my theme layer with css (which is compiling error-free), and here's the preview of what my layout used to look like.

Thanks again for your help! :)
Dec. 18th, 2008 02:35 pm (UTC)
Try adding set use_vox_base = false; to your theme layer code. I think the base style sheets will screw up grrliz's code if you don't disable them.
Dec. 18th, 2008 03:12 pm (UTC)
It's working perfectly now! Thank you so much, it looks fabulous :)
Dec. 18th, 2008 04:26 am (UTC)
Here's the CSS that you can tweak to make the colors suit your theme (I think they came from the default Nebula theme). Don't hesitate to let me know if something doesn't work right or if you want to change something else.

.MiniCalContainer { background:#8381DA; border:2px solid #000000; }
.MiniCalDayPosts { font-weight:bold;}
td.MiniCalWeekend { background-color:#3C38C0;}
td.MiniCalDay, td.MiniCalDayPosts { color:#FFFFFF; font-family:Trebuchet,Verdana,sans-serif; font-size:0.95em; }
.MiniCalDay a, .MiniCalDay a:active, .MiniCalDayPosts a, .MiniCalDayPosts a:active { color:#000000; }
.MiniCalDay a:visited, .MiniCalDayPosts a:visited { color:#000000; }
( 9 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars