Boxed In: 4 themes

[laitaine]

An embarrassingly long time ago, I submitted a layout and a bunch of themes and decided I wanted to use it as a learning experience for patching styles. A few small things got in the way (like finishing my thesis, packing up my life and moving to another country) but, finally, finally - thanks to much patience and hand-holding from ninetydegrees - I'm about done with patching! Of course, I probably could have done it a whole lot quicker if I hadn't kept tweaking the layout under the guise of "testing". Or tweaking themes. Or making new ones. I guess this is an unfortunate side effect of patching my own stuff.

Anyway, before I put the patches up on zilla, I thought I'd post the new themes here:

Layout: Boxed In
Author: laitaine

Amethyst · info · source · preview

Mint Choc Chip · info · source · preview

Oceana · info · source · preview

Spring Fling · info · source · preview


I also tweaked all the Boxed In themes I submitted previously, and renamed two of them:
Rose -> Antique Rose
Silver -> Silver Spectrum


Image info:
- The background images were purpose made by me and are released under the terms of my CLA.
- The arrow and tag icons are recoloured versions from the FamFamFam Silk set, the originals are licensed under a Creative Commons Attribution 2.5 License. I don't know the ins and outs of licensing, especially as I've not made these graphics myself, only altered someone else's work - but I'm sure original license + CLA makes everyone happy. Also, as the site already uses some silk icons, do I need to add this link to the layout's resources, or is it taken care of elsewhere?

Comments

[ninetydegrees]

This is so pretty!

(You're good license-wise but I'm clueless about the single vs double crediting.)

[laitaine]

Thank you :)

Regarding icons, Boxed In itself uses some silk icons (the same for every theme), and then each theme has its own set of arrows and tag icons. So I guess if I do add a resources link then one in the layout layer should cover everything. As I said, I just don't know if it's needed, given that the site already uses silk icons (and credits them here). To whom should I direct these questions?

(Also, I love your icon :))

[ninetydegrees]

You're right: if you credit FFF in your layout layer, it'll apply to every theme. However, I think it may be best to restrict it to themes because there's no guarantee future theme-makers will use the icons too.

I always go to Denise for these kind of questions.

(Yours is very pretty too!)

[laitaine]

But the base layout uses icons too. Even if the themes makers don't add arrows (and I'm wondering whether I should make a default icon set that the themes just overrride), then the layout itself still uses extra icons that TR.

Anyway, I shall ask Denise!

[ninetydegrees]

You mean there are icons which never change?

[laitaine]

Yes. There are 7 icons which are added in the layout layer and do not change (these are for metadata and also alongside the permalink, reply and read-comment links).

Though, I guess there's nothing to stop any theme makers from coming along and changing them to their own icons or setting them to "" (ie. effectively removing them).

There are then 7 further new icons added for each theme layer - these are a tag icon for each tag in tags lists and arrows to go alongside parent/thread/expand/etc links in comments.

[ninetydegrees]

Hmm. I think I still would put everything in themes even if it's redundant and add coding lines.

[laitaine]

Ah, okay, so I would have 14 icons per theme, instead of 7 icons per theme and 7 icons for the layout?

I add the images by making them the background image for a particular element, then increase the padding so the text doesn't overlap. With no images I guess there will be funky spaces. Should I move that css into the theme layers as well?

And would it be good for me to upload the patch to bugzilla as it is so far so people can see what I've done and can make specific comments?

[ninetydegrees]

