Tabula Rasa / Funky Circles

[ninetydegrees]

Theme name/layout: Funky Circles / Tabula Rasa
Author: 900degrees
Layout info: layout layer - theme layer
Image info: six images now! Still my own.

Afuna, thanks a lot for your patience and your help! I hope the layers are ok.

Comments

[baggyeyes]

Hi, me again.

This is the error I'm getting when I try to compile the theme:

S2 Compiler Output at Mon Aug 31 01:01:51 2009
Error compiling layer:

Compile error: line 21, column 1: Can't set non-existent property 'color_page_title_background'
S2::NodeSet, S2/NodeSet.pm, 62
S2::Checker, S2/Checker.pm, 374
S2::Compiler, S2/Compiler.pm, 34


Context

17: set color_page_link_active = "#fff";
18: set color_page_link_hover = "#fff";
19: set color_page_link_visited = "#CEC5FF";
20: set color_header_background = "#211F2C";
21: set color_page_title_background = "#24203D";
22: set color_page_title = "#fff";
23: set color_page_subtitle_background = "#696580";
24: set color_page_subtitle = "#fff";
25:

[ninetydegrees]

Did you make this a theme of the layout layer I've linked to? If you make it a theme of the original Tabula Rasa, it's not gonna work because there's extra stuff in it, such as the property the compiler tells you doesn't exist. I followed Afuna's advice and created a layout layer where I created the new properties and variables I needed.

[baggyeyes]

Well, I haven't got a lot of wiggle room right now. I won't until I pay for my account. :D

Which I will, when I have the money--sorry for the delete. I don't want to appear to be a smart alec.

[ninetydegrees]

No problem. Since these are public layers for now, you should be able to use them in a new style: create or edit a style, select "Other" in the layout and theme menus and enter the id number of each layer into the boxes.

[baggyeyes]

Reached my max, unfortunately. That's ok. I'm sure someone else will step up and test.

[foxfirefey]

Oh heck no, this will not do, no no no. Your problem is fixed. Get back to testing now!

[baggyeyes]

Sneaky. (But, thank you!)

Back at testing!!

[turlough]

It's looking good for me, except that .entry-day looks like it's slightly larger than .empty-day. I don't think it actually is, it might just be the lighter colour that makes it look that way. (screenshot in Firefox 3.5.2 on a Mac) (It might have looked like this earlier too, I probably just didn't notice.)

[ninetydegrees]

Oh, I had noticed but never looked into it. Thanks for telling me. Apparently there was some padding to .entry-day a. It should ok now.

[baggyeyes]

Actually, it wasn't larger - it just gave that appearance due to the lighter color, and the shadow being reversed as well. If the shadow was the same color as the rest of the days, perhaps it wouldn't have stood out as much.

(Note to self: I love Quick look on the Mac. I can zoom in on small images. So cool.)

[ninetydegrees]

It was larger for me actually. I thought it was the color or the shadow too but it wasn't: I turned all the boxes the same color and took a screenshot and used the ruler in Photoshop and all the boxes in a column where there was an entry were larger.

[baggyeyes]

I've been checking out pages with long comment threads, to see how they behave. On the first layout code you posted (which I neglected to mention, my bad) long comment threads disappeared in the sidebar, and were hard to read. At least, on my rig.

This time around, no such problem. The long comment threads flow easily. I'll keep an eye out for anything else.

[ninetydegrees]

Yeah, I noticed that too. I didn't do anything to fix this, though. :) Now the text escapes the box at some point as the container becomes too small but I don't know how to fix that or if it's even fixable. That's why I dislike custom entry pages and never use them.

[baggyeyes]

Yeah, I noticed the problem on this page, ironically. Still there.

[afuna]

It's a risk, yeah. I used to work around it by not showing my sidebar on my entry pages, or by always having the sidebar on the left, hehe. But I think as a risk it's something most people are used to? And can adjust for.

I can't think of any sane way to handle it, at least. Not without adjustments on the user's end.

[ninetydegrees]

I've just made collapsed comments a little more compact - less padding, less margin - so it should look a little better at least.

