In this session we discuss how to map a PSD file from Photoshop to Thesis 2. We demonstrate how to move boxes in the different areas around to accommodate the design. And we discuss how to add a background to the content area. We also talk about the new skin, Carta, that we will be releasing soon and some of its properties.
Member: You know, I was going over the cheat sheets that you made for Agility. Those are awesome. I think I could probably get everything I need off of those but I’m just not that confident yet. So I wanted to see if you could go over briefly like how to structure the HTML, drag and drop things so I can try to replicate that as good as possible.
Rick: And so… and what you mean… you’re talking about that in the context of your PSD files.
Rick: So for example, just taking a look at the homepage here of this PSD file you know, obviously, the header area goes from the top here down to this, down to this line. And so then down below that line, you’re going to do the content area. And maybe, the content area includes this and maybe it doesn’t. I’m not quite sure what you have in mind for a footer.
Member: Yeah, I think I’m just going to have the footer stay within the content area if it’s not going to be separate or full width or anything like that.
Rick: Sure. And you can leave the… and so you could drag the page wrapper for the footer directly into the content area, down below the content so that you don’t have a top footer area and a bottom footer area. You just get rid of top footer area and bottom footer area. But drag the page wrapper. I’ll show you what I mean here.
So in the Skin Editor…
Member: I’m sorry. Did I mention that I just installed the Agility? Yeah, there you go.
Rick: Yeah. So what you do is expand the content area and see where it has content area page? You could just take top footer area page and drag it into the content area. And just let that be your footer and get rid of these two things. Get rid of top footer area and bottom footer area. And then top footer area page has the footer widgets and then you could do it that way which is probably what I would do under the circumstances, based on what you’re saying.
Member: Okay cool. That makes a lot of sense. And then… hold on. Because you see how I have my content area in the page? Not the full width like the rest of it but on the… what adjustment do you I have to make to do that?
Rick: You don’t have to make any adjustment to that. All you’d have to do is take this border and grayish background and make that the background of your page wrapper.
Rick: Or actually, make that the background of the content area page wrapper.
Rick: And then it would automatically wrap it. Now because it’s got a bottom, obviously, you’re going to need two images. You’re going to need one image for the… that’s going to repeat for the main background. And then you’re going to have another image that doesn’t repeat for the bottom. And so what you might do is put this in the footer area page, this bottom piece and then put the repeating piece in the content area page and then they should just butt up to each other.
Member: Okay. On the menu… because the way that I have it set up that it’s like over… a question that go along here.
Rick: Well, you could easily drag this menu though out of the top navigation area into the header area. Again, eliminate the top menu area and just drag top menu area page up in the header area. Or just take the menu… that’s probably what I would do. Just take the menu and drag it up into the header area page below typical header and then get rid of the top menu area.
Member: Okay, very good.
Rick: Really, this thing is perfectly designed actually for the skin I’m not ready to release yet but then I’m working on called Carta because Carta is based on a page width framework. It’ll have all the same kinds of functionality as Agility does with a few extra pieces like being able to add multiple background images to any given HTML element. But I mean…
Member: What day is it going to be out?
Rick: If you can wait a week or so, that’s when it’ll be out.
Member: Yeah sure absolutely. I can wait a week for sure. And yeah, I guess with the layers of Photoshop and all that, it kind of helps understand how the thing… how the HTML thing should be laid out too, right?
Rick: It does. I mean, it helps me. I laid all those things out pretty much exactly the same way.
Member: Yeah, it makes a lot of sense to me there. Yeah, I think that’s fine like you assured me there that it’s the way I thought it was. With the styles and all that, I’ve been looking into styling things with CSS instead of uploading background images for simple things like boxes that just have gradients and stuff. What do you think about that?
Rick: Well, okay so this… what you’re seeing here is where I am with Carta right now.
Member: That’s perfect. That’s easy.
Rick: And so these borders and drop shadow and radiuses and all that stuff, those are all created just using CSS. They’re not created using background images. Although this gradient here is a very slender background image. Gradients are just fine for things that have a fixed height or width or fixed height in any case. They’re a little bit more problematic because they’re generally percentages if the height container isn’t fixed.
Rick: But this does… Carta will have the ability to do this kind of thing with just mouse clicks and the ability to replace these with multiple background images so you could have a top background image for the page, a bottom background image for the page and a repeating center background image. In fact, it’ll give you a chance to create up to 4 background images for any HTML element.
Member: And you can do all that without being clunky or slow or anything?
Rick: It should be, yeah. I mean, it’s going to be up to you to optimize the images, naturally.
Member: Yeah, for sure.