The way I see it this is very close to Skittlish Dreams (http://www.dreamwidth.org/customize/advanced/layersource?id=83797&fmt=html) where I think Fu had to create an option to turn off the images in themes which didn't have them. If I want to create a theme for Boxed In but don't want to make images for it for whatever reason or don't want to use the existing ones it seems to me I should be able to and the layout should look fine without them (and no the CSS doesn't have to go into the themes but, if you create a prop letting your turn the images on/off, you can a variable dependent on this prop which would insert the necessary CSS, the way we often do with icon positioning). This is why I think everything should go into the themes, credit included, but I see Denise and Fu think otherwise.

And would it be good for me to upload the patch to bugzilla as it is so far so people can see what I've done and can make specific comments?

Yep!

[laitaine]

Making the images optional is a really good idea. I like that. I've uploaded my patch so far WITHOUT this included so people can see what I've got, but I'll add this in.

Though I'm still thinking it might be good to make a default icon set for people that would like to make Boxed In themes and don't want to make their own images but would like to use images. So I'd have:

layout: [default icon set]
theme: [optional theme-specific icon set]

So the theme can optionally override the default images. But the images only show up at all *if* the use_images tag is set.

Or is this too complicated?

[ninetydegrees]

So the theme can optionally override the default images. But the images only show up at all *if* the use_images tag is set.

I think this is very smart actually, especially since I've noticed some images actually replace text (metadata headers right?) so it could be problematic for some people. It would be great to make everything display as usual for people who have images off. I think this could be easily done using function prop_init.

[denise]

Just stick a credit in the layout layer, just to acknowledge that you're using them, and you'll be fine! (You don't have to get into blah blah modified blah blah, just a link,etc.)

[laitaine]

Okay, I shall do that! Thank you :)

[boundbooks]

Oh my gosh. LOVE THESE SO MUCH!

[laitaine]

Yay! Thank you :)

[fu]

Pinged D!

They're okay to use, and yup, the link has to goon the layout resources.

[laitaine]

Okay, I shall go and add it. Thanks :)

[forthwritten]

Lovely! I've been keeping an eye out for this layout becoming one of the site layouts because it's so pretty, so I'm really glad you've successfully wrangled the conversion.

[laitaine]

Yay, I'm glad you like it so much to keep an eye out! *blushes* Thank you :)

Well, nearly-successfully wrangled... but the end is in sight! And ME TOO!

[nilo]

Wow - so I'm new here and I've fallen in love with your Spring Fling theme.

Problem is, I don't know what to do with it. I can't just walk about hugging the Preview - which is what I've been doing for the last 5 minutes.

I'm good in some areas - I can add oil to my car and I picked up a snake with a stick once. But I'm not sure I'm smart enough to figure out what to do with the numbers and letters and #s.

Can you explain slowly to me what I should do where? Sorry to be dim...

[laitaine]

Welcome to Dreamwidth!

I'm so glad you like Spring Fling, I was really pleased with that one and I'm glad other people like it too. (Seriously, grinning like a pro over here.)

Unfortunately, I'm afraid this style isn't available to use site-wide yet - this comm is for official styles and themes submissions rather than ready-to-use layouts for people to take and use straight away.

Basically, how it works is:
1 - someone (in this case me, but there are a bunch of other volunteers who make beautiful things) makes a new style or colour theme for an existing style, then they post it here to submit it to DW (and to get feedback).
2 - someone else takes the style/theme and does all the necessary bits to make it part of the DW code (we call this patching - actually, in this case I've done this too, but its often another volunteer).
3 - the patch gets applied to the live site during a code push - the site goes down briefly when we do this, so this doesn't happen for each patch individually. Instead we usually wait a few weeks and do a whole load of patches all at once - so that's all the cool stuff, enhancements, bug fixes, styles and themes since the last push.

I've done step 1. I'm doing step 2 and I'm nearly done, there's a few small issues to clear up but hopefully soon I'll be finished. We just had a code push about a week ago, so I guess the next won't be for 3-4 weeks.

So this theme won't be readily available in the styles area until the next code push. That said, it is possible for you to take what I've submitted here and use it straight away if you have a paid account. If you do, let me know - I'd be happy to walk you through that process (it's very easy, honest, just some copying and pasting).

Anyway, I'm so glad you like it - thank for your feedback :)

[nilo]

I'd planned to buy a paid account on payday (the last day of the month) anyway. You've just given me more incentive to, you know, circle the date on my calendar.

I think even I can copy and paste.

And that will be how I spend New Year's Eve - making my new journal ever so pretty. :)

Y'all are so nice here.

[laitaine]

