Koi

[mmmag]

Layout: Koi
Layout info: layout layer | live | preview
Images info: Located at imgur, because photobucket resizes large images. Bummer.

OMG! Yay, it's done! Needs lots of testing.

If you have any suggestions as to some of the wording in the customization wizard or on anything, really, please let me know. This is my first time doing a layout like this and I'm open to anything.

I'll print and send my CLA some time this week.

Comments

[foxfirefey]

I just have ONE suggestion, and that is for a little bit of padding or margin on things right up against the left edge!

But this is GREAT work! Thank you so much!

[mmmag]

I added the option of setting page side margins to the wizard. Now it defaults to 2%.

Glad you like it. :D

[musyc]

VERY lovely. A couple of immediate thoughts upon a quick scan:

1. A custom navstrip is ... no fun. I'll spend an hour in frustrated WHICH CODE IS IT? squinting if I change something in the main layout and suddenly my navstrip's unreadable. (As I discovered with Practicality today, SLDKJFGRRARGH.)

2. Links within journal entries need an underline. Usernames are bolded, so they stand out from the text, but plain links are too close in hue. Need something to stand out.

3. Tinified icons look cool, but make it reaaaaaaaaally difficult for me to identify people on my reading page without majorly confused peering. (Image recognition is far more immediate than text.) If I used this layout, first thing I'd do is strip the small-sizing out of the userpic code (and then lose some years off my life re-adjusting the margins).

[mmmag]

1. The navstrip can be customized through the customization wizard. I'll have to remove the background image since that's the only thing that cannot be customized.

2. Thank you for pointing that out. I'll have to add that in as well. So, would an underline suffice or should I add an option for custom colors?

3. You can customize the size (small or full) of the user icons through the wizard as well as their placement (right or left). Also, when you hover over the small user icons they expand to their full size. I thought that was cool...

Thank you for your help! If you run into any problems or have any more suggestions, please let me know. I really appreciate it. I'm still a newbie at this.

[musyc]

1, 3. I have no idea how to look at the customization wizard for a layout that's not live and in rotation. :D If the navstrip and user-icon size are customizable through that, my objections are withdrawn! (I only object to hard-coding colors/images into the layout layer itself without recourse to change. If it can be easily altered through the wizard, for people like my friend who can't make anything customized without a ticky box to click, no problem from me.)

3. Oooooh, that is a nifty effect! (Though I never would have noticed if you hadn't mentioned it. I don't think I ever hover over icons, even though I coded opacity flips into my own LJ. Was more of a "can I do this?" instead of a "I'll use this". >.> )

2. For my use, an underline would be best - if you look at this entry of mine in the Koi layout, points 3 and 4 of my entry have bolding that at first glance look very similar to username links. An underline would differentiate far better for my eyes.

[mmmag]

Okay, now entry/comment content links are underlined and user icons will default to full size instead of small. I'll also add color customization of the entry links to the wizard, since I recall people wanting to be able to differentiate links they've visited. I can't believe I forgot about them. o_O

Thanks for your input. I really appreciate it. :D

[poulpette]

This looks lovely!
Though, one thing needs fixing, the middle poll bar is stretched and huge for some reason, while both ends of the bar are still displaying normally. I have no idea what could cause this though.

[mmmag]

Fixed! If you notice anything else, please let me know. Thanks!

[poulpette]

Sure, no problem! I'm curious, what was causing the issue?

