Theme Editor

The theme editor allows you to change a number of visual properties in the application. All of the features have been designed to not impose a significant strain on your device’s resources but it should be noted that all settings will require some additional computer resources to implement. Choose your settings carefully to get the best application experience that balances your wants and your needs.

Controls

1. Test Menu Bar Item Response - When pressed demonstrates the animation: type, speed and colours for menu items in the menu bar control
2. Test Menu Item Response - When pressed demonstrates the animation: type, speed and colours for menu items in the menu control.
3. Test Window Animation Settings - When pressed demonstrates the selected window animation with the defined speed.
4. Test Wallpaper Resolution Settings - When pressed reloads the selected wallpaper with the defined pixel settings.
5. Test Menu Icon Settings - When pressed forces the menu icon settings to be applied if they have not been already.
6. Test Status Settings - When pressed demonstrates the selected animation, speed and scroll based attributes of the status text in the menu bar control.
7. Test Trim Settings - When pressed forces all list and drop-down controls to reload with the updated trim colours.
8. Reset - Reloads the default parameters of the theme profile and applies them to the theme editor.
9. Save & Apply - Stores the currently edited theme profile in the application’s database and sets it as the current theme for loading.
10. Theme title - You can enter some text to annotate your theme; making it easier for you to identify later on. If you leave this blank and save the theme a default title will be generated with the characters “Untitled” and a date-time stamp.
11. Description - Used to submit an additional annotation for your theme that can function as an attribute to sort a list theme profiles or to search for a theme profile with matching text or similar text.
12. Wallpaper - On most SuperLiteralProducts an image can be rendered in the background for both landscape and portrait orientations by choosing the respective radio buttons (a) or (b). You can then choose either to reference the image from the devices shared storage by selecting (c) the “From Library” radio button and then pressing (e) the select button or you can take a picture by pressing the radio button (d) marked "From Camera Snapshot". The saved snapshot or image file will then be referenced. To clear the wallpaper press (f) the blank button. You can have the application crop the referenced image by checking the option (g) “Display a subset of the image” and pressing the crop button (h). Upon pressing the crop button (h) a new activity will be displayed that will allow you set the crop regions for the referenced image. To learn more about using this activity see the section on Theme Editor Cropping. Do note that these options will NOT crop or edit the original image file.
13. Wallpaper Image Mode - You can render your selected wallpapers in different ways. Please note that when cropping is used it is applied to the loaded image not the original image that you reference, this is done to save memory and processing resources.

    Center

    The image will be rendered to the centre of the screen with the largest side of the image being scaled to a user defined parameter. Cropping will be applied to the image if it exceeds the dimensions of the screen.

    Tile Repeat X & Y

    Renders the image side by side, top to bottom using a user defined parameter for size.

    Tile Mirror X, Repeat Y

    Renders the image side by side, top to bottom using a user defined parameter for size. Each image rendered horizontally will be a reflection of the other image that came before it.

    Tile Repeat X, Mirror Y

    Renders the image side by side, top to bottom using a user defined parameter for size. Each image rendered vertically will be a reflection of the other image that is above it

    Tile Mirror X & Y

    Renders the image side by side, top to bottom using a user defined parameter for size with a mirror effect both in the X and Y vertices.

    Scale to smallest edge

    Scales the smallest side of the image to the user defined attribute. The proportions of the image will not be maintained if the scaled result is smaller than the edges of the screen. The image will be cropped if the proportions exceed the screen dimensions.

    Scale to screen

    Scales the image to the screen dimensions using a user defined parameter such that the proportions of the image are maintained but cropping will be applied if the scaled image exceeds the screen dimension.

    Stretch

    The image will be stretched across the screen with respect to the target width and height properties that you submit.

14. Resolution and Sizes - A collection of various size related properties can be manipulated here.

    Menu Toggle Width

    Allows for the menu toggle buttons width to be adjusted (if you set this to 0 and do not have a dedicated menu button on your phone you can toggle the menu manually by holding your pointer on the menu bar).

    Menu Bar Icon Size

    This is the visible size of the containers that shows the icons in the menu bar. Changing this could make the menu bar larger or push text around such that it needs to be scrolled.

    Menu Icon Size

    This is the visible size of the containers that shows the icons in the menu. Changing this could make the menu larger or push text around such that it needs to be scrolled.

    List Icon Size

    This is the visible size of the containers that shows the images in the applications list related views.

    List Icon Resolution

    This is the number of pixels that list images should scaled to. Lower numbers will mean potentially faster loading as fewer resources are used to render the image but the images will possess less detail. Higher numbers will give greater detail but could make the application run slower. The numbers could be viewed as targets for the image loader that will be processed to maintain the image proportions so it is not possible to stretch the image by making one number larger than the other. For the greatest efficiency set both width and height to the same values.

    Wallpaper Resolution

    Will downscale the image to a target size in pixels when the largest side of the image exceeds the specified value. By doing this a large image can be loaded more quickly and represented with fewer resources leading to a more responsive application experience. This will only apply if one of the image vertices is larger than the amount specified else the image will loaded with its default resolution properties.

    List Trim Width

    Changes the horizontal size of the narrow vertical bars that are rendered in list like views. The measurement is in pixels.

    Menu Bar Height Padding

    Allows for additional space to be added inside the menu bar. The measurement is in pixels.

    
