LAYOUT + 10 COLOR THEMES: "Abstractia"

[chiming]

Theme name/layout: Abstractia
Author: chiming
Layout info: Info / Source Code / Live Preview
Image info: Made by me in Photoshop! And I have signed a CLA.
Additional info (for layouts): I overwrote the entire Tabula Rasa stylesheet so when it says "Use layout stylesheets", it just means mine. Supports one-column, two-columns (right and left), and three-columns (right, left, and sides). Modules are completely movable, although the default setup is two-columns-right with Powered by / Page loaded in #tertiary, which then loads as if it were a footer at the bottom. In three column views, #tertiary loads normally and these items will appear just fine off to the side. Layout is liquid, though it looks best at 900px wide and up. (A little bigger if using a three-column layout.)

Oh and just for clarity's sake, the theme doesn't do anything to text-transform; the lower and uppercase in my journal's title were my own manual doing.

Tested in Firefox/Opera/Safari/Chrome and also IE6-9 (it doesn't work very well in IE6 but all the others are fine) and the only CSS3 has a fallback.

Available themes (light on dark):
Abyss (blue) - Preview | Burnished (gold) - Preview | Dark Carnival (pink) - Preview | Midnight (black & white) - Preview | Ocean Floor (green) - Preview | Pulse (red) - Preview | Radioactive (forest green) - Preview | Toxic (purple) - Preview
Available themes (dark on light):
Au Lait (cream) - Preview | NEW: Sky (blue) - Preview

Custom comment page view (in Abyss).

Planned themes: purple, spring-green-ish Done!


ETA: Bug report aka layout submitted, awaiting review and hopefully commitment!

Comments

[musyc]

Really nice! All the color variations are lovely.

[chiming]

Thank you! It's a snap to make new ones, too; adding purple and green took me like five minutes.

[ex_ascension957]

I LOVE THESE. *__*

[chiming]

Thank you!

[keepcalmhyrule]

YOU GOT THE GREEN DONE!

I need this!

[chiming]

I did! ♥ Hopefully soooooon.

[chiming]

...also, while the finished version is SO MUCH BETTER, here's CSS for you to patch the regular layouts:

Green layout, to be added to the bottom of the regular code on my journal:

body { background-image: url(http://i.imgur.com/KqWsy.jpg); } input, textarea, #canvas #content #secondary .module-calendar table, #canvas #content #secondary .module-calendar table th, body.page-archive #primary table tr, body.page-archive #primary table th { background: url(http://i.imgur.com/2Xupc.png); } body.page-archive #primary table { background: url(http://i.imgur.com/lA7Bj.png); } #canvas #content #primary .entry .header, #canvas #content #comments .comment .header, #canvas #content #primary .bottomcomment, body.page-tags #primary .inner .tags-container h2 { background: url(http://i.imgur.com/FtuiA.png); } #canvas #content #secondary .module, #canvas #content #secondary .module-header, #canvas .topnav li, #canvas .bottomnav li, body.page-month #primary .month, body.page-month #primary dl dt a { background: url(http://i.imgur.com/3izEy.png); } #canvas #content #primary .entry, #canvas #content #primary .comment, body.page-tags #primary .inner { background: url(http://i.imgur.com/EVWVu.png); } #canvas #content #primary .has-userpic .userpic { background: url(http://i.imgur.com/AtNiu.png); } #canvas #content #primary .entry .footer, #canvas #content #comments .comment .footer, body.page-tags #primary .inner .tags-container .manage-tags-link a, blockquote { background: url(http://i.imgur.com/IX65I.png); } body, form, fieldset, label, input, textarea, table, th, td { color: #eeeeee; } a { color: #6fac07; } a:visited { color: #4c7205; } a:hover, a:focus, a:active { color: #8fce09; } #canvas #header #title, #canvas #header #subtitle { color: #000000; } input, textarea, #canvas #content #secondary .module, #canvas #content #secondary .module-header, #canvas #content #primary .entry, #canvas #content #primary .comment, body.page-tags #primary .inner, #canvas #content #primary .entry .header, #canvas #content #comments .comment .header, #canvas #content #primary .has-userpic .userpic, body.page-archive #primary table, body.page-month #primary .month, body.page-tags #primary .inner .tags-container h2, #canvas #content #secondary .module-calendar table, #canvas #content #secondary .module-calendar table th, #canvas #content #primary .entry .footer, #canvas #content #comments .comment .footer, #canvas #content #primary .bottomcomment, #canvas .topnav li, #canvas .bottomnav li, body.page-archive #primary table th, body.page-archive #primary table td, body.page-month #primary dl dt a, body.page-tags #primary .inner .tags-container .manage-tags-link a, blockquote { border-color: #47700a; } input, textarea, #canvas #content #secondary .module, #canvas #content #secondary .module-header, #canvas #content #primary .entry, #canvas #content #primary .comment, body.page-tags #primary .inner { border-color: rgba(149,235,27,.35); } #canvas #content #primary .entry .header, #canvas #content #comments .comment .header, #canvas #content #primary .has-userpic .userpic, body.page-archive #primary table, body.page-month #primary .month, body.page-tags #primary .inner .tags-container h2 { border-color: rgba(149,235,27,.25); } #canvas #content #secondary .module-calendar table, #canvas #content #secondary .module-calendar table th, #canvas #content #primary .entry .footer, #canvas #content #comments .comment .footer, #canvas #content #primary .bottomcomment, #canvas .topnav li, #canvas .bottomnav li, body.page-archive #primary table th, body.page-archive #primary table td, body.page-month #primary dl dt a, body.page-tags #primary .inner .tags-container .manage-tags-link a, blockquote { border-color: rgba(149,235,27,.15); }

[timeasmymeasure]

This is really pretty!

[chiming]

Thank you very much!

[dancing_serpent]

Those are gorgeous!

[chiming]

♥♥♥

[momijizukamori]

Hmm. For the first issue, it may be easiest to just make your own properties, so you can write your own descriptions. Though - is there any reason it breaks for px/em other than the fact that you have things calculated as percentages?

[chiming]

You mean entirely replace the Images section with a home brew? Yeah, that would probably work, although my dim memories of the last time I made a property group suggest I still wasn't doing something quite right. Whatever I put as the name of the group was what showed up, both where its name should be and also in the URL, so I was given the choice of having a lowercase name or a title-case URL. I wasn't sure this was a problem I could fix without a layout being official. :|a

And it breaks because I have things calculated as percentages -- I ask for a percent for the outermost margin and a percent for the sidebar and I add those two together plus a 2 percent margin between content and however many sidebars in order to figure out how wide the main content should be. I subtract it all from 99 so as to get a percent that won't start knocking things down the way 100% width does.

I'm pretty sure that when it comes to margins, you can either do em/px or you can do percentages -- and not both. The default Tabula Rasa model makes its sidebars by assigning the content area transparent borders, and borders will not take percentage as a valid width (as well they shouldn't). But if you have an idea, I'm more than open to it!

[momijizukamori]

I was actually thinking for the width stuff - have the layout set to not use the built in margin/sidebar width properties and define your own, so you can say in the description 'in percentages' - I did it for a layout I'm working on that has a defined content-width rather than defined margin-widths.

I'm not actually sure about a good fix for the images, unfortunately :|a I don't really know if it's possible to change where items show up in the menu - but I will point someone who knows the S2 backend better than me this way

[chiming]

I actually fixed the placement issue by just rehashing the entire menu, but the images-description thing is still a problem. :|a

Thanks for your help so far!

[yvi]

Oh Gosh, so pretty!

[baggyeyes]

Beautiful! I love it.

[denise]

this is absolutely gorgeous!

[chiming]

Thank you so much! ♥

[ninetydegrees]

I overwrote the entire Tabula Rasa stylesheet

I would merge the two stylesheets and make this its own style since you're not using anything from TR instead of an hybrid which is neither TR nor a full style. See what I mean?

Re: the images. This can only be done when you patch the style. At the S2 level, you can't change these labels.

I would love some tutelage on how to make a patch from this!

First thing is creating a bug on Bugzilla for it then claiming it then getting a Dreamhack if you don't have one already. Then patching depends on which OS you're on. Windows people gets the hard version while Mac and Linux users have it easier. ;)

[chiming]

I've actually been making some progress! :D I have a dreamhack and I've got it patched in here

On my dreamhack it is down in the system as abstractia/layout without Tabula Rasa, exactly what you suggest. ♥ I had to find out the hard way when it loaded wonkily! X3

I AM a Windows user sob so, it's been hard going, but I feel like working with PuTTY is getting easier and I'm proud of the progress I've been making!

Is there anything you can tell me about the image label now that I have a dreamhack? AND THANK YOU, you are one of the style gurus I've been hoping most to hear from.

[ninetydegrees]

Brilliant! You've got reason to be proud!

Ok sorting the images into existing categories (Page, Navigation, Header, Entry, Comment, Footer, Module, Archive, etc.) is easy enough. You just have to edit the style.pm file you've created in \cgi-bin\LJ\S2Theme\. You can look at funkycircles.pm and nouveauoleanders.pm to see how it's done.

Creating a whole new label involves editing \cgi-bin\LJ\S2Theme.pm itself at least to add a new cat at the bottom. I don't know if it's the best route because this'll probably be something only your style will use. So maybe it could be possible to create it in style.pm instead but you'd have to ask Fu about that. However, looking at your code it doesn't seem necessary. You've got a background image for content headers, modules and archive pages, userpics in entries and comments, content footers, etc. so these can all go to Page and you can change the description to mention where the image generally applies because that's what's useful for users.

Also I think colors should go to colors instead of w/ images and be two separate props as usual. I understand that it makes sense to you because they're all part of the transparent effects but what if I want to use your style because I love its layout and the background image you have and the colors but I want solid backgrounds for content because it's easier on my eyes and I see there aren't any option for them in Colors and I'm all disappointed and confused? See what I mean?

[chiming]

Yeah, I see that. :|a TBH I didn't even mean to include the color option! It just showed up there automatically when I made use of the image property. I think that's a good idea, although...

Here's the thing: my background images are all clustered together, and they don't all make an easily explainable sense.

input, textarea, .module-calendar table, .module-calendar th, body.page-archive #primary tr, body.page-archive #primary th { background: transparent url(http://i.imgur.com/2Xupc.png) repeat top left; } body.page-archive #primary table { background: transparent url(http://i.imgur.com/lA7Bj.png) repeat top left; } .entry .header,.comment .header,.bottomcomment, body.page-tags #primary .tags-container h2 { background: transparent url(http://i.imgur.com/FtuiA.png) repeat top left; } #secondary .module, #secondary .module-header, .three-columns #tertiary .module, .three-columns #tertiary .module-header, .topnav li, .bottomnav li, body.page-month #primary .month, body.page-month #primary dl dt a { background: transparent url(http://i.imgur.com/3izEy.png) repeat top left; } .entry, .comment, .page-reply #postform, body.page-tags #primary .inner { background: transparent url(http://i.imgur.com/EVWVu.png) repeat top left; } .entry .footer, .comment .footer, body.page-tags #primary .tags-container .manage-tags-link a, blockquote, .module-navlinks .current { background: transparent url(http://i.imgur.com/IX65I.png) repeat top left; } .has-userpic .userpic { background: transparent url(http://i.imgur.com/AtNiu.png) repeat top left; }

So that's why I decided to categorize them by their opacity, to try and make it easy for users to create approximate images of the same opacity if they were -- for example -- modifying my theme to use a light background and wanted to replace all the black images with pink images or something? :|a It's not a simple matter of "entry background", "footer background", etc.

.entry, .comment, .page-reply #postform,
body.page-tags #primary .inner { }

This declaration would translate into "Background for entries, comments, the reply box on the reply page, and the background on the tags page".

.entry .footer, .comment .footer, body.page-tags #primary .tags-container .manage-tags-link a, blockquote, .module-navlinks .current { }

This, "Background for entry/comment footer, tags page manage link, blockquote, and the current link on the navlinks module".

Any suggestions for this would be beloved. If I could do something about it, I could both clarify the descriptions of the transparencies and let users pick color replacements intelligently.

[ninetydegrees]

modifying my theme to use a light background and wanted to replace all the black images with pink images or something

To my mind, that's already pretty advanced. I can't imagine lambda users creating equivalent transparent images. Also feel free to add comments in the source code if you feel theme designers might need them.

"Background for entries, comments, the reply box on the reply page, and the background on the tags page".
"Background for entry/comment footer, tags page manage link, blockquote, and the current link on the navlinks module".

What about "Background image for most content boxes" and "Background image for content footers and blockquotes"?

Descriptions don't have to be exact. There's always a learning curve when it comes to complex styles. For example, several styles have a color for accents in entries or even in the page but we don't explain what these accents are (date, metadata label, IP address, ...) because it's not possible. You can see what it corresponds to when you change the color.

[chiming]

This already makes me feel much better, thank you. ♥

[ninetydegrees]

You're most welcome!

<3

[chiming]

Okay. Added the background image descriptions, added the background color properties, shuffled both of them into the correct 'fold' -- but noticed that my attempt to override the Sidebar description didn't work. Here's my text on that:

property string sidebar_width { des = "Set the width of a single sidebar. (Enter JUST '20' for 20%.)"; example = "20"; } property string margins_size { des = "Size of left and right margins. (Enter JUST '5' for 5%.)"; size = 5; }

Here's what's actually printing out:

"Set the width of a single sidebar. Ensure that the value is given in em or px."
"Size of left and right margins"

What bewilders me is that printing them out manually DID do the other thing I wanted -- it let me re-order the properties so that mine no longer show up randomly at the very top of the stack. It just didn't apparently actually override the description. Any ideas?

Thank you again for what you've already helped me with!

[ninetydegrees]

I've looked at the layout source code you have on your hack and this is caused by the fact that this is still an hybrid instead of its own style. You override the presentation group as if this was a child of Tabula Rasa then add all the TR options again (so your first sidebar_width is overridden by the standard, second one). What you should have is one presentation group with all the standard properties supported by your style, possibly overridden if you need to such as w/ sidebar_width, and your additional properties. Same things for all other property groups. After that add the functions you have edited and all the CSS in function Page::print_default_stylesheet(). You can see what I mean if you look at the source code for EasyRead: http://www.dreamwidth.org/customize/advanced/layersource?id=110057&fmt=html.

/sorry, this is my 'business' journal!

[chiming]

But when I added them on their own, they all showed up at the top of the group they were a part of instead of in the middle, where I wanted them. :|a I overrode everything in that group so that I could have control of where my custom elements fell.

The other things are just absolutely true and awkward. I'll try and fix that up!

[chiming]

Problems solved: Colors are showing up where they're supposed to be, property names are updated, layers are merged together better.

Problems not solved: Images aren't showing up where they're supposed to be, text still isn't being overridden on presentation group. (Sob, I'm afraid I wasn't really sure what you meant I should do about the presentation group, so... I tried!)

abstractia.pm:
package LJ::S2Theme::abstractia; use base qw( LJ::S2Theme ); use strict; sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } sub page_props { my $self = shift; my @props = qw( image_content_header_background_group image_content_background_group image_content_footer_background_group image_userpic_background_group image_sidebar_background_group image_archive_calendar_background_group image_calendar_and_form_background_group color_content_header_background color_content_background color_content_footer color_userpic_background color_sidebar_background color_archive_calendar_background color_calendar_and_form_background ); return $self->_append_props( "page_props", @props ); } 1;