I don't know if you saw the comments from ninetrydegrees and timeasmymeasure, but you don't have to have a paid account to do the necessary copying and pasting to use this style - that was my mistake, sorry! (Of course, if you want to get a paid account anyway then no one is going to stop you!)

Here's what you do:

1) Go to: http://www.dreamwidth.org/customize/advanced/layers
Under "Create top-level layer" select Type: "Layout" and Core Version: "2". Hit "Create".

2) Under "Your Layers" a box should have appeared with LayerID, Type, Name and Actions. Press "edit" next to the new layer you just created (I guess it will be the only one).
Copy and paste the contents of http://www.dreamwidth.org/customize/advanced/layersource?id=129256&fmt=html into the main window (deleting what's already there).
Press the "Save and Compile" button at the top of the screen.
Now click "Back to Layers List".

3) Under "Create a style-specific layer" select Type: "Theme" and Style: "Boxed In (#number)". The number will match the LayerID number in the box above.
This should create another entry in the box.

4) Click "edit" next to the new layer (type: theme, name: (none)).
Copy and paste the contents of http://www.dreamwidth.org/customize/advanced/layersource?id=235266&fmt=html into the main window (deleting what's already there).
Press "Save and Compile" and then "Back to Layers List".

5) Go to: http://www.dreamwidth.org/customize/
Select "Your Custom Layers" from the panel on the left.
Pick "Spring Fling".

6) ENJOY!

I hope that makes sense. If anything is not clear or does not work then please let me know and I will clarify.

[nilo]

Well, I purchased my paid account, and I tried to follow your steps (thank you for them!!!!), but I got bogged down at Step 2 (so embarrassed!). When I tried to create a new layer, I didn't just create one new one, it opened up several new ones, so I had no idea where to put the code(s).

I think I might just have to wait until your code goes public - or until I get smarter. I think your code going public will happen first.

[laitaine]

I made screenshots, maybe they will help!

1: before and after pressing create.
2: before and after copying and pasting.
3: before and after pressing create.
4: before and after copying and pasting. And then after pressing save/compile and back to layers list.

If you have more problems, let me know!

[nilo]

You are the helpfullest!

[nilo]

See? That's where it all goes awry - is with Step 1. It (being DW) seems to already think I have layers. So when I create a new one? I'm not sure which the new one is. I have about 5 listed before I even start creating a new one.

[laitaine]

Ah, okay - I bet I know what they are. If you pick an official DW layout and then go into the customise area and change settings, what DW actually behind the scenes is does is create a layer with all those changes. If I'm right, then those layers have type: wizard and name: auto-generated customizations. The new layer you created should be type: layout and name: (none). Hopefully you can use that info to pick the correct layer. [If you have created more than one new layer you will have more than one of these - pick any one you like.]

Otherwise, you could:
- note the layerid values of all the listed layers then create a new layer as per the instructions. The new layer will be the one with the new layerid. OR
- click edit next to the first layer, see if it matches my screenshot, if it does, proceed with instructions, if not, click back to layers list and try the next one... etc. OR
- delete all the existing layers and start from scratch (though this would remove any customisations you made to other themes so might not be the best idea).

[nilo]

Hmmm... let me fiddle around with it and see if I can figure it out. It should only be a few weeks until the next code push, so I can wait until then too.

The only customization I can remember making is that I want to be able to view 50 posts/page.

[ninetydegrees]

That said, it is possible for you to take what I've submitted here and use it straight away if you have a paid account.

I think a paid account isn't absolutely necessary. If I'm not mistaken, free users can have at least one custom layer and one custom style.

[timeasmymeasure]

+1

There's sometimes a quick process of emptying out extra layers and styles that might have cropped up and adding this. Someone correct me if I'm wrong.

I believe this is how I tried FlexSquares my first days on DW.

[laitaine]

Thanks for clarifying this. I wasn't sure if free accounts had limited access to layers so I checked... using my hack. On those if you have a free account and try to add layers it says you're not allowed that functionality. I foolishly assumed it was the same on the main site. Obviously not.

Sorry!