The third VuFind instructional video discusses the process of creating your own theme, and shows you how to do some commonly-needed customizations.

Video is available as an mp4 download or through YouTube.

1. User Interface Customization wiki page

Needs editing and cleanup.

hello I'm Chris Hallberg and today we're going to discuss how to make a new theme in refined now that we have set up you find in the previous videos it's time to make it look like your institutions theme and style it to be all your own few fun comes with a few different themes the default theme that you're seeing here is called blueprint 3 we'll get to why it's called that in just a second you find comes with three themes that are designed to be a good jumping-off point for you to do your own customizations so we're going to talk about how to switch those and make your own in this video so I'm going to open up the back end of you find so I have in vs code here this is the view find filter that we've been working on in the previous videos on the same virtual machine I just thought a visual look at the folders might be an easier way to go about this so right now I am currently in local config view find config.ini this file should exist if not you'll want to make a copy out of config you find config ionize this is the config file that contains all the basic configurations one of the sections of the configuration in the top is called site and this is where the overall configurations for where the site is what email address gets the feedback and the support messages the title and one of the first things should be the theme you can see right now whooping theme 3 is the enabled theme I'm going to switch over to bootstrap 3 which is a better a more blank template for you to start your theme on this is obviously built in bootstrap 3 uses as many style stylings is that framework as reasonable and this is the blankest template that we find authors blueprint that we just switched from is takes some of the original stylings of legacy view finds and adds them on top of bootstrap and then finally the newest theme that we have is called sandal we do have a boot and shoe pun going on this is a more modern Lee styled theme to match the trends of the last two years or so and there should be a brand new theme coming out later in 2020 to match the stylings and the accessibility accessibility and modern design practices of the current day another option that you have I'm going to switch back to the show play here is you can specify a mobile theme this isn't as common now that responsive design is a larger thing but if you want to serve a particular theme just to mobile users this is the way that you can configure that I'm going to scroll down a little farther to two useful things for developers alternate themes and selectable themes I'm going to uncomment these alternate themes allows you to specify like shortcut IDs for different themes so you can switch back and forth between them in the by using URL parameters so I'm going to put on these two for now just to show how this works so now if I go back and I do parameter UI equals V s3 it'll switch my theme over to bootstrap and I can also switch to blueprints this is very useful it can get even easier if you go a little further down to selectable themes you can actually give yourself a drop-down they'll make this even easier [Music] [Music] so now there's a theme drop-down in the top bar that allows you to do the same kind of switching this is also useful if you want to present to your users with different UI is such as larger text or higher contrast or things like that so that's one way to enable that feature another switch to bootstrap and we're going to look at how themes are structured inside of you find so if you go back to the roots of the view find instance and you go to themes you'll see a bunch of different folders of all the different themes that we have I'm gonna open up bootstrap you'll see it's broken down into several different folders these are mostly self explanatory one that is missing here is languages if you wanted to do a custom language file to add particular strings to just a certain theme you can do that the most important file in this folder is the theme config dot PHP this file tells you find what customizations you want and what files to include on every single page there's a few other option more advanced options down here that we're not going to get to today such as using less or sass or scss pre compilers there's also a ways to specify you helpers I'll talk about a few of those later and also the important thing to note here is this extend this rule at the top view finds themes inherits from each other so roots is a theme that contains a lot of templates that are used in every single theme and if you look at boot prints theme config it extends from bootstrap 3 this allows you to build immediately on top of what we offer and on top of other parent themes to make it easier if you look you can actually notice that blueprint seemed actually doesn't have any templates of its own it's just images and CSS on top of all the work that bootstrap 3 is doing so that's kind of the approach that we're going to take today as we make our new theme and as you'll likely take is that you're only going to customize the parts that you need you don't need to copy over the whole khrushchev theme to use it you're just gonna want to pick the parts that you want to customize and use only those files I think with that we're ready to get started with a new theme I will plan out there is a command line there's a command prompt to tool to do this but I'm going to keep it simple today and just make things manually so you can see how everything works but if you wanted to auto-generate a theme by the correct structure and some things in place that is there's a good way to do that as well so in order to make a new theme it's very simple I'm going to make a new folder inside of themes I'm going to call it tutorial I'm going to add a theme config file I'm actually going to copy blueprints particular theme config because it matches what we're going to start with save that and we are actually ready to go so I can go up here and I can switch to tutorial I'm also going to add tutorial to our configurable switchable options here we're going to take a look so I'm going to choose the theme directly you'll see that it looks identical to bootstrap 3 because we have in customize anything yet but we are in fact in tutorial so you can see that even though we haven't added any code we are already leveraging all of the accessibility and all of the structure and all the styling of the view finding I'm sorry of the bootstrap scene so let's go ahead and customize this we need to do this in two steps we need to make our actual folder we're going to put our customizations and we need to tell theme config that they exist so I'm going to make a CSS folder we're going to make a new file in that folder I'm gonna call it custom not CSS you can call it whatever you like then in theme config I'm going to tell you find that we want to load this CSS file on every single page I'm going to just add a little bit of color here so we can see that it works and if we go back you can see that if i refresh it things are now slightly different as I have customized things I actually I'm going to punching a bunch of a bunch more code here that I will share later but not necessarily go over now this is just for demonstration purposes I did a couple different things to get us started on showing what a custom book can do and you see we can change the button colors we can change the fonts and everything like that all the things you can do with CSS are available to you so now that I've customized the look of it I actually want to go and change some of the actual templates so for example I might want to make this header full width I might want to change the logo up here you might want to customize your footer these are very easy to do because you can take the inheritance qualities and you can build on top of them so for my demonstration today I'm going to show you how to override and make your own slightly customized header now you have to be careful with this kind of thing because if you give something the same name as something in the parent theme it's going to completely override it so for example in bootstrap the main CSS file is called compiled if I had names this file to compiled it would have completely overridden all of the bootstrap styles and we've been left with a bunch more much more of a mess than we intended to but we're going to use this to our advantage right now by making a templates folder and Max and I'm going to copy the I'm going to do it in the command line for keys I'm gonna copy the header from bootstrap into our custom theme open this up so now this file our custom header is completely overriding our the bootstrap theme so I'm going to change this to video tutorial just as a very small little thing don't you knock out to this your class which I know will make a full-width and it's something I needed to do down here they can't quite remember right now so we'll come back to that later so now if i refresh the page the CSS be fixed and you can see that with the the logo has changed to what we customized it is now full width which looks nice but it still has all the themes and all the bits in there which is very nice gonna go to a different view to show that it's going from page to page excellent so that is the absolute bare-bones basics that you would need to customize a team I'm gonna go over a few other things particularly some view helpers and some common techniques to make sure that you don't get caught with some common problems and that you're using tools that can make things easier in particular with images for this example I'm going to replace this text appear with an actual picture logo which is basically some that almost everyone will customize this go on to well it's gonna add a background image here just that show how to add background images now these are gonna be handled in different ways because I'm gonna add the actual image to the template in this case I'm gonna add the image to the CSS in this case the first thing I have to do is make an images folder you can put the images folder wherever you like I know that I like to install my thoughts inside the CSS folder for convenience just keep in mind that paths are going to be relative to the CSS I'm gonna grab a few example files that I downloaded earlier I'm going to starts with the CSS background so I already included the stylings looks like here so I'll just discuss them the the path is relative to the current CSS folder this is something to keep in mind if you go on to use the pre-processing things like less and s CSS and sass that it's gonna be relative to the outputted CSS so we're just going up to the theme roots and then down into images to get this the other image and now that the image is in place inside of the folder if i refresh we should get the background image here inside of our theme in order to add images to the templates it might be trickier to figure out the actual path but we have added a view helper to make this easier so I'm going to go here to our video tutorial logo I'm going to make it image so image source which I get to in a second and make this alt tag so the view helper is called image link and this allows you find to find your image for you if you put it in the default spot here so I just need to type out an echo of this image link and then the name of the image that I want which is this is a nice little helper that will help you find view find helps you just find the image in the proper spot regardless of how nested your template folders get this is a very useful tool in this case so now if i refresh you'll see that I've replaced the image the logo with a sillier little image that I got from flaming text calm it just takes a little bit of CSS to make sure that doesn't overstep its bounds there we go absolutely beautiful another common thing you might want to eat that you'll might want to keep in mind if you're making your own actual pages is that view fine has breadcrumbs up at the top it is fairly easy to customize these breadcrumbs I just wanted to point out how it looks and how it worked so let me open up a different folder a an existing template just to show you what that code looks like in the theme that's very common to see lay out breadcrumbs this layout is almost a global object you can write to it from any template and this will come in to come in handy when the page actually renders into layouts so this layout breadcrumbs and then it's just spread it comes as a string so you can dot append Orkin caps onto it with anything you might want so in this case this is where we're adding the actual search with look for here so if you wanted to completely change the bread crumbs or abs and breadcrumbs on your custom pages this is what you'd want to look for to do that very useful if you're making your own unique pages with their own unique reps just something I wanted to point out just in case another thing that I've been saying a lot is that when you change things in theme that config it adds those files to every single page this is true of CSS and Java scripts and all the different things that you would be adding to a page but there is a fairly easy way to add CSS to just one or two pages so for example in in our header or if we have a custom search home page we might want to add to some vendor files or add some unique scripts so I just want to show how that looked so you are aware of what you'd be looking for if you wanted to do that scripts look like this so both of these are helpers that come was in framework and we've tweaked them a little bit to help make sure all the paths are correct so head scripts append file adds a JavaScript file from the J's folder of your theme to the header list this is useful if you want to add functionality to just one page so for example the advanced search has a whole bunch of JavaScript so you can add and dynamically remove different fields and move them around so this file is only included on the advanced search page and that's done with one of these tags at the top of the template similarly if you wanted to add specific CSS to just a page you can do it this way with head link a pen style sheets you can pull in vendor files you can pull in CSS that you just want on one particularly heavy page this is a good technique so that way if you have particularly heavy JavaScript or CSS files or ones that are doing a lot of work they don't want to interfere with other pages this is one way to do it in a way that will will stay uniquely on one page you'll see this most commonly on the searched home if you want to add some carousels or things like that you'll see this throughout the view font in plates if you take a look that's more or less summarizes the absolute basics of making your own theme there are some more advanced topics that we're going to cover in later videos for example mix-ins which is very useful for institutions that have multiple looks or multiple themes if for example a college that might have multiple libraries you might want to solve a different look for each one mix-ins allow you to share files among different themes easier it's just another tool for customization there's also built in preprocessor abilities for Les and SES SS I will cover that in other videos there's ways to do that to compile with PHP or if you have node installed there is a grunt file that we can use to make tasks and load less and CSS files and finally in order to use those tools it might be easiest to use the command lines generators so when I do those examples I'll show you how those work and how it gives you a pre-booked structure for your themes so I'm going to leave this up as the final screen so you can see the structure of our new theme thank you for watching this video if you have any questions please feel free to check out the view fund wiki and send us any emails on our mailing lists that you might have we'd be more than happy to clarify and cover things in future videos thank you for watching and happy searching