Scribd Logo
Upload

Welcome to Scribd!

  • Universal Theme-Praesentation

    Uploaded by

    Alaa Eldeen M A
    11 views53 pages
    This document discusses customizing the Universal Theme in Oracle Application Express using Bootstrap. It provides a brief history of APEX themes and introduces the Universal Theme. It then discusses reasons for customizing themes and options for doing so, including modifying the Universal Theme, using CSS overwrites, or building a new theme from scratch. The document demonstrates how to adapt the Universal Theme using Bootstrap by converting page templates, navigation, buttons, forms and other elements while keeping the functional Universal Theme components. It concludes that customizing by extending the Universal Theme is more cost effective than replacing it entirely.

    Original Description:

    universal_theme-praesentation

    Original Title

    universal_theme-praesentation

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses customizing the Universal Theme in Oracle Application Express using Bootstrap. It provides a brief history of APEX themes and introduces the Universal Theme. It then discusses reasons for customizing themes and options for doing so, including modifying the Universal Theme, using CSS overwrites, or building a new theme from scratch. The document demonstrates how to adapt the Universal Theme using Bootstrap by converting page templates, navigation, buttons, forms and other elements while keeping the functional Universal Theme components. It concludes that customizing by extending the Universal Theme is more cost effective than replacing it entirely.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views53 pages

    Universal Theme-Praesentation

    Uploaded by

    Alaa Eldeen M A
    This document discusses customizing the Universal Theme in Oracle Application Express using Bootstrap. It provides a brief history of APEX themes and introduces the Universal Theme. It then discusses reasons for customizing themes and options for doing so, including modifying the Universal Theme, using CSS overwrites, or building a new theme from scratch. The document demonstrates how to adapt the Universal Theme using Bootstrap by converting page templates, navigation, buttons, forms and other elements while keeping the functional Universal Theme components. It concludes that customizing by extending the Universal Theme is more cost effective than replacing it entirely.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 53

    Bootstrapify

    Universal Theme
    Christian Rokitta
    Speaker
    Oracle mod_plsql HTML DB
    Database Oracle Web Toolkit
    Version 6 APEX
    {CSS}
    <HTML>
    JavaScript();

    today
    1993 1996 1999 2009 2010 2011 2014 2015

    Hoechst AG
    Clinical Research
    Frankfurt, Germany Oracle Database & Application Express Consultant
    Custom Development Utrecht, Netherlands
    Utrecht, Netherlands

    Reporting Plug-in
    Oracle Consultant/Product Development Manager
    Utrecht, Netherlands APEX UI Customization
    proud member of

    Christian Rokitta
    Bootstrapify Universal Theme
    Agenda

    Universal Theme Customization


    B
    Bootstrap
    Brief History of APEX Themes
    Brief History of APEX Themes

    Theme 25
    Universal Theme
    • introduced with APEX version 5
    • responsive, versatile, and customizable
    • 42 Answer to the Ultimate Question of Life, the Universe, and Everything
    • lots of (new) available components
    • Themeroller, Themestyles, Template Options
    • designed uniquely for Application Express 5
    • makes it easy for developers to build beautiful, modern
    applications for any purpose
    http://apex.oracle.com/ut
    APEX 5 Feature Quiz
    APEX 5 UT

    Template Options

    Themeroller

    Theme Styles

    Inline Dialog

    Modal Page

    Cards

    Font APEX
    UT/Customization?
    Why?
    • Different User Experience
    • Audience
    • Purpose
    • Branding
    • Increase Customer Conversions
    • …
    Form Follows Function
    Form and Function
    should be One!
    UT Customization
    • Themeroller
    – Colors
    – Border Radius
    Region, Button, Form Item

    – Side Column Width


    – Custom CSS
    impact of Universal Theme on APEX application UI’s …
    Other Customization Options
    • Modifying UT (break subscription)
    • CSS overwrite UT
    • Develop a Theme from
    Scratch
    • Get and convert a ready-made
    HTML Theme
    remember:

    Oracle APEX Developers are


    (usually) not Web Designers
    Custom APEX Theme Examples
    done from scratch

    • SB Admin 2 for OrclApex,


    Sergei & Richard Martens
    The Bootstrap Brothers!

    • Material APEX, Vincent Morneau


    The Material Man?
    SB Admin 2 for OrclApex
    Material APEX
    Custom APEX UI
    • High Costs

    • High maintenance

    • Losing UT Upgrades
    Custom Themes
    “1.6.4 Themes 1–26 and Theme 50 Deprecated
    The Universal Theme (Theme 42) and the Mobile Theme (Theme 51) are the
    standard themes in Oracle Application Express release 5.1. Older themes are
    considered legacy and are deprecated. Applications using these themes
    should be migrated to the Universal Theme.”

    Universal Theme will be upgraded with future versions


    of APEX when Subscription to Master Theme is kept!
    Ideal Custom Theme
    • Supporting Function of Application
    • Cost Effective
    • Offers same or similar declarative
    components/features as UT

    • Doesn’t Change, but Extend Universal Theme


    But how?
    Available Frameworks
    Bootstrap
    o most used front end web development
    framework in the world
    o includes CSS, HTML and JavaScript components
    o responsive web design support
    o extensive documentation
    o developed by Twitter

    ‐ out-of-the-box file size of 276kB due to excessive number of rarely used styles
    ‐ excessive number of HTML classes and DOM elements can be messy and
    confusing
    UT vs BT CSS Grid
    Integratibility UT & BT

    • CSS is applied to isolated components


    • only a handful of converted/custom templates
    • minor CSS overwrite for visual consistency
    • keep all functional complex UT components
    that make developing in APEX rapid!
    Determing Visual Elements
    Title
    Breadcrumbs/Breadcrumbs
    Components to adapt
    • Structure (Templates)
    ▪ Header, Navigation Footer -> Page Template
    ▪ Region, Dialogs, Buttons -> Region Templates
    • Font -> CSS
    • Buttons -> Templates/CSS
    • Form Elements -> CSS
    • Individual extra Components -> Templates, Plugins
    B Bootstrap Themes
    • off-the-shelf Bootstrap (Admin) Themes
    • consistent UI design -> UX
    • complete (components, page examples, …)
    • customizable/adaptable
    • free vs licensed
    • where to find
    – themeforest.net
    – wrapbootstrap.com
    – websites & newsletters: speckyboy, smashing magazine,
    webdesigner magazine, …
    DEMO
    DEMO
    Bootstrapify UT: Steps
    1. Page Template
    2. Navigation Template
    3. Breadcrumbs Template
    4. Region Template
    5. Buttons
    6. Form Elements
    7. Some (CSS) Fixes
    Bootstrapification/Page Template
    1. copy UT Standard page template
    2. add JS and CSS file references check JS for library overload
    3. change page HTML definition
    4. adapt Layout (Grid) definition container DIV
    Bootstrapification/Navigation Template
    1. copy current navigation list template
    2. change HTML definition
    3. switch application default property to new
    template
    Bootstrapification/Breadcrumb Template
    1. copy/add breadcrumb templates
    2. switch application default property to new
    template
    Bootstrapification/Region Template
    1. CSS overwrite UT Region Template CSS
    Bootstrapification/Button Templates
    1. copy all 3 UT button template variants
    2. change HTML definition
    3. add btn-type template options
    Bootstrapification/Form Elements
    1. apply CSS
    – add classes to UT elements
    – overwrite UT CSS
    Bootstrapification/Finetuning
    Bootstrapified
    Conclusion
    • UT is the standard

    • Customization is possible

    • Extending UT is cost effective

    • Some CSS/HTML/JS skills needed


    Q&A

    www.rokit.nl
    www.themes4apex.com
    www.apexsmartpivot.com
    blog.rokit.nl
    @crokitta @themes4apex @apexsmartpivot
    www.linkedin.com/in/rokit

    You might also like