I suppose I should go ahead and get started because we're four minutes past right now. I don't know if you all over there can hear me. You might want to move this way just because I know there's no speaker over there or anything. I can project, but I also don't want to blow out this microphone that they're using for the video.

My name's Chrissy. I work for Six Feet Up. I'm a senior developer there. I've been doing theming with Plone for almost nine years now. I'm going to show off a little bit of how to get started inside of Plone, of changing the

Plone site to make it look more like your branding for your company. Here we just have a plain Plone site, nothing special. The themes are managed in site setup. I'm currently just logged in as admin, so I'm going to go to site setup and the

theming control panel. Right now we have just one theme, Barcelona. That's the default theme for Plone 5. Through this tool you can see all of the themes that you have installed if you have additional themes installed. You can also add new themes through this interface, but only one theme can be activated

at a time. Right now you can see next to Barcelona that this one is the current active theme. You can also upload zip files here if you have a zip file of a theme. That would work too. I'm going to create a new theme, and I'm just going to do this by creating a copy of

Barcelona, so I have a nice starting point of existing styles to start from. Otherwise you can start a new theme, but that will give you a completely un-styled site. I'm just going to call it demo and set it to be immediately enabled. This is going to take me to the interface for actually editing the files here.

It gives me a bit, by default, like a lot of different XML files and LES files, but there are three files that are really important that are necessary for the diazo theme. That is the index.html, which is the static HTML to start from. The manifest.cfg, which I can open these up and show them to you really quick.

You can see it's just HTML. The manifest.cfg, which has settings for the theme, so that title I entered here is in here. That will show up in the control panel. And then the rules.xml, which is used for mapping all of the dynamic content from Plone into the theme.

You're basically just grabbing little bits of Plone and putting them into that static theme to display them. This is just the default rules file that comes with Barcelona. I'm going to open up this rules.xml file. If we look back at the home page, we have this big hero welcome here.

Let's say we don't want that, we want to take that out. I can either do a drop in the rules here and say to drop that element, or it's also in the index.html if I want to find it in here. Here is a div with the ID hero.

I can just remove that and save. When I go refresh the page, now it has gone away. Things like this, I mentioned you can do it either in the index or in the rules. If you're doing theming this way, there are multiple ways to do several things. There's not necessarily always a right or a wrong way, just whatever you are comfortable

with. Now let's change the site logo. You can do this in here, but Plone 5 has a nice easy way of just changing the logo. That is also in site setup in the site control panel.

This has various settings for the site, but you see one of them is for the logo. I'll make this a little bit bigger for you. Here's a place where you can upload a logo. I'm just going to throw the 6-feet up logo in there.

Now you can see my logo has already been replaced with the 6-feet up logo. Now let's make a change to the footer content. Down here at the bottom, we have the placeholder content that comes from Plone, just information about Plone. This is its own template, and it can be edited in a few different ways.

There is an add-on called collective.jbot if you've used that in Plone 4, but unfortunately it's not yet working for Plone 5. But that's something to be on the lookout for, a very easy way to edit some templates if you need to make changes there. For this demo, I'm just going to make a change in the rules to XML.

So I'm just going to find footer in here, and so right now this rule is taking the portal footer wrapper from Plone and putting it into the portal footer div inside of my

theme. I'm going to take that out so I'm not actually bringing in all of the stuff from Plone. Now I can edit the index.html where that portal footer is and add my own content here. I can save that, refresh, and now I can see that my footer has been updated here

at the bottom. Okay, so that's just basic template changes. Now we can start actually making some CSS changes. One thing that you can do, so inside of site setup, there is the resource registries

control panel, and this is another thing that's new in Plone 5 because it is, and this is using less, and there is a tab in here for less variables. So since I made a copy of Barcelona, it's using the values that are set here in these variables. So if I want to make a quick change to something, you know, I can do it right here, right here,

and then we'll see the changes in the site if I do it all correctly. For example, okay, Plone left toolbar expanded, so that is the width of the toolbar over here to the left.

If we want that to show up even wider in the site, I can change that, click the save button, and then another thing here is you have to make sure that you are in development modes, that these changes will actually take place right away, and save after you make that change.

So now, go to the home page, nope that didn't work, ah yes, thank you. One more step, was that on the Plone, I think so, I haven't done this one a whole

lot yet. It's okay, just wait a minute, there we go. Since we have the developed CSS, the page takes a little bit longer to actually load, so that was normal, just don't turn this on in production. But now you can see that I have a much wider toolbar over there, and so you can do that with any of those settings that were in that panel of, you know, making changes,

you have different color options that you can change, just to make some quick changes here in the site like this. Alright, so now I'm going to add, I'm just going to add a new CSS file, I'm going to put it in my diazo theme, so right here in this interface I can say add new file, I'm going

to call it main.css, I've got some content that I have thrown in there, just some basic stuff so we can make sure that the CSS file is working once it's in the theme, and