Prop group presentation:
propgroup presentation { property use num_items_recent; property use num_items_reading; property use use_journalstyle_entry_page; property use layout_type; property use tags_page_type; property string sidebar_width { des = "Set the width of a single sidebar. (Enter JUST '20' for 20%.)"; example = "20"; } property string margins_size { des = "Size of left and right margins. (Enter JUST '5' for 5%.)"; size = 5; } property use sidebar_width; property use margins_size; property string entry_poster_alignment { des = "Alignment of entry poster"; values = "none|None (don't show)|left|Left|right|Right"; } property string entry_poster_position { des = "Position of entry poster"; values = "header|Header|top|Top of entry|bottom|Bottom of entry|footer|Footer"; } property use entry_poster_alignment; property use entry_poster_position; property use userpics_style_group; property use userpics_position; property use entry_metadata_position; property use use_custom_friend_colors; property use use_shared_pic; property use userlite_interaction_links; property use entry_management_links; property use comment_management_links; property use entry_datetime_format_group; property use comment_datetime_format_group; } set sidebar_width = "20"; set margins_size = "5"; set layout_type = "two-columns-right"; set userpics_position = "right"; set entry_poster_alignment = "right"; set entry_poster_position = "header"; set use_custom_friend_colors = false; set custom_foreground_element = "userpic_border"; set custom_background_element = "userpic_background";