[afuna]

Just finished putting it into patch form. This was set up pretty much perfect! Thank you :)

(Just awaiting a preview image; someone may run it through one final round of testing).

Oh, one question, though. I named the images after the theme: darkpurple-header, darkpurple-bullet, etc. Do you think that you'll be using it for multiple themes, though? So maybe better as dark-bullet, etc? Not a big deal, but it satisfies my organizational itches *g*

[ninetydegrees]

Great!

I don't think I'll use them for other themes as they're all using this theme colors.

[ninetydegrees]

BTW, I want to make my .PSD files available if someone wants to make a color theme for this layout. Can I make a new post to link to them?

[afuna]

Yes! Let me add a "~funky circles" tag to make it easier to find later :)

(And done, btw)

[ninetydegrees]

Cool! Thanks again. ^_^

CSS Changes (Tags Page)

[ninetydegrees]

[Follow-up to http://bugs.dwscoalition.org/show_bug.cgi?id=1752]

1.

.entry .contents,
.month .contents,
.comment .contents,
.comment-wrapper.partial,
.page-month .month .inner,
.page-tags .tags-container ul,
.page-tags .tags-container div.ljtaglist {
    $entry_colors
    border-width: 20px;
    border-left: none;
    border-right: none;
    margin-bottom: 1em;
    -moz-box-shadow: .067em .067em .667em #111;
    -webkit-box-shadow: .667em .067em .667em #111;
    }

should be replaced by:

.entry .contents,
.month .contents,
.comment .contents,
.comment-wrapper.partial,
.page-month .month .inner,
.page-tags .tags-container ul,
.page-tags .tags-container .tags_cloud {
    $entry_colors
    border-width: 20px;
    border-left: none;
    border-right: none;
    margin-bottom: 1em;
    -moz-box-shadow: .067em .067em .667em #111;
    -webkit-box-shadow: .667em .067em .667em #111;
    }

2.

    .page-tags .tags-container ul.ljtaglist {
        margin: 0;
        padding: 1em 2em 2em 5em;
        }

    .page-tags .tags-container div.ljtaglist {
        margin: 0;
        padding: 2em;
        }

    .page-tags .tags-container ul li {
        font-weight: bold;
        margin-top: 1em;
        }

        .page-tags .tags-container ul ul {
            background: none;
            border: none;
            list-style: disc;
            margin: 1em 0;
            padding: 0 0 0 2em;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            }

            .page-tags .tags-container ul ul li {
                color: $*color_entry_border;
                font-weight: normal;
                margin-top: 0;
                }

                .page-tags .tags-container ul ul ul {
                    list-style: circle;
                    }

                    .page-tags .tags-container ul ul ul li {
                        color: $*color_entry_text;
                        }

should be replaced by:

    .page-tags .tags-container ul.ljtaglist {
        margin: 0;
        padding: 2em 2em 2em 5em;
        }

    .page-tags .tags-container .tags_cloud {
        margin: 0;
        padding: 2em;
        }

    .page-tags .tags-container .tags_multilevel li {
        font-weight: bold;
        }

        .page-tags .tags-container .tags_multilevel ul {
            background: none;
            border: none;
            list-style: disc;
            margin: 1em 0;
            padding: 0 0 0 2em;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            }

            .page-tags .tags-container .tags_multilevel ul li {
                color: $*color_entry_border;
                font-weight: normal;
                margin-top: 0;
                }

                .page-tags .tags-container .tags_multilevel ul ul {
                    list-style: circle;
                    }

                    .page-tags .tags-container .tags_multilevel ul ul li {
                        color: $*color_entry_text;
                        }

Re: CSS Changes (Tags Page)

[afuna]

Committed, thanks! (http://changelog.dreamwidth.org/380217.html)

CSS Fixes (Reply Page)

[ninetydegrees]

    .page-reply #postform {
        margin-right: 3em;
        }

should be removed.

    .page-reply #postform a {
        $entry_footer_link_colors
        }

should be added.

Re: CSS Fixes (Reply Page)

[afuna]