15. Menu Position - Pins the fully loaded menu to either the left side, centre area or right side of the screen.
16. Menu Animation - Changes the way the menu transitions from its hidden state to its visible state
17. Menu Animation Speed - Controls how fast the menu transitions from its hidden state to its visible state and vice versa.
18. Menu Item Animation - Changes the way the menu item visually responds when pressed.
19. Menu Item Animation Speed - Controls how fast the menu item animation occurs.
20. Menu Bar Animation Speed - Controls how fast the menu bar transitions from its hidden state to its visible state and vice versa. You trigger the state by either double tapping the bottom left space in the menu bar or swiping said space vertically in the menu bar.
21. Hidden Menu Bar Percentage - Controls how much of the menu bar is displayed when in its hidden state
22. Menu Status Animation - Controls the kind of transition applied to the status text in the menu bar when new status text is submitted.
23. Menu Status Animation Speed - Controls the speed of the animation applied to the status text in the menu bar.
24. Menu Maintenance Check - In order to keep up appearance of opening the menu and closing the menu the application needs to confirm what position the menu is in every so often. This control will either increase the interval or shorten the interval of this check. If the increased the menu when toggled could animate into the wrong position but this will take fewer CPU resources, if decreased the menu will be less likely to appear in the wrong place but will require more CPU resources to maintain.
25. Menu Status Text Scrolling - A number of attributes relating to the status text inside the menu bar can be adjusted here.

    Scroll Repetitions

    When new text is to be submitted for presentation in the status text within the menu bar if the text is too large for the view the application can scroll it left to right automatically for the user. This control allows you to set how many times a scroll from left to right occurs if such a condition is true.

    Start Presentation Time

    Controls how many milliseconds must pass before auto scrolling occurs.

    Finished Presentation Time

    Controls how many milliseconds must pass before the text is scrolled back again.

    Frame Rate

    Controls the smoothness of the auto text scroll animation. Larger number will give a smoother scroll animation but will take more resources to perform, lower numbers will give a choppy animation effect which can save resources. The latter can still be quite pleasant to look at as it bears a resemblance to a 90s VFD/LCD based Hi-Fi.

    