Is it the property use things that're getting in my way? Where should I put my override definitions, if not in here?

[ninetydegrees]

Is it the property use things that're getting in my way?

Yep. You need to remove:

property use sidebar_width;
property use margins_size;

Property use doesn't mean "use this prop I've just created". It means "use the Core prop because it's perfectly fine and I don't need a new one". *g* You couldn't have known the difference.

[chiming]

Hahaha. Live and learn, right?

Okay! I think... everything is done! :) Maybe!!! /hopeful

[chiming]

(And by "images aren't showing up where they should be", I meant that they're showing up as a generic child of the Images category, under the heading of "Options", instead of before where they were showing up under "Page".)

[chiming]

Okay, even weirder, JUST "content footer background color" is showing up in an Options group. Only the rest of the colors are where they should be.

[chiming]

--oh! I see that the content_footer thing is named incorrectly. --annnnd all the background images. Fixed!

Now the only problem is the presentation group. /wrings hands

[chiming]

--And I'm wrong, the background images are no longer where I want them to be. I must have messed something up when I added to the abstractia.pm file. OTL

[chiming]

For (hopefully) reference, here's my entire abstractia.pm file

package LJ::S2Theme::abstractia; use base qw( LJ::S2Theme ); use strict; sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } sub page_props { my $self = shift; my @props = qw( image_content_header_group image_content_group image_content_footer_group image_userpic_group image_sidebar_group image_archive_calendar_group image_calendar_and_form_group ); return $self->_append_props( "page_props", @props ); } sub page_props { my $self = shift; my @props = qw( color_content_header color_content color_content_footer color_userpic color_sidebar color_archive_calendar color_calendar_and_form ); return $self->_append_props( "page_props", @props ); } 1;