*salutes* Filed a bug. Thank you :)

CSS Changes (Entry page/bottomcomment)

[ninetydegrees]

And the last one, hopefully.

Color Codes:

Modify
Remove
Add

.entry ul.entry-management-links,
.entry ul.entry-interaction-links,
.comment ul.comment-management-links,
.comment ul.comment-interaction-links,
.bottomcomment ul.entry-interaction-links,
.bottomcomment ul.entry-management-links
    display: inline-block;
    padding: .5em 0;
    }

.bottomcomment ul.entry-interaction-links,
.bottomcomment ul.entry-management-links {
    padding: .5em 0;
    }

.bottomcomment ul.entry-management-links {
    text-align: left !important;
    }

.comment span.multiform-checkbox {
    padding-right: 1em;
    }

.comment ul.comment-interaction-links,
.bottomcomment ul.entry-interaction-links
.bottomcomment label {
    border-top: 1px dashed $*color_entry_footer_border !important;
    display: block;
    text-align: right;
    }

.bottomcomment select,
.bottomcomment input {
    margin-bottom: .5em;
    }

    .entry ul.entry-management-links li,
    .entry ul.entry-interaction-links li,
    .comment ul.comment-management-links li,
    .comment ul.comment-interaction-links li,
    .bottomcomment ul.entry-management-links li,
    .bottomcomment ul.entry-interaction-links li {
        $entry_list_background
        background-position: 100% 8px;
        padding-right: 14px;
        }

        .entry ul.entry-interaction-links li:last-child,
        .comment ul.comment-management-links li:last-child,
        .comment ul.comment-interaction-links li:last-child,
        .bottomcomment ul.entry-management-links li:last-child,
        .bottomcomment ul.entry-interaction-links li:last-child {
            background: none;
            padding-right: 0;
            }



And below:

#qrformdiv {
    padding: 1.5em 1em;
    }

#qrformdiv label {
    border-top: none !important;
    display: inline;
    padding-top: 0;
    text-align: left;
    }

Thanks for all your work, Afuna. *hugs*

Re: CSS Changes (Entry page/bottomcomment)

[afuna]

Filed the bug and put up a patch. Thanks!

