Part 1.

0 Elysian Fields - Lock Screen Tutorial 

 
Welcome Intro 

Welcome everyone to a tutorial to an app that's still in beta, but it simply blew me away when I
found out what it can do. So in this video I'll be explaining what exactly is Zooper Widget
Utilities, through the process of setting up a lock screen, let us begin.

On screen Intro 

Now how this video will work is that I'll first set up this incredibly minimal lock screen - titled
Elysian Fields by the author Sebastian Spindler aka kwerdenker - and then end off by explaining
his amazing app. The lock screen comes with these clean, dark, minimal widgets displaying
your time, date, temperature, as well as music info if you require. The lock screen includes a
neat arrow that unlocks your phone and all of this is set on a picturesque wallpaper of majestic
green flowing hills. So up next - setting up this incredible lock screen.

Part 1.1: Before you begin 

So before you begin, here are the apps that you'll be needing in order to complete this setup:
* Widgetlocker - as this is the lock screen app where everything will be based.
* Zooper Widget Pro - this is the widgets that you saw on the lock screen, and you'll need the
pro version in order to import custom templates, which is what we'll be doing shortly.
* Media Utilities - that'll get your music playing in the Zooper Widgets
* Any file explorer - we recommend ES File Explorer
* And Zooper Widget Utilities - available free from the Play Store, and I'll get to its use later on in
the video.

We first need to configure Media Utilities - but that's easily done by enabling all the Application
Integration apps found in the Media Utilities settings, as well as enabling all the Experimental
features. Apologies if I'm going slightly fast in this video - if you think that it is too fast - refer to
my previous lock screen setups so that you're used to how these setups work :)

Great - you have all your apps - next up - what do with those resources that you will find in the
description. You can either download the .zip file onto your computer, then extract it and copy
the folder onto your phone, or simply extract the file on your phone using your file explorer.

1
Next - select all the Zooper Widget files (those are the ones ending in .zw) and paste them into
the Templates folder, found in the Zooper Widgets folder that's located on your phone's main
sdcard directory.

That's all your copying and pasting done - now let's move onto setting up that tasty lock
screen...

Part 1.2: WidgetLocker Setup 

Now that’s tackle this lock screen - airiight!

1. Open WidgetLocker - long press and delete any apps/widgets that might be on your lock
screen - you want it to be super clean.
2. Tap that white settings icon on the top right - this will open your settings.
3. Select Look & Feel - Yes you need to enable Alternative Wallpaper - then tap Select
Wallpaper and find where you saved that sexy wallpaper. No cropping is needed, just make
take up as much as the image as possible - OK.
4. Background tint - not too much - you still want that wall to pop.
5. Layout - now listen up - disable ”Automatically determine grid size” - then set it to 8x8. I used
8x8, but if it doesn’t work for you - go one up or one down in size - Save.
6. Yes you can have a transparent Notification bar and change the text and icons to black - but
in order to change their colors your phone needs to be rooted and running a super-cool Xposed
Framework module such as Tinted Status Bar. See the description for more info. Else jus
disable the notification bar for that clean feel on your lock screen - Look and Feel done.

7. Advanced - If you don’t want your phone to unlock everytime you hit that menu button - open
Homehelper and enable: Homehelper component, Homehelper Block home and Block Home in
Other Apps. If you get a popup - select yes and always for it - then go back.
8. Finally enable Widget Overlap - and you are done with setting up WidgetLocker.

Now let’s bring out the widgets - mmHmmm it’s Zooper Widget time.

2
Part 3: Zooper Widget Setup 

We’re almost there, let’s do this!

1. Long press on the lock screen - select a 4x3 for the clock widget at the top - resize it so it
takes up the whole width of the screen - then tap back.
2. Tap the widget - this opens the Zooper Widget Configuration dooblydoo - select the open icon
and find that clock widget for this setup.
3. Tap back to see your creation come to life, and resize/reposition if necessary. See the
description for the complete Guide to Zooper Widget in case you are still new to this amazing
app.
4. Now do the same for both the music controls and music info Zooper Widgets, with their
heights only needing to be one column, then come back here once you are done with those.
That’s the Zooper Widgets down, remember to select each one, open your desired module
within the Layout section., then open the Module Ontap setting. This is where you select an app
or shortcut so that once you go back to the main Zooper settings - select Widget Ontap Action
and then select disabled - you will only open that desired hotspot - and not the configuration
menu each time which can get pretty messy.

Finally we can move onto that unlock button at the bottom.

Part 4: Custom Slider Setup 

Final part - well unless you don’t want to see what makes Zooper Widget Utilities so awesome.
Now there are two ways to setup a custom slider. You can simply create a blank Zooper Widget,
place the icon that’s included on the widget - and set the ontap action to your current launcher.
It works - but I feel like it’s cheating. I prefer using the custom slider that comes with Widget
Locker.

1. Long press on the lock screen - custom slider - changing the theme to Invisible Tabs theme.
Don’t have it? Select Get Themes and download from the WidgetLocker site, select it once
downloaded and just say install only.
2. Once that is selected - slide the silver sound icon to the left - then change the Action to
disabled - we don’t need it.
3. Next - swipe the unlock icon to the right - then select the Icon - as we want to change it.
4. Select Gallery and choose that arrow icon that came with the folder you downloaded, no
cropping required - Select Done.

5. Now all you have to do is resize it so that it’s more long, than wide. Let me repeat that.
Keeping your slider very wide will keep it in ‘landscape mode’, but resizing it so that it’s say 2

3
columns wide but 5 columns high, it’ll then change to ‘portrait mode’. Just get into a place that
looks good and hey, that’s your lock screen set up!

You can always test it out by locking your phone and unlocking it, revealing a lock screen that
looks a million times better.

But now, what happens when you want to change your wallpaper, to say, something much
darker, and your widgets end up not looking too good? Well that’s where Part 2 of this video
comes in - which introduces to you what Zooper Widget Utilities is and what makes it so
incredible!

Outro 

Click here to jump there now, or just listen to me ramble on about thanking you for watching this
video and that if you enjoyed to please subscribe. Also don’t forget to join our various social
communities and also don’t forget to check out MyColorScreen’s official one-click theming
launcher - Themer - Available free from the Google Play Store. Other than that it’s Marco here
from the MyColorScreen channel, and as always, don’t stop customizing.

4
Part 2.0 Zooper Widget Utilities Tutorial 

Intro 

Welcome back everyone - this is Part 2.0 of this 2 part tutorial explaining to you a new app
called Zooper Widget Utilities. Part 1.0 was a lock screen setup and in this video, Part 2.0, I’ll go
through what Zooper Widget Utilities is and how it can make your customizing life a whole lot
easier. I’ll be working off Part 1’s lock screen so if you haven’t set it up, you might want to click
this link or see the link in the description as this might help you understand this nifty app a little
better. So let’s get to it!

Part 2.1 So what is ZW Utilities? 

ZW Utilities is a simplified color management tool for Zooper Widgets. Instead of having to go
through multiple modules/widgets to change colors in your setups, you have one central place
to do it.

But why should I care?

As a designer: Instead of having to do multiple versions of your widgets to get different color
schemes (highlight colors, dark/light variants, etc) you only have to do the widgets once and
then provide different color profiles for your setup. This essentially reduces your time to some
degree, with the added benefit that your users now can adapt the setup to their
liking/wallpaper/setup/favorite color with ease. With the new pop-out color dialog ZW Utilities is
also great for prototyping because you can see the color change instantly on your homescreen.

As a user: You want to use these awesome Zooper widget(s) but the colors don't match your
wallpaper? And you don't want to edit multiples modules/widgets or don't know how to do it? If
the designer used ZW Utilities to design their widget it's easier than you think! Open the app,
import the color profile and then change just change the color as you need. It will be
automatically applied across multiple widgets and with the pop-out color option it's really easy to
find a color that looks good on your wallpaper.
(Comment: the caveat here is, that the designer has to implement the functionality for it to work.
I already had some feedback from users that didn't realized that. So it might be a good idea to
put a bit of emphasis on this point in the video)