Any help or hints would be deeply appreciated.

[ninetydegrees]

Ok these all go into the same sub (page_props) so you need to merge them.

Also noting that if these are all background colors it's best to say so in the property name. It makes it easier down the line to know what's what if there are fixes to be done or new features do be added. I would also make the description shorter "Content headers background color" and move the note about transparency into a proper note:

property Color color_content_header_background {
des = "Content headers background color";
note = "Leave blank for transparency."
}

Same things for images. You can see how properties are conventionally named and described if you look at Core2 (http://www.dreamwidth.org/customize/advanced/layersource?id=550&fmt=html). This is is in the 'Journal style - images' and 'Journal style - element colors' sections.

[chiming]

1. They shouldn't all go in the same prop -- I mean, some of them go in the prop on images and some on colors. Is that really the same?

Will do the rest of it!

[ninetydegrees]

You figured this out on your own but yes: propgroup in your .s2 file determines in which category (Presentation, Images, etc.) the property should go whereas append_props in the .pm file determines in which subcategory (Page, Module, etc.) they should go.

[foxfirefey]

Heeeeeey!

So, would it be okay to create a bug for this layout so I can start teaching chiming to upload patches for review, etc? I think she has pretty much managed to make a patch for this style!

[ninetydegrees]

Sorry for the late answer, Fey.

Yes, of course!

[foxfirefey]

No problem--we went ahead and did it trying to copy what you do! So if you wanted to review it any, she'd probably die of delight.

[ninetydegrees]

I'd really love to but I'm in Grading Hell right now and will be for a while so I'm afraid I can't. :/

[enemytosleep]

I have this. hearts; Love it. I made the text bigger because I am blind like that.