Transcript

APEX 5 Theme Roller Demonstration

Introduction to APEX 5 Lesson 3

 

ThemeRoller

 

>> Tyson:  Here’s where it gets really cool. It’s likely that you want to have your own custom theme. You want your application to be branded to your company.

 

Say all your applications need to be green. Previously what you likely did is you went through and when you create your application you looked for a theme. There was one green theme that you could pick and that was it. Then you try to customize that.

 

[pause]

 

I know currently looking at the universal theme here, it’s blue. It doesn’t have to be.

 

One thing that we’re going to look at here is known as the ThemeRoller. This thing is really awesome. Major props to the APEX team for getting this thing set up. This is way cool.

 

What does it do for us? How is it helpful? You can see currently I’m using the style blue and I need to point out now that themes now have styles. In other words, you can have the same theme but you can have a blue or red or a green style, or you can just go ahead and make your own. How do we do this?

 

[pause]

 

Quite simply, here you have different options that you can pick. I’m just going to go to global colors and I’m just going to pick the header accent. Here I can just start picking colors. You can notice my application instantly changes.

 

[pause]

 

I go a little bit darker. I kind of like this one. If we want to, we can change more than just this header accent. We can go into containers. Containers have something called a border radius, which we can tweak with a little bit. Those of you might be wondering what this is affecting, it’s actually this little rounded corner here. So if you want more of a larger rounded corner, you can do that. I like the two pixel rounded corner myself. Let me leave all these other stuff the same.

 

[pause]

 

What I’m going to do now is I’m going to click “Save As” and here the style name is going to be called blue copy. I’m just going to call this deep blue. Save.

 

[pause]

 

This style has been saved but when I click “Cancel,” notice that my theme goes back. How do I make that theme current? What I’m going to do is I’m going to navigate to my application.

 

[pause]

 

And I’m going to navigate to my shared components.

 

[pause]

 

Here I’m going to navigate to my theme.

 

[pause]

 

Here you can see I have my universal theme 42. If I scroll down to the very bottom of this theme way, way, way down at the bottom, you can see here are the different styles. Notice that we have blue, deep blue, gray, steel blue. Quite simply, all we have to do is go find the deep blue that we created, edit that or just click on that link, and there’s a little option “Show All.” There’s a little option here where it’s current, “Yes.” So now my application is going to show up in my deep blue theme.

 

But there is one thing here that I want to point out that makes this even cooler. The ThemeRoller uses something which is known as less. You can see it here. It’s including a file called standard.less, which is essentially a preprocessor for CSS. It lets you use things in your CSS like variables. So here we have a variable with a value and here we have the border radius variable with a value.

 

What I could do is I could actually come in here and start entering JAVA script object notation to style my theme strictly or simply with text. But be careful if you come in here and try to modify this stuff directly. For instance, you might notice that these changes here are the header accent color and the border radius with the things that I modified using the ThemeRoller. There’s a note here which is kind of hard to see but I can zoom in. It says “Saving a theme style in the ThemeRoller will generate the JSON configuration.” So you don’t actually need to enter this. The ThemeRoller will enter it for you.

 

Copyright SkillBuilders.com 2017

×
Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!

 

×