jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by dpdragnev 12 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Custom Theme Posts

April 10, 2013 at 10:12 pm Custom Theme #19030

Member

Hello,

I am trying to apply a custom theme to all jqWidgets controls. I used the Theme builder to create a theme. I copied the generated css to a file in my solution and placed this file in the Contents directory. I referenced the file in the main layout and modified the the GetTheme function to return the correct theme name (my new theme).

I thought that this was all, but when I run the application, the controls go to the basic theme. It is almost like they do not recognize the name of the theme and revert to the default theme.

Am I doing anything wrong? Did I miss a step? Do I need to place the new css file in a certain place?

Thank you.

April 10, 2013 at 10:18 pm Custom Theme #19034

Peter Stoev

Keymaster

Hi dpdragnev,

The getDemoTheme function is used only in our samples and it is not expected to be used outside them. The function is implemented for our Demo and its purpose is to load CSS styles on demand depending on a URL parameter.

jQWidgets uses a pair of css files – jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget’s layout like margin, padding, border-width, position. The second css file applies the widget’s colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:
Include the theme’s CSS file after jqx.base.css.
The following code example adds the ‘energyblue’ theme.

Set the widget’s theme property to ‘energyblue’ when you initialize it.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>GridView Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                source: source,
                pageable: true,
                autoheight: true,
                theme: 'energyblue',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body style="overflow: hidden;" class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 10, 2013 at 10:46 pm Custom Theme #19035

dpdragnev

Member

Thank you Peter,

I have adopted the same technique, using the getTheme function, as you do in your demos because I have a lot of js files and this gives me the flexibility to change the theme from one place only. It works well.

Renaming the file from mytheme.css to jqx-mytheme.css and adding both files in the correct order did the trick.

Thank you for your help.

April 10, 2013 at 11:01 pm Custom Theme #19036

dpdragnev

Member

Peter,

Another question: I placed the new css in the same directory as jqx.base.css however, all the paths to the images are broken. Do I have to go manually and adjust them in the new css file?

April 11, 2013 at 4:36 am Custom Theme #19041

Peter Stoev

Keymaster

Hi dpdragnev,

Could you check whether there is jqx- before the .icon classes, i.e .jqx-icon, instead of .icon? Hope that helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 11, 2013 at 6:08 pm Custom Theme #19084

dpdragnev

Member

That did it. Thank you very much.

Another thing that I noticed is that after I changed the background color of jqx-widget-header-mytheme class to a darker color (#313131) now I have little while dots on every corner where there is rounding. Looks like the white background of the jqx-widget-content-mytheme is showing under it even though the rounding is set to 3px to both elements.

I can send you a screenshot if you would like to see it.

Is there a way to correct this? CSS is not my strongest skill.

Thank you.

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.