 Welcome! This video is all about Drupal and what we're going to do is compress a five-hour job down into as short a timer possible. What I've done is I've got a video taken in a number of separate sessions and I've doubled the speed. So I'm not of that faster typist or that faster mover of the mouse. Just bear in mind I'm compressing this down so that it's into a watchable consumable digestible piece. Now what I'm doing here is I'm just going to spend a little bit of time talking about the specification of the the application that we're building in Drupal here and I'm doing this using a drawing tool called draw.io. You can see the URL at the top and I'm using the UML tool set to describe a few different diagrams. This one specifically being a use case diagram and I'm listing out my actors. So I've got a person who does surveys. I've got a person who creates a batch of cupcakes as it turns out. So we're going to create a cupcake survey system and a baker is going to be involved in baking the cupcakes obviously and submitting those cupcakes for review. But the baker themselves can't allow that batch to be approved for surveying until the chef has tried it. The chef can also submit batches for survey but a baker can bake and request a survey but a chef has to approve that. And finally both those two users the baker and the chef both have the dubious honor of being able to look at the surveys that were submitted by our surveyor. So in theory what we've got are some customers. So those customers are involved in obviously eating the product but also they are invited to partake in some kind of a feedback of the qualities of that product. And I'm making it crystal clear here which actors have access over which use cases. So for example a baker shouldn't necessarily do surveys and a chef shouldn't do surveys. Even though as far as Drupal is concerned those surveys will be submitted anonymously. So anonymous users are allowed to create a special survey. And there I'm looking to just enclose our use case diagram in some kind of a box or frame and that frame will get a title. So the title of our system is a cupcake survey system and CSS for short. So that's the end of the first diagram and it's a 10,000 foot view of the kind of feature sets that we want to include in our site. The second diagram when I'm taking a screenshot obviously I want to save that for reference and I'll include that in the Drupal application and we'll just call that CSS use case. But we want to move on to the next stage and that is to describe the data that will be held in our system. So another UML diagram that's very handy is the class diagram. Now of course Drupal is an object orientated system but we're not going to do any coding. But it might be useful just to formalize the kinds of information that our information system is going to store and represent to users. So there are two objects or two types of information and they are related. There's a core relationship between them. The batch describes the cupcake and all its features and the survey is going to be on one of the batches that has been approved. So I'm just listing all of the core features of let's say a cupcake. So when it was baked, the superlatives around what that cupcake is all about, including images and any HTML that you want to embed into that text field. Paper color icing flavor and sponge flavor are both determining factors and that will help the surveyor identify which cupcake they just ate against a list of batches that had already been approved for surveying. So we're going to take four pieces of statistical evidence and one qualitative piece of evidence and I'm not sure whether I've even included the string that represents comments. So I might have overlooked that but you can see the survey has a time that took place and the kind of data that that's occurred. And what I'm attempting to do now is to draw a little line between those two because the first option on survey is the batch choice of object batch. So I'm trying to use UML diagrammatic tools which are object orientated things like Java and C++ programmers tend to use UML quite heavily. And I'm shanghying that into sort of formalizing the meaning of our system even though we technically won't be using methods just the two objects with their data types. The third is another UML diagram which is called the interaction diagram and I'm going to list out the four objects that represent the pieces of data as they flow through our system and then describe sequentially the kinds of flows that occur during the life cycle of those objects. So the first two objects will be the survey and the second two, sorry, the first two objects will be the batches and you'll notice I've already made a mistake. I'm about to fall into the same trap that I've just described. And the baker and the chef are involved in the creation of the object called batch. But that batch to go from draft to published requires a chef. And you can see here I'm incorrectly using the word survey. I sort of resolve that problem in my head as I go through the creation of this interaction diagram. So the flow vertically from top to bottom is time. So over time the object moves from draft to published. And there are actors that are involved in moving that object through its life cycle. The second two objects on the right hand side represent the survey. And the surveys are done on batches. So here I am fixing my little faux pas. So the survey never gets published. That is it's never open to the public. It's one of those things that only our chef and our baker are going to use to continually improve their product. And you'll notice that I'm going to draw some more lines to the right. So to the right are the life cycle of the objects. And vertically down is the time span. And you'll notice that I'll have an arrow pointing back that represents once the surveys are in the chef and the baker will benefit from that data. So there is definitely a feature that needs to be thought about. So I do the interaction diagram when it's not clear in the model. But that is the use case diagram or the class diagram about the way in which the site functions. And this makes it explicit as to really what's going on with our system. And that's sort of the end of the planning stage. So I'm going to sort of export this file out and include it in my planning document. I have taken screenshots and whatever else so that it's all pretty clear as to... Excuse me. If anyone else takes up the job of implementing this site, they're never in any doubt as to exactly what the project entails. In fact, you could take some of these diagrams directly back to the client to confirm the feature set of the site and the processes by which we would go about its implementation. So what I'm interested in doing now that the diagrams have been created is to actually look at the finished site. So in hindsight we still have a number of an hour and a half together at least. We're 10 minutes into the video and I'd like to take you through what is the finished site and just go through that life cycle to explain to you what's happening with the site. So I've logged in as Baker and I can list the surveys that are in. I can list all of the cupcakes that have been published and I can create my own cupcake batch. And that is going to be an item that won't appear on the list of possible surveyed cupcakes until the chef has approved it. So I'm going through and instead of actually baking a cupcake and taking a photo of it, I'm going to use the powers of the internet to pretend. So I've taken an image and I'm going to just drop that straight into our site and that can be the one item that was created. So it will be a citrus flavoured cupcake with a yellow paper. So you see there it's in its unpublished state. It's not in the published state and we want to get it from its unpublished to its published. The Baker can make alterations or delete that but they won't bring that to survey until the chef has logged in and had a look. So you can see here there is no lime, no lemon or citrus cupcake. So now that I've logged in you can see here there's my opportunity to move the moderation state or the workflow from its unpublished to its published state. So now you can see a history of the revisions that have been made on that piece of content and now it has moved from the unpublished to the published state and that seems to be the resolution. Now I've made a configuration error. That lemon lime does not appear in survey because I've not made a configuration correctly. I think I need to quickly log in as admin and go into the views section and actually change the caching options in views because if something changes in views we don't want the cached version. So going back to our logged out state you can see now that my lemon lime bliss is on the list and I can choose from the statistical ratings and then leave some kind of comment at the end. As an anonymous user I can't see the surveys that have come in. I'll need to log in as either a cook or a chef and then you'll see the surveys that have appeared. This is a rather simple table format. We could probably get some kind of graphing solution together that would show that information but at this stage we're getting the information system together and this is the completed application to take to the client. So now we're moving to the beginning of the process of implementation. So 13 minutes into the video I've explained the specification. I've shown you what our finished solution looks like and now I'm going to install the software from scratch. So essentially I'm downloading a copy of Drupal the current 8 tree version 8 and I'm pulling down probably the 10 or 11 most popular plugins or modules that extend the functionality of Drupal. I didn't use any of them in the creating of the site except for some admin modules. So you may see me download and install these modules but they weren't technically used. The two modules that are very useful when you're working with a site is the admin toolbar. So we've just pulled down the admin. We're racing through development and entity reference and a few developer friendly and user layout friendly modules but most of those are useful to look at and get an idea for the kinds of things that Drupal will be in the future. One of the admin toolbars that I've found useful is to have a spotlight like interface which is the coffee module. So what I'm doing here is I'm just going to go through and pull, extract out and install Drupal into the public HTML folder and prove out that URL exists. So we have the beginnings of our installation. We've got to change some of the permissions on the on the server that we're in at the moment. Now I've got a version of Apache and my SQL running on this local host. The machine is pretty quick. So not only is it fast at one one speed but when we double the speed in what's happening here things happen a little bit quicker. What I'm doing is I'm changing the permissions in the writable areas of the system. So I've got to create a settings folder, premise that settings folder in a way that the Drupal install will work. Another thing that is a bit unusual about Linux generally is that it has a further security level beyond just file permissions and this is called SE or security enhanced Linux. And it's a put a watch on Apache or HTTPD in this case writing to file system. So I've got to tell the kernel of the operating system that yes it's okay to write these files. Apache is allowed. So not only do we have to change the permission of the folder in a traditional sense but we also have to tell the server in a security enhanced way. So I've pasted in security level complaints and I'm just checking that the information that we've unzipped is in the right place. And I think the second line which is rest door con which is to enable that permission. So I'll just place that straight in hit the enter key and we should now clear the error and now we're able to put in the database. Before we actually name that database we should create one here in PHP My Admin. It's able to be done on the command line but sometimes PHP My Admin's quicker. So Drupal is the database name root is the username and there is no password. So in this local host environment we're free of some of the security constraints. Well when we send this up to a server we'll have to have more secure passwords. So now that I've got the database created I'm creating the first user of the system so the admin user and I'm defining their location and I'm telling the system not to check for updates. So this now is Drupal installed writ large and we have all of the settings of version 8 to x installed but what I'm doing is I'm installing the admin toolbar and I need to enable the admin toolbar and the search utility coffee and that will then allow me to have a slightly more advanced drop-down menu system that I can navigate quicker to the exact place in the admin area. The link in the black band at the top go to shows a little text field where you can start typing in things. So if you're looking for content types or creating new pages then by all means. So the first thing I'm going to do is create the welcome page which is the home page and I want to set it as the home page. So I'll go to basic site settings and change from a view to a static page. So in that respect what we've done there is just defined the home page to be a specific place. So I've got two browser windows open now I've got one where I'm authenticated as admin and I've got another window where I'm unauthenticated and I like to have the two windows open at the same time so that I can see both views both the the end user view and that's usually sort of a bit of a clean room view. I don't have any extra complexities around the admin toolbar itself. So I'm just picking up the last couple bits of modules so I need Bootstrap which is a theme and the Bootstrap theme is a minimalist developer theme and it uses the the Bootstrap layout engine. Now I can't install it directly I need to actually create a sub theme and that's what I'm doing here is I'm going to the command line and I'm going to copy out a folder inside the Bootstrap theme which is a starter kit and that starter kit is a a sub section of the entire site so or the theme itself. So I can upgrade the theme but all my configurations all of my customizations will be in a separate folder and and configured in a separate way and I'm just going to follow verbatim the six steps that you see here on the screen and I'll highlight them just so that as I work through them I know that they're done. So I've made the starter kit theme in a new folder but now I've got to rename files and directories so anything with the capital T H E M E N A M E I've got to rename to my new folder which my new file name which will be something like cupcake underscore BS so which is short for Bootstrap not what you might think it is. So all of the files that I'm currently using that have theme name in them I'm just moving to a new place. I'm also going to have to edit some of these files just to ensure that those new directory folder names and file names are enshrined in configuration also and what that does is it allows me to enable this sub theme directly in the user interface. So there's a few steps and it's important to read the read me because the theme contains a number of pieces it contains CSS which is obviously the first step you would go to if you were going to change the look and feel of a site but it also contains templates and those templates define the layout of pages where blocks will go and where photos are constructed and if you have to change something or you might want to add something to your site editing those templates will be necessary and it's necessary in this case to lay out the page in a more beautiful way and we'll get to that towards the end of the video where most of the last half hour of this video is dedicated just to hacking CSS and tweaking those templates so I do edit the main template and if you want to scrub all the way towards the last half hour and it's just CSS you want to check out then by all means but in the intervening time we're going to focus on on building the functionality and as we work through that functionality I'll slowly fix certain parts of the look and feel so you might find some intertwining layout issues that I uncover as I'm working through the functionality of the site so I'm just reading through all the little warnings and complaints and if I hit refresh now you should see that cupcake BS that I'm now installing as a core theme and if I hit the refresh key the whole site changes the whole theme has now been completely changed and I want to confirm in my mind that that theme not only has been enabled but also when I edit some of the CSS that will change also which it doesn't do without a couple of tweaks a couple of configurations so I'm madly hitting refresh here one trick is to hold down control shift refresh and that sometimes gets the browser to call the latest version so I'm just checking my CSS making sure that's not erroneous I'm opening up my developer toolbar checking that I've got my body laid out correctly but you can see here that new background still hasn't been allocated in the body selector so I've actually got to go back to the admin panel and actually change the configuration of Drupal itself so not only have I changed body but I've also changed the h1 the welcome there to an olive green just just to be 100% sure that when I do change my configurations that things will go good so if you ever look at development the first thing I want to do is turn off that aggregation so you don't want to aggregate that those are for speed related issues so once I've cleared the case and I've turned off aggregation my new CSS file is working fine so I've got that light blue and the olive green all working correctly so I should be able to start doing some continuous improvement as I work through the functionality of the site what you see because we're in Australia there's a obviously a date reconfiguration and if you're in Europe then there would be an issue with your configuration not Asia for that matter if because the default seems to be set to the United States with month day year so I'm going through all of the default date formats and just reverting them from month day year to day month year there's a whole lot of others but I'm hoping that those first three the defaults should suffice I do actually add another later on in the video to remove the hours and the minutes so there may there is some view situations where it may be necessary for you to change date format and then use your own customized format of date so this red area here shows all of the modules that I downloaded and I think I'll in turn I'll just extract them out into the Drupal environment and enable some of them so for example chaos tools and and path auto are quite handy for for extra features in in the site so what I'm going through now is I'm enabling some of the modules that are built in core modules and then some of the experiment modules experimental modules specifically the one that we're going to use will be workflows so that's the last one down the bottom that I'm just about to tick here if you're in a multi-language environment you might want to choose some of the multi-lingual modules but in this case I won't so I've yeah path auto is not too bad because you can set a friendly URL when you create your static pages so I'm just extracting out you can see here see tools tests token tests and they will all represent different pieces of modularity so path auto needed an extra module so I'm hitting the I'm hitting the the internet to find that one more module that I need which I think is actually a built-in module I'm not sure whether it's actually here some as downloadable one double check so path is installed see tools is missing and if I just update and then go down to path auto and splay that out that that seems to work so I should be able to and chaos tools and path auto should work fine so there is an error at the top that relates to security and and quite often when you have these installations eventually your site will realize that it's not the latest version and that's a whole other procedure to update your your Drupal site when it it falls behind in security updates and in a safe way of doing that as well so so I've just taken the site into maintenance mode I'm going to do a sort of a quick backup of the site just so that if anything goes really wrong in in starting my configuration I won't lose the work that I've done so far so it's a little bit like saving a word document or saving an Excel spreadsheet we're just going to quickly back it up and I'm looking at the error because it says trusted host settings there's a setting that you can change in settings.php to tell the Drupal system to only listen to domain requests on a certain domain so you don't want your site to pretend to be any other sites and this is to resolve a cross site scripting issue in fact this this will be broken when I change it from example.com to localhost so localhost is is the domain from which this site will be hosted in its development stages but if it's taken up onto the internet I'm going to have to change that settings file to make it work properly so all I'm doing is just cleaning out any errors that or any sort of gotcha errors that appear at the top of the of the admin panel which can just be a bit disconcerting when you see them so we've pretty much got our site set up we've got our theme we've got some modules now we can go into the process of creating some content now that content will need to be in certain specific formats so like we said in the in the planning we're going to have to create two new content types and those content types will be along the lines of a survey and a batch I'm sorry the MySQL dump file command that I've just executed was to back up the site so I've put the site into maintenance mode cleared the cases and I'm just quickly backing it up so that that I don't have any any boo-boos going forward in in my content creation in fact I can keep that to an you know be a little bit further ahead of of of installations in the future so what am I doing here I'm managing my blocks and blocks are a way of laying out certain pieces of content such as header and footer and sidebar and all I'm doing is I'm cleaning out pretty much the sidebar from the the environment and I'm dragging some of the materials or disabling some of the materials from from the site so the little piece of advertising that says Drupal I've pulled out I'm putting search right up the top into the navigation powered by Drupal can go and get lost and removed every time I remove something I realized that I hadn't saved the drags that I'm making so I can drag changes around but I have to remember to save them because they without saving they won't stay into the system so let's create our first content type so we're going to create a batch and a batch will be cupcakes that have been baked by a baker or a chef and we just need to have data going into those content types that are going to look like the pieces of data that we planned upon so for example I need the date that the cupcake was baked that's not the date this piece of content was created because that's a piece of metadata that that is created that is attached to this content when it's created so it might transpire that we made the cupcake late last night so we have to put yesterday down as as our our date baked and I'm making sure that the date baked is going to be you know a date and not a date time so we're only interested in the day that the cupcake was baked not um you know whether it was two in the afternoon or two in the morning so one thing about um Drupal that makes it pretty powerful is is that you can define workflows you can define the way in which data is created and transition from different states so I'm playing around with transitions and I'm just sort of describing two types of workflows and two different transitions in each one of the workflows that represent the way in which both surveys and batches are going to be handled so anyway I need to define in that content types configuration how moderation is handled so moderation and workflow are used interchangeably in in this site so I've defined the way in which that data will be moderated i.e the workflow from baker to chef i.e from a draft to a published state so what I'm doing here is I'm making sure that the content type has a couple of drop-down lists that represent the flavors of both the icing and the sponge and the this information is common between those two pieces of data so the flavor of the icing and the flavor of the sponge could be the same or they could be different but they're pulled from the same pick list so what we're doing here is we're creating a vocabulary or a taxonomy to store that information and we can then use that taxonomy throughout the content management system i.e different content types could have the same taxonomy and if I wanted to add an extra flavor I don't have to go to two content types or two fields to to change that taxonomy I can just go to that source configuration of taxonomy so I'm trying to think of all of the different flavors that we could go into a cupcake buying of course you know hot chili peppers or garlic and there's the list there of that taxonomy so I want to go back into my content types and add the field that uses the taxonomy so you can see that I'm renaming flavor to a more specific icing flavor and that icing flavor is going to have the taxonomy that was was created separate to to the the content type itself having all kinds of trouble spelling at the moment and there's the flavors choice of my taxonomy but I'm going to create two I'm going to create the sponge flavor and the icing flavor and hopefully I'll get that you out of there before I hit the submit button there we go um and and I'm going to use exactly the same taxonomy that I used for icing flavor and I need to tell it instead of order complete to pick from a total number of options so by default it's an order complete I type c for chocolate and chocolate comes up but instead I want to drop down list that that appears so I thought that a second taxonomy might be useful to describe the color of the paper that would be used in the cupcake again you know you you're probably making a little bit more work for yourself in the first instance to maybe save some work in the future so if you spend the time setting up taxonomies it might come back to you in in saved time when it comes to configuring more pieces of of the content management systems features against that core taxonomy so again I'm I'm not using flavors this time I'm using the paper color and changing order complete to a select list I can define layout that's one of the external modules or one of the plugin modules that I think is in the experimental area of Drupal itself and you can see here I am creating or just going through the throes of creating a piece of content that um that will contain the the information that I've configured so I'm dipping out to the internet and just grabbing the first cupcake that I see using my clipping tool or my select tool to mark key out a piece of a cupcake and just including it in this site itself so I can go to my pictures and add a cupcake and I need some alternative text and then saving it into the content so that doesn't really achieve an outcome um in terms of workflow because we haven't configured either the users or permissions or workflows properly yet I'm just proving out that the the site actually creates a content type and you know there that I've come to the realization that that particular date format system is not good enough because it's showing hours and minutes as a feature of the output so I'm dipping down to the date and time to create a new date format based on an existing one so I'll take the default short date and paste in everything except for that without any time so I end up with the default short date redefined to be super short and I should be able to then go into my configuration again and change date to no time have a look at that content and the time has taken always been taken away I don't like the lack of padding between the two columns so I've got an image on the left and and I think I've defined it to be on the left um so that would be float left so I've just added some padding around the image that might come back and bite me um if there are other images used on the site but for the moment we'll we'll uh we'll move forward with that so we've got a content type uh we've got uh taxonomy we've got a one piece of content based on that what I need to do now is to list all of the cupcake batches in a view and a view can be a query a query of the system to ask show me all of the that follow these criteria so this is the shortest sweetest happiest view that I've created which just says show me all of the cupcake batches now um I'm I'm trying to debug this at the moment because no batches came up and I'm wondering whether the workflow is at fault because the batch is in an unpublished state and by default the view is only going to show batches that have been published so there may be a shortcoming in the way I've set up my my um my workflow because there is no way in which I'm able to change that workflow from a draft to published so I'm going back to to check uh my survey approval process and I'm going to simplify things down such that there are only two states and I need to move from draft um to publish so I'm just well I think I'm going to delete them initially and simplify everything down so that I only have two states and I create new two new workflows so I want to move from draft to published as a workflow and that's pretty much it so now I should be able as admin anyway to change the workflow from draft to published so now I've have that piece of content published and you can see here in my view that content appears nicely now um I still haven't gone through the the permissions of that workflow obviously the admin that I'm using here has god mode um it's allowed to do anything but uh I'll need to sort of define uh chef's role in being able to take a piece of content from um draft to published now that I've created the view the view has a link the view has an address I can paste that in um I can define the title I forgot the uh prefixing slash there and you can see here it's now a link that can be clicked on in the in the main menu and I'm going to do that for a couple of views and a couple of ad content types so when I add a survey or when I add a batch I need a menu item for it when I list batches in draft or I list batches in published I need a link for that also so the menu system will be integral and I'm going to manually configure those uh as I see fit I'm having a bit of a scratch around looking at um what do you call it to fav icons I'm searching for the fav icon I've downloaded a cupcake at some point and I can't seem to locate it but I'll find it on another computer and go through the the installation there because these um fav icons are um you know indigenous to to Drupal itself and a fav icon if you don't know is that uh blue head that appears in the top of all of the tabs of that with my browser at the moment I've got a lovely little pixelized cupcake that I want to replace it with and the same will go with a SVG image that will replace the B the purple B in bootstrap for um for a cupcake we'll get that in eventually um so I'm having a fiddle with a new content type so we're working on the survey side of things now and and survey will consist mainly of of data statistical data from one to ten so one being the worst ten being the best so I'm going through the four different um features of um you know cupcake flavor cupcake presentation icing flavor overall taste and just defining a a a range from one to ten on on those those different statistical features and as I said before um if you're going to save these as as um numerals or numbers specifically um it then is possible for you to maybe graph out overall um uh answers and and get some statistically significant um information from uh from building the survey system itself so I'm going through each one of those four pasting in that one to ten list and um just labeling things uh so that they're they're clear for anyone else who might come along some of the information I'm putting in here might not be viewable by end users if you mouse over some of these you might see them as as mouse over uh information um in the forms as you fill them out um so I'm repasting in these dates so that I'm sorry these uh numbers so that we have um sort of a a clarity for the end users to know that one is poor and ten is fabulous just so that they're pretty clear on what that range is I don't want to try and sort of uh pre-suppose what people are going to put in but nonetheless uh it's useful to uh to tell the user what one is as opposed to what ten is I'm continuing to play with um uh what do you call it to workflows here because I know that um the the actual survey um is is never going to go into the published state so I'm going to enshrine that and enforce that by defining a workflow that ensures that that that content never gets published um it's a a cheaty way to ensure that that content never gets out to the rest of the world um there may be better ways um both in permissions um and you know maybe uh user roles but um uh we'll we'll just go straight up with with defining a workflow so um we pretty much have that content type done and I'm changing the um the layout of the look of the form just so that it it sort of scrubs up a little bit better and uh we make sure that the order of of information appearing both at form and at output um doesn't look so so ugly um and uh we have the comments at the end rather than the top and I'm making another view um so the the batch history um is is one view but we need another set of uh views which include showing the batches that are not published um we need a another view to create a a relationship between the survey and the um the batch itself so there will be a few other views to create we'll spend a bit more time in views as as time goes on but that survey content um is just being beautified a little bit and and cleaned up to make sure that um we we have navigation ability to the create survey the show batches the show surveys type pages so we're we're tending to grow out our um our uh our menus and you'll find that in certain situations those menus will not show if the user doesn't have permission to see them so you'll you'll find that I start playing with um content types so for example I'm going to be careful and and make sure that um the user has the ability to do things so the one piece of uh permission is to give anonymous users the right to put in a survey so there's that content type and I've submitted a survey and hopefully if I look at my my content I now have a new survey that's been created I'm just changing again the order of things and trying to push out the size but of course the um the bootstrap template won't let me do that um I've got to go in and sort of override some of the behaviors of um of the layout engine that that are squashing um my site's ability to change size of forms so I'm creating new users um or roles in this case I've got two roles a baker and a chef they'll both have the same user name so I'll create a test user called um chef and a test user called Baker but at this moment in time I'm going through and configuring their rights to access different content so the chef have obviously has a lot more rights over batch than does the baker so the baker can edit some of their own stuff but they certainly can't um can't delete or or bring some of that that content to published and there's another area for that under workflows or um yeah transitions that would that need to be handled um and it's the same with survey uh we don't want anyone to edit the survey in any way whatsoever we just want users to create or anonymous users to create new drafts so I'm creating my chef and I'm creating my uh baker uh and you'll note that down the bottom there I'm going to change the role so that that that particular user uh inhabits the role and I'm putting you know very insecure passwords in but that they just prove out a concept so I've got two users under the two new roles um and if I go incognito or use a completely new browser in this case so I've got a chrome on one end and firefox on the other I should log in as baker except this account baker doesn't seem to have the permission set correctly there is a missing submit button from the the user interface so I'm in firefox at the moment and I'm just having a look at the html css just to identify whether the form actually has a submit button in hidden hidden way um just to identify whether it's a styling issue or whether it's actually a configuration issue so I've gone back to the admin area and I'm double checking my permissions because um you know while the user may have the permissions to create a batch or edit a batch or delete a batch um that user can't bring um workflow into draft or published um and there is actually another area that relates to workflow further up that talks about um bringing the item from different states of of um of published publication so um you can see here there is a transition um permission that I need to set so um in order for the um the batch to actually be submitted I've got to be able to create a new draft so both baker and chef should be able to create a new draft but only um only chef is allowed to bring that um transition to to a published state so um there are others that are related to the survey that I'll need to configure later but I'm hoping that that particular um configuration change seems to work so I'm I'm double checking the um the actual workflow itself um to to see whether um there is a problem because there's two states as draft and published um and that's the state to bring the um item from draft to publish so what I'm going to do is is redefine that that workflow so that there is an approved state um and we can create a new draft specifically so I'm just checking through the different states um ensuring that I have the right um the right to types of state changes that are allowed to occur so um we can define these these two two areas more succinctly in in the workflow itself so um now I'm just double checking the permissions on that and making sure that the baker has the right uh permissions to move um between between published states um so I'll create a new survey transition both baker and chef should should get that um and uh yeah so I'm going to hit the save on that and hopefully when I refresh I I get the all importance of mitt button um so now I'm pretty confident I have that little green submit button down the bottom and I'm going to fill out the the details around uh a cupcake and I'll hit the net um just to grab another studio picture of a of a beautiful strawberry cupcake um get my trusty screenshot tool marquee a selection of a cupcake with a little bit of peppermint on the top and uh give it a name drop it in my images folder and then dutifully upload that using my uh firefox browser um that I happen to be logged in as um the baker so I'm allocating uh uh alt image aligning it to the left giving it some statistics but you'll notice that the strawberry cupcake is in an unpublished state baker uh has created it but baker can't um take that um unpublished document and go further so I'm opening incognito in chrome and I'm going to log in this chef and just check that workflow works but you can see I don't actually have a listing of all of the cupcakes that are in draft so I'm going to have to go back and create a view um that shows me all of the cupcakes that are in draft only so I'm creating a new page that represents all the batches that are in an unpublished state and of course um only um chefs and bakers will be able to see those um those drafts so they won't go to um uh they won't go to survey so I'm changing the query a little bit making sure that the query says that the published status is um equal oops what have I done yeah the published status will be draft so there's a strange little if statement that I have to find the next um step is to actually give it a menu so I'm proving out that it works um I have a URL unpublished batches I need to take that unpublished batch and make it into the menu but you can see now that the uh chef has access to unpublished um batches list they can change the the workflow so there's a workflow menu at the top of each one of those items so let's create the menu item and uh paste in the link so I'm gonna um yeah okay so draft batches appears in the menu system and I should as chef see all the draft batches okay so we've got uh pretty much the um the uh the permission once again um for that user to access all of the different batch types um so we're kind of wondering why there's a permission denied coming up uh it doesn't make sense off the top of my head um yeah there's a there's an up a couple of objects in the permissions table there that sort of um gives you a warning saying careful with this one it it seems to have too much power so you can give users the right to access all content it's like a little get out of jail free card but for some reason um the okay so the the baker doesn't have access to um you know let's that's rather consistent so um the baker shouldn't be able to access drafts that they don't have control over so um I'm I'm searching for a permission that doesn't exist um but what I'm interested in is getting the transition from unpublished to published um using um using the chef user so I might attempt to to log in again um you can see their anonymous can access draft batches that doesn't seem right so I'm changing the access permissions of the view itself so you can go into view and say look the person that's allowed to view this or the type of role that's allowed to view this is is restricted so um I noticed that anonymous users can see are the actual unpublished list the view but not actually the individual unpublished items so it may be important for me to just change the permissions of the view separate to the permissions of the of the individual objects um and you can you can go in and change it based on role so what I'm looking at here is is the permissions of the view that are um are related to content so um so you can see here there's there's sort of a a listing of all of the draft items um but no ability to see the actual content itself so I'm having a sort of a bit of a click around and and trying to get the permissions to work um that's a user that has no access whatsoever so we're having to look at the different um options for for batch and constantly sort of flying back to this this permissions area to just confirm that the different um settings that were were set for access to batch are set correctly um but when you find that we've talked about three things now we've talked about access permissions to the content itself access permissions to transition between different states of published or unpublished and also we can change permissions on the views themselves so that there's there's permission states all over the content management system it's not all a centrally located list like you see here um you do actually have to go around the different areas of of the content management system to manage its its different uh different view states um so I'm checking the the transition states to make sure that um all of the the different content types have have the right permissions but uh I'm probably going to swing back to views again and change views by role rather than by by content type um so this is the anonymous user completely anonymous they have no access there's a bit of a login giveaway in the top right hand corner there um and uh if you can see here I'm in a incognito but uh I have logged in as as a specific user so I'm having a look at some of the access to died errors the log files tend to give you a bit of an idea as to the kind of of failing that has occurred so you can get an idea for um the different people especially in production you can get an idea for the different people that have tried to sort of penetrate your side in different ways but logs can be useful from a debugging perspective um and that's under the uh report section of the of the content management system so just bear in mind that there's a number of ways of trying to debug not only is your observation in different incognito views useful but but also have a look at the um the logs that are generated um it can be useful to sort of dig in underneath the hood and have a look at the server log um so the mysql logs or the apache logs can give you some ideas to what's going on especially when when you're looking at 404 types or 500 types uh of error they can give you a bit bit of a better idea for what um what might be going on so i'm still sort of zeroing in on on the exact reason why i'm getting an access denied when i try to view uh a specific content and it is related to the the view area of of the site and we'll we'll get there so um i've kind of given up permissions and i want to push forward and and deal with um with a specific uh area of what makes a Drupal in my mind the um the best content management system for building information systems and that is to create a relationship between two different content because you have your um your uh batches which represent the uh the things that were baked but when you do a survey you're surveying on what you have to sort of define from a drop down list what survey or or what your what specific cupcake batch you're um you're surveying so i'm going in here and i'm creating a specific view called entity reference and an entity reference view is is a a special type of view which only uh shows um things in um other things so i'll explain when i manage the content type called survey but in this particular area i'm i'm just going to add up uh edit up the entity reference settings so that um i can filter only four cupcakes that are no older than four days so the individual shouldn't um do a survey on a one month old cupcake or uh um so there is a sort of a uh a definite lifespan to the um the cupcake that they are going to uh survey so what i'm saying here is i'm saying i i don't want to list anything that's any uh greater than than minus five days so anything that's that's minus five days or or less is okay so if it's more than five days then that means that the cupcakes too moldy and can't be um can't be surveyed upon so i'm going to dip down here and i'm going to look for a reference i'm going to reference a piece of content um and that content is is going to be um from from a different content type so i'm only going to limit the content to one item so i don't want the user to sort of enter in two or three and here's where i change the entity reference so i'm going to filter by an entity reference um and only show the things that um that came from that other content type so i'll call it batch choice and you can see views and i select the one view that i've created that is an entity reference so that batch option choose a cupcake you just ate um and that is is not uh autocomplete it should be from a select list so now what we should see when we go incognito uh and when we incognito not logged in uh one of the survey items will be what um different uh cupcake uh do you want to uh to uh survey so i need to change the order of the field so that that batch option appears further up the list so the first thing they're doing is choosing the batch and then there's rating and finally they're putting some comments in at the end so i want to give uh create new content permission for survey to the um anonymous user so it's an unusual situation in in content management system terms to actually give uh end users the right to create content on our system but just bear in mind the workflow that we've allocated for this is to never publish so we're just going to make sure that um the user can only go to from you know uh from a state uh that that will stay in draft so there's a draft only transition we're going to make sure that both the anonymous user and authenticated users can both uh use that draft only uh transition but just bear in mind that bakers and um chefs don't really have any ability to create survey to begin with um so you can see here i've got um a new survey the ordering seems to be correct and i can put some comments in and then submit that that uh that survey to the survey system and then have a look at my content and see that anonymous not verified is in an unpublished state so um and the comments actually are the title of the of the page just bear in mind that um you can't delete a title of a piece of content so but you can rename its labels or rename or relabel the name title to um to be comments um so i'm creating another view a final view here um and that view will um have certain permissions um and yeah i'm sort of looking at the wrong place with regards to permissions um but yeah there's sort of you can get other content to to look at that view and that that's not entirely the exact place i'm sort of grappling at the wrong place but you can sort of see um that i'm sort of defining a a criteria so the published aliens yes the content type is survey so oh sorry the is is not yes i'm changing the view to a table so that it shows all of the content so you'll note that bakers and chefs can view all the surveys that came in and i'm defining that view here just to make sure that um the those two users can see all of the different um feedback so what you see in this list are every single uh field in every single content type and i'm sort of searching high and low for the pieces of information there but it's quicker to use that search box up in the top left hand corner i can search for different content types but i can also type in the specific content type that i'm looking for and now the um all of the different survey details are are available i can change the labels i can change some of the um the information but i'll i'm happy with the faults you can see down here there's two surveys that have come in so the view system will give you a sort of a a draft look of of its um of its uh site so i can reorder things a little bit just change the way that table looks so that batches the first thing that comes up on the left and then the the relative responses that the user gave um i want to make sure that that particular content type is only so that particular view type is only available to a certain role r-o-l-e um so it's it's sort of important that in in the view system you you define permissions as well it's not the only place you can define permissions but it's certainly one one of many so i'm creating a menu link um just making sure that that menu link will appear um in the menu system so the right user should be able to see all of the surveys that that came through the system and i think were logged in uh chrome as a as a chef um so those are all the cupcakes that are listed these are all of the surveys that came in um and draft batches is another view that only shows the um cupcakes that um haven't been baked so i can change the access restriction to role and i should be able to define um a certain user that only has access to that particular content type so just bear in mind that you can create access permissions based on on role and if i if i'm completely logged out i shouldn't be able to see that that's it i forgot to save so i've changed the access permission to be on role um i've saved that and and i might go into the other um content types and and restrict them based on a role as well um just to make sure that um people can't see draft cupcakes um they can see uh published cupcakes but they can't see draft in in an anonymous state so i'm filling out another survey on um very vanilla surprise filling out content sitting submit button and the yeah the survey then applies to um to to that particular piece of uh piece of content um there are no unpublished batches all batches have been published so um i think we've pretty much got functionality sort of locked in there might be a couple of bits of permission here and there um and just sort of running through the uh the the site one last time we'll put in a another cupcake and take it through the whole um the whole process so i'm currently in firefox under the baker role and baker should be able to create a draft um um a draft cupcake um defining its uh um parameters submitting it i can then edit it or delete it if if i see fit but i can't bring that that guy to um to production without dropping over to the different uh chef user and then changing his uh his um draft status to published um i still have access denied on actually viewing different things so anyway so you can see bakers created a new um and and the chef has has then um taken that to a published state now i i have a little configuration change and i showed you at the beginning of the video where i need to turn off caching for views so um sometimes you you have sort of overall configurations that need to be done but i'm just sorting batch by a certain criteria to make sure that it only shows um the latest one so in reverse order not not sort of oldest to newest but newest to oldest um just because you know old cupcakes won't be of interest other than the the newer ones that have come through so um yeah so just bear in mind that it it can be a little bit of a problem if uh the view system doesn't keep up with our published states one way to do it is to sort of just clear out the case and i think that's what i'm going to do here or yeah um yeah so there's sort of a a few different ways of cleaning things up but you know case cleaning doesn't fix the entire issue what what you might want to do is just to turn off caching altogether in the views um configuration area so what am i doing i'm just reordering the menu system to make sure that my menu system looks more or less clean um the order is is right for anonymous users so anonymous users can just see all the different cupcakes that were created and and then submit a survey on one of those cupcakes um i'm having a look at the the different blocks so the thing that's immediately under the menu on the search is is the actual breadcrumbs and i'm not really super happy with the breadcrumbs because one they're located incorrectly i'll need to move them down a little bit the other is that they contain a um a slash instead of a a carrot so i'm sort of looking for a larger than sign to be allocated to to the the breadcrumbs system rather than the way it is at the moment but what i'm doing is i'm confirming that i'm i'm getting a css lock on the thing that that i need to to check now breadcrumbs can be or the look and feel can be well and truly edited in css but of course you want to move the different content types so the different blocks to their sort of relevant locations so that the menu lives in a menu area and the breadcrumbs lives just below that so i'm just sort of reorganizing the look and feel of my site so that it has a a decent sort of block structure um so blocks are um an interesting way of of just defining different sort of um pieces of content that might appear on many many different pages there is a block type for content itself so you know obviously these forms and and survey lists and views and what have you are are still very useful um and and have to be there but but things like headers and footer options are are useful so i'm having a little bit of a look through the uh the file system there is actually a a breadcrumb file in the bootstrap um components area um where you can you can change some of the features but i've sort of realized that css you should probably find all of the options of css before you have to go in and maybe edit some of the um some of the the core files that uh that exist um because obviously the settings themselves don't don't really or the files themselves are are written in such a way as as to be devoid of content there the templates by which we we put content in so um i'm more or less happy with the functionality and and we're we're having a bit of a play with uh with the look and feel of the site um and you can see here that um i'm sort of changing all the way some uh parts of the system will be uh be set up so this one here ensures that the users can't self register um and i don't want um you know my user accounts to be gummed up with uh you know um users to be moderated so uh in the theme itself i can i can upload a file or i can refer to it and i think i had some some less trouble uh with the file type problem so it's telling me png jpeg gif are the only files allowed i'm trying to place an svg file so what i might do is i might sort of just move the file that is the cutcac.svg file directly into an area of the themes folder and then refer to that file um you know using instead of a file upload using path description so i can i can just define the path based on on the root folder of drupal itself um it probably shouldn't have um a uh a backs a forward slash at the beginning because that refers to a an absolute position um so just everywhere else you need the forward slash but if you're defining a path through a file system it makes sense not to have that um prefixing forward slash it's a bit weird but fav icons and images again can be stricken by the dreaded uh caching problem so just bear in mind that uh both your fav icon it's already there there's already a sort of a little blue alien type character that um probably won't be replaced until we sort of clear our local cache um on the browser itself um or or it expires by its own by its own um so i'm just uh having a look at some of the features of of um of the theme itself so the first step is to have a look at um the options that you have for the bootstrap theme uh in just sort of giving yourself a little bit of a head start before you have to dive into css or the templates themselves um when you have to deal with um the uh the actual file system other than css you're you're entering a zone of um both html and php and and some things called mustaches or or templating um pieces that dig deep into the drupal's own um internal mechanisms so i'm sort of just checking my blocks checking my themes making sure that i have things um positioned correctly in the site overall but you'll um you'll find that you'll you'll play around with this quite a lot and and there's there's ways in which you can have content um devoid of certain menus or certain themes you can look at the content settings itself and and define what blocks you want to display on a per content basis or even a per content type basis but we haven't sort of delved into that we've just looked at um at the overall content type so the overall view of the site itself so i'm still fighting the breadcrumbs a little bit to try and get my all important slash being changed to a um to a larger than sign and i think i've realized that the best way to do this is actually in css itself and um when you sort of right click and use the um inspector or the the chrome developer tools you're able to sort of have a little bit of a play with um with different uh different pieces of content so i've defined breadcrumb um ally before um as a way of of changing the the actual content and i'm not happy with the color of that so i might change the color from gray to to the default blue or a darker gray because it's it's hardly seeable you can you can't really see it at all so i'll change the color to um the same gray as the others so that it has a little bit of definition so now it looks like breadcrumbs because it sort of gave me a little bit of a confusion at some point it it i wasn't sure what what it was and it's a better convention to use the chevron like identifier i'm not really happy with that line below create survey if you can get rid of um unnecessary pieces of of um of layout it it sort of gives a bit more space to things so again i've right clicked on it i've defined um the the content changes that i want and i'm just going to change the border to zero so that um that line just completely disappears um not happy with the green color of the submit button either so that that green colored submit button needs to be needs to be changed to to something um in the the theme itself we can we can change a little bit about the menu system not a huge amount but if you look at um the nav bar you can inverse the color of the nav bar and change the layout to be either absolute or fixed but we will keep that in flow so now that's reversed the color and it's sort of reversed the color to a way that that suits um my my liking a little bit but instead of an ugly black i'm i'm going to go with another tone of blue so i'm pasting pasting in what i found in the developer tools i'm going to give uh not navy blue i'm checking the uh the color names and it'll be a dark blue or something along those lines um so i'll change the navy blue to midnight blue and then check the the layout so now we have um the midnight blue color but the menu items don't don't get that all important midnight blue so again i'm i'm looking at the stylings in the developer tools on the right and then choosing extra selectors to be applied or to get the different color as colors to be applied um and sometimes it's a bit hit and miss you end up sort of maybe adding too many um too many options to to the uh to this uh to the styling area so this one here was particularly difficult but eventually i worked it out and i'll work it out in the next sort of 15 minutes note that this um particular part of the video is all styling um so we're currently sitting at um you know a two hour video um and we're sort of in the last sort of quarter last fifth of the video but everything that i do here will be related to um to layout so we're we're specifically playing with bootstrap here and trying to get bootstrap to to show an indigo color for the selected menu item and we'll eventually get there but we're going around in circles for the moment you'll note that i'll head off in a whole lot of different directions before coming back to this um so for those users that um just wanted to see the droofle side of things and not the um the bootstrap side of things it might be useful to sort of skip ahead towards the end of the video where i talk about um backing up the site um because we want to dump the database and we want to zip up all of the materials that we've done and potentially put in to production the concern obviously is that in a production environment you'd re you'd redefine the passwords from password to something a little bit stronger you'd also define the database password if you remember right back in the installation stage that database password was nothing it will need to be allocated as well so um as far as css goes i'm i'm sort of defining all of the the colors of of midnight blue to be um in uh different parts of the site so there's a difference between a comma in css and a space um the comma means uh where comma delimiting different selectors whereas the space means to select the child of the parent so you'll find that some of the stylings will go haywire if you don't have the comma um so yeah as i sort of you know clean up footer and header and menu and what have you you'll you'll find that they'll all sort of have um a light blue midnight blue kind of contrast so i'll be eradicating black from the black and white from the site and just just using um the blues uh and and the one highlight color which is that um it's uh olive color that that in the title so as far as drip was concerned it does use um it does use bootstrap in a uh in a in the um in the most sort of clean way possible you can define um the classes that bootstrap understands to to do your layout so the difficulty is that if you wanted to sort of define a different layout you have to leave css because css by itself is only going to give you the characteristics of the styling not the um not the actual sort of dimension or the um the layout and and for that um i i'm going to make one change and that is to sort of um allow the content um below the header and above the footer to sit more central because at the moment it takes up a hundred percent of the screen and and for desktop viewing that that's just not not acceptable so we will change templates um and i'll note it in the um in the headings and and put it in the table of contents for you so have a look below this video under the table of contents and i'll i'll have a little a little discussion about um about templating because i only change one thing um so i'm continuing to add more and more um selectors to try and sort of attach this this one active menu and and just bear in mind that um developer tools are your friends so look very closely at the selector that that is being uh found when you're um when you're uh looking at uh at at different parts so the trick that i'm tending to find is i'm right clicking i'm inspecting element and the inspect element gives me a few features that um i wouldn't normally get now you'll note here that i've got uh active or that um that color where is it indigo uh being used incorrectly so i've defined or i've i've i've captured the active uh element which hasn't worked out for my menu but it's worked out for the active um element in the breadcrumbs list so i'm going to have to sort of define active to be a part of a different area so active in the nav bar or active in the header or active in the nav itself so i'm i'm trying my hardest to um to define all the different nav related areas that need to get the midnight blue so all the nav areas and the active ones to get the indigo so i'm going around in circles a little bit trying to to um to get the styling right but uh um it it's it's taking a while there's most people that that are very used to bootstrap are probably you know smashing the table at the moment saying do this do this um but obviously um there's there's sort of like a little bit of debugging in in the process i'm not entirely and i didn't really get to it either um fixing up the the menus so the forms themselves you can see the form takes up 100 the width of the screen which is perfect in a mobile view but it's it's not acceptable in a desktop environment in fact the comments area down the bottom i tried to push the size up a lot so that the size of comments could could take up more room but that that wasn't wasn't uh acceptable either um and it has something to do with um the theme more than anything else so um bootstrap has taken uh input and has given it a size so in some ways we'd have to sort of like put size none in in the css or the size you know which would try to sort of like clear out size to to make sure each one of those form fields takes up a different a different area so i'm still having a hack and i've managed to find um some code from um from uh the the developer tools that might be a little bit more useful so um i'm sort of locking on to the hover and the focus um so that it too can get the same indigo color that the other um items have so um actually i'm that the login down the bottom is is the thing that's sort of sort of getting me so i'm sort of defining nav nav li um and then finally getting a color in there and that uh cara that larger than sign means um that you want to apply the stylings to um the child of the parent so nav is the parent li is the child please style the child um i'm a bit annoyed by that and it's because the active doesn't hasn't been um been parented so i'm going to to make sure that only um the active in the navigation system is is uh is dealt with not the active in the breadcrumb system so um so hover is when your mouse goes over focuses when your mouse goes down so you can style on on mouse uh mouse down um and by consequence mouse up um which is hover or or or the default um so i'm going bootstrap.org but obviously the wrong bootstrap.org um just to sort of get a little bit of a um inspiration from other layouts that sort of exist in in uh in the web and i want to just sort of get my design centered a little bit um and that that sort of content area at least in desktop view needs to be sort of compressed down and adding an extra class or redefining an extra class in content is is absolutely necessary and in order to do this i'm going to have to um grab the the right template the the content template but at this moment in time i'm trying to be inspired by different uh different bootstrap sites none of which truly give me the information i'm looking for text center jumbo tron that's that's not sort of something that i want um i'm pretty sure of jumbo tron is is a specific type of um of mast head that uh might sort of cycle through a number of different different images on a timer but i'm sort of going to the uh all knowing oracle of everything web related and i'll try center dash block but um it might just be center all by itself so what i'm going to do is i'm going to dip into bootstrap proper so the bootstrap that we downloaded into templates and i'm going to copy um the one template that contains the width of 12 in my content area and drop him down to eight or nine so that um he doesn't take up as much room and you can see here that um the twig files are um are what uh are what contains these templates and you can see here there's there's sort of a little bit of a um a design ethos here so there's some if statements so whenever you see the little question mark um you know there's sort of a a a binary choice that's made given a certain type of event so what i'm trying to do is is to change the content width to use up a little bit less space in desktop view um but i've gotten sidetracked because i've gone in style the um the menus themselves so that's not centered that's brought it to um to the left and that obviously that advice on stack overflow wasn't wasn't that useful i'm continuing to read different um comments um but all i'm doing is looking for the class um that will give me what i'm looking for um and center block didn't work so i'm sort of giving up on that um and i'm going to try a different styling um so sender a column using bootstrap and row centered um text online center text center so it might actually be okay if i use um if i use uh some kind of css to try and sort of center it up um which might be sort of the the best option um is maybe to define a six or an eight and then put the word centered in at the end so i've changed that but just bear in mind again whenever you're changing templates um you might have a little bit of a problem with the dribble caching system so okay so i've put my own my own um styling in so i followed someone's advice and i've changed the um i've just added an extra class a user defined class to define centered which which is your margin zero auto type type solution um fine and dandy i mean that that's one way of doing it it would be nice if if we could get um if we could get bootstrap to do it but you know that that's a little bit of a cheaty way so i'll change that to eight and give myself a little bit more room i'm clearing case as as time goes on just just to sort of get um get the uh the site to um update its changes so the the layout's looking more uh more better over but these uh edits um windows have been styled incorrectly i i want to try and eradicate white and in fact when i'm not in header and off-order i i don't want to see that sort of um that dark blue at all um so i'm going to sort of find the selector that um is related to this and then just sort of uh remove it from my um my area because you can see um some of that is um nav related so if you look at the top of that the list items i've gone and um defined nav list item and that's what's sort of firing off this stuff here which isn't perfect um my preference is that this nav stuff um doesn't apply to revert um drafts or change uh content or edit content so i'm looking to try and sort of just make sure that um i'm only applying um you know the uh the the different midnight blue and um purplish colors to um to the header and footer and there may be just a little bit of iterative sort of debugging going on to try and sort of clean that up yeah so i'm just defining the nav bar footer um but i'm not sure whether that that's sort of gonna gonna work in fact i'm probably gonna go backwards a little bit when that happens um i've decided to go on and sort of clean up these buttons because the the buttons themselves should shouldn't be a separate color so i'm finding um where uh button is being used uh and then defining um a color for button and taking the um the midnight blue color and the white color and then allocating oops that was because footer was used there and shouldn't have been um so yeah that login form needs to have a a different a different value allocated to it um so now the hover of of that item is isn't quite right so i'm gonna gonna change the button hover to have the indigo color i suppose um nav active and so now it sort of gets a different color so it's got the midnight blue and now it's got the indigo but now the uh when you click it it has the green so i've got to change the um the hover and and the active but i want to kill the button icon i don't want the check mark so i'll get rid of the actual little picture that's on the left hand side of that that image and just get rid of it all together um notice that uh bootstrap just uses classes everywhere so so never forget the prefixing dot um that defines all of the um the different bootstrap related elements um so if you see class being used make sure you have a dot in the css um okay here i'm just having a play making sure that all of the different um mouseover effect get the the um the the right color um so i'm just adding more selectors and common delimiting those selectors as as i go along um so i've used a combination of background color and background and and background is is the more generic or the more general term and that might not be the uh the perfect uh the perfect solution in your case so i think i finally uh um hooked on to the right um indigo color to define the um um yeah that the right hovering on the different menu items um but i'm not sure whether the selected one has been found yet um so notice that i'm starting to define the area's body nav header photo where these selectors are going to take place um and i'm sort of forcing the um um the styling to just just uh work in in one specific area so i'm reducing the effect that occurs and if you remember indigo started appearing in the um in the breadcrumbs area and um it appears in the um in the content control areas above content items so if if we we end up sort of just defining how the nav bars are are being affected um we're we're potentially just reducing the effect that it has on on the outer areas but of course i'm going backwards a little bit um should have defined that at the beginning but we'll we'll get there um so i'm just trying under different users and and sometimes you have to go backwards to go forwards and that's just the way it is but we we notice that the um the the breadcrumbs don't have that indigo color on them anymore so we've we've sort of gone forward in that respect um but it might be useful just bear in mind that i'm coming to the discovery as well that that is it's really useful to look at your developer tools identify the selectors that are being affected in the areas and then paste them into your overriding area so i can just define footer as a whole to contain that one color and then the menu bar nav and the um active and the hover can can get their their alternative colors um so i should be able to take all the footer related stuff out of this selector um and do the same as what i did with footer and just to find the header and nothing else um to get that blue color but note that um in that login area that forget your reset your password area we we need to get that color out um it's not technically a button and it's not technically a header or a footer so we're we're going to sort of um just be more specific about our selectors um so i'm looking for for where um that incorrect uh styling is being applied and then just saying make it header make it a part of the header system um and then suddenly things disappear but obviously the active uh is appearing so i'll add header to these areas here and now suddenly we've we've got a little bit of a change i i don't like login being white and i want to override the background color of that active to to be nothing so i'll eventually work that one through as well um yeah so i'm looking for another color to add to my um my repertoire which is sky blue to replace those white and those gray colors but uh i'm i'm sort of sitting back here i'm having sort of misgivings about doing that now because sky blue just introduces another color but i mean you've got um you know midnight blue and indigo as two separate colors why can't you have sky blue and light blue as as two colors as well so you know there's there's sort of pros and cons around all of it especially when i've used olive in h1 so um olive does actually stand out quite nicely but uh maybe not with sky blue and light blue together so i'm sort of you know just just in hindsight i'm probably you know not not super uh i'm super happy with it but you know it'll do so that login needs to be given a sky blue color so again i'm looking at the um selectors so just make sure you look in styles below and grab the selectors that are being um that are being affected um and i'm trying to grab excuse me trying to grab the uh the white color and i'm looking down the bottom where the actual styles are explained to me and then trying to copy out that selector and paste it into my um into my layout there we go there's a there's a strange little sort of halo around it as well i'm not sure what that is but um yeah it kind of looks like most of the styling is done um i'm i'm pretty happy at this point in time that you know most of the uh the look and feel has been um has been defined um and i should probably go through and change all of the hubbers to have active as well just so that you know the mouse down event is is dealt with correctly there's still that ugly black on survey and and i think i've finally the pennies dropped that and i need to go down to what style is being affected um and then simply paste in the exact style that's being affected because i'm going all over the joint with um trying to to sort of get a finger on this little black area here um because at the moment it's trying to to go indigo and like blue but it's not it's not going to work so i'm trying to be inspired by the other other searches that i found but in the end i go to the developer tools and just paste out the the exact um styling or the exact selector that that's going to be applied but what's happened with um nav tabs and what's happened with uh footer needs to happen in in the header area so yeah this this is a sort of um fool there and a folly that didn't work because it it doesn't um it doesn't apply uh correctly so i dropped my indigo in there test it out and it doesn't work so that that was a sort of an incorrect checking the syntax making sure there's color uh commas where they should be but it's it's it's not going to work but a active is is certainly one of the one of the things that we're interested in in the end i click on the um on the active list item and then sort of work through the styles that are related to that um so there's this dial that's not it so that the li class active is is the element that we're looking for um so there it is and nav bar inverse nav bar nav active a that's quite a mouthful of selectors there that are being applied but i'm just going to paste them straight in nav bar inverse nav bar nav active well and there it is so the ultimate answer is is to trust in your developer tools and and and find the selector that way trying to second guess can be a little bit here especially with the um with the kinds of of things that um are dealt with by drupal itself so that active is is something that's allocated not in styling but but in functionality what i'm doing here now is i'm i'm turning on aggregation and i'm sort of clearing my cases um and setting case limit to about 30 minutes just sort of in the assumption that it will go to a production environment i'm taking the side off line and i'm going to go through the process of um zipping that sucker up and then sort of compressing it down so that it uh it then um uh is is backed up because what my interest is in making sure that we um we can not only take to production but we have a sort of a copy of our site that uh represents the work that we've done today you might have seen two hours of it but i certainly spent a little bit more time so the first thing we've got to do is is to um well we'll get rid of the old backup um go into drupal get rid of the sql file that was there so i'll just remove out the drupal sql then i'll dump um my sql dump out the um the new version of the database or the current version of the database um that's the wrong command i've got to put my sql dump in there so you watch i'll sort of recover my confusion as to why my sql isn't starting up and just put the word dump the UMP and of course it's going weird because it's a video um so i'll do that again from the start my sql dump uh no password required drupal is our database and then pipe that out to redirect that out to drupal.sql check that there's some stuff in there and that's pure sql and now i'm going to go through the process of of compressing and creating an archive so i'll name the archive cupcake drupal.tar.gz and then i'll say this is the folder that i want to compress