I didn't mention it earlier, because it's mostly a me thing and YMMV, but the faded gray you use for the entry title (mostly the date/time and user links, the title is big enough to make this a non-issue) is a tad too pale for me and I have to strain my eyes a bit (not much, but enough to notice it's uncomfortable). Maybe it could be a shade or two higher? Not too much to keep the nice effect you have there, but enough to make it contrast less with the text would make it a bit easier on the eyes I think.

[mmmag]

I had given entry images a max width and set their heights to auto. I forgot to add auto width, and that was what caused the funky poll images.

The entry titles are dark, about as dark as the entry text. They have a text-shadow that's light. Are they showing up pale for you? What browser are you using?

As for the other pale text, I've darkened the pale gray a little bit. It's actually a murky brown. Heh.

I think you are right about there not being enough contrast. I'll have to go research and find some better color alternatives while keeping the same effect.

Thanks!

[poulpette]

Setting width and height for images . That's risky business in my experience :P but that's good to be reminded of it every once in a while.

You'll have to excuse me, apparently my brain on too much java (and little sleep) messes up my memories a bit ^^" As you say, the entry title is the same color as its text. Sorry about the confusion. The pale grey no longer make my eye strains so far, so YAY for that, and thank you :)

And I just noticed this now but the spacing between some words in the title is a little too short. you can see an example here, in my latest entry. You'll see that the words preparing and java seem to be missing a space between them.

[mmmag]

The entry title has a "design feature" of negative letter spacing, which is what is causing the shortened space between words. I'm going to leave it in, since I like the effect.

For future reference, this is what is causing that in the css for .entry-title:
letter-spacing: -.04em;

Thanks again for your input!

[ninetydegrees]

The only issue I've noticed is that the navigation bar links don't wrap which means some links are hidden by Search if you increase the font size and/or decrease the font resolution.

[mmmag]

For now, I've given the navlinks a padding-right that's more or less the width of the search bar. If the search bar isn't there, it will look kinda funky with that blank space.

I think I can come up with a solution to this with S2. I'll go give it a try.

Thanks for your help!

[ninetydegrees]

(Sorry for the delayed reply; I thought I had answered your comment)

Well, they do wrap now but they're above the background which looks kinda weird too. Is there any way to make the background repeatable?

Also, two questions:

-- I've noticed there is no skip link (previous 20) above entries. Some people find that very useful. Would you object to it being inserted?

-- Could you think of a name for this theme? Or maybe a name for the style and the theme would be called 'Koi'.

[mmmag]

1. Well, the background for the navigation links is actually under #header and the navigation links are absolutely positioned over that. That's why they wrap above the nav bg. So, I'm initially at a loss as to how to fix it, but maybe I'll come up with something later after mulling it over.

2. I don't mind at all. I'll add them back in.

3. I'm not good with naming things. Just a heads up. I think the theme should be called 'Koi' and the layout layer 'Wide Open', since it doesn't have that boxed-in feeling. Does that sound good?

[ninetydegrees]

1. But you'll never be able to fix it if the background image isn't horizontally repeatable, which it currently isn't. Also, why do you need the absolute positioning for since you've edited the source code to make the navlinks module display where it is?

2. Cool. Thanks.

3. Seems perfectly fine to me. Thanks again.

[mmmag]

1. >.> That's how it was coded in the original CSS...I didn't bother changing it...[ETA: The reason the navlinks and the search bar were absolutely positioned is because of the navigation background. I just remembered that I initially tried to style the navlinks properly, but I had to mess with negative margins, and the bg image clouded the subtitle. So I just repeated what the original css did.]

Okay, so I'll style the navlinks properly. My problem with horizontally tiling the nav bg are those swirly bits at the end, their not so seamless transitioning would look awkward.

I think, I'll just remove the current nav bg and try to create an image that tiles seamlessly horizontally and vertically from the original. I'll also add two new color properties, for the bg color and the border color. That should solve the wrapping problem you mentioned earlier. And no more swirly bits.

Thank you for testing this layout and helping me fix it for greater consumption. I really appreciate it.

[mmmag]

So, I've made the changes. I replaced the navigation background with a translucent png image. It was the easiest solution for my skill level. I couldn't replicate the texture of the original. Textures baffle me. It looks okay, but I think it loses some of the prettiness of the original. Let me know what you think.

[ninetydegrees]

It looks very nice but you're right that it's not as nice as the original. I'm on vacation starting today so I'll have time to think about this and see if there's a better solution. I don't have mad Photoshop skills either but sometimes I manage.

[mmmag]

Wow, thank you! If you come up with anything, please let me know.

[notemily]

this is so awesome, I am adding this to my memories for when I feel like I need a new layout (just got one recently). it's the same layout I use for my wordpress blog. which I really need to update... *wanders off*

[mmmag]

Thanks! If all goes well, it'll be a system layout. So, it'll be ready for use whenever you so desire.

[ex_rising236]

This is gorgeously done. I'd love to see a few more themes on the same base layout principle — I think that this (and others) would fill a gap that a lot of people complain about, the lack of image/graphics pretty themes like this.

[mmmag]

Thank you! I was motivated by people complaining about the lack of layout choices and how hard it was to customize them. I didn't agree with that and decided to put my money where my mouth is. I'm willing to convert other open source layouts, if you find any you'd like to see here.

[ex_rising236]

Siiiiiiince you offered (and I haven't a clue in the larger world of CSS type stuff, or I would do it myself), here are a few that I'd like to see, though I haven't done the inquiries with the authors (which you'd obviously need to do to confirm that they're actually open source and reusable/adaptable on Dreamwidth).

http://www.oswd.org/design/preview/id/3467
http://www.oswd.org/design/preview/id/3247

(Everything I do with style stuff is pretty much simple that I can do either with very simple CSS overrides, or things that work with existing layouts and create themes. With the oh, wizard. :D)

[mmmag]

Both designs are nice. The first one might not work for greater consumption on DW since it's not very flexible (fixed width, width of header image, width of sidebar). The second one works better since it is fluid width and it can work with an existing layout base (Transmogrified and Bases). The only problem I see with it is customizing the blue color to something else. Images are used to create that effect, and I'm not good with images.

Here is the license for that layout: http://templates.arcsin.se/license/

I'll keep it in mind when choosing what to work on next.

[ex_rising236]

:) I did notice now that I've been looking at them that neither of the licenses are exactly perfect for adapting to Dreamwidth, either. But I will keep working.

Also, I'd be more than happy to help you with images and stuff, if you can get me the original images to work with or something like that, as far as the second one goes. Images at least I'm slightly good with.

[turlough]

Very pretty!!

[mmmag]

Thanks!

[mmmag]

I've just emailed Denise my CLA.

[ninetydegrees]

Hi mmmag,

I've started working on converting this to a Tabula Rasa style. There are things I haven't integrated yet like the Navigation Strip and the footer most notably and things which might not be displayed correctly or haven't been tested at all but I'd appreciate it if you could have a look and tell me what's ok/wrong/buggy:

Here's a link to a preview:

http://www.dreamwidth.org/customize/preview_redirect?themeid=240469

And here are the layers:
http://www.dreamwidth.org/customize/advanced/layersource?id=240466
http://www.dreamwidth.org/customize/advanced/layersource?id=240469

[mmmag]

Apologies for not getting back to you sooner. The layout looks good. As you said there are few things not implemented, but it looks great. Thank you for working on it! I must confess that I lost interest in CSS and coding a while ago and don't remember much of what I was doing with the layout. I'll try to be as helpful as possible, but I currently feel a bit blind.

[ninetydegrees]

No apologies needed! I'm nowhere near ready to patch this yet and I have two styles to do before this one so you've got plenty of time to give me your opinion. *g*

[mmmag]

Hmm...just a question, since I can't edit my previous comment...In the future, would it be better to use an established layout and translate designs as styles, instead of creating new layouts? Would that be easier to implement? Hopefully, this makes sense.

[ninetydegrees]

If you refer to the fact that I made this a child of Tabula Rasa then, yes, it does make things easier for us because TR has all the most important Customize options implemented and the structure to allow for any page setup (1 column, 2 columns, etc.). Also, when we have changes to make, we can make the change in TR and it'll apply to all its children.

[ninetydegrees]

Hi again!

I just wanted to let you know this has been committed and will go live during the next code push. Congrats on becoming a Dreamwidth contributor!

Best,
90d

[mmmag]

So exciting! Thanks for letting me know. Apologies for not providing you with much help. Thank you for your hard work!

[ninetydegrees]

No apologies needed at all! Thank you for your patience.