New Layout Layer: Venture

[onlyembers]

Theme name/layout: Venture / Radiant Aqua

Author: onlyembers

Venture (Layout Layer): Info | Source | Highlighted Source

Radiant Aqua (Default Theme): Info | Source | Highlighted Source | Preview

Additional info (for layouts): One transparent striped png in the theme; it's mine, so no usage concerns. User layout stylesheet is enabled, all column types supported. Right now I have the modules in single-column mode default to a 'display: inline-block' with their width looped into the display preferences. Feedback is welcomed; I was torn between this and stretching them across the full column. Is there a big single-col userbase that has a preference one way or another? I also added in a header navigation module that works independent of the sidebar one.

----

Needs Testing In:

- Browsers, possibly? I've run it through all the up to date versions of Firefox, Chrome, Safari, etc, plus IE8+ on up. From what I could see via an emulator, IE7 also looks all right, but I didn't want to spent a huge amount of time digging around until I got word on how far backwards compatibile things needed to be.

- The front-end UI? Again, I've checked everything over, but it's totally possible I've missed things a user might spot from the customization wizard.

- General testing. Pretty much just to be put through the paces! I've reached a point at which no more staring at the code will make it better without some input and a fresh set of eyes to tell me what I've inevitably missed/hosed up/etc.

Only the one theme, until the layout layer gets any kinks worked out. Extra comment flavor until it's ready for submission/patching. Have at it? :D

Comments

[fu]

That is a pretty nice use of css transitions.

[onlyembers]

Thank you! I've just started playing with transitions recently, and love the way they can add a little extra oomph to navigation and lists in particular.

[milkymoon]

This is really nice! :)

[onlyembers]

Thank you so much! I've really enjoyed putting it together.

[momijizukamori]

Oooh, I *like* this. I lean towards inline-block for one-column, though no doubt there are people who feel otherwise.

I think my only (very small) nitpick looking through is that the body font for entries seems very... pixelated on Firefox for Linux. I know fonts cross-platform can be a bitch, though.

Were you interested in patching this yourself? If so, I can do a quick code-review for you, and either Fu or 90d will probably do one before it gets committed. If not, the patcher (which will probably be me again) will do the going-over and what not *g*

[onlyembers]

Thank you!

I'm mulling over the possibility of coding in a tickybox or dropdown where people can chose placing the modules in inline-block vs. full column stretch. Easy enough to do, and turns the choice over to the end-user.

Probably a good catch with the font? I'll fire up Kubuntu later and see if I can replicate, but regardless I will seek out a good linux-friendly serif fallback. Right now it is set to Cambria/Georgia/Times/Times New Roman and those are more Windows/OSX defaults. (Tbh, I'm surprised it was the entry body font. I was worried about glitchiness on the google web font on the headers.)

I'd looooovelovelove to give patching a go, if someone'll be patient and point me in the general direction of where to go. I understand perfectly what code/changes/patches have to happen to what files, re: the patching guide, but how to … get to said files still a little fuzzy. I am new to Github. :D

[ghoti]

Quick peek looks good on mobile too.

[onlyembers]

Awesome! I did a quick peek on my Android and my kindle, so it's great to have even more confirmation that it isn't breaking terribly on a wee ittybittybitty screen.

[carene_waterman]

I like your transition too. Nicely subtle.

