#Drupal: Create Theme Settings Page

again or as usual looking here at the local gov drupal distribution and uh what i want to try to do is uh we've got css here which gives us a background color and you know sets widths and merge and all that so on a sub team we might want to remove all that so a specific council might decide yeah i like the html uh that's here but i want to use custom fully custom css for myself so i'm going to use your classes and your layout structure but i'm going to actually change all the colors and you know how things lay out and fonts and everything else and that's fair enough so let's um let's get all these killed who don't save i've no idea what's but that's good to save or not save at the moment hopefully it's okay um okay we'll close up all of these and we'll start opening again teams custom country block go of base theme now let me see i want to uh log in here okay and okay so we're logged in should be logged in here as well and i am on the local face team that's set as default okay we have experiments do not use yet so this isn't this isn't ready so we're very much early kind of alpha alpha days with this uh drupal create team settings okay so i actually don't know how to do this i i did it on a team a couple of weeks back so i'm gonna gonna have to read up on it again uh creating advanced team settings let's see okay so this looks like it's not too much effort let's say we get this much code here and we can put this in our that team file so that's this here locally got face.team and this is going to be called local gov underscore base form system team settings alter work around for a core bug affecting admin teams c issue this if is set form id return okay so i guess we need to leave that here and form for example let's call this um use use css so what's going to happen is that uh if super unsets this our libraries won't load or at least a subset of our libraries won't load uh type here is going to be uh boolean so it's either honor it's off title text widget uh i guess this will be put in add c ss from team or something like that it's just a string it's not going to matter default value team gets settings for examples that will be here and description uncheck this box if you if you want to disable the teams css okay let's refresh our pc is that all we need to do i think there's a bit more than that so we click on the settings tab here okay and i guess we clear the cache team hooked for local best team all righty we're missing something ah up here angle bracket so now we got some php and we'll clear the cache again and i don't have that setting let me see now um it's always good to clear the cache again isn't it okay let's say do i need to uninstall the team and then reinstall the team so if i set uh this as default.drupal and then if i uninstall local go base okay and maybe i'll clear the cache okay hang on just two seconds the postman's at the door okay so the cache is cleared again and now let's uh reinstall this team local go base and once that's installed we'll set it as default and click the settings logo image let's come back here again so settings page should appear admin appearance settings team name admin appearance settings team name i'm gonna add a php function to other team team.team our team settings a php file in one of those files a team should use team name form system team okay as well as here's an example you've got a full team i want to add a text field whose default value was blue bike and the following to that we've done that in order to set the default value for any form element you add you will need to add a config install team.teamsettings.yaml file with a simple line setting name default value for our full team you need to edit a full config installed through settings.yaml file okay so we need to create a file called team settings.yaml file in config install so over here in localgov base we need to have a new file in config slash install slash local gov base dot settings yammer okay and inside that we need to say for example blue bike shed and ours was called not that what was ours called uh ucss and our value was oh yeah true and we come back here and i think i'm going to need to import these settings or something am i yeah let's maybe just clear the cache again see what happens okay that doesn't work so let's see if we come to config development and config sync looks like we've got nothing here to import i think i might need to uninstall this team again so we'll ins that this is default we'll uninstall the click of face and i think then re reins well that's maybe i like to clear cache a lot here just to make sure that's not the trip up in a moment so now we're going to reinstall the base team and see does that give us a settings page for it so we'll just install it first excuse me and let's see what the settings page says now still not working uh set it as default check the settings oh excuse me uh in any of your team's future you can retrieve the value set by calling that okay hmm i'm going to have to look at what i did a couple of weeks back to see what's different to this let's just check the config sync here again still no change oh i wonder if this needs to go into my normal config sync directory here because we've already got config here from the install and is that correct local gov base that settings.yaml um team.settings.yaml okay now if we refresh this no okay marky we got an issue here let's get this out of here um don't need that looking base i'm going to copy in the full actual example from here just see if that gives anything different make sure it's not something that i've uh that i might have broken um refresh oh we got the widget okay i've done something wrong so what have i done wrong type is boolean which is what i want i want to be on off the title should be fine team get settings get setting ucss and description i don't know what i've done wrong here okay i did it in this team here lgd a few weeks back so let's check what's in here um lgd.team ah it's a checkbox not a boolean okay so we can comment out this for now i notice somebody watching this that's screaming market to checkbox as a checkbox you know it needs to be a checkbox or it needs to be a radio so add css from team yes uncheck this box if you want to disable the teams css so that can go on and off now if i turn that off and save it looks good turn it on and save cool what was happening when i just originally a couple of weeks back was this wasn't saving and it wasn't saving because we didn't have the the local base that settings at yaml with this set the true to give it an actual default value so every time you changed it or whether you changed or not it just kept coming back to being to being on so we want the team css to be on so now let's see if we can um if we can get the the get the value so if i'm going to say here for example team get setting for example so that if we can um let's see we got a function uh a local gov there we go how pre-process and we process node i guess yeah just want to check this first for for a moment here first we got a bit more complex in a second so local gov underscore base p process node variables so for example so we're going to say uh use css equals team get settings use css our team get setting um and then i want to let's say uh let's just print uh use css just see what we get from it then okay so we'll if we're on a node page like we are here and we flush these caches that should kick in so up here we get uh one you see here in the corner so that means it's true and each of these nodes these are embedded nodes all says one one one okay now if we go to close this one i think if i switch this off and i come back we should get zeros okay and then i could do something like a [Music] variables use css equals ucss i think yeah let's just check uh if we come down to templates node um i'm going to go to teacher template here just because it's easier to see items down here where these teasers are then up here in the corner where the where the main node is so inside a teacher template now i should be able to call the uh the variable uc css okay that's it down here so let's just for um can we use css then we put in ucss here so it makes it easier to read okay so can we use css0 so that means it's switched off and i don't need that file anymore i'll come back to here we don't need to print this anymore either um so let's uh what might we call this um what i want to do is say something along the lines of uh you know if ucss is one um actually let me just see ucss if uh use css we can use css else we can not use css what do we get hey dougie it's dinner time for the dog okay so we cannot use css because it's switched off and then if we switch it back on here we can use css this is looking good okay so if you were to create a base team now you you could do something like um we've got a teaser um [Music] teaser library here so what we could do is says if use css so if somebody actually wants to use the css here then we attach that library there and if they don't want to use the css we don't attach that that library um and that's that's pretty handy so inside a node template for ourselves but we might want to do this all over the um all over the website and we want to do is you know be able to call this variable from any page so i i have a module actually on drupal.org uh project mgv that is uh more global variables is is what mgvs gv stands for and that allows us get global variables from different places across um across the website and print them in any template so that you can you can print for example the current page title anywhere at all that's something i use at the end of my breadcrumbs to give the current page title um your site name site slogan so we don't have to have function so i don't want this function here called inside uh hook preprocess node because this is only ever going to run on on node and i want every template to be able to have a if you css um variable for itself so what we can do is i'm going to actually copy this slightly from that's like directly from where i did this last oh actually i created a custom module for this what i was doing was adding a couple of say gov uk and nhs uk um design systems into this website and then having uh where's my templates directory and layout what we did then was said things like um if nhs uk design system we get this class here and if uh nhs again is here and then if we didn't if we had the gov uk design system i can't see an example of that in this template but we would load that that instead and that allows us to have different design systems all within the same team it becomes a bit complex when you're for a kind of scalable system so i'm not using it in the current new base team for local drupal um but what i do have in oops what did i do uh oh no okay yeah let's get rid of this and that so what i do have is i'm going to grab a global variable i'm going to create a global variable and with this global variable what i'm going to do is allow this to be printed in any template so i've got this in a custom module i think it is here called uh lgd design system and what we've done here is i've i have a we're creating this this uh default variables alter so these default variables means they can be anywhere on the website so i'm going to copy this from here and put that into here and this will be local gov underscore base template pre-process default variables alter and then if team gets setting nhs uk so what we're going to say is actually i'm going to need an if and down here so if so if this is set so if teamgetsetting ucss is set then we'll say variables ucss equals true all right so now i can delete this and variables you see as i said css should be the exact same now as what we have here if you css and i'm going to put in a p here we can use css and else we can not use css all right so we come back here we need to clear the cache again to pick up the new um the new function and remove the old hook we process node function and let's see what happens we cannot use css okay hopefully that's because this is switched off here no it's switched on and if we switch it off what happens we cannot use css all right so we've got an issue and i think the issue might be um i've got a feeling maybe template people's default variables alter can't be called from uh the team file but i'm not sure of that um so what did we put down here so we said if we're using nhs uk design system we get this class and if we're not we get to go of uk design system class okay so this part here doesn't bother us so it's only this i wonder then can this be um can this not be called from a team file that's why we might need it in a module look template pre-process default variables alter alter default hook independent variables for all templates allows modules to provide additional default template variables or manipulating existing this hook is invoked from template pre-process after basic default template variables have been set up and before the next template preprocess function is invoked note that the default template variables are statically cached within a request when adding a template variable that depends on other contexts it's a responsible appropriate reset to static cache and template pre-process when needed hmm so variables is admin drupal current users access administration pages and these go in allows modules can we do this in the team no i don't think so okay so i guess then to use this in local gov drupal we're going to need to create a custom module or else we're going to have to put it inside um [Music] welcome block what do we have here in one of these modules here we've got what modules country local gov something um local gov core dot module and let's take this from here and we pop it in here and see what happens uh this is for template pre-process default variables that's this one here okay and then the name of this changes to local gov underscore core template pre plus default variables alter if that's it that okay now let's come back here and clear the cache yet again and we cannot use css and here we are told it's switched off and we switch it back on and now we can use css okay so where might we turn this on and off well we've got css on the uh on these buttons here so let's let's have a look at that and see it working um so we'll come back here to our actually hold this um where is that that's in the local gov services landing full no it's not the cta blocks i think it is uh serves a cta block here i think this here yeah the services call to action block and oh we don't have a library loading here because this only ever appears on the services landing page content type so we need to place it here so let's see ah here it is yeah service cta block so let's say uh if use css so now this is set to true i think it is we can use css so yeah so when we refresh the page then this should work and now when we come here and turn off the css and refresh this page it's broken so you can see you got no css here and we got the larger icons so what this will then allow is a sub team can switch off that css because they just want to use the template we have here with the with the um the classes that we've created but they don't want to use the css and don't want to have to unset lots of css libraries or do they want to uh load extra css on their website and we can we can do this then for javascript as well so we can have if you css attached we could have this library called something like css and then a second one because say for example something on a maybe an accordion or whatever you might say yeah i want to use the javascript but i don't use the css so if we say use css and use js and then we'll just create two different libraries one called service eta.js and one called server cta block css i think for the moment i might just use leave it actually we don't have that much javascript created it's not gonna be a huge amount of what do we have we've got javascript in the header only that'll be pretty good okay yeah and then i just need to go back now and rewrite the names of the libraries and then start putting these if you css and if use js um conditions around each but that is it i guess that's how you create a let's turn it back on just to make sure it does work uh that's how you create a settings page in drupal i should probably put them inside these nice vertical tabs or whatever as well they would have a bit of custom settings uh i haven't actually tested it this will work on a subteam um to see see that it gets switched down or switched off for uh when in the subject i'm not going to go through that now either because i said a moment ago doug needs to get fed uh so this should turn the css back on nope uh did i save this ah oh yes we changed the library name didn't we yeah there we go that's pretty cool i'm happy with that uh let's stop this unless there are any questions here on the twitch channel uh oh god lord vk thank you very much right now look look at this 20 minutes ago uh try team get setting you see is this okay i think we've got that sorted so is this a settings form outside of normal settings tab on appearance uh i'm not sure i follow that question exactly if this is a settings form outside the normal settings tab here's our settings tab for local go base here's the settings tab here and it's an extra oops sorry that's global settings uh local base tab here and we saw earlier on it it is an extra item out here yeah and we probably should put it inside a um a vertical tab or something on its own um but i mean for a proof of concept type approach that's that's good enough here i think what we'll end up then which you know later on will be um by later on i mean in five minutes will be use js and use js uncheck this box want to disable the teams javascript and it adds js from team and we should get a second one here now yeah so that's that's going to turn on and off the javascript and that means we're not going to then have a a base team that's just html and a second team that allows some styling that you and you can decide then which which you want to use a space everything can be within the one team and it's just a simple on-off checkbox here so i guess i need to create a pull request for that in local gov core and if we accept it um or let's create a custom module if we don't want it in the core system that is that any more questions nope i am out of here talk to you all soon oh there's one don't forget the default value in the yeah i got that that's going in further you know what i'll do it now uh no base installed here so true use js true okay oh that was matlaman asking a question oh hi matt great to see you on one of my one of my twitches i've been i've been lurking in yours so much and and thanks for uh thanks for chipping in there i i don't see i know you miss some questions sometimes i don't see these at all until i come back to this because i'm on the laptop and i have the full screen take over that's it folks thanks very much bye

Channel: Mark Conroy

Views: 139

Rating: 5 out of 5

Keywords: Drupal, ie11, HTML, CSS, JS, JavaScript, Twig, LocalGov Drupal, php

Id: -MW6MObP_44

Length: 33min 8sec (1988 seconds)

Published: Wed Jun 02 2021