(I also found one bug where the network page had no padding etc, because it no longer uses .page-read, but is now .page-network *g* I've just put up a patch for that, too)

Re: CSS Changes (Entry page/bottomcomment)

[ninetydegrees]

*high fives you* Thanks for everything!

Re: CSS Changes (Entry page/bottomcomment)

[afuna]

Thank you, too <333

(It's been a pleasure working with you *grin*)

Re: CSS Changes (Entry page/bottomcomment)

[ninetydegrees]

^_^ There may be an even funkier, more retro, 100% curvier layout coming... And I'd like to try to convert this one. Alas, I also have to teach ungrateful brats...

Re: CSS Changes (Entry page/bottomcomment)

[afuna]

Oh yay, I like the sound of that. And yay! That's a good layout to convert; looking forward to it .

(I did not realize you were a teacher! But I am not quite surprised -- it seems a lot of the designers I know or Dreamwidth are somehow teachers *g*)

CSS Fixes (Reply Page)

[ninetydegrees]

Modify
Add

.entry,
.page-entry .comment,
.page-reply .comment {
    background-color: transparent;
    border: none;
    position: relative;
    }

    .page-entry .comment-wrapper.has-userpic .comment .contents,
    .page-reply .comment-wrapper.has-userpic .comment .contents {
        padding: 2em;
        }

.page-recent .journal-type-C .entry .contents .poster,
.page-read .entry .contents .poster,
.page-entry .entry .contents .poster,
.page-entry .comment .contents .poster,
.page-reply .entry .contents .poster,
.page-reply .comment .contents .poster,
.page-day .journal-type-C .entry .contents .poster {
    border-bottom: 1px dashed $*color_entry_poster_border !important;
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
    margin-left: 4em;
    padding-bottom: .5em;
    }

    .page-recent .journal-type-C .entry .contents .poster:before,
    .page-read .entry .contents .poster:before,
    .page-entry .entry .contents .poster:before,
    .page-reply .entry .contents .poster:before,
    .page-reply .comment .contents .poster:before,
    .page-day .journal-type-C .entry .contents .poster:before {
        content: 'Posted by ';
        }

.entry .footer,
.month .footer,
.page-entry .comment .footer,
.page-reply .comment .footer,
.page-tags .tags-container .manage-tags-link,
.bottomcomment {
    $entry_footer_colors
    padding: 0 .5em;
    text-align: right;
    -moz-box-shadow: .067em .067em .667em #111;
    -webkit-box-shadow: .067em .067em .667em #111;
    }

    .entry .footer a,
    .month .footer a,
    .page-entry .comment .footer a,
    .page-reply .comment .footer a,
    .page-tags .tags-container .manage-tags-link a,
    .bottomcomment a {
        $entry_footer_link_colors
        }

    .entry .footer a:visited,
    .month .footer a:visited,
    .page-entry .comment .footer a:visited,
    .page-reply .comment .footer a:visited,
    .page-tags .tags-container .manage-tags-link a:visited,
    .bottomcomment a:visited {
        $entry_footer_link_visited_colors
        }

    .entry .footer a:hover,
    .month .footer a:hover,
    .page-entry .comment .footer a:hover,
    .page-reply .comment .footer a:hover,
    .page-tags .tags-container .manage-tags-link a:hover,
    .bottomcomment a:hover {
        $entry_footer_link_hover_colors
        background-color: transparent;
            text-decoration: underline !important;
        }

    .page-entry .comment .footer,
    .page-reply .comment .footer {
        padding: 0 .5em;
        text-align: left;
        }

Re: CSS Fixes (Reply Page)

[afuna]

Thanks! Filed a bug now :)

Re: CSS Fixes (Reply Page)

[ninetydegrees]

*hugs* Thank you!

[afuna]

Oh hey, me again. Ummm. I was wondering if there was a particular reason that entry posters for entries which have no userpic are being hidden. Can I unhide them? :-)

[ninetydegrees]

There is no reason there are hidden. I think the problem I had was that the dashed border would appear even where there was no poster and I got overzealous or something???

I'm trying to see if removing this code would cause problems... Maybe with padding but I'm not sure... Let me check.

Ok so I think replacing:

    .entry-wrapper.no-userpic .entry .contents .userpic,
    .comment-wrapper.no-userpic .comment .contents .userpic {
        display: none;
        }

with

    .entry-wrapper.no-userpic .entry .contents .poster,
    .comment-wrapper.no-userpic .comment .contents .poster {
        margin-left: 0;
        }

should make everything ok.

[ninetydegrees]

Unrelated but still a bug:

I think the comment footer bar displays strangely for logged-in non-owners. I'm not sure how to fix it. I've had a long day and I'm kind of unable to think right now.

Hmmm. This seems to happen only when I use the site code, not mine... *back to testing*

My bad. The fix for the bottomcomment area may be causing this ;_;

[afuna]

Maybe not; the fix isn't live on the site yet (awaiting commit, review, pushing live).

[ninetydegrees]

I think I had the wrong fix or something... Everything seems ok. Phew!

[afuna]

\o/

(Heading to bed, but will take care of the patch above tomorrow)

On second thought, easy enough to do and test, and looks like it works. filed and uploaded attachment!

http://bugs.dwscoalition.org/show_bug.cgi?id=1799

[ninetydegrees]

Thank you! Sweet dreams!

[ninetydegrees]

I'm f* stupid!

    .entry-wrapper.no-userpic .entry .contents .poster,
    .comment-wrapper.no-userpic .comment .contents .poster {
        display: none;
        }

should be replaced with

    .entry-wrapper.no-userpic .entry .contents .poster,
    .comment-wrapper.no-userpic .comment .contents .poster {
        margin-left: 0;
        }

And not whatever I said. *headdesk*

[afuna]

Hehe, and then I tested by using Firebug, and adding a "display: block" to the replacement code, so I didn't catch that! My fault for not testing properly, as well.

Uploaded a new patch now :)