Theme Selector And Look And Feel Bootstrap 3.0 (not for Ev1)

WorkWithPlus provides the possibility to select a Theme when you start to develop the application. So, before applying WorkWithPlus to any transaction or WebPanel within a KB, you will have to select a Theme.

This Themes are based on the library Bootstrap 3.0, a library developed by Twitter so that the web applications have new the look & feel tendencies.

You have two options in order to do this:

Option 1 - Clicking in the link: Select WorkWithPlus Theme within any instance

ThemeSelectorLFBootstrapImg01

Option 2 - In the WorkWithPlus Menu: Tools -> WorkWithPlus -> Import WorkWithPlus Theme

ThemeSelectorLFBootstrapImg02

After selecting one of the options above the Theme Selector will appear:

ThemeSelectorLFBootstrapImg03

You can navigate through the available themes and for each theme there are some images. You can visualize the illustrations by clicking in the '>' button.

After selecting one, you have to press Select and many object will be imported:

ThemeSelectorLFBootstrapImg04

This objects includes images, Theme, Master Pages, Web Panels, WorkWithPlus Settings, etc.

So, all the templates and theme will be set in order to generate the application with the same design as the Selected Theme.

For GeneXus X Ev2 the available Themes are the ones that were created using Bootstrap library 3.0. There are 5 available Themes within the category Bootstrap.

For GeneXus X Ev3 or higher, there are 3 sets of Themes, and each set contains 5 different colors: Bootstrap Responsive themes, Bootstrap Responsive Compact themes and Not Responsive themes (there look the same like the Ev2 Themes)

Set of Themes: Bootstrap Responsive Ev3 and Genexus 15

  • Blue

ThemeSelectorLFBootstrapImg05Blue

ThemeSelectorLFBootstrapImg06

ThemeSelectorLFBootstrapImg07Blue

ThemeSelectorLFBootstrapImg08Blue

ThemeSelectorLFBootstrapImg09Blue
 

If you want to visualize the other colors of this theme, access to our example site: www.workwithplus.com/example (Also, you can visualize the set of themes: Responsive Compact on the same link).

  • Green
  • Light Blue
  • Orange
  • Red

Set of Themes: Bootstrap Ev2 or Bootstrap Not Responsive Ev3

  • Blue
    ThemeSelectorLFBootstrapImg10Blue
    ThemeSelectorLFBootstrapImg11Blue
    ThemeSelectorLFBootstrapImg12Blue
    ThemeSelectorLFBootstrapImg13Blue
    ThemeSelectorLFBootstrapImg14Blue
  • Green
    ThemeSelectorLFBootstrapImg15Green
    ThemeSelectorLFBootstrapImg16Green
    ThemeSelectorLFBootstrapImg17Green
    ThemeSelectorLFBootstrapImg18Green
  • Light Blue
    ThemeSelectorLFBootstrapImg19LightBlue
    ThemeSelectorLFBootstrapImg20LightBlue
    ThemeSelectorLFBootstrapImg21LightBlue
    ThemeSelectorLFBootstrapImg22LightBlue
    ThemeSelectorLFBootstrapImg23LightBlue
  • Orange
    ThemeSelectorLFBootstrapImg24Orange
    ThemeSelectorLFBootstrapImg25Orange
    ThemeSelectorLFBootstrapImg26Orange
    ThemeSelectorLFBootstrapImg27Orange
    ThemeSelectorLFBootstrapImg28Orange
  • Red
    ThemeSelectorLFBootstrapImg29Red
    ThemeSelectorLFBootstrapImg30Red
    ThemeSelectorLFBootstrapImg31Red
    ThemeSelectorLFBootstrapImg32Red
    ThemeSelectorLFBootstrapImg33Red