26. Window Animation - When certain items are queried in the application’s database or when certain operations occur the view displaying the main content may need to be repopulated. In between this process a visual transition can be executed if desired.
27. Window Animation Speed - Controls the speed of the main views transition animation in milliseconds.
28. Font - The application text can be rendered with either the in application fonts or your own TTF or OTF fonts. To use your own you must first add them to the application’s font database via the Font Manager then they will be selectable in the drop down menu. If the font is not valid for some reason then it will resemble the default font used on your device.
29. Font Scale - Increases or decreases the size of all of the text within the application based on each text elements default size.
30. Colour Attribute - Many different colours can be applied to different view components in the application. Use the combo box to select a colour attribute and either move the sliders (a1, a2, a3, a4) to control the transparency or the red, green and blue content of each attribute or press the “Hue and Saturation” (b) button to choose a colour from a more visual orientated control (b1, b2).

    Window Background

    The view that all controls a rendered on top off. If you have selected wallpaper to show the colour will provide a tint to the wallpaper if you lower the opacity.

    Heading Text

    Sometimes an application will contain heading markers to draw focus to a main grouping of functions. This option allows you to change the colour of such text.

    Window Text

    The colour used for all text that has not been marked as a heading and is not in the menu bar or menu

    Menu Bar

    The colour to be used for the menu bar.

    Menu

    The colour to be used in the menu.

    Menu Font

    The colour to be used for text in the menu

    Menu Item Highlight

    The colour to be used for menu item in the menu when pressed or triggered

    Menu Bar Item Highlight

    The colour to be used for menu item in the menu bar when pressed or triggered

    Menu Bar Peek

    The colour to be used for menu bar when it is hidden or in a peeking position

    Menu Item Divider Colour

    The colour to be used for the horizontal line drawn between each menu item within the menu.

    Menu Bar Item Divider Colour

    The colour to be used for the vertical line drawn between each menu item within the menu bar.

    Trim

    The colour to be used for the narrow vertical bar seen in list like views

    Menu Bar Trim On State

    Some menu bar items represent an on/off state of an application asset. This represents the colour of the vertical bar next to a menu item in the menu bar when it is represents an on value.

    Menu Trim On State

    Some menu items represent an on/off state of an application asset. This represents the colour of the vertical bar next to a menu item in the menu when it is represents an on value.

    Menu Bar Trim Off State

    Some menu bar items represent an on/off state of an application asset. This represents the colour of the vertical bar next to a menu item in the menu bar when it is representing an off value. The off value is in most cases represented even if the menu item does not symbolise an on/off state for an asset, in this case the trim is purely for visual decoration or can serve as a marker for the visually impaired

    Menu Trim Off State

    Some menu items represent an on/off state of an application asset. This represents the colour of the vertical bar next to a menu item in the menu when it is representing an off value. The off value is in most cases represented even if the menu item does not symbolise an on/off state for an asset, in this case the trim is purely for visual decoration or can serve as a marker for the visually impaired.

    Menu Bar Icon Background

    If a menu item in the menu bar has an icon a background colour can be set for it.

    Menu Icon Background

    If a menu item in the menu has an icon a background colour can be set for it.

    Menu Bar Icon Tint

    If a menu item in the menu bar has an icon a colour mask can be applied changing the opacity increase the intensity of the shade

    Menu Icon Tint

    If a menu item in the menu has an icon a colour mask can be applied changing the opacity can increase the intensity of the shade.

    List Icon Tint

    The shade of an image shown in a list like view; changing the opacity can increase the intensity of the shade

    List Icon Highlight Tint

    The shade of an image shown in a list like view when a user has selected its surrounding view; changing the opacity can increase the intensity of the shade.

    Menu Toggle Button

    The colour of the narrow vertical bar to the right of the menu bar.

    List Highlight

    The colour of a list element when a user selects or highlights it.

    Text Button Colour 1,2,3

    A Text Button control is a view which mimics the workings of a real world push switch but uses a few characters to represent functionality. 3 colours can be changed in association with its basic motif.

    Text Button Disabled Colour

    Represents the overall colour of the button when it is in a disabled state.

    Text Button Text Colour

    Represents the colour of the text to be drawn on the button when the button is in an active state.

    Text Button Text Disabled Colour

    Represents the colour of the text to be drawn on the button when the button is in an disabled state.

    Image Button Colour 1,2,3

    A Image Button control is a view which mimics the workings of a real world push switch but uses an image icon to represent functionality. 3 colours can be changed in association with its basic motif.

    Image Button Image Tint

    Allows for the icon within the image to be re-shaded in a certain colour.

    Image Button Shimmer

    Sometimes an application will apply a shimmer animation to an image button. This options allows for the colour of the glint to be changed.

    Image Button Background

    Allows for the colour behind the image icon to be changed.

    Image Button Disabled

    Represents the colour of the overall button when it is in a disabled state.

    Checkbox Colour 1,2,3,4

    A Checkbox is a view which represents the concept of enabling or disabling an option. 4 colours can be changed in association with its basic motif.

    Checkbox Image Tint

    Sometimes an application will use a Checkbox that shows an icon image within or next to its control boundaries. This option allows for the image to be re-shaded in a certain colour.

    Radio Button Colour 1,2,3,4

    A Radio Button is a view which represents the concept of choosing a single option from a group of options. 4 colours can be changed in association with its basic motif.

    Radio Button Image Tint

    Sometimes an application will use a Radio Button that shows an icon image within or next to its control boundaries. This option allows for the image to be re-shaded in a certain colour.

    Seek Bar Button Colour 1,2,3,4

    A Seek Bar is a view which represents the concept of selecting a single number from a line of numbers. 4 colours can be changed in association with its basic motif.

    Number Picker Stroke Colour

    The colour of the 2 horizontal dividing lines that accent the selected number.

    
31. Enable fast theming - Fast theming will apply a unique optimal technique to load and apply all properties set within the theme leading to a much quicker snappier application experience when a theme is to be applied however this can sometimes cause a few minor visual problems within the application on some devices when the setting is enabled. Such problems may include the menu bar disappearing or not loading in the correct location. This option is disabled by default to maximize compatibility but can be freely toggled for each theme that you create.
32. Show font preview in listed theme selection - This is a global setting that is designed around giving you faster performance when accessing the Theme Manager when disabled the font of a theme will not be loaded and thusly not displayed in the Theme Managers list selection view.
33. Show wallpaper image in listed theme selection - This is a global setting that is designed around giving you faster performance when accessing the Theme Manager when disabled the wallpaper image of a theme will not be displayed in the Theme Managers list selection view.