Warning: This page has not been updated in over over a year and may be outdated or deprecated.
videos:creating_themes
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
videos:creating_themes [2020/02/03 20:27] – [Transcript] demiankatz | videos:creating_themes [2020/06/09 16:25] – [Related Resources] demiankatz | ||
---|---|---|---|
Line 8: | Line 8: | ||
- [[development: | - [[development: | ||
+ | - Example theme files used in the video: [[https:// | ||
===== Transcript ===== | ===== Transcript ===== | ||
- | :!: Needs editing and cleanup. | + | Hello! I'm Chris Hallberg and today we're |
- | + | ||
- | | + | |
going to discuss how to make a new theme | 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' |
- | 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 |
- | themes the default theme that you' | + | themes, the default theme that you' |
- | seeing here is called | + | seeing here is called |
get to why it's called that in just a | get to why it's called that in just a | ||
- | second | + | second. VuFind |
that are designed to be a good | that are designed to be a good | ||
jumping-off point for you to do your own | 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 | 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 | + | up the back-end of VuFind. |
+ | VSCode | ||
+ | folder | ||
previous videos on the same virtual | 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 | 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 | + | in "local/config/vufind/config.ini". |
- | this file should exist if not you' | + | This file should exist, if not you' |
- | want to make a copy out of config you | + | want to make a copy out of |
- | find config | + | "config/ |
+ | This is the config | ||
file that contains all the basic | file that contains all the basic | ||
- | configurations | + | configurations. One of the sections of |
- | the configuration | + | this configuration, at the top, is called |
- | site and this is where the overall | + | [Site] |
- | configurations for where the site is | + | configurations for where the site is, |
what email address gets the feedback and | 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 | + | |
+ | I'm going to switch | ||
+ | over to bootstrap3 | ||
more blank template for you to start | more blank template for you to start | ||
- | your theme on this is obviously built in | + | your theme on. This is obviously built-in |
- | bootstrap | + | Bootstrap |
- | 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 | + | Bootprint3 |
from is takes some of the original | from is takes some of the original | ||
- | stylings of legacy | + | stylings of legacy |
- | them on top of bootstrap | + | them on top of bootstrap3 |
- | finally the newest theme that we have is | + | finally, the newest theme that we have is |
- | called sandal | + | 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 | styled theme to match the trends of the | ||
last two years or so and there should be | last two years or so and there should be | ||
a brand new theme coming out later in | a brand new theme coming out later in | ||
2020 to match the stylings and the | 2020 to match the stylings and the | ||
- | accessibility | + | accessibility and modern |
- | design practices of the current day | + | design practices of the current day. |
- | another | + | |
- | to switch back to the show play here is | + | Another |
- | 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 | design is a larger thing but if you want | ||
to serve a particular theme just to | to serve a particular theme just to | ||
mobile users this is the way that you | 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 | down a little farther to two useful | ||
- | things for developers | + | things for developers: |
- | and selectable themes | + | " |
- | uncomment these alternate themes allows | + | I'm going to uncomment these. |
- | you to specify like shortcut IDs for | + | " |
+ | like shortcut IDs for | ||
different themes so you can switch back | different themes so you can switch back | ||
- | and forth between them in the by using | + | and forth between them by using |
- | URL parameters | + | URL parameters. So I'm going to put on |
these two for now just to show how this | 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 "? |
- | 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 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 | little further down to selectable themes | ||
you can actually give yourself a | you can actually give yourself a | ||
- | drop-down they' | + | drop-down they' |
- | [Music] | + | So, now there' |
- | [Music] | + | |
- | so now there' | + | |
top bar that allows you to do the same | top bar that allows you to do the same | ||
- | kind of switching | + | kind of switching. This is also useful if |
you want to present to your users with | you want to present to your users with | ||
different UI is such as larger text or | 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 | + | |
+ | I'm going switch to Bootstrap | ||
going to look at how themes are | 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 |
you'll see a bunch of different folders | 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 | it's broken down into several different | ||
- | folders | + | folders. These are mostly self-explanatory. |
- | explanatory | + | One that is missing here is |
languages if you wanted to do a custom | languages if you wanted to do a custom | ||
language file to add particular strings | 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 | + | is the theme.config.php. This file |
- | tells you find what customizations you | + | tells VuFind |
want and what files to include on every | 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 | more advanced options down here that | ||
we're not going to get to today such as | 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 | + | There's also a ways to specify |
- | helpers I'll talk about a few of those | + | I'll talk about a few of those |
later and also the important thing to | later and also the important thing to | ||
- | note here is this extend this rule at | + | note here is this " |
- | the top view finds themes inherits from | + | the top. VuFind' |
- | each other so roots is a theme that | + | each other. So "roots" |
contains a lot of templates that are | contains a lot of templates that are | ||
used in every single theme and if you | used in every single theme and if you | ||
- | look at boot prints | + | look at bootprint3' |
- | extends from bootstrap 3 this allows you | + | extends from bootstrap3. This allows you |
to build immediately on top of what we | to build immediately on top of what we | ||
offer and on top of other parent themes | offer and on top of other parent themes | ||
- | to make it easier | + | to make it easier. If you look you can |
- | actually notice that blueprint seemed | + | actually notice that bootprint3 |
- | actually | + | doesn' |
- | 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 |
- | 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 | 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 | + | bootstrap3 |
gonna want to pick the parts that you | gonna want to pick the parts that you | ||
want to customize and use only those | 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' | + | I think with that we're ready to |
- | command prompt | + | 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 | I'm going to keep it simple today and | ||
just make things manually so you can see | just make things manually so you can see | ||
how everything works but if you wanted | how everything works but if you wanted | ||
- | to auto-generate a theme by the correct | + | to auto-generate a theme that' |
- | structure | + | structure and some other things in place |
- | and some things in place that is there' | + | there' |
- | 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 | + | I'm actually going to copy |
+ | bootprint3' | ||
because it matches what we're going to | 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 | ready to go so I can go up here and I | ||
- | can switch to tutorial I'm also going to | + | can switch to "tutorial" |
add tutorial to our configurable | 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 | take a look so I'm going to choose the | ||
- | theme directly | + | theme directly. You'll see that it looks |
- | identical to bootstrap 3 because we have | + | identical to bootstrap3 |
- | in customize | + | customized |
- | fact in tutorial | + | fact in tutorial. |
+ | |||
+ | So you can see that | ||
even though we haven' | even though we haven' | ||
are already leveraging all of the | are already leveraging all of the | ||
accessibility and all of the structure | 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 |
- | make our actual | + | |
put our customizations and we need to | put our customizations and we need to | ||
- | tell theme config that they exist so I'm | + | tell "theme.config.php" |
- | going to make a CSS folder | + | |
- | to make a new file in that folder I'm | + | So I'm going to make a " |
- | gonna call it custom | + | 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", |
- | single page I'm going to just add a | + | to tell VuFind |
+ | 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 | little bit of color here so we can see | ||
that it works and if we go back you can | that it works and if we go back you can | ||
see that if i refresh it things are now | see that if i refresh it things are now | ||
slightly different as I have customized | slightly different as I have customized | ||
- | things | + | things. Actually, |
- | punching | + | punch in a bunch of a bunch more code |
here that I will share later but not | 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 | different things to get us started on | ||
- | showing what a custom | + | showing what a custom |
- | you see we can change the button colors | + | You see we can change the button colors |
we can change the fonts and everything | we can change the fonts and everything | ||
like that all the things you can do with | 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 | I actually want to go and change some of | ||
- | the actual templates | + | the actual templates. So, for example I |
might want to make this header full | 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 |
you can take the inheritance qualities | 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 | my demonstration today I'm going to show | ||
you how to override and make your own | you how to override and make your own | ||
- | slightly customized header | + | slightly customized header. Now you have |
to be careful with this kind of thing | to be careful with this kind of thing | ||
because if you give something the same | 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 | + | For example in Bootstrap |
- | file is called compiled | + | file is called |
- | this file to compiled it would have | + | this file to "compiled.css", |
completely overridden all of the | completely overridden all of the | ||
- | bootstrap | + | Bootstrap |
- | 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 | use this to our advantage right now by | ||
- | making a templates folder | + | 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 | + | 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 |
- | overriding | + | 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 | + | I'm going to knock out to this |
- | thing don't you knock out to this | + | container |
- | 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 | 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 | 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 | basics that you would need to customize | ||
- | a team I'm gonna go over a few other | + | a theme. |
things particularly some view helpers | things particularly some view helpers | ||
and some common techniques to make sure | and some common techniques to make sure | ||
that you don't get caught with some | that you don't get caught with some | ||
common problems and that you're using | common problems and that you're using | ||
- | tools that can make things easier | + | tools that can make things easier. |
- | particular with images | + | 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 | + | this text up here with an actual |
- | customize | + | picture logo, which is |
+ | basically | ||
+ | customize | ||
+ | I'm also going to add | ||
add a background image here just that | add a background image here just that | ||
- | show how to add background images | + | 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 | 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 | + | The first thing I have to do is |
- | images folder wherever you like I know | + | make an "images" |
- | 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 gonna grab a few example |
- | background | + | files that I downloaded |
- | stylings | + | |
- | 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 | the current CSS folder this is something | ||
to keep in mind if you go on to use the | 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" |
- | 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 | 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 | be trickier to figure out the actual | ||
path but we have added a view helper to | path but we have added a view helper to | ||
- | make this easier | + | 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 | + | I'm going to make it image |
- | get to in a second and make this alt tag | + | so "< |
- | so the view helper is called | + | and make this alt tag. |
- | and this allows | + | So the view helper is called |
+ | and this allows | ||
image for you if you put it in the | 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 "<? |
- | 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 " |
- | 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 | 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 | see that I've replaced the image the | ||
logo with a sillier little image that I | 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 | a little bit of CSS to make sure that | ||
- | doesn' | + | doesn' |
- | absolutely | + | There we go. Absolutely |
- | thing you might want to eat that you' | + | |
- | might want to keep in mind if you're | + | Another common |
+ | want to keep in mind if you're | ||
making your own actual pages is that | making your own actual pages is that | ||
- | view fine has breadcrumbs up at the top | + | VuFind |
- | 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 | + | open up a different folder |
template just to show you what that code | 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 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 | 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 | + | string so you can dot append |
- | 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 " |
if you wanted to completely change the | if you wanted to completely change the | ||
- | bread crumbs | + | breadcrumbs |
- | your custom pages this is what you' | + | your custom pages, this is what you' |
- | 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 | if you're making your own unique pages | ||
- | with their own unique | + | with their own unique |
- | something I wanted to point out just in | + | something I wanted to point out, just in |
- | case another | + | case. |
+ | |||
+ | Another | ||
a lot is that when you change things in | a lot is that when you change things in | ||
- | theme that config it adds those files to | + | "theme.config.php" |
- | every single page this is true of CSS | + | every single page. This is true of CSS |
and Java scripts and all the different | and Java scripts and all the different | ||
things that you would be adding to a | things that you would be adding to a | ||
page but there is a fairly easy way to | 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 | + | So for example, in our header or if we have a |
custom search home page we might want to | custom search home page we might want to | ||
add to some vendor files or add some | add to some vendor files or add some | ||
Line 370: | Line 396: | ||
how that looked so you are aware of what | how that looked so you are aware of what | ||
you'd be looking for if you wanted to do | you'd be looking for if you wanted to do | ||
- | that scripts | + | that. Scripts |
- | these are helpers that come was in | + | these are helpers that come with |
- | framework | + | Zend Framework |
little bit to help make sure all the | little bit to help make sure all the | ||
- | paths are correct | + | paths are correct. |
- | so head scripts append file adds a | + | " |
- | JavaScript file from the J' | + | 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 | 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 | advanced search has a whole bunch of | ||
JavaScript so you can add and | JavaScript so you can add and | ||
dynamically remove different fields and | dynamically remove different fields and | ||
- | move them around | + | move them around. So this file is only |
included on the advanced search page and | included on the advanced search page and | ||
that's done with one of these tags at | that's done with one of these tags at | ||
- | the top of the template | + | the top of the template. Similarly |
wanted to add specific CSS to just a | 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 | + | " |
- | 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 | technique so that way if you have | ||
particularly heavy JavaScript or CSS | particularly heavy JavaScript or CSS | ||
files or ones that are doing a lot of | files or ones that are doing a lot of | ||
work they don't want to interfere with | 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 | + | on the search |
- | 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 | + | templates |
- | 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 | more advanced topics that we're going to | ||
- | cover in later videos | + | 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 | institutions that have multiple looks or | ||
- | multiple themes | + | multiple themes. For example a college |
that might have multiple libraries you | that might have multiple libraries you | ||
might want to solve a different look for | 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 |
- | different themes | + | 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/ |
- | 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 | order to use those tools it might be | ||
easiest to use the command lines | easiest to use the command lines | ||
generators so when I do those examples | generators so when I do those examples | ||
I'll show you how those work and how it | I'll show you how those work and how it | ||
- | gives you a pre-booked | + | gives you a pre-built structure for |
- | your themes | + | your themes. |
+ | |||
+ | So I'm going to leave this | ||
up as the final screen so you can see | 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 | questions please feel free to check out | ||
- | the view fund wiki and send us any | + | the VuFind |
emails on our mailing lists that you | 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 | clarify and cover things in future | ||
- | videos | + | videos. Thank you for watching and |
- | searching | + | Happy Searching! |
---- struct data ---- | ---- struct data ---- | ||
---- | ---- | ||
videos/creating_themes.txt · Last modified: 2023/04/26 13:27 by crhallberg