You can listen to the podcast and read the show notes here
Michaela Light: Welcome back to the show. I'm here with Esme, also known as Esmeralda Acevedo if … I made a meal out of your name there.
Esmeralda A.: That's okay. Acevedo.
Michaela Light: Acevedo. And she is going to be talking about Content Box themes and she is not only an amazing graphic designer, she's also a Cold Fusion developer and she learned about Sequel and Cold Fusion and Cold Box and Java Script and goodness what else so she could create amazing themes for Content Box. And some of the ones that come bundled with Content Box, she created. We're going to be talking about how she did that and the important thing in Theme UI and how you can create an amazing UI and what difference that makes. We'll look at some of the creative things she's done with themes, not just your regular theme but things that are, a different way of presenting information.
And how you present the settings to the users makes an effect on the usability. Welcome, Esme.
Esmeralda A.: Thank you for having me.
Michaela Light: You started out being a graphic designer and then you started working with all this Content Box and other things at Ortiz and now you've learned a whole bunch of Cold Fusion as well.
Esmeralda A.: Yes, yes. Actually, my first experience with Cold Box and Content Box, it was my senior project for school and I had to crash course it because I didn't really know anything much about it and that's how I became introduced with it. I read so much documentation thank goodness Luis had posted up there and from that I developed my senior project and within a week I had it going. And this is somebody that didn't know anything about it. So yeah, that's great and I think that little I had of Cold Fusion knowledge, it helped me understand what was going on.
Michaela Light: Cool. Yeah I mean I think Cold Fusion is pretty easy to learn for someone who is coming from a design background, who knows HTML. It's a great way to get into it.
Esmeralda A.: Yes.
Michaela Light: And now you know both sides of the things. You know the coding side and the design side so that's a very powerful combination.
Esmeralda A.: Yeah, well first I was only doing the design and my layouts, my basic layouts. I said okay I would design and then I would pass it on to the programmer. Sometimes when I was not getting my design looking like what was on the JPEG, I said well what's going on here so that's what drove me to go learn that. Yeah, and just that then I started doing not only the design but also I started building the site itself, like the UI of it. It was a good transition there. Now I know both sides of it.
Michaela Light: When you're building a theme, what is important to consider when you're creating a theme for Content Box?
Esmeralda A.: Well, first the one thing right now I mean that everything is mobile also, I want to make sure it's responsive so I have make sure my CSS, the layout itself it's responsive. Then it would be easy to understand, easy to use, easy to apply so that's when I develop it. The settings, if there are multiple settings for example one of the things has a slide show or a news feed, social settings. Not everyone wants that so I have to make sure I have to give them an option to turn it off and on. Or even also the aspect of placing the picture on the left, on the center, on the right. Just my purpose is just basically making it easier for the user and giving them more options than just having a basic header and footer and just a middle section for the content.
Michaela Light: Yeah because that would be a pretty boring theme if you did that.
Esmeralda A.: Yes. Yeah, so I mean there's a lot. Right now, the main thing you want to make sure it's responsive because you want your website to be …
Michaela Light: And for people who haven't done responsive design before, that means it resizes automatically and in smart ways and the widgets move around.
Esmeralda A.: Yes.
Michaela Light: All of that. Yeah.
Esmeralda A.: Based on the screen size. And also I mean the ones I design for Ortiz, for Content Box, they're final and they'll based on Boot Strap so basically Boot Strap is tied into that so therefor the developer that picks it up could actually customize it or continue using the CSS from there.
Michaela Light: When your doing, you said you have different options in the UI. People can turn off sections or whatever and this is in the user settings.
Esmeralda A.: Correct.
Michaela Light: End users who are doing this doesn't have to know how to code but you have to write a bunch of code to make that happen I'm guessing?
Esmeralda A.: Yes and it's really simple. Understand the theme's CSC, that's where you add your settings and now what the new release has also is grouping. Meaning that before they were just there was no way, let's say for example, in one section I have a picture and turn off and on the colors and all that. That's four settings based on one section. Before they were all run into each other so now we have actually categories of settings. This is categories for this section, section A or I mean I'm just being very simple here, generic. So section has five settings and those are grouped inside, the developer adds them to that theme CSC. And also another thing is we had the names of the setting but there was no way the user knew exactly okay so what this is for. There was no instruction, there was no description.
What we added for the developer is you know the help, you know this is goes here or like for example this is the name of theme based on the color but actually has the actual color swatches. So now we have a modal window too for the developer to add more detailed description of what that setting does.
Michaela Light: And that makes it easier for the developer and also easier for the people …
Esmeralda A.: Who use it.
Michaela Light: To be content editors. Yeah.
Esmeralda A.: Correct. Yeah and I think believe it's in the next one, there will be where they could actually select images from the bag, so we're still working on that. Color swatching, I think that's already available. I mean color picker, but yeah we're constantly adding more. The point is to make it easier on the user using the system.
Michaela Light: Is creating a theme something any Cold Fusion developer could do?
Esmeralda A.: Oh yes. Of course. For me, I didn't have very much experience, only I ended up busting out a whole project based on that. That was one probably Content Box early, early release like when they still only had layouts. It was not even called themes. They didn't have many options and I was able to develop a theme myself for that. So now with the new options, I mean the new organization it's much easier. so yes and then we have documentation also. It's very simple. Of course, our workshop during the conference, not only that and it's one thing reading it from the blog post or you know documentation but now Gavin and I will be there to answer questions and show you exactly how to build a theme.
Michaela Light: So you're talking about the full day workshop on Wednesday?
Esmeralda A.: Yes and part of it will be be building themes on them. Yeah.
Michaela Light: And just for people don't know, Gavin Pickin is the evangelist for Content Box.
Esmeralda A.: Yep. I'm assisting him on that one.
Michaela Light: You're the assistant evangelist.
Esmeralda A.: I'm the assistant evangelists, yes. So we'll be there on Wednesday.
Michaela Light: Right and helping people go through some code and explaining all this stuff.
Esmeralda A.: Yes.
Michaela Light: That is great. You mentioned that there was a shift from layouts to themes. What's the difference between a layout and a theme?
Esmeralda A.: Well right now I mean a theme is more following conventions now. A theme it consists of the components, it consists of the layout which is basically all right this layout consists of a header, a footer, okay so let me go back. Okay. All right, so there's views. There are views which is a little chunk like for example the view of the footer or the header. Let's say you have two types of headers, right? So this is header A, header B. So each of those are views. A layout will consist, okay this layout, let's say the homepage has header A but layout two has header B, now in the theme consists of those two components plus the CSS, the Java Script and the modules within that that's needed to build that theme. Let's say the theme also has a slide show, a news feed, a Twitter feed, but this is just based on the theme. It's not on the entire, on the Content Box site. The Content Box site has multiple themes, the themes have multiple layouts, the layouts have different kind of views. Before it was cold layouts but we switched it out to be more compliant with the many conventions out there.
Michaela Light: Right. Because things like Word Press have themes.
Esmeralda A.: Yes.
Michaela Light: Where there's hundreds of different ones people can download.
Esmeralda A.: Right.
Michaela Light: I guess you want the same idea with Content Box that you and other people in the Content Box community create themes and share them out or make them for sale.
Esmeralda A.: Yeah. You know, layout also has a sidebar, maybe a layout has a left bar and a side bar so that's basically that's the layout itself so that's the different between layouts and themes now.
Michaela Light: And you mentioned styles in there. Is that part of themes? Are we talking about CSS styles?
Esmeralda A.: Yes. Well that's what will make the theme and pretty soon we have, let's say this theme or I'm going to use it because I'm an outdoor theme. You know like so I used earth tones on this theme. You know, let's say so my CSS, my swatches, all that and I used SASS in order to compile all my CSS so I use a variable … I'm sorry?
Michaela Light: What is SASS for people who haven't met that? That's a CSS tool?
Esmeralda A.: Yeah it's still basically like let's say I have, I would use … I want to use very simple so I have a color I use constantly through out, now I just make variables so SASS basically compiles it and then also places, puts the regular style sheet instead of using the variables to myself. I mean …
Michaela Light: Oh okay.
Esmeralda A.: So that's why that so but that's what I use. So basically I pick my colors for the theme. Let's say font styles, any dimension, any sizes so that's what I use the style sheet is for that theme. Yeah, that's a very important component of that theme itself. It makes the look, that's where I specialize in.
Michaela Light: Right. You know, the look makes for better usability I'm assuming?
Esmeralda A.: Yes. Exactly. And also we use the CSS queries, use your media queries. So like I say I use this to target the mobile, the certain resolution, this other stuff for that so yes. That's what, that's very important, that style sheet part of the theme.
Michaela Light: And then if you wanted to change from one theme to another, is that, you just change out the theme or do you have to do other things because it's connected in with the code somehow?
Esmeralda A.: No, it's actually very simple to switch off. You go to, the options in Content Box, you have active theme, which is the theme that you have and let's say you want to have another theme, you download from Forge Box. Then you go to themes and either you already have it there or you actually download it from Forge Box and you can switch things there. Nothing is tied, everything is on it's own, I mean everything like it's own box. You deactivate it, nothing stays, then you can active the next theme so it's that simple.
Michaela Light: It's kind of, right plug and play.
Esmeralda A.: Yes.
Michaela Light: Just pick what you want and it picks up all the new stuff?
Esmeralda A.: Exactly.
Michaela Light: And then where do all those theme settings get saved? You know you said you have settings that turn features on and off but where is that? If you change out a theme in and out, where is all that info stored as to how the theme is configured?
Esmeralda A.: And so it's stored, it's following the theme name. So let's say for example, well the content is separate. The settings themselves they are saved on the database based on the theme name. Like there's no conflict.
Michaela Light: Right. And then for the settings, do you have to set those by hand in the code or there's a UI, how does that work with the theme?
Esmeralda A.: Well the developer will set them up in the theme CSC. Yeah and then based on there's a code used, let's say I want to use a setting on the homepage, then I set it up on the code for the layout. Or the view, calling that specific setting. Yeah.
Michaela Light: You designed the UI for those settings. What have you done to improve the UI for those things?
Esmeralda A.: Well right now the major part was organizing the theme settings and giving the instructions and the help for the user. That was the major part that we did and also right now, we're hoping to have an access where you can pick images from the settings.
Michaela Light: Okay.
Esmeralda A.: Right now what we have is basically you have to actually put in the URL instead of actually selecting it from the media, so we're working on that.
Michaela Light: Mm-hmm (affirmative). Are there any other things that makes for an amazing theme UI?
Esmeralda A.: Artistic.
Michaela Light: The artistic part.
Esmeralda A.: The artistic part. I mean my process is basically first I set it up and let's say what I usually use is Photoshop right. And then from there, you know that's okay so that's why I come with the layout and then from there, let's say I want … Each one is a component. I break it apart and then from there I use the CSS to say okay so I want these options. Let's say for example I want to give the actually I did it with a few, all of them, I give them different colors. I gave a different color swatches. For example, one is blue, one is a green. On the settings I say okay how do you want your color, your header? What color do you want for your header? They could change it based on that setting in the back.
Now I mean, of course the developer could add different colors or different settings to use different CSS calls on that but the user only has to say I want green, I want blue. It's easy for the developer to add them, it's also easy for the user to set them up.
Michaela Light: Right. What else do you like about themes and Content Box?
Esmeralda A.: One first of all it's so easy to set up. That's the one major thing. Also, I do like the fact that Content Store, you can store different content without using the database, you know you have set up for example, I want a news feed so I set up a category called news and content. And then myself like building my themes, I could say I want this category to show up on this theme. That's why I love the fact that I don't have to go and you know do the programming, I could just do it by calling the Content Store.
Michaela Light: You know, I've read there are also modules you can add to themes?
Esmeralda A.: Yes. Yes, a module could actually have widgets. For example, for Content Box CMS or I ended up doing a module which stores which puts a widget that adds an animated GIF on there. That's how simple it is. Now you could add an image and it puts an animated GIF on the page itself. But this module itself is only for that theme. I won't be, if they switch themes, it won't be there. What I'm saying like if you want something specific for this theme, you could just build it for that and package to show up on your theme.
Michaela Light: I hear there are also events in themes. Why would you want to use an event?
Esmeralda A.: For example, one of the themes I did, I had to, back to using the Content Store. I needed, I gave the option to the user, do you want on the left or on the right, right? So then I had to set up a custom field in that Content Store entry, left, right, basically saying image position left or right. Instead of having the user add the custom field to the category those entries, what I said okay on activation of this theme or build or set up the custom fields basically content by data for me on that event.
Michaela Light: That sounds powerful to have.
Esmeralda A.: Yes.
Michaela Light: Because you don't have to like go in and change the code in the core of Code Box.
Esmeralda A.: Yeah.
Michaela Light: You could hook in to those events.
Esmeralda A.: Exactly. So it's lessening for events and I want this code there so it's inserting it there without, it makes it much easier.
Michaela Light: Is there anything else you want to share about the talk that you and Gavin are doing?
Esmeralda A.: As far as the workshop or the session? Well we will be building knowledge, showing how to build a site. Also we'll be showing how to transform an old site to from a legacy site to using Content Box and building the look that they have or you know what you seen, customizing a theme from Content Box.
Michaela Light: Cool.
Esmeralda A.: Yeah.
Michaela Light: Well sounds exciting. I've got some other questions not related to Content Box. Let's move to those. I noticed in your bio that you said that climbing mountains helps you code better and I'd love for you to tell us a little bit more about that.
Esmeralda A.: I would love to. I love hiking. I love the outdoors and you know sometimes you get a block and you need to clear out the mind so where I do the best, go hike a mountain and I mean it hurts. It's painful and you're on the path and you have the thoughts with yourself so next thing you know I'm thinking oh I could have done that or I do this or when I come back, I reach the mountain, I conquered it, I come back with a solution to work.
Michaela Light: That's great, great tip and for those people who don't have mountains maybe a walk outside in a park would work as well.
Esmeralda A.: Exactly. Hey I went to the highest peak in Nebraska and trust me, it was kind of flat. But I still worked out better.
Michaela Light: All right.
Esmeralda A.: Yeah any nature walk is great.
Michaela Light: And then why are you proud to use Cold Fusion?
Esmeralda A.: Well, it was easy for me to pick it up and actually I was right out of school and I was hired by a company that was programming Cold Fusion. And I have tasted Peach Tea but I keep coming back to Cold Fusion, it was just so very easy for me and now that they added CS script, that was more like and also since I had the object oriented, now they're gearing more to that so I really like it. The fiber components and it's just, I was more familiar with it and it was a sense associated with Java, which also is my background when I went to school. That's why I stayed with that.
Michaela Light: Cool. And what would it take to make Cold Fusion more alive this year?
Esmeralda A.: Putting out the word out and more classes on it, more training. I mean I know Ortiz is doing quite a bit on that but that will be, more support for it, that will be to show that there is a bigger community out there helping each other. That would be great.
Michaela Light: Yeah, that's a great thought. Is there anything that you personally could do that would help in this regard?
Esmeralda A.: I could become more active in the community. I'm just new. But I mean I'm already part of the Box team on Slack and that's how people can reach me too. Like I said I'm new to this, if I can help anybody with my, I mean there, as it is I've had a lot of people helping me when I was building my project. Even now I still I'm helping out Gavin and I mean it's a great community among us here so if I could help anybody else I'm going to do that. And if I can't, I know I could refer somebody else on the team.
Michaela Light: Cool. What are you looking forward to in the Into the Box Conference?
Esmeralda A.: One major thing, I'm trying to integrate view JS into my designs and my UI so I know there's someone giving a talk on that so I'm looking forward to that and also just networking with everybody and attending all the developers, designers, anybody that's there. I just love to hear people's point of view or you know ideas, get inspired so I'm really looking forward to it.
Michaela Light: Great.
Esmeralda A.: And of course sharing what I know, giving my design twist to the conference there too.
Michaela Light: Fabulous well I look forward to meeting you at the conference. If people wanted to reach you further, how could they best do that?
Esmeralda A.: Through Slack, through the Box Team channel. I'm available there.
Michaela Light: Okay.
Esmeralda A.: I don't have a Twitter yer or Linked In yet but Slack will be the best right now.
Michaela Light: Fabulous. Box Team on Slack. Well, we'll include the URL for that in the show notes. Thanks so much for telling us all about themes and Content Box.
Esmeralda A.: You're welcome. Looking forward to meet you too.
