How to build themes in TwentyThree™

Hi I'm Sam, I'm going to be taking you through building a theme in 23 Video. So I've got a demo set here with some dummy content about turtles and I'm going to the design section and I'm going to just show you that I've chosen the developer theme. So we've now got a hundred more themes in our platform and any of these can be customized and built on top of but I'm going to go for the developer theme. It's a clean, plain theme, nothing in it as default as you can see. Check the source, there's very little there. So I'm going to build that and we're going to go from there. So the first thing is to check the libraries. So we've got jQuery and Bootstrap enabled as default now on our platform but we've got to bundle the stuff that we need. We don't need that right now. So the first thing I'll probably do is add a menu block. Call that menu and I'm going to take off login and sign up page. We don't need that for this example. So we're going to drag that into our site header section so it's the base at the top. So let's have a look at what that looks like. Great, so it's a standard Bootstrap nav bar. We've got live events, channels and we've got search and it's responsive by default. We've auto populated the channels with some dummy content for this example. So if we look at the code behind for this we can see that we've got navbar.toggle, brand which is either an image or a string and then we've got live events, albums which is our channels. We've got links. So this is a good example of something to add. So if we go to our content pages and we add a new page, let's call this about and fill it with some dummy content. We're creating an about page and we're going to give it the slug about and we're going to link to this in the menu block. So with that logic already there we can see that the about page has been added to the menu block. So we've got a new page. That's great. Then we've got some other stuff here which is the login links and signup links that we're not using, logout and then the search. So this markup will display the search if it's enabled on your site. So now I'm going to add a footer. This is a lot less complicated this. By default it's just got a brand and you can add pages to it similar to the menu block. So the moment we haven't got any pages associated we've just got a brand here. So we've got another set of links that we can add in a very similar way in the brand. So let's create another page for that. So an example would be like a contact page for instance. It usually goes in the footer. Give it a slug of content and then we'll link to this in the footer block. Great. It's linked as you would expect. So that's it. So now the next thing to add would be some video thumbnails. Pretty key to any video site. So we'll do some recently uploaded thumbnails and we'll do nine. Yeah, we'll pick recently uploaded and we'll leave these settings as they are and we'll choose medium sized thumbnails to get a big picture. We've got number of columns three. Number of characters in the title is 1600 and we're only going to include this on the front page. And that can see where that is. Great. So we've got some thumbnails. What we can do is just show you here we've got a code behind for this. We've got a heading and some markup. So sort of show you the number of videos. Say we want to make it 12 and we're going to do them in columns of four. We just change these settings. Save the block and it works as you would expect. And this is fully responsive as all of our new blocks are. So they go down to mobile view and sort of shrink before that. I think maybe flip back so it's three columns wide instead. So we've got the bigger pictures of turtles. Nice. So we've got the big picture of turtles. So with the home page set I think we should focus on the video page. So here we've got our sort of default video page. It's obviously got our header and footer but it's got some video information as well. Description, tags, title and that sort of stuff. So let's start adding to this. So I think we'll add a rate block so we can rate our video. So we've got that rate video and I'm going to give it five rating blocks. So that's five stars. We're going to include that only on the single event page and the one video page. Cool. So let's see what that looks like. Great. So we can click to rate our video and that works kind of as we expect. That one's your professional page is still there so this rate is four stars. Cool. So I guess the next thing to add is a share block. So our users can share our video all over the internet. So it's got share by embed, share by email and then share by a bunch of social networks that you expect. So again we're going to include that on the single event page and the video page. So let's see what that looks like. So we have a share block. We've got our social networks, we've got a link, we've got an embed you can copy and paste and an email form. So it kind of looks as you would expect. So I guess the next thing to add is a, not a menu, a comment block. So this is for this. We won't give it a headline. Show any new comments in the top and show comments immediately after the post. And again we're going to display this just in our live event and our video page. Cool. So we have a comment form as you would expect and if we had a comment, so this is my new comment post. Great. So the comment block includes the list of comments as well. So I guess the next thing to add would be a sort of related videos. Commonly used thing on most video sites. So we can add a video thumbnails block and we're going to call this related videos. We'll give that a headline as well and we're going to have six. For which videos we're going to choose related videos. So we're going to add a video thumbnail. So we can leave most of these settings as they are. We'll change the thumbnail size to medium and we'll change the number of columns to one because we only want them displayed in one single column. We're going to include this again on the videos page. So here we want to drag this into the right hand sidebar so it's kind of where you would expect. Refresh. Great. So we've got related videos in a single column down this right hand sidebar. They're a little bit big though so we're going to change the size of these. So in the standard video thumbnail we have the image and the content split into two sections and they're currently 12 columns which is the full width. So we're going to change these to five and seven respectively. Save. And then they're going to be left and right aligned. It's cool, the only thing is maybe this description isn't great. So we'll take that out. Maybe it's not necessary in that context. Save and refresh. There's some nice related videos. And this whole site is as responsive as you'd expect. You shrink down and you can see the video is mobile. But maybe on mobile view actually they need to be image on top and text below. So let's tweak that. Change the extra source size. Change them to 12 so they're full width so they fit the whole. And then on column small, five. Maybe column medium we'll go back to 12. And then column large we'll go to five columns wide. And so that's it. So we'll do the same but with seven on the content rather than the image. So this should give us a split. So on the large size there, as I said before, whoa, they're a bit big. So maybe we need to just get rid of the column sizes on the two larger break points. So we've just got five and seven down to the mobile size. So again we've got the main line here. Down until mobile they become image on top. Kind of better use of the space. It does make sense to space them horizontally on the mobile. So now I guess a good thing to focus on would be the video thumbnails. Let's do a little bit more about this. If we look at the video thumbnails, because we've got this dummy content they're all uploaded in the same day. So maybe it does make sense to have photo creation date in the metadata of all of them because they're all the same. So maybe we'll take that out. We'll give that a refresh and that's gone. The problem with this is that if I search for videos there's a markup for video thumbnails existing in other places. And this is kind of default. So we've set up sort of default standards but they're currently unlinked. So if you change one in one place they don't change everywhere. So we've got our videos page. We can see that here we've got photo creation date. That's fine. We could just delete it from there. But a new thing that we've introduced is include templates. So this allows us to have a piece of liquid that we create once and use in multiple places. This is a perfect example. So if we go to video thumbnail include. So we've got that there. If we take an example of our standard sort of video thumbnail markup. We'll save that. Just take that out for the moment and we'll pop it into here. Format that a little bit. Okay. So now we can take the photo creation date out of this one. Save that. And now we can include this wherever we need to use it. So for instance in our videos page template we've got a video thumbnail. So we write include video thumbnail inside these liquid braces. And so now we can include that wherever we want. And we can just have to change the include template and then it will change everywhere. We can take everything in sync to make it really easy to update. So take our video thumbnail here. Place it with the video thumbnail. Save. And now we've got one example. One set of markup that we can change and gets changed everywhere. So let's just show you that's working. Let's go back to our include and just do something minor like add an exclamation mark onto the end of views for instance. So that we see on the home page. Great. We've got a little exclamation mark. And if we search again we refresh because it's been cached. That's great. So this is include templates and they're really really useful. So we've focused a lot on the layout and we've got a video page and a front page. I think we should focus a little bit more on the styling now. Because everything looks nice but it's very stock bootstrap. So if we go to our CSS and JavaScript section we've got files where we can edit theme variables, theme style sheet, site CSS and site JavaScript. So we've got bootstrap which is the go to place for all of your bootstrap information. We are using SAS implementation of bootstrap which has its own GitHub repository. So you can view that here. So the best thing to do I find is to grab the entire sort of default bootstrap variables file and import that. So that's already imported but if we import the whole of this file into our theme variables file from here we can then sort of go through and overwrite them without having to remember what ones are what. So we can just grab these in. I mean we obviously haven't included them all by default because they're extra and it's sort of doubling up and it's up to you really. Let's say we change the brand primary to red. So now everything that's sort of using the brand primary color default bootstrap is now red. That's great. So we can change that back. Once it's saved it looks as you would expect. So outside of variables let's change a little bit of sort of general site styling. We do that in our theme style sheet file. So what do we want to change? Let's change this header. So let's make it so that it's fixed to the top of the page. So if we do that we go to our site layout and we go to our menu section and then we have our navbar. So this is all standard bootstrap markup. So if we go to the bootstrap page look at components and we go on navbar which is fixed to top. So we can grab that class which is the class that specifies that it's fixed to the top of the page. Save it. Refresh. So that's it. We have a navbar that's now fixed to the top of the page. It's responsive. Looks as you would expect. The problem is that it's on the whole way to the left and right hand side of the page so we don't want that. So we need to just add a container inside the navbar to contain that content and keep it within the normal bounds. Great. Just re-indent this. Save. Great. So it's perfect. Now we kept inside the bounds. It's good. The only problem is it's sort of sitting on top of our content. So if we go to the CSS section and if we go to the theme style sheet this is where we put all of our theme customizations. So in the body we're going to give the body a padding top of 71 pixels. Save that. So now the content is pushed out away from the navbar and that's got a little room. It's great. So I'll show you how it works. I've got a file here of some sort of bootstrap variables that I've set up in full so I can paste that across and if you've got any themes that you already have you can just paste these in. So that's sort of everything from alerts to buttons, navbar, all these sort of settings waiting for them. So I've got this set up which you'll see that. A little bit of a change. You'll see navbar's now white, line height's fixed. So maybe we should look at the footer. What's really cool is that we can use these variables inside our other style sheets. So these are all linked. So any bootstrap variable or anyone in our bootstrap variables file or anything else we can use throughout the project. So if we're styling our footer, for instance, the footer has an ID of footer as you'd expect. So we can add a border top which is the grey light variable. This is good to do so we can change them in just one place and we don't have a lot of hard coded colours. So that's a little bit close to the top so maybe we'll position it away with a bit of padding and maybe we'll use the grid width, grid colour width. Divide it by two. I think it's 30 so it'll be 15 in this case. Cool. So yeah, it's just a nice little word that you can use for sort of the various bootstrap variables. So using that I've sort of generated a whole bootstrap theme CSS for this. This is the one we use for start me up, one of our default templates. It's a little change but you can see we've got transitions, I have an unhover and the link colours are dark grey and changed to the sort of brown primary colour and we've got the tweets to the nav which is sort of capitalised nav and stuff like that. Okay, so now we're going to look at some theme customisation options. The single one that's created by default is the website icon of Fabicon. So I've got a Fabicon here, I can upload it and without having to do anything else we have a Fabicon linked on our site. We generate a bunch of different sizes for Apple etc. The markup just gets added. It's great. The next thing I think we should look at is the logo, really common thing that you want to customise. So if we look at our site layout in our menu we have markup for the site logo which can either be a string or an image. For the purposes of this, let's keep it simple, you can obviously customise this to be as big as you want but we'll just see how big it already is. So 20 pixels, we'll set that image height to be 20 pixels. Okay, so now we've got to create a theme option for this logo. So if we give it a key of logo and then the type we choose, graphic, name, site logo, description, logo to be displayed in the menu across the sites. We'll give this a file name of site logo. So this will just work. This has been in the 23 video for a while. Obviously you could give it its own file name, explicitly reference it, do whatever you want but in this case site logo is sort of a shortcut way that it will just work in that case. Okay, so we've uploaded an image, refresh and now we have a site logo. So a super cool thing about these customisation options is that they're exposed to the SAS on compilation. So what we can do is if we make the key the same as an existing bootstrap variable, it'll actually overwrite it. So if we use the key as brand primary which is the brand primary colour, set the type to colour, so it's a colour picker. We give it a name, this is just for the user, so it's a primary brand colour and description again just to help the user to sort of explain what colour they're going to be changing. So the primary colour used by your brand, create this option and so without having to do anything else, if we choose a colour with this colour picker now, it's going to override the brand primary variable that we've set in bootstrap. So this one here, so by default we've got 0092CE, so we now have an interface for altering that particular colour. You can see that's really really powerful. Refresh, so on these link hovers for instance, everywhere we use brand primary is now red. So here we go, here, so red, change it to blue, give it a refresh and everywhere that uses the brand primary, so for instance in these tags, its username, links, they're now using blue, which is great. So it's a really powerful way for the users to change SAS variables without you having to do too much work. So another good example of where we might want to change a variable is for instance in a font. So if we create a key of site font, choose the font type, then again for the user give it the name of site font, font to be used across the sites, then we create that option. So now we have a variable site font that we can use in our SAS. So if we go here and we choose a font from the drop down, there's a bunch of free fonts that we've got on our platform, so we use SourceSense Pro. Of course if we refresh the page nothing will happen because it's not referencing a default bootstrap variable. So if we go to our theme variables file we can actually add this in. So as part of our site font object we have font name and font import URL that we can get out. So we're importing the font URL and the font name, add that into our SAS and compilation, save, and if we give this a refresh we should be now importing and changing the font to SourceSense Pro which is great and is changed across the site. So another common thing that you might want to set up in your themes is exposing links for instance. If you see at the bottom of our page we've got a piece of brand text, start me up, well we might want to allow users of our theme to put in their various social media profiles. So as part of the theme styles that we had, the theme styles that we imported, I've set it up so that we've got social there, some minor styles for that. We have font awesome as part of the project as well, so we can use any of the font awesome glyphs, so here we have font awesome facebook and font awesome twitter, well obviously we set this up but they're not linking anywhere at the moment. If we refresh the page, great so we've got the font awesome glyphs, facebook and twitter. So we need to create these hrefs. What we'll do is we'll create theme options and we'll create a link for each of these and we'll then expose them in liquid. So if we create a key of facebook link and do text and give it a name of facebook link and then describe that to our users, link to your facebook profile page. Great, we'll create one for twitter as well, so twitter link, text, twitter link and then again link to your twitter page. So we've created these two options. So now in our customized theme options we have space where users could put in text links, so for instance facebook.com for example purposes and twitter.com. Great, so similarly to the fact that we can reference these theme options in SAS, we can reference them in liquid as well. So we've put them in liquid braces and here we do them as themeoption. and then the key name where hyphens are replaced by camel case which is a quirk of liquid. So if we do themeoption.facebooklink camel case and themeoption.twitterlink camel case, we refresh, click on facebook and it should take us to facebook.com. Perfect. We should maybe add a target blank just so the users stay on our site and maybe give them a title because we've just got glyphs and help for accessibility. So facebook, follow us on twitter. So now we're just going to do a little bit of handling. In order to make sure that the links aren't displayed if they haven't entered anything in the theme, we're going to wrap the anchor tags in an if function. So again we're using this themeoption.facebooklink camel case which if it's not empty then we'll display the markup. Similarly with twitter, so if themeoption.twitterlink does not equal empty then we can display the twitter link. It's just a little bit of nice error handling. So if we go to twitterlink, take that away, save, and refresh we should see that it's just left with facebook. Twitter is now gone which is exactly what we want. We can re-add this back in, dot twitter dot twitter, and save. Refresh the page and we can see our Twitter link experience is expected. So another example of a themeoption that you might commonly use is Boolean. So here we'll set a key of display search. It might be common that you want an option just to hide or show the search in your theme. So here we choose the type of Boolean, again we'll give it the name display search and just a little bit of description to display whoever is using the theme is going to happen if they change this option. So choose search in the menu is enabled. So we'll create this option. So if we've got a customisation theme, so when we have a Boolean it's a toggle. So toggle, display search is on or display search is off. So now if we go to our site layout and go to our menu which is where our search is, we can wrap all of our search markup in our theme option. So if we use the liquid braces, if themeoption.displaysearch, camel cased again. There's already an if function there at the moment because that's a site setting that enables and disables search but we can set it up so that it overrides it with a theme option. So here if we turn off display search, refresh the page, it's gone. So that's a general overview into how to build themes on 23video. We've created a landing page, we've created a video page with related thumbnails, share section, comments, channels, a toggle to hide and display search, a button to hide and display and sort of use a variety of the features that you would commonly use in setting up your themes. One last thing I'd like to highlight is export theme option. So once we've created these themes we can download the design and it downloads it into the .theme file and that's saved to your machine. So now if I reset it back to the developer theme which is our blank theme that we started with, it essentially clears everything out. If we refresh, so this is just the basic content of the page that we would have by default, it doesn't include our menu or nav or anything like that. If we now import the theme, so we choose our theme file, downloads folder, we can import the theme file, we can import the theme file so this is obviously great for backing up or being able to send to others or sharing with anybody. So import the theme, refresh the page and back we have our theme saved. Thank you very much and I hope you find this helpful.