Getting Started with django CMS

this is Martin Costigan I'm a senior software developer at Divi oh and a core developer of the open source project Django CMS today is the 28th of February 2016 and we'll be working with Django CMS version 3.2 this is the first of a series of screencast designed to help you get the most from Django CMS this series is aimed at developers with at least some familiarity with Python and Django and the Django framework but you're not required to be an expert in either in this particular screencast what we aim to do is create a new project from virtually nothing then convert an existing open source template so that it is useful in a Django CMS project in particular I've selected this it's a very nice template set by start bootstrap it's all open source and it has a lot of really nice features and I just think it would be a great Django CMS template and for that reason we're going to call this this you're going to see this is called modern business so a lot of the names that you'll see me use throughout the screencast will be referencing modern business anyway let's get started so the first thing I'm going to do is I'm going to just open up my terminal you can see that I'm currently rooted at my current directory is desktop so the first thing I'm going to do is I'm going to create a new virtual environment if you develop with Python and Django you must use virtual environments if you don't you will really hate yourself later I actually spent way too much time not using virtual environments when I started and I didn't know why once I figured out how to use them anyway so let's do that I'm also using something called virtual env wrapper so if I use some shell commands here that you're not familiar with it could be because I'm using virtual env wrapper so let's start so make virtual environment I'm going to call it modern business and so now I'm going to install with pip pip install Django CMS installer and they will take a minute okay now I can create a new entirely new Django project which includes Django CMS and a few other add-ons automatically just by incanting the following Django CMS - P modern business modern business basically this command is tells the Django CMS installer to create a new project in a root folder called modern business and with a base folder the same name and it's going to do so in my current directory which is a desktop so once it's finished it will appear on my desktop okay it's going to ask me some questions so I need to provide it access to my database and if you have an existing database you can actually point it directly in there using the URL format for providing not only the location of the database and the credentials but you know anyway we're not going to do that we're going to do we're going to use the built the the sequel Lite database which is built into Django the reason we're doing that is twofold one is it's super easy and convenient we don't have to install anything new and secondly it means that all of the configuration that we put into our project will end up into a single file which will be part of the project and I can then share that with a git repository somewhere so I'm just going to eat return on that and that will use the default so for Django CMS we're going to use 3.2 I'll just hit stable and then for Django version blah blah blah I'm going to use stable as well now this is for internationalization and localization we're not going to do a great deal of this in this particular screencast but we want to make sure it's there for later ones so I'm going to hit yes if your project will never be used for localization or internationalization you may want to hit no here the only reason that I would say that is because if you really don't want your URLs on your project to have a segment indicating the language code then you're going to want to hit no here but I do recommend that if there's any chance of you using translations in your project in the future you really should be using this now reversion okay so install and configure reversion support reversion comes from a package called django reversion and it's a very useful package for basically providing undo and redo operations in django Django CMS uses this quite a bit so that you can do things like revert to an older version of a page so we want to want to hit yes here languages again we're not going to do a lot of language in this particular screencast but later on we probably will so I'm going to put a few in here and it should be known that I only speak English I dabbled in French but not enough to speak it well timezone okay so we're currently in the east coast of New York sorry of the United States so I'm going to go ahead and hit that one and do I want to use timezone support yes I do if you ever work with dates in Django you'll know that you really need to have timezone support turned on um permission management yeah we're going to do that do I want to use an existing bootstrap theme I'm going to hit no here because the first thing we're going to do once we get this installed is start replacing anything that's there and we don't want to use custom template set and we don't want to create a starting page with examples okay so Jenko CMS installer is now going to take all of those configurations and basically build out a valid Django project which includes Django CMS it's also going to install a few add-ons that people might like to use it's going to migrate all of that stuff as well for us I think first thing it's going to do is ask me yes for my username and password down for any screencast that I do where I record you know where where I share the resulting database I almost always use admin as the username and a password of simply password alright now we have a project on the desktop let's CD into that project and let's see if it runs now normally I could just type in manage run server but I actually have another project running on the usual port 8000 so I'm just going to give it the extra parameter for the IP and the port and we're going to run it on port 9000 so let's see how that works port is already in use maybe I'm using that somewhere else all right let's do 8001 all right found one okay so that means we can go to localhost and then go to 8,000 and one and we should have and we do a Django installation and I may use admin and password and now we have also a Django CMS install I'll go ahead and save that password um now since there's no content here not even a single page to find where we're brought to the new Django CMS wizard which gives us the option of creating a new page let's go ahead and use it so just hit next and then we provide some basics page oh I'm going to call this home we can leave slugs empty as it will it'll automatically created for us we don't need any content all right so here's our home page we have no theme no template nothing really useful - well we do have templates actually but these are like the default ones that come with Django CMS and we have the single a single page and like I said earlier you remember because we turned on internationalization we will be getting the language code segment here and other than that this is pretty straightforward we have a single page okay so let's get to business here so what we want to do is we want to start converting this this site into this this is pretty fancy it's got a nice carousel here we've got some pretty cool panels here you know this is pretty much all laid out and got some neat stuff we're not going to do all of this in the same screencast today but we're just going to try to give you an idea where we're going with all of this today we're going to probably build out just a homepage and we're going to learn some concepts along the way so let's get started so I'm going to go to start bootstrap and I'm going to find that particular template which is down here modern business and now I'm going to download the files and open those files here all right so now I'm also going to open my project into pycharm so you can use any text editor you want obviously can't use something like a word or a rich text editor kind of thing you need to really use a editor design for coding PyCharm is has a community version which is I believe free I'm using that right now I think I'm actually using the professional version in tribal mode right now and you can do another favorite of mine is sublime text which works on also Windows Linux and Mac OS PyCharm also works on all of those but there are tons of other ones out there and on Windows you might want to use what is it well I don't know there anyway so here's my project now because I am using pycharm that one of the one of the things I want to do is I want to set up my project interpreter to use my virtually invite env and that means it'll have access to all the packages that have installed and that's going to be useful for things like command completion and navigation okay and you can see we have a pretty basic Django project if you are familiar with Django you'll recognize the directory structure to some degree we have a database as it be described earlier we're using the file based SQLite and that's pretty much it so let's look at settings so you see in the settings we have basically a Django project valid Django project but we've installed via Django CMS installer a few things related specifically to jingo CMS and and I'll kind of touch on some of those Django CMS installs a couple of processors sorry templates um template processors and loaders looks like maybe no I guess those are regular well this is seconds I if I'm pronouncing that right this is a tool that one of the core developers had built but it's useful for most general projects and it is also required for installation some middleware classes you can see we have one for the epic reload middleware we have some more down here for current user per page toolbar language cookie etc and then a selection of built in middle work glasses install apps there's a few things that we require as I mentioned we do require seconds I we require Treebeard that's how we manage our our tree of pages and other things and then there's a couple of installed plugins all of these will we be using in fact I'm going to probably I recommend well we'll leave them all here and then of course the main project is done here you remember we talked about reversion and since we said to install that it is now installed here and of course CMS itself menus is actually a companion package that comes along with Django CMS and it's responsible for all the menus in the system and menu template tags and breadcrumbs and so on and so forth so it's part of the CMS project as well in fact I'm going to go ahead and put that there Oh Django CMS admin style this is a requirement also and this basically gives you a much more attractive admin Django admin when you're working with Django CMS some people use it just for the regular Django projects even if they're not using CMS um okay so that's that remember we configure three languages here are the various settings that support languages and here's our templates I'm actually going to turn two of these off because we're not going to need them later and ultimately why when we get there um permissions are on because we told it so and then here's our database configuration pretty pretty basic stuff um see what else okay well here's our templates I just remove these two and I'm going to remove them from here now the reason I'm going to remove these is because actually I can show you over here so here in the source template that we're going to start with you can see that we have a full width here but they also offer a side bar page now if you lay this out with bootstrap you're going to see that you're going to use the full width anyway because you have to have a full width in order to get this heading up here with the breadcrumbs and then over here you'll have your column and you might choose to put it here you might choose put it over here but at the end of the day it's simply a column that you specify in bootstrap so there's no need for us to have a separate template for that you can have you know any number of different format or layouts using bootstrap and I didn't want to there's no need to maintain an extra template for that um alright so the first thing I'm going to do I think to start converting is I'm going to start with C did ok I open this up already we have inside the download that we got from start bootstrap we have a number of things templates which are going to be very important in particularly this one and then we also have some CSS we have some fonts we have something called font awesome if you're not familiar with it this is a basically a library of icons in font form I think it also distributes it in SVG maybe not doesn't matter um we have some other fonts again these are all well these are glyph icon fonts but they're included there and there's some custom JavaScript specifically for for supporting bootstrap and some of the components that bootstrap have and that's one thing I really like about this this particular theme and this this template set is that it it doesn't have every you know different jquery module Under the Sun and here it's pretty straightforward and it leverages bootstrap very well ok so the first thing we're going to do is here's my project right and I already have a static folder I don't have anything in it right now first thing I want to do is I want to copy my CSS font awesome fonts and JavaScript I want to copy these and put them into static I don't need to open them okay so we should now have a copies of all of those things now here in my project and that's all well and good and we're not using them yet so how do we use them all probably the easiest ways to start using template so I'm going to I'm going to go ahead and drag this template full width over here in my templates folder as well again a copy of it I don't want to affect this I think we're done with this for now I'm not closed it now we have the ones that we are using in our project is really only full width there is a base and full width uses that base if you look over here well maybe not all right well there's a base template and then there's oh I'm sorry that's from the templates and then full width which is the template that came with Django CMS leverages the base HTML so our goal at this very moment is to basically use this template which came from start bootstrap as part of our theme we want to convert this into a Django CMS template so as I mentioned before the the existing full width template that comes with Django CMS is split into two parts so we're going to probably have to do that here in fact we are so the first thing I'm going to do is I'm going to look and see in this existing template we have some things that are special right they're not just normal html5 markup we have this template tag up here is a normal Django template AG which says load these tag libraries so we're going to need this so let's go ahead and copy that over and we're going to copy that into here alright okay we've just started converting that template into a Django CMS template um what else we're going to need we're going to need render block CSS and this should go at the end of my head so I'm gonna jump over here find the end of my head I'm gonna go ahead and put that in there alright um render block is a tag that comes from Seca's I tags library um and that basically what it allows you to do is throughout your project throughout all the plugins and templates here and there and sometimes put some sub templates and include member you might define new blocks of CSS that you want to have included and what this does is it kind of brings it all into one place so you define all these little bits of things that you might need throughout your project and then it slams it all into one area in your base template basically and we have something very similar for JavaScript so we're going to copy this template tag render block J s and we're going to put that also into our new template so I'm going to put that at the end of body where's the other one one at the end of head another thing we're going to be very important is you have to have this special template tag CMS toolbar and this really should be at the beginning of your body so I'm going to go to the beginning of the body and slam that in right there okay um what else title all right so yeah that's all good Oh menu we're going to probably need a menu right now notice in Django CMS the menu tag which will show the menu pages you defined it which are unable to be visible it is always placed inside of a UL tag so let's just remember that I'm going to copy the show menu template tag out from here and put it into here so where would we put that where is the menu okay the menu is currently right here this is where the menu starts about services contact and you can see that it starts with a UL tag so this looks like the best place to do it now I'm going to eliminate all the hard-coded pages that are currently in the menu and I'm just going to basically delete them so jump down here until I get to the closing UL tag and then slam that that in there so we got that now all right look good so let's go through this and see what else we can do okay so this might be useful so we currently have this hard-coded to en but I think see what we can put in there yeah okay so just make sure we get it right at is consulted my existing project so we can put language code in here and now what that means is that the the HTML tag now has a an attribute which will have the correct language code for the content it's actually showing instead of always being hard coded to be English and that's great if we switch to French or German or whatever um okay so description so we don't have anything here now nor do we have anything for author and we probably should fill that out and we could probably put you know your name you could put your name there whatever your organization but the description is probably going to change on a page-by-page basis so we're going to use another template tag this one was called it's a CMS template tag which is included in here and it's called page attribute now what this will do is it will give you access to one of the attributes of this page that we're currently looking at now this is the base template so in theory it will be used for all pages so by doing it this way it means that it will have access to whatever page is being shown as description and it will they be able to put it right here for us that's very useful let's see what else okay the title modern business and then start bootstrap template um okay so maybe we'd want to put the page name here well maybe you want to put that actually on the other side so we might do again page attribute and then title I think needs to check that page title my bad page title and then we can put a hyphen and then modern business we're going to assume modern business is the name of our business so that won't change very often we probably don't need to encode that and you in any way see other things we might want to look at okay so yeah there are some other things we need to do like first of all you see we have these hard-coded references to statics static files if you hear me say statics I'm always referring to static files things that never change and in this case we have a reference to CMS and then this is notice this is a relative URL and that's what makes it work on the start bootstrap site for the preview but that won't work in the world of Django because Django handles statics in a very particular way which is all it's all really good but it is particular and we could try to guess the directory and and and so on and so forth but the correct way to do it is to actually reference these static files using the static tag so you do that like this you just basically refer to like that and then you close the tag and now that file will be found in our static directory wherever it may where whatever wherever we've configured it to be stored now the static tag is part of the static tags library which I haven't included static I'm sorry static files template tag library so that's good that means that it will now find the bootstrap CSS let's do the same thing for this one there we go oops your space don't want that and we can do it for this one good alright so those are now going to be referenced off of the local file system or in the case of a production system they may be from a different server all together and that's one of the wonderful things about Django these two things down here are actually not always required as you can see there they're only used under specific environments and they are also absolute URLs from the internet so we don't have to do much with those we can leave them leave them as they are down at the bottom of this we are referencing to more static files and so we're going to have to stitch those up if you will all right so these are our JavaScript files you remember we move these over as part of our initial setup copying things over and then of course we have our render Block j/s so it will always include jQuery from here it will always do the core bootstrap JavaScript from here and then whatever else we've asked it to load will appear here all right super so this is a working template um maybe we can even view it let's see I'm going to go ahead and save it and then we can come over here and see what we get okay nothing why are we seeing nothing Oh should we start so nothing well this is base template the fold for width is what we have I think that's what's in use here maybe it's not oh yeah it is okay and full-width extends base HTML so that should be working we have a block content let me go ahead and include a block content in here so in base oh I see what's going on I've been modifying the template over here not base so I'm actually going to move now I'm just going to rename this I'll rename this to - orig one up will probably delete it in a minute and this one I'm going to rename to base now there's stuff in here that we're going to move to full width but we're just want to preview it at this point so I'm gonna go ahead and start make sure the templates are be loaded and then see if we get something nothing hmm oh I know it's wrong because I rename this pycharm is trying to be smart for me and it renamed my extends thanks very much bye charm okay and they'll block tag I must have a typo somewhere good strap in oh I've got the word static already let's see what we get alright already this looks quite a bit like this right I mean we're just really starting to shape up already they got the right fonts in place we got the right margins we got the right header at the top it only has one page home because we've only defined one let's see what happens if we add another page in this case I'm going to add I'll use this I'm going to add a new page about and I'll add a new page services why not all right now you can see that the menu is already working and showing us whatever pages that we have defined now in true form and true to form you know looking at this we don't see a home button here this acts as our home button so let's let's let's get that set up so first thing we want to do is probably disable home from the menu I'm going to go to the pages panel here and we see our three pages that we created and I'm just going to turn this out turn this off on the menu so it's no longer going to show in the menu and if I reload you can see we no longer have that so that's already a step in the right direction the problem remains though that this was hard-coded to a root URL in fact it says index if you're looking at the bottom of my screen down here you'll see that it's going to index that HTML that's not even you know part of our URL scheme so let's fix that here it is here where it says start bootstrap I'm going to change this to modern business because again that's going to be our fictitious company name and the HVF is going to put slash because that's always going to be our root URL now this is kind of a cheat because as you might remember we have language codes so the correct thing to do people probably do that and if I don't do that then it means there's an extra internal redirect which is probably okay for now later on we're probably going to want to be a little bit more clever with that but we're going to leave this now just the way it is and we're going to reboot I'm sorry reload and now if I click on this you can see it goes to the root and if I click on about it goes to the about page which is identical currently to because everything is going to the same template base and yeah we do see that the title bar is changing according to the page that we're on that's promising all right so ah we know from looking at the existing template that the first page really looks a little bit different than all the rest right the first page has no oh breadcrumb it does not have the page title up there it has it down here and there's this big giant carousel here so that's a little bit different than all of the rest of the pages as you can see as I go through here we don't see any other page like that so what we need to do is think about how we would make that possible in our new template system right so we have full width I'm going to go ahead and close this original we can just get rid of that I'll even delete it delete all right and so we have the full width which is is effectively empty and we have base now in the base we know we're always going to have this starts bootstrap thing up here with the menu that's on every page so we'll keep that in the base that also makes makes it easy because we have the CMS toolbar which has to be everywhere has to be on every page is always going to be there but when we get down here to the page container we can see we have things that maybe don't make sense for every page so I think what I'm going to do is I'm going to in fact the container itself I would like to stop for just one second in and explain something about bootstrapping hopefully you guys are familiar with bootstrap if you're not bootstrap the grid system works by having an outer container and then inside of that a row and inside of that row any number of columns and you can have as many rows as you like as well but that's the core like base grid unit is you have container then you have row and then you have your columns now if I knew that all of my pages were always going to be inside of this inner column like this this full width column right and nothing is going to be leaking out here to the sides ever then I can probably design my templates to basically put everything in the same container but I know from looking at this source template that at least one thing is going to be stretched out outside of the inner column for everything right the you know into the margin so in order for me to do this I will have to use a specific container that is style to allow things to go outside of the Mart into the margins and you know what I might want to creating this template for this screencast but it could very well be that when I use this site I may want to put a fancy graphic behind maybe the service panel section that goes all the way edge to edge right maybe all the content stays in the middle but they the background graphic goes edge to edge or maybe I want to do that you know on the contact section I don't know but I really want to have that flexibility is when I'm saying I know I already need it for the front page so what I'm going to do is I'm going to I'm going to instead of creating a single container for every page I'm going to allow each page to find its own containers that'll be a little bit more work for me when I'm laying out my content later because it means I have to create my own container for each section and maybe add my own rows whatever but it's not it's not a big deal and I get a lot of flexibility in the long run so based on its this desire to have the flexibility of defining our own containers whenever we like we need to make sure that we're not embedding containers into the default templates here or our main templates so in some cases it makes sense to keep them so like in the navigation which is going to be on every page I don't mind having the container there and to be honest I think we're also going to add see we have a footer up here currently I'm going to take this out and I'm going to put it down here now I can tell by looking at this markup that you can see that the footer is a container perhaps style that way in the CSS and inside of it is a row we're going to move that outside of this thing and I'm going to take all of the remaining content and I'm going to take it out of this template and then in its place I'm going to put block content and block now this is standard Django and it basically says whenever you see a block defined as in this case content in a sub classing template and replace this stuff here with that content so the full width sub classes base you can see because we extend base and it has a template sorry has a block called content and that will basically replace what anything that's in here sorry anything that's in here will replace what is right here so this is how the template systems work in Django and Django CMS works perfectly well alongside that so ultimately we're going to want to put all that stuff I cut out here but we're going to make some changes to it so I'm going to put it in here now and you remember it we we discussed how we don't really want to embed containers so I do I know I don't need that um and what do we have here we have this is the page title oh wait you know what we do need that container because it's going to be the page title on this page but what I don't want to do is extend that container all the way into my the rest of my content so I'm going to go ahead and close that container and then what we're going to do is we're going to create a placeholder now a placeholder is a Django CMS concept and basically this is where all plugins will ultimately be created and and we'll work with them so let me just make sure I'm using the right one we're going to call this particular one content as well so it has the same name as the block that we're in but that's okay because the block is all about Django placeholder is all about Django CMS now we're going to use a special normally you just do that and you just take this off and you're done right we're going to take we're going to use an extended form of this so there's an extended form which is where you can use a closing placeholder tag and sorry end placeholder and if you put it over here basically what we'll do is we'll say show the contents of the placeholder here but if there is no contents to find then show whatever is between these two tags these two template tags so it's here that we're going to put the default content now we've already put the title and so on stuff up here we don't need that again I don't know why that was in my clipboard and the default template will include its own container its own row and some default text and I'm going to move that to the base so let me go to base and put that before the footer all right actually we'll put that in the footer there we go okay so now we have a base template which includes pretty much nothing but the navigation in the footer and then we have the full width where we put the your basic page header and then we have a place for you to put your own content now we already know that there's at least one page that doesn't use this default header and that would be for the home page so I think what I'm going to do is I'm going to now duplicate this template copy and then I'm going to paste it in here I'm gonna call it home and what I'm going to do with this one I'm going to leave everything the same except I'm going to take out the top container which contains the header okay so now this one will just jump right in to the content that we want on the front page - the header and I'm gonna get rid of some of these comment well leave them in the or not know they go okay so now we have a template for we don't need this one template for home a very similar one for that's not supposed to be in there take these comments out this is the generic full width one and it contains like more full-featured if you will it has the built in header I'll go ahead and take these lows this week just comment out let's comment out all right so now in the well let's look at let's look and see what we have now so oops let me refresh this a couple of things I see that the footer doesn't seem to be acting correctly maybe I made the incorrect assumption about what the twitter is styled with and just to check I'm going to check my oh okay yeah I made some thanks with that but now let's change the wear on the run homepage I'm going to change the template to oh I have to add it first so let's go to my settings and here we're going to add home dot HTML and we'll call it home alright so we start and change the template to home okay so now we can see there's just nothing there this is the core I mean this is the default text that we configured here so if there's nothing in our placeholder then it will show this and it's doing that quite well now one thing I this I mentioned is probably not working correctly is is this footer let's fix that so we know that's only in the in the base HTML so we only have to fix it once and the mistake I made was basically just assuming anything about the footer I it is not really any it doesn't really it doesn't really act as a container in fact I should have known that because I took it out of a container nonetheless I'm going to take everything out of there and instead what I'm going to do is I'm going to put in something called a static placeholder and I'm going to call this footer what is a static placeholder of static placeholder acts just like a regular placeholder which is a place where we put plugins and well we put plugins into it the difference is that it's the same everywhere it's located so if I'm on the home page and I put a plug-in into the footer then when I go to the about page which also includes the same static placeholder with the same name that plug-in will already be there it's like the same all the same content everywhere the particular place holder called footer is because it's a static placeholder alright so that's that so let me go ahead and save that and let's reload the page and we should have no footer now and now we can build the footer on the front end so we don't have to do it in the markup anymore so way we can do that if you can go to structure mode and you can see we have two placeholders we have a placeholder up here called content and that corresponds to this and then at the bottom we have the static placeholder which corresponds to this notice a little thumbtack icon that means it's a static placeholder and so anything you put here will be available anywhere else this particular static placeholder is already present I want to go ahead and put some things in there now I need to build up a you know I need to build up the grid for this footer and that includes a container it includes a row include the column and then I want to put my text in their copyright whatever and I might want to also put a heading rule in there so in order for me to do that I'm going to have to be able to create a container so I'm actually going to stop on the front end for just a second and we're going to go back to Django world and Python world and I'm going to install tip install ldren style aldrin style is a very simple add-on or plugin and its sole job is to basically allow you to create predefined types of markup which you can use as wrappers for other things so I've now installed it into my virtual EMD I need to make sure that I put it into my settings into my installed apps put that here found Rijn style I happen to know that it also requires migration so I'm going to manage for someone to make migrations make sure that everything is up to date okay so I just installed Algren style which defines a style plug-in and I could have probably used the Django CMS style plug-in which is over installed but I prefer to use the aldryn one because it's got some additional features which I like so what I'm going to do is I'm going to I'm going to comment this out for just a second all right then what I'm going to do is I'm going to just to clean up my database a little bit and get rid of any any old data structures related to Django CMS style what I'm going to do is I'm going to manage my great Django CMS style zero and that will just unmai great it and then I'm going to comment out the old one one I'll delete it and I'm even going to update my virtually MV I'm going to pit uninstall it Django CMS style yes all right so I still already have the Algren style there I've now uninstalled and even unmai graded the other so I could comment this one back in and then I can go back to where I was which is just to make sure that all the migrations for the product are up-to-date so we're going to do make migrations just make sure everything's okay okay oh I forgot are okay so it looks like the Elgin style is missing a migration that may actually be my fault I think I'm the last person to make a commit there but anyway um it's now installed it's not my I need to migrate it manage migrate migrate everything and next thing to do is use it so I'm going to go back to running my project which I believe is on 8001 alright now I should now be able to go and find this style tag is it yeah okay so here's the style tag and I can create a container this is just predefined in its own settings there's three that uses to be honest I don't use this for hardly any other any other things it comes in handy from time to time the built-in class names you can configure with a setting in your settings if you want but you can also just override it by typing in you can maybe set this to nothing and then type in whatever classes you need it also has the ability of you defining which tag type you want to use appear and some other stuff so we're just going to use regular div and we're going to use container class and that will give us our container so there we go now the next thing I'm going to do is add a row this is a bootstrap three row now I could use that tag again and create a div and then give it a class of row but there's an easier way because we're dealing with bootstrap 3 we're fortunate that there is already a package which provides a lot of the bootstrap 3 things that you might need different components you know panels carousels etc so let's go ahead and get that so I'm going to I'm going to break out of here I'm going to pip install ldren bootstrap 3 now this actually has some sub dependencies like filer and filer has its own dependencies like thumbnail err so I'm going to go ahead and go to the project so we can look at the installation instructions make sure we're getting it right I'll read the docs install we've already pippin stalled it and that should have also gotten our dependencies but we still need to configure those dependencies into our project well one of those dependencies is of course filer and and then thumbnail err as well so I'm going to actually copy these from the existing project that I have just to speed things up we know we need to have the thumbnail processors for 4 filer so here we go now this basically just overrides the thumbnail or a set of processors thumbnail processors with one that gives it this this one right here which is is pretty cool really and it basically allows you to to have a smarter cropping and the other thing we're going to need of course is to put the stuff into our installed apps so we need for packages and installed apps easy thumbnails which is a dependency a filer jingle filer and PTT is another dependency of filer up here and filer of course itself and then of course Al Gore and good strap 3 I think that's all we have to do so let's find out um manage let's - just to CMS check see if that tells us anything useful okay everything looks good so far so now let's do manage migrate that'll migrate the new packages that we've installed tick tock tick tock okay so you can see filer thumb net easy thumbnails and album bootstrap around migrated so now we can run this going back to run server and go back to our project and we load everything still works that's great now I should have some new plugins that were provided by album bootstraps so instead mice inside my style I'm going to go ahead and give this in the name container just so you can see what it is what purpose it serves so inside of our container we're going and we don't have the bootstrap add-ons here I'm going to use the row plugin okay now I only want one row ah here and then in that one row I want to have one column that goes from edge to edge now hopefully you know enough about bootstrap to know that it uses a mobile first strategy so basically you're your narrowest screen is where things start so I can basically create a full width column just by typing in twelve here because this is based on twelve column layout and since this is the mobile size breakpoint if we put twelve here it'll be full screen the whole time and I can just hit save now this will actually create an additional plugin for me inside of it in this case the column that I specified and of course that will have the size that I specified so we now have the container we have the row and we have the column now let's go ahead and add our footer so what I'm going to do is I'm going on the text and I'm going to add a heading rule and then I'm going to put copyright G sorry option G copyright symbol 2016 all rights reserved reserved that's fine anyway it's safe now that should be available on every page and you can see now it fits nicely into the center column of the page and adds a nice heading rule much like we had over here now there's actually a little bit more space you can probably fix that just by putting an extra new line in looks pretty close now all right so this is our home page we have nothing here but we have this default text and we have a footer okay so let's add some content to our home page we can look over here at our source and we can see that we have this fancy carousel we're not going to do that today we're going to do that in another screencast and then of course we have some other content down here which looks to be mostly just normal bootstrap three components now truth be said the carousel is also a standard bootstrap three component but this one is styled a little bit uniquely and that's why we're not going to do it in this particular screencast we'll do it another one um anyway looking here we need to create a new section for welcome to modern business I'll just go ahead and copy that text and I notice that there's a heading rule underneath here but if I look at the source I don't see a heading rule so that means that the the line is actually part of the style of the header of the h1 tag when it has the the page header class so that's interesting let's see if we can deal with that so I'm gonna come over here I'm gonna go to structure mode I'm going to create a new container using our style tag and I'm gonna go ahead and call this welcome so I can find it later and then I'm going to add to that a row and when it fit when we need one column that goes all the way across for this so we've done that and then we're going to add some text text and that text is going to be welcome to modern business and is h1 and if we look at the source over here we see that it is indeed h1 now if I do it just like this we'll get a nice header but it won't have the rule underneath now this rule over here is part of the footer you'll remember we did a few months ago so let's let's try to do it again where we add that class so I'm just going to double click on that and I'm going to manually add this class this is not how we would normally do things but I'm just going to do it just to prove the point first page header and then hit save and then when the page refreshes you can see we now have the exact same rule going across underneath the title just like the original design and that's because it's part of the original design style sheets and I'm really trying hard not to have to add my own styles and JavaScript so far well we probably will have to do a little bit of that but I want to avoid it as much as possible so we know that this is what we're going to need now how could I make this a little bit more legitimate than asking my content managers to go into here and edit some class on some markup they might not even know anything about HTML or CSS so we wouldn't really want to do that so I'm going to remove that for now now the way we can fix that is I'm going to go to my settings and we go to the bottom and I'm going to copy and paste some settings from earlier this is a basically what we're going to do is we're going to create our own setting inside of the editor that we use in Django CMS so that it's just a you know a simple option that your content managers can use to get the effect that's it that you want and in this case there's a lot of stuff here and I'm only showing you because this stuff here is the normal settings but I've come in at the Mount just so you can see it there this is where you can define things like the buttons that show up and it let me let me go ahead and ring it up you can see the different buttons that are here undo redo the plugins for the CMS and here's the show blocks and here's the format etc so you can see that here on new reduce CMS plugins show blocks format Styles etc if you wanted to modify the way your CK editor appears for your people your content managers you could do that by affecting this I've commented it all out because I want to use the standard basic stuff I'll leave it here for now but down here a style set is a special dipped that you can declare that will define things that will appear in here now the ones that are here now are the ones that normally come with the ckeditor we don't need these we don't need marker don't need special container italic subtitle is not really part of of the theme that we're doing so I'm going to basically create my own and in this case it's going to be called page header h1 page a page header h2 etc and basically what it does is when you when you choose that on a block of text is it will use the element that you define here to wrap the text and then it will provide attributes on the element as defined here in this case for a class page header and you can see it's pretty straightforward and easy now I've also included a couple that I find useful especially if you're doing a technical type of website which is to do code so you might you might want to have like a bit of code that is you know in mono proportional fonts I I do that it's not important for this but there you go anyway so I'm going to read I'm going to save those settings and now when i refresh the page it will restart to CMS and use those settings and now if I click on this we have different styles here we now have page header h1 page header h2 etc and code block and then we have an inline style 4 for inline code so for this particular one I'm just going to click here and then go to page header h1 and now this is indeed page header h1 so if I hit save now that text will automatically have the correct class which will give it the right appearance that we want so that's cool let's see what do we need to add next next we have these panels now these are normal bootstrap 3 panels they contain an icon they contain a title or label they have a block of text I'm gonna go ahead and copy that and then a button so we can recreate this in here so I'm gonna close this Rowe because we're done with it I'm going to create a new row and this row will be a normal row but I'm going to tell it to make three columns each of them starting with the widest will have four of the twelve columns or a third of the page across just just like this one we have three columns so each one is going to be 4 of 12 or 1/3 and when it gets a little bit smaller it'll still be 1/3 and even when if it gets a little bit smaller than that I'll make it a third but when it gets all the way to the bottom like a mobile I'm going to tell it to use a full width for each one of these and for those of you who are familiar with bootstrap 3 it would be obvious why I did that if you're not that familiar with bootstrap 3 this just gives you the responsiveness that you're looking for so I'm gonna hit save now we should get a row with 3 columns which we did and each one of them has the appropriate classes for supporting the responsiveness that I want with the breakpoints and stuff that I want for bootstrap 3 so in here I'm going to go ahead and add a panel we'll use define of a default we'll create a heading we'll create the body I don't think we're using a footer you know I'm not really using the flitter um yeah let's do it now here it is there's the panel I'm going to hit the spacebar or I'll just click on extra I'll just click on this button here we see we have something starting to starting to appear let's add some content so the panel heading I'm going to go ahead and add when we set some text as a child plug into this and we'll call that bootstrap version 3.2 points okay not terribly exciting yet let me also add icon and which I kind of we use in check this is a pretty cool little widget inside of here which allows you to select from different icon systems and in this case we're going to choose font awesome and I'm going to type in check alright and so now we have an icon in there let's see if that's going to do it for us mmm this isn't really working out I'm going to delete this icon and instead I'm going to use that same plug-in inside of here this is a pretty cool little feature of Django CMS which is plugins text text enabled plugins so the album bootstrap 3 plug-in some of them are text enabled and in particular the icon one is so you can see this a familiar interface we just used it and we've selected the check and now we can put that there I don't exactly know why this is appearing as a star but I did select check I think it's because the version of bootstrap that is being used on our system is different than the one that was used in that plugin but fortunately it does show up correctly I live alone we save it there we go a little bit small and let's see if I published changes is look different okay so you can see we have the same header as over here but the front size a little bit too small let's fix that and I'm just going to go here and do I'll do heading 3 let's see if that's right all this changes that's a little bit too big all right let's do heading 4 okay alright looks like I matched it so we have bootstrap three point zero point zero as the header of this panel now we can do the body one of the so you'll just notice I'm in I'm in the preview mode and I just in order to edit this I can you can click on different parts and it will show you what part you're going to be editing I could go to here or I could just go to your panel body this is where I want to add that text that I copied there's no settings for this though okay so what we have to do is we have to add text to that there we go and nice shape it up and I happen to know it also uses a button so I'm going to go to link button and what is the button called learn more and it doesn't have an icon or anything it is a button though and you can see we pretty much have the panel but I have to go in to publish changes mode to see it let's let's compare so here's dollars and there's the original looks pretty much identical in fact it it is identical alright so very good now I could go and you know well why not we'll do this so I'm going to take this and I'm going to go in structure mode here is our panel I'm going to copy it and I'm just going to paste it that's a couple more times in there oops wait a minute actually know what I want to do that what I want to do is paste it into here and two here so we'll now have three columns across the width of the page and each one of them has a panel and they look like this let's modify them so this is called this one uses this label and it has the gift icon so we keep going here and paste add and double click on this and we can change this to gift and there we go so you and the other one is easy to use and as a compass icon paste change this to compass there it is already excellent so again if I go into live mode it's identical these are identical to what we have in the source template the only difference being we have a carousel on the other one that we don't have here it looks like there's some minor changes in spacing um so you can see how much work it was to create these panels they were pretty easy and the components are already there and you can pretty much do anything that you see on a bootstrap page you can pretty much do already um in a later episode or later screencast we're going to make it even easier so stay tuned but let's go ahead and finish out the page so the next thing is we have the portfolio section and so what we can do is construction mode now we have a second row done and the portfolio section is going to be a whole new section I'm gonna go ahead and give it its own container so I'm gonna create a new style called portfolio again that's just a label for you and me and I made copy this that's where I keep my title page header for that section I'm going to paste it down here now there's one main difference and that is that the size of the text is the next one down so of an h1 or h2 and and of course the text is different we're going to be using portfolio heading and we're going to use H oops we're going to use h2 here and there it is okay now if you look at the source we see that we have three columns again we have two rows of three columns each and each one of them contain only an image so we can probably do this really quickly by creating one row actually yeah we can create one row and that's our heading row we've got another row a single row this time and it's going to contain three which have again four four four and twelve much like we did before above and inside of these we're going to basically put a single image and that image is going to be the 700 by 450 so let me move that one over of 750 by 450 mm 700 by 450 oh here it is all righty okay so yep there it is alright now we just need to copy and paste this a couple times nice and then of course we can create a new one now I happen to know that if I just simply copy that whole column and then paste it I mean that whole row and then paste it it will mostly work the problem is that it won't have enough spacing between the two rows and what we get is this so what I'm going to do is I'm going to create a new style tag I haven't tried this before so hopefully it'll work now I happen to know that style tag also has some advanced features in particular or allows you to put padding bottom and then give it a 30 pixel padding and I'll do margin instead I'm going to put this here I'm going to put this inside of there see if it helps yeah it does okay it looks like kind of mess something else up here so I'm gonna do it a little bit differently I'm going to create an actual container for this using my existing style tag so oh you know actually that's the problem the problem is that this is a container and it shouldn't be so I just took the container class off of it and now I better to work yeah all right now we're good so yeah now we bit the created that section really quickly in fact I've done even quicker if I didn't mess that up so um this this style tag is just simply given giving us a little bit of margin around these rows and columns and we could probably duplicate that and do the same thing down here but I don't know if we if we need that space so what's next modern business features all right let's copy this and create a new container and call this marm pods called features and save and since I've already done this I will I'm going to copy this row here which is the row that contains my header and paste it into here and then just modify it with the correct text all right let's have a quick look and just done nice all right now over here we see that we have a two column layout this column over here has all this text which I'm gonna copy and then this one over here has a larger of the same type of image so that should be pretty straightforward structure mode features create a new row this time with two columns and look like a twelve there six six and six add some text to this one with what I have in my clipboard and the other one on the right will contain the image 705 450 file 450 okay so yeah looks great we'll go ahead and publish changes so now this is what our web page would look like our home page you remember we did not do the carousel we'll do that later but we do have everything else that we see on the sort oh no we're missing this call to action all right so let's do a call to action this is a well in bootstrap 3 parlance as the well contains two columns inside of it one of them is some text I'll copy that in my clipboard and a button call to action so let's do that all right so go back to edit mode structure all right we've got features done add a new container using the style tag and this time I'm going to call it call to action just as a label and inside of here we're going to include one row that goes all the way across again inside of that column that we're creating that goes all the way across we're going to add a well which is one of the things that the outer bootstrap 3 gives you as a component I think it's a large well let's see what we get ok looks like we have a spacing issue again but we know how to solve that and we do have a well looks like it's the right size well inside the well we're going to place a new row and this time it's going to contain two columns I'm going to specify them to be well we can go all the way across when they're small but they're going to be only a third of the way across the rest of the time and it's going to give us two and I'm going to change the width of one of them so the first one is really close to the 8th of the 12 columns or 2/3 across and that leaves the other one out of third ready and then inside the first one we're going to add some text which is once in my clipboard right now boom and the other one we're going to add a button with a custom class to make it go all the way across so we have we're going to add the link button thing and it's going to be call-to-action and then down here we can add advanced we're going to add BTN lock now what this does is it normally a button will will only be as wide as the text requires it plus the padding but if you use this special class now this is a class that bootstrap defines then the button will stretch to fit the available space not the available content and in this case it's 1/3 width of the well so it should do what we want let's have a look hmm oh you know what I think I need to tell that to be a button not a link all right comparing it to the other one okay the text looks like a little bigger not a problem don't click on that use the large button all right now it looks the same I mean identical the only difference here is that we have this heading rule above us and some space I guess what I would do probably in this case is just put a heading role in there when I do that probably here yeah so text heading rule and just then I just need to move it above the well if then below you see if this gets us anywhere okay there's just an extra space in there and I think we can fix that just by deleting the extra space so I'll see how to do this all right well I'm gonna have to add its source so basically it has an extra paragraph in there for some reason I'm just going to remove it this is probably something else I can fix by modifying the settings in this case I'm just going to remove it let's see that gets us nice it's perfect so except for the carousel at the top which we'll do later we've laid out all the content for this page according to the template that we started with and that's fantastic we are going to stop here for this screencast in later screencasts will complete the carousel will add some plugins we'll even add some applications to this to make things even easier and make more sense but right now you can see how quick it was for us to take an existing template with some content and duplicate it in a CMS fashion rather than static HTML fashion using Django CMS see you next time

Channel: django CMS

Views: 141,741

Rating: 4.7015543 out of 5

Keywords: django CMS, Modern Business, Bootstrap 3, templates, plugins, CKEditor

Id: NbsRVfLCE1U

Length: 82min 39sec (4959 seconds)

Published: Mon Feb 29 2016