Can't apply SpreadJS Theme

Posted by: guy.g on 30 December 2018, 3:44 am EST

    • Post Options:
    • Link

    Posted 30 December 2018, 3:44 am EST - Updated 3 October 2022, 2:00 am EST

    I added the gc.spread.sheets.excel2013white.12.0.3.css file as a link tag to my page and I still get the default theme:

    It looks like this:

    Instead of like this:

    Help. What am I doing wrong?

  • Posted 30 December 2018, 7:33 pm EST

    Hello,

    first of all you can use the latest released build of SpreadJs V12 which is version 12.0.4 given below:-

    http://cdn.grapecity.com/spreadjs/12.0.4/Files/SpreadJS.Release.12.0.4.zip

    Further, we are unable to replicate the issue with the default theme which is gc.spread.sheets.excel2013white.12.0.4.css and Spread.Sheets is consuming this theme perfectly.

    Please have a look at the attached sample for the same. Hope it helps. Else please pass on your small sample replicating the issue so that we can investigate this issue further.

    Thanks,

    Reeva

    ComboBox_V12.zip

  • Posted 31 December 2018, 12:49 am EST

    Hello,

    I tried using the latest version, it did not work.

    If I create a small sample application it does work.

    Something in our app is causing it to load a different theme maybe? What is this theme ? (with the orange color)

    Unfortunately I can’t share source code of our entire project.

    Can you tell me what to look for? Is there any other library you know is interfering with your classes?

  • Posted 31 December 2018, 1:09 am EST

    I figured out the issue. We were importing a css file from bootstrap-sass-official package.

    That caused the issues with the theme colors.

    I have no idea what they did there to make it happen, but hey, at least now I can solve my issue.

  • Posted 31 December 2018, 3:57 am EST

    There are some CSS classes used by SpreadJS like:

    .btn-default, .btn-primary and .btn-warning that have declarations in the bootstrap package we use in our project.

    For example .btn-warning has a background-color of orange.

    When I use the the excel2013white theme which is mostly white/gray/green, the orange color doesn’t fit very well.

    Is there anything to do about it, like force spreadJS to not use those CSS classes?

  • Posted 1 January 2019, 10:32 pm EST

    Hello,

    This is current design, because SpreadJS support bootstrap theme schema, and jquery-ui themeruler.

    https://help.grapecity.com/spread/SpreadSheets12/webframe.html#styletheme.html

    The btn-warning etc. is the css definition of bootstrap. Hence, to make it take effect, internally we have a css compose policy, the last one will take effect.

    Hence, if you want the built-in SpreadJS css take effect, just put our built-in css order after bootstrap css, vice versa( as per your needs).

    However, this .btn-warning etc. css class is one of the bootstrap css defintion, SpreadJS don’t care if bootstrap exist or not, SpreadJS only care if the bootstrap definition css class have been found in current application stylesheet pool. if found, follow our style compose policy to get the correct one and take effect.

      ```
    

    .btn-warning {

    background-color: red;

    }

        .gc-columnHeader-highlight {
            background-color: transparent;
            border: none;
        }
    
        .gc-rowHeader-highlight {
            background-color: transparent;
        }
    
    
    Hope it helps.
    
    Thanks,
    Reeva
  • Posted 7 January 2019, 2:17 am EST

    I ended up using css classes overrides that use the same colors as the theme I’m using as follows:

    
    .gc-theme-version.btn-primary {
        color: #444444
        background-color: #9fd5b7
        border-color: #217346
    }
    .gc-theme-version.btn-default {
        color: #444444
        background-color: #ffffff
        border-color: #ababab
    }
    .gc-theme-version.btn-warning {
        color: #217346
        background-color: #e1e1e1
        border-color: #217346
    }
    
    
  • Posted 8 January 2019, 3:59 pm EST

    Hello,

    Thanks for sharing the code. We are glad to know that your issue has been resolved.

    Regards,

    Reeva

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels