2 Replies Latest reply on Nov 15, 2012 9:32 PM by 466340

    Customising theme 25 or 26 with Themeroller

      Hi All,

      I'm loving the new themes 25 and 26 introduced with Apex 4.2, but before I can use them, I need to adjust the colour scheme to match the corporate image.

      I note that the 4_2.css file in ./themes/theme_25/css has the following:

      * jQuery UI CSS Framework 1.8.23
      * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
      * Dual licensed under the MIT or GPL Version 2 licenses.
      * http://jquery.org/license
      * http://docs.jquery.com/UI/Theming/API
      * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=\\\\\'Helvetica%20Neue\\\\\',%20Helvetica,%20Arial,%20Arial,sans-serif&fwDefault=normal&fsDefault=12px&cornerRadius=3px&bgColorHeader=b9cfed&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=90&borderColorHeader=9aaec8&fcHeader=202020&iconColorHeader=224a7e&bgColorContent=fafafa&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=909090&fcContent=404040&iconColorContent=222222&bgColorDefault=3f75ba&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=45&borderColorDefault=2d61a6&fcDefault=ffffff&iconColorDefault=ffffff&bgColorHover=528cd7&bgTextureHover=04_highlight_hard.png&bgImgOpacityHover=50&borderColorHover=2d61a6&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=224a7e&bgTextureActive=01_flat.png&bgImgOpacityActive=65&borderColorActive=2d61a6&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fedd86&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=10&borderColorHighlight=a1821a&fcHighlight=404040&iconColorHighlight=a1821a&bgColorError=fef1ec&bgTextureError=05_inset_soft.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=25&thicknessShadow=0&offsetTopShadow=2px&offsetLeftShadow=0&cornerRadiusShadow=8px

      So I am wondering if we can use Themeroller to customise these themes with our own colour scheme.

      If so, what is the process for doing this? I had a go at replacing the CSS definitions with the ones from a theme roller download, but it was pretty unsuccessful!

      Thanks in advance,

        • 1. Re: Customising theme 25 or 26 with Themeroller
          Hi Mike,

          Unfortunately, the jquery ui styles you see in the Theme 25 stylesheet are strictly for styling the jquery UI components (date pickers, item help, etc). The theme itself cannot be styled using that themeroller.

          However, if you want to change the Theme's colors, you can do so by overriding the theme's stylesheet and providing styles with your colors. You can use firebug or web inspector to determine which styles / classes of the themes you would like to change, and then define styles to override them. You can then use [this css gradient generator|http://www.colorzilla.com/gradient-editor/] to create your gradients that match your company's color scheme.

          • 2. Re: Customising theme 25 or 26 with Themeroller
            Thanks for pointing me in the right direction Shakeeb.