This discussion is archived
2 Replies Latest reply: Nov 15, 2012 1:32 PM by 466340 RSS

Customising theme 25 or 26 with Themeroller

466340 Newbie
Currently Being Moderated
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,

Mike
  • 1. Re: Customising theme 25 or 26 with Themeroller
    ShakeebR Explorer
    Currently Being Moderated
    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.

    Best,
    Shakeeb
  • 2. Re: Customising theme 25 or 26 with Themeroller
    466340 Newbie
    Currently Being Moderated
    Thanks for pointing me in the right direction Shakeeb.

    Cheers,

    Mike

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points