Differences

This shows you the differences between two versions of the page.

--- videos:creating_themes [2020/02/03 20:27] – [Transcript] demiankatz
+++ videos:creating_themes [2023/04/26 13:27] (current) – crhallberg
@@ Line 1: / Line 1: @@
 ====== Video 3: Creating Themes ======
-The third VuFind instructional video discusses the process of creating your own theme, and shows you how to do some commonly-needed customizations.
+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 [[https://vufind.org/video/Creating_Themes.mp4|mp4 download]] or through [[https://www.youtube.com/watch?v=3Hu0TZMioHM&feature=youtu.be|YouTube]].
@@ Line 8: / Line 8: @@
   - [[development:architecture:user_interface|User Interface Customization wiki page]]
+  - Example theme files used in the video: [[https://vufind.org/video/tutorial-theme.zip|tutorial-theme.zip]]
 ===== Transcript =====
-:!: Needs editing and cleanup.
+Hello! I'm Chris Hallberg and today we're
- 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
+in VuFind! Now that we have set up VuFind
-find in the previous videos it's time to
+in the previous videos it's time to
-make it look like your institutions
+make it look like your institution's
-theme and style it to be all your own
+theme and style it to be all your own.
-few fun comes with a few different
+VuFind comes with a few different
-themes the default theme that you're
+themes, the default theme that you're
-seeing here is called blueprint 3 we'll
+seeing here is called bootprint3. We'll
 get to why it's called that in just a
-second you find comes with three themes
+second. VuFind 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
+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
+own in this video.
-up the back end of you find so I have in
-vs code here this is the view find
+So I'm going to open
-filter that we've been working on in the
+up the back-end of VuFind. I have in
+VSCode here, this is the VuFind
+folder that we've been working on in the
 previous videos on the same virtual
-machine I just thought a visual look at
+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
+about this. Right now I am currently
-in local config view find config.ini
+in "local/config/vufind/config.ini".
-this file should exist if not you'll
+This file should exist, if not you'll
-want to make a copy out of config you
+want to make a copy out of
-find config ionize this is the config
+"config/vufind/config.ini".
+This is the config
 file that contains all the basic
-configurations one of the sections of
+configurations. One of the sections of
-the configuration in the top is called
+this configuration, at the top, is called
-site and this is where the overall
+[Site] and this is where the overall
-configurations for where the site is
+configurations for where the site is,
 what email address gets the feedback and
-the support messages the title and one
+the support messages, the title, and one
-of the first things should be the theme
+of the first things should be the theme.
-you can see right now whooping theme 3
+You can see right now bootprint3
-is the enabled theme I'm going to switch
+is the enabled theme.
-over to bootstrap 3 which is a better a
+I'm going to switch
+over to bootstrap3 which is a
 more blank template for you to start
-your theme on this is obviously built in
+your theme on. This is obviously built-in
-bootstrap 3 uses as many style stylings
+Bootstrap 3 and uses as many stylings
-is that framework as reasonable and this
+of that framework as is reasonable and this
-is the blankest template that we find
+is the blankest template that VuFind offers.
-authors blueprint that we just switched
+Bootprint3 that we just switched
 from is takes some of the original
-stylings of legacy view finds and adds
+stylings of legacy VuFind and adds
-them on top of bootstrap and then
+them on top of bootstrap3 and,
-finally the newest theme that we have is
+finally, the newest theme that we have is
-called sandal we do have a boot and shoe
+called sandal.
-pun
+We do have a boot and shoe pun
-going on this is a more modern Lee
+going on this is a more modernly
 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
 to match the stylings and the
-accessibility accessibility and modern
+accessibility and modern
-design practices of the current day
+design practices of the current day.
-another option that you have I'm going
-to switch back to the show play here is
+Another option that you have is
-you can specify a mobile theme this
+you can specify a mobile theme.
-isn't as common now that responsive
+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
+can configure that. I'm going to scroll
 down a little farther to two useful
-things for developers alternate themes
+things for developers:
-and selectable themes I'm going to
+"alternate_themes" and "selectable_themes".
-uncomment these alternate themes allows
+I'm going to uncomment these.
-you to specify like shortcut IDs for
+"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
+and forth between them by using
-URL parameters so I'm going to put on
+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
+works. Now if I go back and I do "?ui=bs3"
-parameter UI equals V s3 it'll switch my
+it'll switch my theme over to bootstrap3
-theme over to bootstrap and I can also
+and I can also switch to bootprint3.
-switch to blueprints this is very useful
+This is very useful.
-it can get even easier if you go a
+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
+drop-down they'll make this even easier.
-[Music]
+So, now there's a theme drop-down in the
-[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
+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
+higher contrast or things like that.
-that's one way to enable that feature
+That's one way to enable that feature.
-another switch to bootstrap and we're
+I'm going switch to Bootstrap and we're
 going to look at how themes are
-structured inside of you find
+structured inside of VuFind.
-so if you go back to the roots of the
+If you go back to the roots of the
-view find instance and you go to themes
+VuFind instance and you go to themes
 you'll see a bunch of different folders
-of all the different themes that we have
+of all the different themes that we have.
-I'm gonna open up bootstrap you'll see
+I'm gonna open up bootstrap3. You'll see
 it's broken down into several different
-folders these are mostly self
+folders. These are mostly self-explanatory.
-explanatory one that is missing here is
+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
+to just a certain theme you can do that.
-the most important file in this folder
+The most important file in this folder
-is the theme config dot PHP this file
+is the theme.config.php. This file
-tells you find what customizations you
+tells VuFind what customizations you
 want and what files to include on every
-single page there's a few other option
+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
+using less or sass/scss pre-compilers.
-there's also a ways to specify you
+There's also a ways to specify view helpers.
-helpers I'll talk about a few of those
+I'll talk about a few of those
 later and also the important thing to
-note here is this extend this rule at
+note here is this "extends" rule at
-the top view finds themes inherits from
+the top. VuFind's themes inherits from
-each other so roots is a theme that
+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
+look at bootprint3's theme config, it
-extends from bootstrap 3 this allows you
+extends from bootstrap3. 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
+to make it easier. If you look you can
-actually notice that blueprint seemed
+actually notice that bootprint3
-actually doesn't have any templates of
+doesn't have any templates of
-its own it's just images and CSS on top
+its own. It's just images and CSS on top
-of all the work that bootstrap 3 is
+of all the work that bootstrap3 is
-doing so that's kind of the approach
+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
+make our new theme (and as you'll likely
-take is that you're only going to
+take) is that you're only going to
-customize the parts that you need you
+customize the parts that you need.
-don't need to copy over the whole
+You don't need to copy over the whole
-khrushchev theme to use it you're just
+bootstrap3 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
+files.
-get started with a new theme I will plan
-out there is a command line there's a
+I think with that we're ready to
-command prompt to tool to do this but
+get started with a new theme. I will point
+out there is a command prompt 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
+to auto-generate a theme that's the correct
-structure
+structure and some other things in place
-and some things in place that is there's
+there's a good way to do that as well.
-a good way to do that as well so in
-order to make a new theme it's very
+So in order to make a new theme it's very
-simple I'm going to make a new folder
+simple. I'm going to make a new folder
-inside of themes I'm going to call it
+inside of themes. I'm going to call it
-tutorial I'm going to add a theme config
+"tutorial" and I'm going to
-file I'm actually going to copy
+add a theme config file.
-blueprints particular theme config
+I'm actually going to copy
+bootprint3's particular theme config
 because it matches what we're going to
-start with save that and we are actually
+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
+can switch to "tutorial". I'm also going to
 add tutorial to our configurable
-switchable options here we're going to
+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
+theme directly. You'll see that it looks
-identical to bootstrap 3 because we have
+identical to bootstrap3 because we haven't
-in customize anything yet but we are in
+customized anything yet but we are in
-fact in tutorial so you can see that
+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
+and all the styling of the bootstrap3 theme.
-I'm sorry of the bootstrap scene so
+So let's go ahead and customize this.
-let's go ahead and customize this we
+We need to do this in two steps.
-need to do this in two steps we need to
+We need to make the actual folders we're going 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
+tell "theme.config.php" that they exist.
-going to make a CSS folder we're going
-to make a new file in that folder I'm
+So I'm going to make a "css" folder. We're going
-gonna call it custom not CSS you can
+to make a new file in that folder.
-call it whatever you like then in theme
+I'm gonna call it "custom.css".
-config I'm going to tell you find that
+You can call it whatever you like.
-we want to load this CSS file on every
+Then in "theme.config.php", I'm going
-single page I'm going to just add a
+to tell VuFind 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
+things. Actually, I'm going to
-punching a bunch of a bunch more code
+punch in a bunch of a bunch more code
 here that I will share later but not
-necessarily go over now this is just for
+necessarily go over now. This is just for
-demonstration purposes I did a couple
+demonstration purposes. I did a couple
 different things to get us started on
-showing what a custom book can do and
+showing what a custom look can do.
-you see we can change the button colors
+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
+CSS are available to you.
-I've customized the look of it
+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
+the actual templates. So, for example I
 might want to make this header full
-width I might want to change the logo up
+width. I might want to change the logo up
-here you might want to customize your
+here. You might want to customize your footer.
-footer these are very easy to do because
+These are very easy to do because
 you can take the inheritance qualities
-and you can build on top of them so for
+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
+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
+name as something in the parent theme,
-it's going to completely override it so
+it's going to completely override it.
-for example in bootstrap the main CSS
+For example in Bootstrap the main CSS
-file is called compiled if I had names
+file is called "compiled.css". If I had names
-this file to compiled it would have
+this file to "compiled.css", it would have
 completely overridden all of the
-bootstrap styles and we've been left
+Bootstrap styles and we'd have been left
-with a bunch more much more of a mess
+with much more of a mess
-than we intended to but we're going to
+than we intended to. But we're going to
 use this to our advantage right now by
-making a templates folder and Max and
+making a templates folder and
-I'm going to copy the I'm going to do it
+I'm going to copy the header from bootstrap3
-in the command line for keys I'm gonna
+into our custom theme.
-copy the header from bootstrap into our
+Open this up... so now this
-custom theme open this up so now this
+file, our custom header, is completely
-file our custom header is completely
+overriding the bootstrap3 theme.
-overriding our the bootstrap theme so
+I'm going to change this to "video tutorial"
-I'm going to change this to video
+just as a very small little thing.
-tutorial just as a very small little
+I'm going to knock out to this
-thing don't you knock out to this
+container class, which I know will make it
-your class which I know will make a
+full-width, and there's something I needed
-full-width and it's something I needed
+to do down here but I can't quite
-to do down here they can't quite
 remember right now so we'll come back to
-that later
+that later.
-so now if i refresh the page the CSS be
-fixed and you can see that with the the
+Now, if I refresh the page the CSS be
-logo has changed to what we customized
+fixed and you can see that the
-it is now full width which looks nice
+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
+the bits in there, which is very nice.
-gonna go to a different view to show
+Gonna go to a different view to show
-that it's going from page to page
+that it's going from page to page.
-excellent
+Excellent.
-so that is the absolute bare-bones
+So that is the absolute bare-bones
 basics that you would need to customize
-a team I'm gonna go over a few other
+a theme. 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
+tools that can make things easier.
-particular with images for this example
+In particular, with images.
-I'm going to replace this text appear
-with an actual picture logo which is
+For this example, I'm going to replace
-basically some that almost everyone will
+this text up here with an actual
-customize this go on to well it's gonna
+picture logo, which is
+basically something that almost everyone will
+customize if they want to.
+I'm also going to add
 add a background image here just that
-show how to add background images now
+show how to add background images.
-these are gonna be handled in different
+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
+image to the template in this case (logo)
-gonna add the image to the CSS in this
+and I'm gonna add the image
-case the first thing I have to do is
+to the CSS in this case (background).
-make an images folder you can put the
+The first thing I have to do is
-images folder wherever you like I know
+make an "images" folder. You can put the
-that I like to install my thoughts
+images folder wherever you like. I know
-inside the CSS folder for convenience
+that I like to install my fonts
-just keep in mind that paths are going
+inside the CSS folder for convenience.
-to be relative to the CSS I'm gonna grab
+Just keep in mind that paths are going
-a few example files that I downloaded
+to be relative to the CSS.
-earlier I'm going to starts with the CSS
+I'm gonna grab a few example
-background so I already included the
+files that I downloaded earlier.
-stylings looks like here so I'll just
-discuss them the the path is relative to
+I'm going to starts with the CSS
+background. So, I already included the
+stylings here so, I'll just
+discuss them. 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
+pre-processing things like less and scss/sass
-CSS and sass that it's gonna be relative
+that it's gonna be relative
-to the outputted CSS so we're just going
+to the outputted CSS. So we're just going
-up to the theme roots and then down into
+up to the theme root and then down into
-images to get this
+"images" to get this particular image.
-the other image and now that the image
+And now that the image
-is in place inside of the folder if i
+is in place inside of the folder, if i
 refresh we should get the background
-image here inside of our theme in order
+image here inside of our theme.
-to add images to the templates it might
+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
+make this easier. So I'm going to go here
-to our video tutorial logo I'm going to
+to our video tutorial logo.
-make it image so image source which I
+I'm going to make it image
-get to in a second and make this alt tag
+so "<img src="(which I get to in a second)
-so the view helper is called image link
+and make this alt tag.
-and this allows you find to find your
+So the view helper is called "imageLink"
+and this allows VuFind to find your
 image for you if you put it in the
-default spot here so I just need to type
+default spot here. So I just need to type
-out an echo of this image link and then
+out "<?=$this->imageLink(" and then
-the name of the image that I want which
+the name of the image that I want, which
-is this is a nice little helper that
+is "vufind-logo.png"...
-will help you find view find helps you
+This is a nice little helper that
-just find the image in the proper spot
+helps you find the image in the proper spot
 regardless of how nested your template
-folders get this is a very useful tool
+folders get this is a very useful tool.
-in this case so now if i refresh you'll
+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
+got from flamingtext.com. It just takes
 a little bit of CSS to make sure that
-doesn't overstep its bounds there we go
+doesn't overstep its bounds.
-absolutely beautiful another common
+There we go. Absolutely beautiful.
-thing you might want to eat that you'll
-might want to keep in mind if you're
+Another common thing that you'll
+want to keep in mind if you're
 making your own actual pages is that
-view fine has breadcrumbs up at the top
+VuFind has breadcrumbs up at the top.
-it is fairly easy to customize these
+It is fairly easy to customize these
-breadcrumbs I just wanted to point out
+breadcrumbs. I just wanted to point out
-how it looks and how it worked so let me
+how it looks and how it works. So let me
-open up a different folder a an existing
+open up a different folder of an existing
 template just to show you what that code
-looks like
+looks like.
-in the theme that's very common to see
+In the theme that's very common to see
-lay out breadcrumbs
+"$this->layout()->breadcrumbs".
-this layout is almost a global object
+"$this->layout() is almost a global object.
-you can write to it from any template
+You can write to it from any template
 and this will come in to come in handy
-when the page actually renders into
+when the page actually renders into layouts.
-layouts so this layout breadcrumbs and
+So $this->layout()->breadcrumbs
-then it's just spread it comes as a
+and then breadcrumbs is a
-string so you can dot append Orkin caps
+string so you can dot append or concat
-onto it with anything you might want so
+onto it with anything you might want.
-in this case this is where we're adding
+So, in this case, this is where we're adding
-the actual search with look for here so
+the actual search, with "lookfor" here so
 if you wanted to completely change the
-bread crumbs or abs and breadcrumbs on
+breadcrumbs or add some breadcrumbs on
-your custom pages this is what you'd
+your custom pages, this is what you'd
-want to look for to do that very useful
+want to look for to do that. Very useful
 if you're making your own unique pages
-with their own unique reps just
+with their own unique routes. Just
-something I wanted to point out just in
+something I wanted to point out, just in
-case another thing that I've been saying
+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
+"theme.config.php" it adds those files to
-every single page this is true of CSS
+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
+add CSS to just one or two pages.
-example in in our header or if we have a
+So for example, in our header or if we have a
 custom search home page we might want to
 add to some vendor files or add some
@@ Line 370: / Line 396: @@
 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
+that. Scripts look like this. Both of
-these are helpers that come was in
+these are helpers that come with
-framework and we've tweaked them a
+Zend Framework and we've tweaked them a
 little bit to help make sure all the
-paths are correct
+paths are correct.
-so head scripts append file adds a
+"$this->headScript()->appendFile()" adds a
-JavaScript file from the J's folder of
+JavaScript file from the JS folder of
-your theme to the header list this is
+your theme to the header list. This is
 useful if you want to add functionality
-to just one page so for example the
+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
+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
+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
+page you can do it this way with
-link a pen style sheets
+"$this->headLink->appendStylesheet()".
-you can pull in vendor files you can
+You can pull in vendor files, you can
-pull in CSS that you just want on one
+pull-in CSS that you just want on one
-particularly heavy page this is a good
+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
+other pages, this is one way to do it
-in a way that will will stay uniquely on
+in a way that will stay uniquely on
-one page you'll see this most commonly
+one page. You'll see this most commonly
-on the searched home if you want to add
+on the search home if you want to add
-some carousels or things like that
+some carousels or things like that.
-you'll see this throughout the view font
+You'll see this throughout the VuFind
-in plates if you take a look that's more
+templates if you take a look.
-or less summarizes the absolute basics
-of making your own theme there are some
+That 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
+cover in later videos. For example,
-mix-ins which is very useful for
+mix-ins which are very useful for
 institutions that have multiple looks or
-multiple themes if for example a college
+multiple themes. For example a college
 that might have multiple libraries you
 might want to solve a different look for
-each one
+each one. mix-ins allow you to share files
-mix-ins allow you to share files among
+among different themes more easily.
-different themes easier it's just
+It's just another tool for customization.
-another tool for customization
+There's also built-in preprocessor
-there's also built in preprocessor
+abilities for less and scss/sass.
-abilities for Les and SES SS I will
+I will cover that in another video.
-cover that in other videos there's ways
+There's ways to do that to compile with PHP
-to do that to compile with PHP or if you
+or if you have node installed,
-have node installed there is a grunt
+there is a grunt file that
-file that we can use to make tasks and
+we can use to make tasks and
-load less and CSS files and finally in
+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
+gives you a pre-built structure for
-your themes so I'm going to leave this
+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
+the structure of our new theme. Thank you
-for watching this video if you have any
+for watching this video! If you have any
 questions please feel free to check out
-the view fund wiki and send us any
+the VuFind wiki and send us any
 emails on our mailing lists that you
-might have we'd be more than happy to
+might have. We'd be more than happy to
 clarify and cover things in future
-videos thank you for watching and happy
+videos. Thank you for watching and
-searching
+Happy Searching!
 ---- struct data ----
+properties.Page Owner :
 ----