For one-column, I like horizontal modules too, and a user can force them to be full width by setting the sidebar width to the page width (or 100%? I can't recall if that option allows percentages). So you do have both options here, but users might not realize that. A line in the user options explaining how sidebar width functions in a one-column layout might not be a bad idea.

There is one issue I noticed, it's not your code, rather it's what happens when you put content right up at the top of the page in any style.

The DW code for the navstrip sets the height of the navstrip to 45px and puts a padding on body of 45px. Which is awesome except for how it's not when a user ups their font size. The page starts to slide under the navstrip as the navstrip gets bigger than 45px. Usually, with styles where there's a big whitespace below the navstrip, no one notices.

It's really noticeable on your style because the navigation tabs start disappearing at bigger fonts. You can fix this for almost all users by setting the padding-top on body to 2.8em in your layout. (use html body as the selector, to match the navstrip CSS)

Otherwise the style looks really good at fonts bigger than 24 pixels in all the views I tried.

[onlyembers]

Exactly the kind of issue I was looking for, thank you! I'll fix this asap and use the .has-navstrip selector to focus it so there's not a huge space up there when the navstrip isn't around.

Can I ask how to replicate this? Punching up fonts via Cmd+Plus doesn't seem to cause the same issue for me, but I so rarely touch my font size settings that I'm sure I'm missing something. I'd love to be able to check this in the future!

[mmejavert]

I thought it looked great in the current version of Opera. I didn't notice anything that looked odd or glitchy at all :D

[onlyembers]

Thank you, thank you! Opera is one of the few browsers I don't have on hand, so this is great to know.

[ninetydegrees]

Very, very pretty and functional and original. You did a great job! What Fu said about the transitions and I think my favorite detail is the longer border on the upper right side of entries. I love the asymetric, modern, elegant accent it gives to the whole layout.

Edit: I've only had a quick look at your layers but I think kudos are in order. Also I second the offer for help on the transition to git. :)

[onlyembers]

Oh my gosh, so much praise! Thank you!

I do love that border, too. It's connected from header to userpic, so if you set the icon to left-alignment you end up with the icon-portion of the border on the opposite side (and not quite as pretty of an effect) but still.

Good to hear the layers are up to a casual peek! It's been a pretty fun learning experience digging into the template system. As for Git: I would so, soso appreciate any help from anyone willing to give it! Haha, puttering with HTML/CSS/S2/Perl/etc doesn't bother me in the least, but atm my Git knowledge is about like: "…Commit the Pull …Fork... what?" ;D

[carisma_sensei]

LOVE IT. Simply.

[gone_fishing]

I like this *a lot*. :D

[onlyembers]

Just as an update for anyone following this, I have:

- Gotten my CLA in.

- Fixed the issue carene_waterman was seeing, in which large minimum font sizes in browsers caused the navstrip to overlap the top tabs. You do loose that tiny wee little gap between tabs and the top of the navstrip, but it's totally design only and there ought to be full functionality now.

- Am still not sure what to do, re: the lack of entry font antialiasing on linux momijizukamori told me about. I'm between swapping it out with something that might work better (Georgia?) and leaving it as-is, with the notion that the font can easily be changed by a user since I created an entry property in propgroup front_child. Thoughts?

- Will be adding in the option to switch between full-width modules and horizontal columns today. Also, puttering with some odds and ends bugginess I've picked up.

- Am waiting for my Dreamhack app to be approved

- Made a Bugzilla acct.

- Gone through Codeschool's 'Git Real' course, since they threw a free hall pass at me.

Progress? ;D


--

ETA: Also, to everyone who's commented about liking this layout and I haven't replied to your threads: Thank You!

[jewelfox]

This is the best theme on Dreamwidth right now

* H1 tags which normally display with a line break beneath them (when there is none) don't have one in this theme

* Ordered and unordered lists have the bullets or numbers on the line above the list content

I am using Firefox on Linux and Windows with NoSquint enabled and a text zoom of 130 percent; I have modified zoom levels but have not seen a difference

[momijizukamori]

Poking my head in as I go through all our styles stuff to just say - yaaaaaaaaaaaay progress! I'm super-excited about this :)

[jewelfox]

Also, does this have a one-column layout

[onlyembers]

Yep! It works with both one column, and one column split.

Plus I added in a function in there where people can chose between having modules expand across the full single column, or in separate little inline-blocks across the width of it. ;D

[got_swagger]

This is absolutely gorgeous! It's definitely my favorite theme I've come across on here!

[timeasmymeasure]

This is so gorgeous!

[momijizukamori]

Hey - I know you were initially interested in patching this yourself, but with the migration from Bugzilla to Github for bug tickets, I thought I'd check in again. I'm happy to work on patching it if you don't want to!

[mitbix]

I don't know if you're still around but I hope you make the purple version on your journal available too! These are both beautiful.