5
Part 2.2 How to use ZW Utilities - Importing Files 
 
Now that you understand a bit more about the power of ZW Utilities, I’ll move onto how to use it.
Let’s go to that lock screen I set up in the previous video. Remember to click the link if you want
to see how I set that up.

To Import ZW Utilities files, you can either paste them into the ColorExports folder, which is
found in the ZWUtilities folder located on your phone’s main SDcard directory - OR - and this to
me is much easier - just tap on the file, as this will open the file directly in ZWUtilities, where you
can either select Copy or Copy & Apply the file. This saves you from opening the app then
selecting Import in the drawer. It has 2 options here. The first option will append the imported
color variables to the current ones in the app or update the colors if the imported variables
already exist.

Part 2.3 How to use ZW Utilities - Editing Variables 

 
So now we have the Elysian Fields Color Variables in our hands, and this my friends, is what
makes ZW Utilities so special. Let me show you. Say I set up a dark wallpaper

- show dark red wallpaper - 

now all my widgets look terrible and I pretty much can’t see them at all. Changing all their colors
is quite a pain sometimes, especially when you have added quite a few modules. Not with ZW
Utilities.
- show ZWU-
1. Open ZW Utilities - here you will see the variables that you have now imported or created.
2. Swipe across to the variables you want to edit, or open the side drawer to jump to a variable,
it’s up to you.
3. Change the color using either the color code or your keen eye and hit the Change Color
Button. It’s that simple, the color of that module will now be changed. Do it for the rest in this
lock screen widget - I’ll stick with white and light greys so they stick out really well.
4. Exit the app - then open WidgetLocker.
- show WidgetLocker -
As you can see, all the colors of the widgets have now been changed, and it took about the 10th
of the time it would usually take me to change each color.

6
Part 2.4 How to use ZW Utilities - Creating Variables 

So now you know how to edit the variable - but now how do you create your own - and then
make them work in your own Zooper Widgets?

1. Add a new color variable in the app by tapping the + icon in the actionbar
2. Choose a name for your variable, MCS_COLOR for instance
3. Note how your variable is displayed in the title strip below the action bar. That's how you need
to enter it into Zooper. Our example will look like this #TMCS_COLOR#.
4. Go into your Zooper widget and into the module you want to change and enter the Advanced
Parameter Option. Based on the module, choose the appropriate color tags. Currently Zooper
supports the following colors to be change by advanced parameters:
(Rich) Text (Advanced Parameter tag [c][/c]); Rect modules ([c][/c]); Progress bars [cf][/cf]
(foreground), [cb][/cb] (background) and [cl][/cl] (additional fill color).
5. Enclose your variable name in the appropriate tag. For a text module, the content of the
Advanced Parameter option would be [c]#TMCS_COLOR#[/c].
6. And that's about it. Now the color of this module can be changed by adjusting the color of the
appropriate variable in ZW Utilities.
7. If you want modules to have the same color, re-use the same variable for all of them and if
you want different parts be able to change their color individually, create more variables.
8. If you're done with your setup export the variables to a zuw file via the Export option in the
app drawer. It will be saved to /sdcard/ZWUtilities/ColorExports/ and you will be able to share
that along with your Zooper templates. You can even to multiple different color schemes, save
them to different files and then be able to change the look of a widget or multiple widgets with
the import of one file.​

Outro 
 
And that concludes this two part video. Hopefully you now have an awesome-looking lock
screen that can easily change its colors both easily and in less than half the time it would
usually take. I hope you’ve enjoyed this video and that you now understand the beauty of ZW
Utilities. If you did enjoy this video please give it a thumbs up as well as to please sub to the
MCS channel. Also don’t forget to join our various social communities and also don’t forget to
check out MyColorScreen’s official one-click theming launcher - Themer - Available free from
the Google Play Store. Other than that it’s Marco here from the MyColorScreen channel, and as
always, don’t stop customizing.