so now I'm going to add that in my rules.xml. So up here at the top we already have some code that is pulling in all of the links and all of the styles from Plone and putting them into the static theme, and so I'm just

going to add mine here. So I'm basically just saying the same thing, so after all of the children of the head, so this is going to happen after these other two rules here, I'm just adding in a new CSS file, and this is looking at the absolute path to the theme that I had created,

and then main.css, and actually I think I just named my theme demo on this one. So now I should be able to go refresh the site and see some of those changes that I put in. So now you can see, you know, things are starting to change a little bit more as we go, I've got the blue background, some rounded corners, and so we can continue doing this

making changes to the CSS, and you know, if you're not too familiar with CSS, it's really surprising how much you can change, you know, just with the styles and how much different your site can look. Let's see, I'm going to add in some fonts, so for this one, I've grabbed a couple of

Google fonts, and actually this may not work because I'm not connected to the internet, but we should be able to still add in, so I'm just throwing in the link here that

I got from Google, grabbing the Railway font and the Roboto font, like I said, yeah, it's going to look kind of ugly, since I'm not connected to the internet, I can't pull those down right now, but that's nice and easy to do, to change the fonts.

I'll make some changes to the navigation, so for example, I've made it flex so that each of the elements will expand to fit in the area, and we've completely changed the styles, zoom in here too, you can see what that looks like, and so I'm just going

to do this to a few elements as we go down, you know, make the changes, refresh, we can see those changes happen right away, and so here I've changed the search, there's

a fancy, I should do a fancy little slide out here now, so when I do a search, so there we go, let's see, we can do one more thing, we can remove the login link,

so if we don't want, you know, if we're not going to have a lot of users in the site that are going to be logging in, you know, you can just type slash login for your content editors, so right now I'm just doing inspect elements, so I can make sure I can grab the

ID of this particular item, this is Portal Anon Tools, so I'm going to copy that ID from right here in my inspector, and in my rules.xml, I'm just going to throw this in here, it doesn't really matter where it goes, I'm just going to do a drop, so from

the content, I'm going to drop the element with the ID, Portal Anon Tools, and so now when I refresh that will go away, so I mentioned it doesn't matter so much what the order of the rules here, because when Dioso looks through all of this, looks through

all of the rules, it doesn't look at necessarily the order from top to bottom, but first it'll do all of the drops, it will do all of the befores, you know, and it has a certain pattern that it goes through. The only time that it really is important is like in this example here where I'm doing an after multiple times on the same elements, then the order

is going to matter. If you want any more information on this, there is training.plone.org, Eric had mentioned it in the keynote this morning that we made a lot of changes like getting ready for the trainings this week, so all of the stuff I've gone over you can find on training.plone.org for an intro to theming.

Things you'll want to watch out for are, for example, the responsiveness. It's not so much an issue here. I know before, you see things are kind of getting just outside of the box on the right, so you know, as you're theming, make sure to go through

and check that it works on all browser sizes. You can see Barcelona is kind of set up with a fixed width that changes, you know, as you change sizes. Not my personal preference, but you know, it's completely up to you.

Okay, do we have any questions? Yes? Just a real stupid question. When you were editing your CSS there, you were selecting things that were commented out, and then all of a sudden they weren't commented out, what were you doing? Command slash. Command slash. Yeah, and that works in various editors, too. Like I use Atom, and I know it works in

TextMate for, you know, just quickly I can select text and comment, so comment slash, that will comment it out, comment slash again to uncomment. Command slash. Mm-hmm. Thank you. How do you export all this so you can use it in another site? So, if you have added everything directly here into the control panel, you can download

it as a zip file, and then re-upload it. You know, if it's something that you're doing regularly, I recommend not doing everything through the web, but doing it all, you know, using Mr. Bob to create a theme package, have it in version control. But this is

a nice, quick and dirty way to get started and going. Any other questions? Yes? So, what's the strategy as far as, or your approach as far as, you know, you're creating

the HTML file and CSS to go with it, maybe a designer does that and hands it off to you. So, I mean, do you, for that kind of base CSS, do you just embed, do you have that as part of the index on HTML and then layer the plumb specific stuff on top of it? Mm-hmm. I know some files you only want to bring in a specific context, but for stuff that's

global, like, is there any reason not to just have that as a static thing that's brought in and skip the resource registry entirely? So, the resource registries are very helpful because they provide caching and merging

of the files. I mean, ideally, like that main.css, I could add that to the registry and so that when everything gets compiled, it would all get merged down into a single file. So that's the benefit there. And I'm not super familiar with the new resource registries and how they do caching, but the older, like, portal CSS would provide

caching on all of the files. I know there is something like that in here, I'm just not super familiar with how it works. Any other questions? Okay. I don't even know

how long I was supposed to go. I know it wasn't too long, but I guess not. Oh, one more thing. So, for the whole conference, we do have a survey app. It's plonecomp.sixfeetup.com so that you can go rate all of the talks that you go to. So please go ahead and do that for mine and do them for the next couple days as well. Alright, thank you.