Build A CMS Admin Bootstrap Theme From Scratch

hey guys in this video we're going to build a custom admin theme using bootstrap okay so this would be something that you'd have for CMS a content management system to manage your website pages and blog posts things like that all right now of course this is just the front end I guess it's the front end of the back end it's just the UI we're not going to have any functionality we're not going to use a back-end server side language or anything we're just creating the UI maybe somewhere down the road we can add some back-end functionality to it but for now it's just a UI video all right to help people learn bootstrap mostly beginners I just released a crash course a beginner's crash course on bootstrap and this is kind of a follow up to that so we can take those skills and create something with them all right and for you back-end developers don't worry we're going to get back to you no no js' and other back-end programming languages and step away from the UI for a little while but I do want I just wanted to get some beginner videos and some front-end developer videos out there all right so this is what we'll be building it's not the best looking dashboard you've ever seen but I think that it's a good example for for beginners to get into bootstrap so let's start at the top here we have a navbar and there's going to be four main parts to this theme we have the dashboard pages posts and users okay over here we have just a welcome message and then a log out now if I click logout it'll actually take us to a log in HTML which is a basic login page that will create alright and obviously there's no back-end functionality but when we click log in it just redirects us back to the dashboard okay so under that we have this heading area create content is a drop-down where we can go to add page add post add user which we'll get to those pages in a minute then we have a breadcrumb here then we have a we're using the grid system for a sidebar and then the main area on the sidebar we just have another a list group for the pages post users and we just have we have some icons some bootstrap glyphicon x' now when I build front ends I and I use icons I like to use font awesome but I didn't want to use any extra library so we just stuck with the bootstrap icons alright and these are also also have some badges here to tell us you know the number of users and posts and so on and then here we just have some progress bars for the the hosting the disk space used in the bandwidth used on this side we have an overview with some wells for users pages posts and visits okay so we're using icons here as well and just tells us the number of each resource and then we just have the latest users that have registered to the site in the table with the name email and joined date and then just a simple footer so pretty simple let's click on pages okay so this we just have basically have a table here tells us the title of the page whether it's published or not okay we have using an icon here edit and delete buttons and we have a filter our search bar here as well and like I said later on down the road we may add some functionality to this and be able to actually filter through and all that stuff alright posts pretty much the same thing except their posts and then users same thing okay so those are pretty similar pages let's see so create content if I go to add page we're actually using a modal for this I think that it looks pretty nice and pop up with the title notice that the body we act we're actually using an editor here WYSIWYG editor this is the CK editor and it's really easy to implement and we're just including a CDN and then just adding a little bit of JavaScript alright so we have a professional-looking editor published checkbox and then some meta tags and description boxes alright the form actually isn't going to do anything if you submit it again it's just the UI now I didn't add an add post or add user because those are very similar and I don't want this to take too long so there are I did cut some corners and you guys can add that later on if you'd like I'm same thing with the edit page if we go to pages and click Edit it'll take us to a page like this which basically has the same the same UI as the modal the same fields and stuff already filled in now it's the same for any page that click I didn't create a separate one for each one it's all there all the about page all right and if we go to posts and we click Edit that's going to go to the same page the Edit dot HTML and again you guys can add that in later if you want separate edit pages for each for each resource alright so I believe that's it yeah so let's go ahead and get started what we're going to do is create I'm just going to create a folder on my desktop and we're going to call this admin strap underscore theme okay and we're going to create our index.html which is going to be the dashboard okay and we need to grab bootstrap I'm just going to download it download the compiled files so there's a million ways you can install bootstrap but I want to do the easiest just for um you know beginners hope that's not what I want this is actually what the final the final files will look like let's see what though alright see downloads where is it where is it go oh it's downloading to my desktop for some reason alright so let's grab the bootstrap files from the zip we just downloaded so bring those over alright and let's open up out I'm going to be using atom for my editor okay I'm just going to add that folder as a project see admin strap theme alright let's open up index.html okay let's go let's get started here now rather than type everything out we're going to do a little bit of copying and pasting just to kind of move along so what I'm going to do is go to get bootstrap comm and then get started and then let's click on examples and then we're going to grab this starter template right here which just has a navbar and we'll do a control you to look at the source and then I'm just going to grab everything here copy it and we're going to paste it in index okay and we're just going to go through and just get rid of things that we don't need alright so we want this stuff the doctype I'm going to get rid of let's see let's get rid of this comment we'll get rid of the description the icon I don't need that stuff alright the title let's change that to admin area I will say admin area and then dashboard okay now for linking the bootstrap CSS let's see we don't need the dist it's going to basically just be in a CSS folder alright and then we can get rid of this stuff I don't need the ie10 viewport hacker all that stuff so let's get rid of this okay I want this to be as simple as possible alright so let's see the navbar we're going to leave that let's see we have a container here let's you know what let's just get rid of this for now just want the navbar and then for the JavaScript okay we're linking to jQuery here which we want to keep we I don't want this right here okay we're just going to use that Google CDN for jQuery and then here let's fix this path it's just going to be j/s slash bootstrap minjae s and we'll get rid of this as well okay so really simple so let's go ahead and save that and let's open up let's open that up Chrome and there we go so now we have a navbar alright now there's a couple things we want to do here navbar fixed top I don't want this class I don't want it fixed to the top we're going to change this project name to admin strap okay and let's see for the links we have the home let's change home to dashboard and then we're going to change this to index dot HTML okay we'll leave it active and then this is going to be pages which will go to pages dot HTML this will be posts and then we're just going to have users okay and then on the other side we want that welcome and that logout link so what I'll do is copy this ul go right under it paste that in and then we just want to add the class navbar right okay and then this will be that welcome so it'll say welcome and obviously you can put your own name get rid of the active class okay and that's just that's just going to go nowhere I mean you can make an account page I guess or profile page if you want and then this one is going to be the log out and that's going to go to login dot HTML okay and then we can get rid of these all right so let's take a look at that okay good [Music] now this navbar is going to be smaller than usual so we need to add some CSS so we're going to create a custom style sheet and while we're in here the CSS folder let's get rid of some of this we really don't need so let's see all we need is bootstrap mndot CSS okay so delete everything else and then we're just going to create a style dot CSS okay that'll be where we put all of our custom styles in the j/s folder let's also get rid of bootstrap Jas and NPM Jas clean it up a little bit alright so in the style let's first of all add the body is going to have a really light gray background so f4 three times now for the navbar you can do this different ways to you know to make it smaller what I do is take navbar - nav and then we want let's see we're going to add a minimum height of 33 pixels and we want to make this important so it overrides anything else all right and then we'll add a margin bottom of zero and let's also get rid of the radius we don't want rounded corners so we're going to set that to zero okay and then we want again navbar nav and then we want in the LI and then in the a tag and then also the nav bar brand which is where the logo is okay we want to set the padding here we're going to set padding top to six pixels and let's make that important okay that just overrides anything else and then padding bottom is going to be zero all right and then let's set the height we'll set the height to thirty three pixels all right so let's take a look at that hope we didn't link the stylesheet so let's go ahead and put this make sure you put it below the bootstrap so that it takes priority okay let's see oh you know what this this should just be navbar there we go okay so now it's smaller than the usual navbar now as far as the colors we're actually going to use a website that will generate a color scheme for us so this is the URL right here it's work dot smart shell dot-com /t WBS color okay and let's see we where do I go here I forget select your colors oh you know what I'm not sure the exact colors I used it actually was the default when I came here last they must change this all right I don't want purple so let me just look real quick at what colors I was using here all right so the default background is this accident this right here okay and the active background is that okay that hexadecimal value right there and let's see the hover I don't want that to be purple so that's going to be that right there choose okay so that's good so what we'll do now is go down and it gives you the sass or less or whatever we just want the standard CSS and we're just going to grab this okay notice that it has the media query as well for smaller screen sizes so let's copy that and then we're going to go and paste that right here media queries I want to keep at the bottom so all of our other CSS will go above it and let's see what that looks like now notice that it's a four navbar default so let's save that and go back and we have now for our inverse we're just going to change that to default alright so let's see hopefully that works and there we go so now we have our reddish orangey color now I want to be able to apply this color to things like panels and other other areas so we're going to create a class okay we're going to create a class called main color dash PG okay and then we're going to put let's see this background color here and the border color okay and let's just make this important and then we also want to just make the color white alright so now we have that class that we can apply to other elements as well okay so now that the navbar is done let's go back and we'll create the header so we're going to use a header tag and I'm going to give this an ID of header as well okay and let's put in a container here because we want everything pushed to the middle okay excuse me now we're going to use the grid system here so let's put a row and in that row we're going to have two columns I'm going to do call MD 10k 110 column and also call MD - all right so in the ten column we're going to have the the heading so that'll be an h1 and let's say dashboard and I'm also going to put some small tags for some subtext so just say manage your site okay so let's save that now I want to have an icon here a dashboard icon so let's go to get bootstrap and we'll go to components and glyphicon x' and then I want the gear which is right here it's CEO G now when we want to use an eye on we want to just put it in a span tag like this so let's copy that and we're going to put this make sure it's inside the h1 and make sure there's a space after it and then we're going to change this to see og okay save that and there we go so now we have our dashboard icon now on the other side we're going to have that create content drop-down so let's go to get bootstrap and go to dropdowns and we're going to grab this right here save us some time and we're going to paste that right in there alright and let's change this text right here to create content and let's see as far as the links we're going to have add page and post add user okay I can get rid of these now add page is going to be a modal and I'm not going to do that just yet so we're going to just leave it as is for now let's go ahead and save that and check it out okay so now we have our drop-down and as far as the header that's that's good for the mock-up now we're going to have to style it a little bit so let's go to style.css and let's let's put a comment in here we'll just say Heather should probably comment up here to the navbar here we'll just say custom okay so for the header remember it has an ID of header and we're going to give it a background of 3 3 3 3 3 3 and that's it I'm almost a black I really dark grey so we need to make the color of the text white ok let's give it a padding bottom of 10 pixels and let's do margin bottom let's do 15 now for the drop down let's see where is it right here div class drop down let's also add a class of create and in here we're going to say header create and we just want to move that down a little so let's say padding top 20 pixels ok let's reload that and there we go ok it looks pretty good so the next thing we're going to do is the bread crumb which is really easy we're going to go under the header I'm going to use a html5 section tag for this we'll say I D bread crumb and let's see so this is really easy we're going to put our container and it's going to actually be an au l and ordered list tag with the class of bread crumb and we're just going to have one li here with the class of active and it's going to say dashboard ok let's save that alright now I'm just going to add a little bit of styling here basically just a background so let's go to our style okay you don't have to comment everything but it is good practice alright so bread crumb we're going to give that a background of let's see see see that's six alright and let's give it a color of really dark gray okay and then for the links oops so bread crumb a the links we want that same dark color alright let's take a look at that and there we go so the bread crumbs done now we're going to move on to the main area so that's going to be in a section as well I like to break everything up into sections we're going to give it an idea of main okay and of course we need a container and let's say we're going to use a grid here as well so we need a row class okay and we're going to have this is going to be that the area with the boxes so actually no it's not not yet this is going to be the sidebar in the main column so let's do div class which div class and we'll say call MD three for the sidebar and div class call MD what do we want nine yeah nine okay and so that'll be the main area so start with the sidebar we're going to have a list group so for a list group let's see let's go to get bootstrap go to list group and we don't want this one we want we want the one with the links so we can just copy this and paste that right in there tab that over and let's say for the active one and that's going to be for the dashboard okay then we have pages posts and users get rid of that one and then let's do the actual links this will be index.html this will be pages posts not HTML and users dot HTML all right let's take a look at that and cry now obviously we don't want this to be blue that's pretty ugly that doesn't match so what we're going to do is we're going to add that custom class we created onto this active alright so we want to say main color BG and then reload and now it matches okay now we also want to have icons here and badges so let's put the icons in I'm going to just grab let's see where's that icon this span right here copy that and go ahead and put this right here it shows a space after it and that's going to be the co G we can leave that for pages let's paste that in and we're going to change co g to let's see what is it list - alt alright font awesome has much better icons but like I said I didn't want to use an extra library for posts let's paste that in and we're going to use pencil for users we're going to use I think it's just a user so let's take a look at that okay so now we have our icons now for the badges we're going to put that after let's see after the text dashboard doesn't get one so after pages let's put in a span the class of badge okay and let's say we have 12 pages let's make sure that looks all right yep so now we'll copy that span put one after posts and we'll change that to 33 users I'm going to stay 203 and I don't know where I got those numbers all right so that is our side menu now under that we're going to have our progress bars for the disk space and bandwidth so let's go directly under the list group and this is going to be in a well okay well is just that gray background with a border and some padding now for the progress bar let's go ahead and grab that so progress bars we want the one with the text inside of it so we're just going to grab this okay paste that right in there alright now let's see so we will just leave that at 60% so that's going to be the disk space so let's put an H 4 right above it and we'll say disk space used alright and let's see we're going to copy that progress we're going to put another one right underneath let's put an H form will say bandwidth used and paste that in alright now this one I'm going to actually change to 40% so let's change that and change that and that ok save it I'm just going to close that one up ok now by default it's blue and we don't want that so what we're going to do is go to our style and let's put a comment and let's do dot progress bar okay let's do background I'm going to make it that black dot gray color and the text has to be white okay so our sidebar is now done so now we can move on to the main column so we want to be in this call md9 now we're going to put every put the boxes in a panel so let's go back to our documentation and click on panels and we want this right here okay with a heading so we're going to grab this and go ahead and paste that in okay so let's see what that looks like all right now for the panel I want the heading to have this same color here remember we have that class we can use so we want to put that on the panel heading that's going to be main color BG and as simple as that changes the color now that text should be white let's see so let's see maybe we need to put an important on here as well there we go okay so in the panel let's first of all change this title will say website overview and we're going to have in the body here we're going to have four three column divs okay so let's say div class call MD three and they're all going to be pretty similar so I'm just going to do this first one and then we'll copy it say div class and it's going to be a well all right now you want to put the wet the div the well div inside of the column you don't want to just add it to this because then there'll be no space in between okay you want that padding so on this well let's also actually I don't think we need to add any more classes there let's put in our h2 and in this h2 we'll have the icon this is going to be for users so let's see let's grab this span right here this is the icon for the user copy that and we're going to put that right inside the h2 all right and then let's see we're going to put the number of users which is 203 and then underneath the h2 we'll put an h4 and just say users okay so then what we'll do is just copy the call md3 and we'll paste that in three more times okay so if we take a look at that good now I'm actually going to add a class to the well because I want to Center it and stuff so let's just say - - box ok we'll add that to all of the wells okay and then we're going to change the content this is going to be for pages so pages had the icon list alt and pages we have I think twelve and then we just want to change this text okay this next one will be posts which have what did that have pencil for the class for the icon 33 posts and then we'll change this text okay and then we had visitors so visitors had for the icon stats and for visitors let's say twelve thousand three hundred and thirty four okay we'll just change that save it okay now I want to Center this content so what we're going to do is go to let's see I'm going to go to our style sheet and we have a class called - box and just going to text a line text-align:center and there we go so that takes care of that now the next thing we're going to do is the users down below the latest users which is going to be a table and it's going to be inside of a panel so let's grab that panel code again and we want to make sure we put this in the right place which is going to be under the first panel so that starts here and ends here okay and we should probably put a comment up here let's put just say website overview alright so latest users let's paste in that panel okay now in the body is where we're going to put our table now I'm going to paste the table in just to save some time okay so paste that in now table by default is going to look pretty ugly so all we need to do is add a couple classes to our table tag we want a table we want table striped and let's also do table hover and there we go it's as easy as that so our dashboard is pretty much complete all we need to do is add the modal for the add page all right now what we'll do let's see let's go up to our where our drop-down is which is right here and what we want to do is on the a tag we're going to put type equals button okay we're going to we're going to get rid of the a traffic completely and say data toggle and set that to modal okay and then data-target and that's going to target the ID of the modal okay which we're going to call ad page all right now we need to create that the modal content we're going to put that down at the bottom okay it's not going to show unless you actually click to open the modal so let's put a comment here for our modal's and this one will be the add page modal and like I said that's the only one I'm going to do but if you guys want to do the ad post and add users that's absolutely fine so what I'm going to do is go to get bootstrap and we're going to have to go to the JavaScript section and modal okay so we have let's see this right here what we're going to do is we don't need this this is what we just did the data toggle the data target we're going to grab this and put that there now the ID we need to change that to add page all right and then let's just test it out so we'll save it and it should open okay good so now we just need to basically edit the content all right so let's let's go to the right here modal title and we're going to change that to add page all right and in the body you are going to have a form now I want to save some time so I'm going to pick I'm going to paste this in now the form tags basically the buttons down here in the footer I want those to be inside of the form tags so we're going to put the first one right below modal content right here and then the last one is going to be right here okay that way that the buttons are within the forum and then in the body I'm going to paste this in so I paste it in this right here let's see that ends there yeah so from here to here you want to just put that in so basically we have a form group label is that we have the page title with an input we have the page body with a text area a checkbox for published and then our meta tags and meta description alright so in the footer the Save Changes we just want to change the type of that to submit okay and that should be good so let's save it and now we can say add page now we have our form now it's time to implement the editor the CK editor which is actually really easy so what we need to do is get the the link for the CDN so let me just search for that so you've this is it yep so this tells us how to implement it we're going to grab this script tag and we're going to put that in the head okay I'm just going to add right here HTTP colon okay and then all we have to do is we're going to add a name attribute to our text area where we want to implement the editor okay which is going to be a page body it's going to be right here oh I already have it they already have that okay so make sure you have that and then all we have to do is add this script tag with this one line of code at the bottom okay we're going to put that right there and that should be it okay this is so easy to implement so save it go back reload and let's go add page and now we have an editor okay now I also forgot to mention this is completely responsive if we go down to size of a mobile device which is probably right there okay click on that you can see we get the whole menu we have our create content we click Add page you can see the modal fits right in there okay we have our list group the progress bars overview and users oh one thing we forgot was the footer which is really simple so let's put that down at the bottom here okay let's just give that an ID of footer alright and then inside the footer all we're going to have is one second here all we're going to have power graph and we're going to say copyright admin strap then we're going to put an % copy semicolon 2017 all right I actually want to put this above the modal the modal should be at the bottom so let's just cut that and paste that here alright and then as far as the styling that's going to be very simple we're going to have background dark gray color white text-align:center [Music] padding:30px I would say 90% of this of this site now all we need to do is do the pages post users and the login alright so let's go ahead and add the pages we need so new file pages dot HTML post dot HTML users log in and edit okay so let's go back to our editor and let's open up pages HTML and then what we're going to do is copy everything that's in the index and paste that in alright and then let's go to the top and just kind of start to change some stuff so admin area will change this right here the title to pages navbar all we want to change here is the active class we're going to take that off that list item and put it on the pages okay in the header we're going to change the title right here will save pages and then let's just say manage site pages ok drop-down that's all going to stay the same for the breadcrumb what we'll do is change this active to pages but then we also want to link to the dashboard above it okay just like that and then in the main section we're going to have we're going to leave the sidebar alright but let's go down to here where we have the column d9 and we're going to change the panel title to pages and then let's clear out everything that's in the panel body okay so everything inside here okay latest users we're going to get rid of that whole section which ends right there alright and let's save that and see what that looks like so if we go to pages good that's what it should look like so in the pages we want first of all we want the filter so I'm just going to paste this in right in the pic panel body we're going to just put a row and then we're going to put a twelve column div okay which goes all the way across and then just an input for filter pages and then under that we'll have our table which I'm going to paste in okay this is going to go directly below the row div just straighten that out okay so paste that in and let me just highlight what I pasted it in so this table class of table table striped table hover we have our headings title published created and then just an empty one for the buttons okay so in our columns we have the page title we have whether it's published or not width which is an icon okay which is either going to be okay for a check or remove for an X then we just have the date create date and then our buttons we have an edit button it's actually a link that's formatted as a button button default and then the delete button has button danger which makes it red alright and that should be it so let's save it reload and let's put a line break below the input so let's see right here we'll put a line break okay so there's our pages and notice that the edit button goes to edit dot HTML the delete button goes to nowhere okay because we're not we don't have that functionality so the posts and the users are pretty much the same thing so we're going to copy what we have in pages everything and then go to posts paste that in and all we really have to do is we'll change the title we're going to change the active class in the nav bar take it off that and put it here okay we're going to change the title that'll be posts I'll say manage blog posts we're going to change the breadcrumb just to say post right there that's all the same let's see so for the table what I'm going to do is just paste in I'm going to overwrite this table with the post table okay so I'll just highlight just highlight the table and I'm going to paste that in and basically the same thing I just changed up the titles okay let's change this to filter posts and that should be good so we'll save it and now we go to posts okay we do have to change this right here the panel heading and that's good so now for the users same same idea let's copy everything we have in pages and go to users paste that in okay I'm going to change the title I'm going to remove the active class put it on this one okay let's see the title right here manage site users let's see the breadcrumb panel title okay we'll say filter users and for the table I'm going to go ahead and do the same thing pace that end so we have the name the email the joined and a blank for the buttons okay the Edit it'll go edit dot HTML as well save and go to users and good so we have all these pages done the last things we need to do is the login page and then the edit page and we should be all set so let's do the Edit first we're going to go to our edit HTML and I'm going to actually copy pages again it's a good starting point alright so let's see copy that and then go back to edit paste that in okay let's just change this title to edit page now as far as the active class from the menu I'm just going to remove it all okay we don't want it at all then for this let's see say edit page and for the small we could have the name of the page which in this case would be about okay now for the breadcrumb say edit page for the active and then we're also going to include after the dashboard a link to go back to pages okay let's go down leave the sidebar alone now in the main panel here let's change the title to edit page and then I'm going to get rid of everything in the panel body so the table and the filter input alright so we'll save that and let's go to pages and then edit all right now we're basically going to have the same thing that's in the modal so what we can do is go down to the modal and let's grab we're not going to want the modal header and all that so let's grab everything in the modal body so the form group the page title body all these fields down to here okay and then we're going to copy that we'll go back to or we'll go back up and let's just stick in form tags and then we'll paste that in alright so save that and then let's reload edit HTML and there we go okay we're just going to need a submit button so let's see go right here input type equals submit give it a class of BTN BTN default say submit oops it's an input so it needs of value I'll say add page or just submit okay alright so there's our edit page now we're going to want some values because this is an edit so let's see in the title let's say value equals about page body inside the text area let's put some sample content Adam has a plug-in where we can just sale arm and tab and that'll add in a bunch of sample content alright published let's just put checked and let's see for tags save value tag one tag - and then description save value and that will just copy some of this paste that in alright so now all the fields are filled in that's our edit page last thing we want to do is our login so let's see we're going to copy I guess we'll copy pages again and then go into login HTML okay let's change up the title and let's go ahead and change this will say admin area account login okay now for the navbar I do want the nav bar but we're not going to have any links available so get rid of both you ELLs okay and then for the header we're just going to have one column I'm going to get rid of this whole column D - okay and I'm going to change this to a twelve column we're not going to have an icon we'll get rid of this span and let's just say right here admin area and we'll say account login alright and then I just want this centered so we'll give this h1 a class of text Center okay we're not going to need a breadcrumb get rid of that and let's see we're not going to need we're not going to need a sidebar so in the main section we have this div class call md3 let's get rid of that whole thing and then inside this column d9 we're going to change that to column D for all right and then everything in there we can get rid of oops okay and we can also get rid of the modal stuff all right so let's see what that looks like login HTML should look like that let's put a space right here and then all we need to do is put in our form inside the column d4 so I'm actually going to paste that in okay so form with the idea of login action is index.html we're putting it in a class of well we have a form group with an email address a form group of the password and a submit okay submit button has a class of button block as well so let's take a look at that all right now we want this to be in the middle so but we still want it to be just a four column so what we can do is set an offset okay so we want to move it over four columns so we'll say call MD offset four okay so now if we reload now it's in the middle all right and then I just want to push this down a little bit so it had this form has an ID of login so let's go ahead and just say login margin-top 30 pixels and there we go so now we have our login page okay so that's it we created a an admin theme for a CMS for a website back-end whatever you want to call it hopefully you guys enjoyed this like I said maybe somewhere along the line will add some back-end functionality with PHP or something like that but don't don't hold me to that alright so thanks for watching please subscribe please leave a like leave a dislike if you didn't like it and I will see you next time

Channel: Traversy Media

Views: 497,191

Keywords: bootstrap, bootstrap theme, bootstrap admin theme, cms admin, cms, admin UI

Id: pXbEcGUtHgo

Length: 60min 47sec (3647 seconds)

Published: Tue Jan 03 2017