Join Ray Villalobos for an in-depth discussion in this video Creating a jQuery Mobile template in Fireworks, part of Fireworks CS6 Essential Training.
If you're a jQuery Mobile user, you know you can customize the look and feel of your site by using or customizing a theme. Fireworks has a great feature that makes it easy to build and customize jQuery Mobile themes, and in this movie I'm going to show you how. So I'm going to go to the Commands menu and I'm going to select jQuery Mobile Theme and then select Create New Theme. So this will actually generate a document, and in the document you'll see on the first page just a bunch of different icons that are the standard jQuery icons that you can use at different sizes.
So if you wanted to customize the look of any of these icons, you could just select them, redefine them, and even redraw them to whatever you want. You have to draw the white and the black version and then the larger white and black versions. And then you have the standard active button and the icon background. So these items actually go in here. So you could recolor this background to make it whatever color you want, recolor the standard buttons, and if you click on one of these other pages, you'll see that you have some of the other content that you see in jQuery.
So these are different parts of the jQuery interface. You could see here's a top bar that you would see for, like, maybe top navigation or bottom navigation in the header and the footer, and you could see that here are the classes that they affect. So these are the elements or the styles in jQuery Mobile that this style would affect. You also have link styles, as well as a Content area and some additional buttons right here. So to customize your theme, you could do a couple of things. You could just redraw or recolor any of these elements from scratch.
What I like to do is go to an element or a page that is approximately what I want and then just modify it a little bit. So just because I know my site, I want to go into this particular template, the B template, and I'm going to recreate or redefine some of the colors in here. I know that for this gradient I'm going to click on that and from the Gradients little panel pop-up, I want to choose--and I'll type in some colors here because I already know what colors I want. So a7a6c9. I'm going to hit Enter.
It's kind of like a light purple. And then right here I'm going to choose 545478, and that creates a nice little kind of purple gradient. I want my lines also to change so I'll click on that, and I'll click on the line right here. And for the line I want 717194, and I'll hit Enter. That gives me that nice purple line. And once I got one done, I could just copy and paste the style. This is really cool about Fireworks: you can go Edit > Copy and then click somewhere else and select Edit > Paste Attributes.
So I will do the same thing for that one and for this one. And I'll go in to my main Global Assets and make sure I change this one as well, because this is for the buttons and if I don't do that, the buttons won't be changed. So again, Edit > Paste Attribute. Then go back into this b theme and I'll do it for this one again, but then I'll modify it a little bit. So Paste Attributes and that would at least give me the right border, but I do want to go in and customize this a little bit. So here my hover state will be C3C3EC, and my other color, 7C7CB1. Hit Enter.
That gives me just a slightly different hover state. It looks really nice. So when I roll over one of these buttons, it'll show me this right here. I can come over here and change my link colors. So this one is going to be 717194, and I'll make my Normal link. I just copied it and then Edit > Paste Attributes. If you remember, this is a huge command key, but if you're doing that a lot, you can try to remember all this right here. So--and my link hover is going to be a little different, so that would be 9FA0D3.
There, just kinda like a little highlight there. Okay, that looks really good. Now you don't have to keep all these other ones around if you don't want to use these; you can delete them. You can also make a copy of this one and duplicate it to make another page. So if you wanted to make an additional page, you could just grab any of these, drop them on top of this new layer icon, and then you can call this one like F. It's just easier to remember them as letters. And then you can modify this one and when you export it, it will be available for you in jQuery Mobile. So I like to start off with a template that looks a little bit like what I want and then just modify it a little bit, because obviously this is kind of like copy on dark backgrounds.
This one is kind of mostly like copy on a dark background, but this is lighter content inside, where this one is kind of darker content inside. So this looks more like what I want, and this is looking really good. So if I want to modify another one, I've got say these two right here. There's no reason in jQuery Mobile for using just one template for everything, so another thing that you might do is maybe modify the content and the d or the c template. So I'll modify the c template, and what I'll do is I'll create myself an area of content that is just a little light yellow, so I'll pick one of these light yellows right here.
I wanted to be even lighter, so I'm going to grab the eyedropper tool here from this swatch. I'm going to move it in a little bit and just make it a super- subtle light yellow, and that works really well. So I can apply this to another part of a layout and just call it as a theme c, even though I'm going to be using mostly theme b. And again, you don't need to have all these other themes. As a matter of fact, that's probably going to make the files larger than it need to be, so you could delete any ones that you don't want here. And you could see page 4 is an instructions page.
You could read all that if you want to. You don't need to. I'll go ahead and get rid of that. A nice thing about having this in Fireworks is that you can save these and you can reuse them for different projects. You can modify them. That's something that maybe is not as easy to do with the ThemeRoller. So let's go ahead and preview this. I'm going to go to the Commands menu and select jQuery Mobile Theme, select Preview Theme in Browser, and this going to show you more or less what this is going to look like in a browser. So there it is, and there's the a theme, and you could see that you have a tab here for the b theme.
That's what that looks like. And let's go back. It looks like I deleted one of my c themes. I'm going to undo a few times and make sure keep the c theme. So that's good. I want to get rid of d, e, and f, perhaps even my instructions. And then I want to get rid of a because I don't really need a. I really just want B and C. So once you've got that, let's go back in preview again: Commands > jQuery Mobile Theme > Preview Theme in Browser.
So there's the b theme. It looks really good. There's a c theme. I'm going to use little background maybe gradient on some of my pages and go back here. It looks really good. Now, one last thing that you could do is in addition to modifying some of these icons, you can create an additional icon that you can use in your projects. So I'm going to go to Commands menu, again select jQuery Mobile Theme, and select Insert Icon Placeholder. And we have to give it a name here, so I'm going to call this heart. Select OK. It's going to run a little script.
It's going to create a new position for us right here at the end of all of our existing icons. So what I'll do is I'll go in my Auto Shapes panel and there's already a cool auto shape for a heart right here. So I'm going to drag that in to my document, and there it is. It's kind of has a nice gradient, but I really want it to be colored like the other ones. So back into my layers. I'm going to turn off my Web Layer. And then I want to change it to a solid color. And I will just use the Eyedropper tool to click on a color that is similar.
I don't want it to have an outline. And that's looking pretty good. I want to make it a lot smaller, because it needs to fit in this little box right here. So hit Enter to apply and drag. That is still way too big. So I'm hitting Command+T to bring up the transformation handles and then just click and drag to make it smaller. Hit Enter to apply it, and let me go ahead and hit Command+1 to see how it looks.
It still looks a little big, so zoom back in, click on that, Command+T or Ctrl+T on a PC. Smaller. And sometimes it's hard to double-click in the middle to apply, so I just hit Enter and it applies it as well. So Command+1 and pretty close. I think that's actually quite good. I'm going to go ahead and click on this, zoom in really deep. I'm just modifying my handles a little bit. I don't want my heart to be as pointy here because it doesn't reproduce very well at that size. So I am going to take out some of the pointiness here and maybe make it a little chunkier.
Bring this in a little bit. So let's hit Command+1 and let's see. Maybe it's still a little big. Let me go ahead and click on it. Command+T or Ctrl+T, and a little smaller. And that looks really good. So I need to make sure that it's centered within this box. So I'm going to go ahead and turn on my web layer, select both of these documents. I'm dragging the selection rectangle right there. So I'm going to select both of those elements and I want it to go to Align Tab.
It's already right here, so I don't need to pull it up. Under Window I see it peeking right here. Then I'm going to hit the Align horizontal center and Align vertical center and that will center my heart within this box. And I'll turn off my web layers again because I need a copy of it right down here. And I need to make this copy white, so over here, click on the Eyedropper tool. I'll click on the Fill tool, and then it gives you the eyedropper, and then I'll click on one of these other one's and it'll pick up the color, which is white for that, black for that.
And then I need to make sure that this is also centered. Oops! Let me go back in there, turn on my web layer, and repeat. Just do Align center, center, Copy. And actually I want to click on both of these and then do Edit > Copy. And I'm going to need to make bigger versions, so I'll come over here hit Paste, hit the Transform tool here, or Command+T will work.
So I need to get that Diagonal Resize tool, and I'll resize it. That's a little bit too big. Go back down, a little more. It's looking pretty good so I'm hitting Enter. Maybe a little bit too big still, so select them Command+T or Ctrl+T on a PC, make them smaller. Enter. That's about right. So turn on my web layer, select these objects, align, align.
This one okay, since one is outside, remember that when you align things, it's going to pick the bigger of the two and use that as the measurement or in the case of centering, it's going to average the center. So I want to make sure my heart is inside. Pull it up a little bit with the arrow keys. So once I got it more or less perfect, then I'll select it and then you use Align Tools here. It probably doesn't matter because it's going to use the slice wherever it is, but I just like to be careful. Now I've got a new icon and I can use that in any of my jQuery Mobile templates. And I can keep on adding icons, which is a really, really nice feature in Fireworks.
So I really like jQuery Mobile integration in Fireworks a little bit better than ThemeRoller. It just allows me to save the information and continue to use my templates over and over. So once you've got this, you can save it and reuse it wherever you want, and that makes it more convenient than the ThemeRoller sometimes.
- Working with the menus, panels, and object properties
- Saving and exporting files
- Optimizing graphics
- Applying opacity, blending modes, and live filters to drawing objects
- Drawing vector shapes
- Masking objects
- Animating with states
- Using the 9-slice scaling tool
- Creating symbols and symbols for sprites
- Using batch commands
- Creating jQuery Mobile templates