Once you have some imagery built for your Self Service customization, why not double-dip and customize your JSS web app?
So admittedly this one is a bit more for funsies than my other posts. Once you have some imagery built for your Self Service customization, why not double-dip and customize your JSS web app? It's way more fun to log into a JSS for your company that looks like your company!
If you need a refresher on some of the Self Service imagery customizations, check out the following posts:
Customizing Self Service
Branding Self Service, Part 1
Branding Self Service, Part 2
Branding Self Service, Part 3
Further Branding for Self Service 9.4
Self Service Aside, Creating Icons
Another Tweak in Self Service 9.51
There are only a few images you'll really want to focus on for branding your JSS:
- the favicon.ico which displays in the address bar of a browser
- the login screen logo
- the navigation logo in the app
As you can see, I already updated mine for our organization, so I'll be showing you where the images live and how to switch them out.
The first thing you want to do is dig into your JSS server boxes themselves and snag some of the original images to use as templates. In a JSS hosted on a Mac Mini server, the main image location is:
With that folder you're going to be mostly interested in the "login" and "navigation" folders. "ios-jss-login.png" is the logo on the JSS login screen when accessed on a mobile device, and "osx-jss-login.png" is the logo on that screen when accessed on a desktop (or when the resolution is over about 800 pixels wide). It is a responsive page; if you're on 9.4 and scale down your browser window you'll see it change from the OS X version to the mobile version.
Here are the original images within the folder tree:
For the images to load the names need to remain the same, even if you're replacing them with branded imagery. So, make a copy of the originals and throw them somewhere safe. I like keeping things backed up locally on the box, so I throw them in a folder in the Pictures folder. Then, copy them to a location you can get to (network share, email them to yourself, etc.) so you can have some fun with them in Photoshop.
I won't really go into detail on favicon.ico, because that one is pretty self explanatory. You'll notice it lives in ROOT, which is the root directory of the web app. It must be in that location for a browser to access it. There are plenty of favicon creator tools out there, but I recommend just stealing the one from your company's webpage. Just go to yourcompany.com/favicon.ico and it should show you the favicon they use. Save it to your machine, then copy it into the ROOT directory and replace the default JSS favicon.
Next up is the login icons. The 9.5 version of the JSS has streamlined a lot of the imagery, making it pretty simple to brand and replace. Now, both the iOS and OS X login images are the same, so you can just make one and copy it and rename them appropriately.
Once you have them created and correctly named, you can throw them into the login folder showed above on your JSS box.
The navigation logo is within the navigation folder (shocking, I know). You can use your JSS login images as a base for the jss-logo.png, which is the navigation logo in the top left corner of the web app once logged in.
Once you have it saved and appropriately named, copy it into the navigation folder shown above.
Once you update the imagery, go up to the ROOT folder and "Get Info" (Command-I or right-click to get that Info window to pop up). Unlock the folder, then apply the permissions to all enclosed items. This makes sure the files you added have the permissions for the web app to display them; sometimes the permissions of the files are for whatever local admin is on the box, and won't display on the web page because it doesn't have the right permissions. This fixes that.
Then go to your browser and enjoy your branded JSS! You may need to do a good old fashions cache & cookie clear to see the updated imagery if you don't see it right away. And be patient about the favicon… some browsers will take a day or two to grab the new one from root.
If you poke around in this images folder in the JSS you'll find there is quite a lot of imagery you can play with (safely, of course). If you're Photoshop savvy enough you can change out that JAMF Software logo too, which is just a small ping with their logo. I've debated doing that too, but I want to give credit where credit is due so I leave it there.
You may also notice that within ROOT is a stylesheets folder. In there are all the CSS stylesheets that skin the JSS, Self Service, and other webpage that are used by the JSS. You could potentially go through and adjust things like the OS X Enrollment landing page, and the Self Service login screen to make a new background color (something I'll be showing in my JNUC talk next week!). Naturally this involves some CSS knowledge, so tread with caution. AND BACK UP EVERYTHING!!!
While I'm on the topic of BACKING UP EVERYTHING!!!, note that any time you upgrade your JSS all of this imagery will be re-written by the JSS installer app. So, make sure you keep copies of originals and branded imagery so you can just copy it back to the appropriate folders, apply permissions, and keep things ship-shape when you update your JSS.
Note: the above is provided for informational purposes and general fun Mac Admin workflows only. I don't want to throw legalese at you but do want to make it clear that I don't work for JAMF, I don't have anything to do with their software other than I like using it and it helps me do my job on a daily basis. Use my guides with caution; I can't support your JSS if something goes awry when making any changes to any files in the server. Honestly, just have fun and do what you're comfortable with. I have a strong background in web and graphic design so this stuff is fun for me. Do what's best for you and your environment.
Did you find this post useful? Leave me a tip!
💖
If you need a refresher on some of the Self Service imagery customizations, check out the following posts:
Customizing Self Service
Branding Self Service, Part 1
Branding Self Service, Part 2
Branding Self Service, Part 3
Further Branding for Self Service 9.4
Self Service Aside, Creating Icons
Another Tweak in Self Service 9.51
There are only a few images you'll really want to focus on for branding your JSS:
- the favicon.ico which displays in the address bar of a browser
- the login screen logo
- the navigation logo in the app
As you can see, I already updated mine for our organization, so I'll be showing you where the images live and how to switch them out.
The first thing you want to do is dig into your JSS server boxes themselves and snag some of the original images to use as templates. In a JSS hosted on a Mac Mini server, the main image location is:
/Library/JSS/Tomcat/webapps/ROOT/images/
With that folder you're going to be mostly interested in the "login" and "navigation" folders. "ios-jss-login.png" is the logo on the JSS login screen when accessed on a mobile device, and "osx-jss-login.png" is the logo on that screen when accessed on a desktop (or when the resolution is over about 800 pixels wide). It is a responsive page; if you're on 9.4 and scale down your browser window you'll see it change from the OS X version to the mobile version.
Here are the original images within the folder tree:
For the images to load the names need to remain the same, even if you're replacing them with branded imagery. So, make a copy of the originals and throw them somewhere safe. I like keeping things backed up locally on the box, so I throw them in a folder in the Pictures folder. Then, copy them to a location you can get to (network share, email them to yourself, etc.) so you can have some fun with them in Photoshop.
I won't really go into detail on favicon.ico, because that one is pretty self explanatory. You'll notice it lives in ROOT, which is the root directory of the web app. It must be in that location for a browser to access it. There are plenty of favicon creator tools out there, but I recommend just stealing the one from your company's webpage. Just go to yourcompany.com/favicon.ico and it should show you the favicon they use. Save it to your machine, then copy it into the ROOT directory and replace the default JSS favicon.
Next up is the login icons. The 9.5 version of the JSS has streamlined a lot of the imagery, making it pretty simple to brand and replace. Now, both the iOS and OS X login images are the same, so you can just make one and copy it and rename them appropriately.
Once you have them created and correctly named, you can throw them into the login folder showed above on your JSS box.
The navigation logo is within the navigation folder (shocking, I know). You can use your JSS login images as a base for the jss-logo.png, which is the navigation logo in the top left corner of the web app once logged in.
Once you have it saved and appropriately named, copy it into the navigation folder shown above.
Once you update the imagery, go up to the ROOT folder and "Get Info" (Command-I or right-click to get that Info window to pop up). Unlock the folder, then apply the permissions to all enclosed items. This makes sure the files you added have the permissions for the web app to display them; sometimes the permissions of the files are for whatever local admin is on the box, and won't display on the web page because it doesn't have the right permissions. This fixes that.
Then go to your browser and enjoy your branded JSS! You may need to do a good old fashions cache & cookie clear to see the updated imagery if you don't see it right away. And be patient about the favicon… some browsers will take a day or two to grab the new one from root.
If you poke around in this images folder in the JSS you'll find there is quite a lot of imagery you can play with (safely, of course). If you're Photoshop savvy enough you can change out that JAMF Software logo too, which is just a small ping with their logo. I've debated doing that too, but I want to give credit where credit is due so I leave it there.
You may also notice that within ROOT is a stylesheets folder. In there are all the CSS stylesheets that skin the JSS, Self Service, and other webpage that are used by the JSS. You could potentially go through and adjust things like the OS X Enrollment landing page, and the Self Service login screen to make a new background color (something I'll be showing in my JNUC talk next week!). Naturally this involves some CSS knowledge, so tread with caution. AND BACK UP EVERYTHING!!!
While I'm on the topic of BACKING UP EVERYTHING!!!, note that any time you upgrade your JSS all of this imagery will be re-written by the JSS installer app. So, make sure you keep copies of originals and branded imagery so you can just copy it back to the appropriate folders, apply permissions, and keep things ship-shape when you update your JSS.
Note: the above is provided for informational purposes and general fun Mac Admin workflows only. I don't want to throw legalese at you but do want to make it clear that I don't work for JAMF, I don't have anything to do with their software other than I like using it and it helps me do my job on a daily basis. Use my guides with caution; I can't support your JSS if something goes awry when making any changes to any files in the server. Honestly, just have fun and do what you're comfortable with. I have a strong background in web and graphic design so this stuff is fun for me. Do what's best for you and your environment.
Did you find this post useful? Leave me a tip!
💖
Write a comment
Post a Comment