jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by sergion 11 years, 11 months ago.

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

Author

Changing font Posts

June 6, 2013 at 10:39 pm Changing font #22734

Participant

Hello,

Is there a way to change the font family of the tree itens? My designer wants a given font to keep the look and fell of the rest of the site.

TIA!

Regards,

Sergio

June 7, 2013 at 6:28 am Changing font #22751

Peter Stoev

Keymaster

Hi,

You may try our Theme Builder, too. There is an option for changing the Font Family in the Misc section.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 8, 2013 at 1:06 am Changing font #22805

sergion

Participant

Thanks, Peter.

I generated a css based on the “shinyblack” theme. To tell you the truth, I just imported the colors and generated the css without any changes.
Then I created the jqx.shinyblack1.css theme and referenced it in my code.
Then, I replaced all the “font-family: Verdana;” with “font-family: Courier;”.

I got two behaviours:
1) my theme is gone. Now all the colours of the shinyblack are missing. It’s showing the default colours.
2) no matter what font-family I choose, it will always show the default font.

Please adivise.

Many thanks,

Sergio

June 8, 2013 at 6:37 am Changing font #22806

Peter Stoev

Keymaster

Hi,

Not sure how you did that, but here’s what I did:

1. Used the Theme Builder and loaded the Colors from the ShinyBlack Theme
2. Set the Font Family to Courier
3. Got the Theme’s CSS
4. In my project, in the jqwidgets/styles folder I created a new file called jqx.custom.css
5. In my sample, I referenced jqx.custom.css after the jqx.base.css
6. The “theme” property of the widgets is expected to point to the theme’s name.
7. Result: http://img153.imageshack.us/img153/521/jquerytreewithcustomthe.png

Here’s the working sample below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, Tree" />
    <meta name="description" content="The jqxTree provides several built-in events triggered when the user selects, expands, collapses, adds, removes or checks an item." />
    <title id='Description'>The jqxTree provides several built-in events triggered when the user selects, expands, collapses, adds, removes or checks an item.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.custom.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
      
            var source = [
                { icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                    { icon: "../../images/calendarIcon.png", label: "Calendar" },
                    { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
                },
                { icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
                   { icon: "../../images/folder.png", label: "Admin" },
                   { icon: "../../images/folder.png", label: "Corporate" },
                   { icon: "../../images/folder.png", label: "Finance" },
                   { icon: "../../images/folder.png", label: "Other" },
                ]
                },
                { icon: "../../images/recycle.png", label: "Deleted Items" },
                { icon: "../../images/notesIcon.png", label: "Notes" },
                { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
                { icon: "../../images/favorites.png", label: "Favorites" }, 
             ];
            // create jqxTree
            $('#jqxTree').jqxTree({ source: source, width: '250px', theme: "custom" });
            $('#Events').jqxPanel({ theme: "custom", height: '250px', width: '200px' });
            $('#Events').css('border', 'none');
            // on to 'expand', 'collapse' and 'select' events.
            $('#jqxTree').on('expand', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Expanded: ' + item.label + '</div>');
            });
            $('#jqxTree').on('collapse', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Collapsed: ' + item.label + '</div>');
            });
            $('#jqxTree').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Selected: ' + item.label + '</div>');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='jqxTree' style='float: left; margin-left: 60px;'>
            </div>
            <div style='margin-left: 20px; float: left;'>
                <div>
                    <span>
                        Events:</span>
                    <div id='Events'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Below is the generated CSS from the Theme Builder. Make sure that according to the instructions in the tool, that file should be in the jqwidgets/styles folder where the other Theme files are.

.jqx-widget-custom {
    border-color: #222;
}
.jqx-widget-content-custom {
    color: #222;
    border-color: #262626;
}
.jqx-fill-state-normal-custom, .jqx-widget-header-custom {
    color: #fff;
    border-color: #000;
    background: #000 url(images/bg_black.png) left center scroll repeat-x;
}
.jqx-fill-state-hover-custom {
    background: transparent url(images/bg_blackhover.png) left center scroll repeat-x;
    border-color: #262626;
    color: #fff;
}
.jqx-fill-state-pressed-custom, .jqx-menu-item-top-hover-custom {
    background: transparent url(images/bg_blackpressed.png) left center scroll repeat-x;
    border-color: #262626;
    color: #fff;
}
.jqx-checkbox-check-checked-custom {
    background: transparent url(images/check_white.png) left top no-repeat;
}
.jqx-checkbox-check-indeterminate-custom {
    background: transparent url(images/check_indeterminate_white.png) left top no-repeat;
}
.jqx-grid-custom, .jqx-grid-header-custom, .jqx-grid-cell-custom {
    border-color: #262626;
}
.jqx-widget-custom .jqx-grid-cell-custom, .jqx-widget-custom .jqx-grid-group-cell-custom {
    border-color: #262626;
}
.jqx-widget-custom .jqx-grid-column-menubutton-custom, .jqx-widget-custom .jqx-grid-column-sortascbutton-custom, .jqx-widget-custom .jqx-grid-column-sortdescbutton-custom, .jqx-widget-custom .jqx-grid-column-filterbutton-custom {
    border-color: #262626;
}
.jqx-widget-custom .jqx-grid-column-header-custom {
    border-color: #262626;
}
.jqx-grid-bottomright-custom, .jqx-panel-bottomright-custom, .jqx-listbox-bottomright-custom {
    background-color: #262626;
}
.jqx-widget-custom .jqx-grid-column-menubutton-custom, .jqx-menu-vertical-custom {
    background-color: #262626;
    border-color: #262626;
}
.jqx-grid-selectionarea-custom {
    background-color: #262626;
    border: 1px solid #262626;
    opacity: 0.5;
}
.jqx-grid-group-cell-custom {
    border-color: #262626;
    background-color: #fff;
}
.jqx-grid-cell-sort-custom, .jqx-grid-cell-filter-custom, .jqx-grid-cell-pinned-custom {
    background-color: #eaf8ff;
}
.jqx-grid-cell-alt-custom, .jqx-grid-cell-sort-alt-custom, .jqx-grid-cell-filter-alt-custom {
    background-color: #deedf5;
}
.jqx-grid-cell-selected-custom {
    background: #262626;
    color: #fff;
}
.jqx-grid-cell-hover-custom {
    background: #646464;
    color: #fff;
}
.jqx-menu-vertical-custom {
    background: #222;
    color: #fff;
}
.jqx-scrollbar-state-normal-custom {
    background: #555;
    border: 1px solid #555;
}
.jqx-scrollbar-button-state-normal-custom {
    border: 1px solid #555;
    background: #555;
}
.jqx-scrollbar-button-state-hover-custom {
    background: #555 url(images/bg_blackhover.png) left top scroll repeat-x;
    border: 1px solid #000;
}
.jqx-scrollbar-button-state-pressed-custom {
    background: #555 url(images/bg_blackpressed.png) left top scroll repeat-x;
    border: 1px solid #000;
}
.jqx-scrollbar-thumb-state-normal-horizontal-custom {
    background: #555 url(images/bg_black.png) left top scroll repeat-x;
    border: 1px solid #000;
}
.jqx-scrollbar-thumb-state-hover-horizontal-custom {
    background: #555 url(images/bg_blackhover.png) left top scroll repeat-x;
    border: 1px solid #000;
}
.jqx-scrollbar-thumb-state-pressed-horizontal-custom {
    background: #555 url(images/bg_blackpressed.png) left top scroll repeat-x;
    border: 1px solid #000;
}
.jqx-scrollbar-thumb-state-normal-custom {
    background: #555 url(images/bg_black_horizontal.png) left top scroll repeat-x;
    border: 1px solid #000;
}
.jqx-scrollbar-thumb-state-hover-custom {
    background: #555 url(images/bg_blackhover_horizontal.png) left top scroll repeat-x;
    border: 1px solid #000;
}
.jqx-scrollbar-thumb-state-pressed-custom {
    background: #555 url(images/bg_blackpressed_horizontal.png) left top scroll repeat-x;
    border: 1px solid #000;
}
.jqx-splitter-splitbar-horizontal-custom, .jqx-splitter-splitbar-vertical-custom, .jqx-splitter-splitbar-hover-custom, .jqx-splitter-splitbar-hover-horizontal-custom {
    background: #555;
}
.jqx-splitter-collapse-button-horizontal-custom, .jqx-splitter-collapse-button-vertical-custom {
    background: #7f7f7f;
}
.jqx-grid-column-sortascbutton-custom, .jqx-expander-arrow-bottom-custom, .jqx-window-collapse-button-custom, .jqx-menu-item-arrow-up-custom, .jqx-menu-item-arrow-up-selected-custom, .jqx-menu-item-arrow-top-up-custom, .jqx-icon-arrow-up-custom, .jqx-icon-arrow-up-hover-custom, .jqx-icon-arrow-up-selected-custom {
    background-image: url('images/icon-up-white.png');
    background-repeat: no-repeat;
    background-position: center;
}
.jqx-grid-column-menubutton-custom, .jqx-grid-column-sortdescbutton-custom, .jqx-expander-arrow-top-custom, .jqx-window-collapse-button-collapsed-custom, .jqx-menu-item-arrow-down-custom, .jqx-menu-item-arrow-down-selected-custom, .jqx-menu-item-arrow-down-custom, .jqx-icon-arrow-down-custom, .jqx-icon-arrow-down-hover-custom, .jqx-icon-arrow-down-selected-custom {
    background-image: url('images/icon-down-white.png');
    background-repeat: no-repeat;
    background-position: center;
}
.jqx-tabs-arrow-left-custom, .jqx-menu-item-arrow-left-selected-custom, .jqx-menu-item-arrow-top-left, .jqx-icon-arrow-left-custom, .jqx-icon-arrow-down-left-custom, .jqx-icon-arrow-left-selected-custom {
    background-image: url('images/icon-left-white.png');
    background-repeat: no-repeat;
    background-position: center;
}
.jqx-tabs-arrow-right-custom, .jqx-menu-item-arrow-right-selected-custom, .jqx-menu-item-arrow-top-right-custom, .jqx-icon-arrow-right-custom, .jqx-icon-arrow-right-hover-custom, .jqx-icon-arrow-right-selected-custom {
    background-image: url('images/icon-right-white.png');
    background-repeat: no-repeat;
    background-position: center;
}
.jqx-window-close-button-custom, .jqx-icon-close-custom, .jqx-tabs-close-button-custom, .jqx-tabs-close-button-hover-custom, .jqx-tabs-close-button-selected-custom {
    background-image: url(images/close_white.png);
    background-repeat: no-repeat;
    background-position: center;
}
/*applied to the progressbar's value element*/
.jqx-progressbar-value-custom {
    background: #555;
}
.jqx-progressbar-value-vertical-custom {
    background: #555;
}
.jqx-widget-custom {
    font-family: Courier;
}
.jqx-widget-content-custom {
    color: #222222;
    text-shadow: none;
    border-color: #262626;
    background: #ffffff;
    font-family: Courier;
}
.jqx-widget-header-custom {
    font-family: Courier;
}
.jqx-grid-cell-custom, .jqx-widget-custom .jqx-grid-cell-custom {
    background-color: #ffffff;
    color: #222222;
    text-shadow: none;
}
.jqx-fill-state-normal-custom {
    font-family: Courier;
}
.jqx-button-custom {
    font-family: Courier;
}
.jqx-grid-selectionarea-custom {
}
.jqx-widget-custom .jqx-grid-cell-sort-custom, .jqx-widget-custom .jqx-grid-cell-filter-custom, .jqx-widget-custom .jqx-grid-cell-pinned-custom, .jqx-grid-cell-sort-custom, .jqx-grid-cell-filter-custom, .jqx-grid-cell-pinned-custom {
    background-color: #DEEDF5;
    color: #222222;
    text-shadow: none;
}
.jqx-widget-custom .jqx-grid-cell-alt-custom, .jqx-widget-custom .jqx-grid-cell-sort-alt-custom, .jqx-widget-custom .jqx-grid-cell-pinned-alt-custom, .jqx-widget-custom .jqx-grid-cell-filter-alt-custom, .jqx-grid-cell-alt-custom, .jqx-grid-cell-sort-alt-custom, .jqx-grid-cell-filter-alt-custom {
    background-color: #EAF8FF;
    color: #222222;
    text-shadow: none;
}
.jqx-fill-state-hover-custom, .jqx-widget-custom .jqx-grid-cell-hover-custom {
    font-family: Courier;
}
.jqx-fill-state-pressed-custom, .jqx-widget-custom .jqx-grid-cell-selected-custom {
    font-family: Courier;
}
.jqx-switchbutton-label-on-custom {
}
.jqx-tabs-title-selected-top-custom, .jqx-tabs-selection-tracker-top-custom {
    color: #222222;
    text-shadow: none;
    border-color: #262626;
    border-bottom: 1px solid #ffffff;
    background-image: none;
    background-color: #ffffff;
}
.jqx-tabs-title-selected-bottom-custom, .jqx-tabs-selection-tracker-bottom-custom {
    color: #222222;
    text-shadow: none;
    border-color: #262626;
    border-top: 1px solid #ffffff;
    background-image: none;
    background-color: #ffffff;
}
.jqx-splitter-splitbar-hover-custom {
}
.jqx-splitter-splitbar-vertical-custom, .jqx-splitter-splitbar-horizontal-custom, .jqx-slider-track-horizontal-custom, .jqx-slider-track-vertical-custom {
}
.jqx-splitter-collapse-button-horizontal-custom, .jqx-splitter-collapse-button-vertical-custom, .jqx-slider-rangebar-custom {
}
.jqx-scrollbar-state-normal-custom {
    background-color: #555555;
    border-color: #555555;
}
.jqx-grid-bottomright-custom, .jqx-panel-bottomright-custom, .jqx-listbox-bottomright-custom {
    background-color: #555555;
}
.jqx-scrollbar-thumb-state-normal-custom {
    background-color: #4E4E4E;
    background-color: #4E4E4E;
    background-image: -moz-linear-gradient(left, #4E4E4E, #000000);
    background-image: -ms-linear-gradient(left, #4E4E4E, #000000);
    background-image: -o-linear-gradient(left, #4E4E4E, #000000);
    background-image: -webkit-gradient(linear, left top, right top, from(#4E4E4E), to(#000000));
    background-image: -webkit-linear-gradient(left, #4E4E4E, #000000);
    background-image: linear-gradient(left, #4E4E4E, #000000);
}
.jqx-scrollbar-thumb-state-normal-horizontal-custom {
    background-color: #4E4E4E;
    background-color: #4E4E4E;
    background-image: -moz-linear-gradient(top, #4E4E4E, #000000);
    background-image: -ms-linear-gradient(top, #4E4E4E, #000000);
    background-image: -o-linear-gradient(top, #4E4E4E, #000000);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#4E4E4E), to(#000000));
    background-image: -webkit-linear-gradient(top, #4E4E4E, #000000);
    background-image: linear-gradient(top, #4E4E4E, #000000);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}
.jqx-scrollbar-thumb-state-hover-custom {
    background-color: #386781;
    border-color: #386781;
    background-image: -moz-linear-gradient(left, #386781, #07405D);
    background-image: -ms-linear-gradient(left, #386781, #07405D);
    background-image: -o-linear-gradient(left, #386781, #07405D);
    background-image: -webkit-gradient(linear, left top, right top, from(#386781), to(#07405D));
    background-image: -webkit-linear-gradient(left, #386781, #07405D);
    background-image: linear-gradient(left, #386781, #07405D);
}
.jqx-scrollbar-thumb-state-hover-horizontal-custom {
    background-color: #386781;
    border-color: #386781;
    background-image: -moz-linear-gradient(top, #386781, #07405D);
    background-image: -ms-linear-gradient(top, #386781, #07405D);
    background-image: -o-linear-gradient(top, #386781, #07405D);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#386781), to(#07405D));
    background-image: -webkit-linear-gradient(top, #386781, #07405D);
    background-image: linear-gradient(top, #386781, #07405D);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}
.jqx-scrollbar-thumb-state-pressed-custom {
    background-color: #36667F;
    border-color: #36667F;
    background-image: -moz-linear-gradient(left, #36667F, #07405D);
    background-image: -ms-linear-gradient(left, #36667F, #07405D);
    background-image: -o-linear-gradient(left, #36667F, #07405D);
    background-image: -webkit-gradient(linear, left top, right top, from(#36667F), to(#07405D));
    background-image: -webkit-linear-gradient(left, #36667F, #07405D);
    background-image: linear-gradient(left, #36667F, #07405D);
}
.jqx-scrollbar-thumb-state-pressed-horizontal-custom {
    background-color: #36667F;
    border-color: #36667F;
    background-image: -moz-linear-gradient(top, #36667F, #07405D);
    background-image: -ms-linear-gradient(top, #36667F, #07405D);
    background-image: -o-linear-gradient(top, #36667F, #07405D);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#36667F), to(#07405D));
    background-image: -webkit-linear-gradient(top, #36667F, #07405D);
    background-image: linear-gradient(top, #36667F, #07405D);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}
.jqx-scrollbar-button-state-normal-custom {
    background-color: #555555;
    background-image: -moz-linear-gradient(top, #555555, #555555);
    background-image: -ms-linear-gradient(top, #555555, #555555);
    background-image: -o-linear-gradient(top, #555555, #555555);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#555555), to(#555555));
    background-image: -webkit-linear-gradient(top, #555555, #555555);
    background-image: linear-gradient(top, #555555, #555555);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}
.jqx-scrollbar-button-state-hover-custom {
    background-color: #386781;
    border-color: #000000;
    background-image: -moz-linear-gradient(top, #386781, #07405D);
    background-image: -ms-linear-gradient(top, #386781, #07405D);
    background-image: -o-linear-gradient(top, #386781, #07405D);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#386781), to(#07405D));
    background-image: -webkit-linear-gradient(top, #386781, #07405D);
    background-image: linear-gradient(top, #386781, #07405D);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}
.jqx-scrollbar-button-state-pressed-custom {
    background-color: #36667F;
    border-color: #000000;
    background-image: -moz-linear-gradient(top, #36667F, #07405D);
    background-image: -ms-linear-gradient(top, #36667F, #07405D);
    background-image: -o-linear-gradient(top, #36667F, #07405D);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#36667F), to(#07405D));
    background-image: -webkit-linear-gradient(top, #36667F, #07405D);
    background-image: linear-gradient(top, #36667F, #07405D);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}
.jqx-radiobutton-check-checked-custom {
    background: #FFFFFF;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    margin-top: 2px;
    border-width: 1px;
    border-style: solid;
}
.jqx-rc-tl-custom {
    -moz-border-radius-topleft: 3px;
    -webkit-border-radius-topleft: 3px;
    border-radius-topleft: 3px;
}
.jqx-rc-tr-custom {
    -moz-border-radius-topright: 3px;
    -webkit-border-radius-topright: 3px;
    border-radius-topright: 3px;
}
.jqx-rc-bl-custom {
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-radius-bottomleft: 3px;
    border-radius-bottomleft: 3px;
}
.jqx-rc-br-custom {
    -moz-border-radius-bottomright: 3px;
    -webkit-border-radius-bottomright: 3px;
    border-radius-bottomright: 3px;
}
.jqx-rc-t-custom {
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
}
.jqx-rc-b-custom {
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.jqx-rc-r-custom {
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.jqx-rc-l-custom {
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.jqx-radiobutton-default-custom, .jqx-radiobutton-custom, .jqx-radiobutton-check-checked-custom, .jqx-radiobutton-hover-custom, .jqx-radiobutton-check-indeterminate-custom, .jqx-radiobutton-check-indeterminate-disabled-custom, .jqx-slider-button-custom {
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}
.jqx-rc-all-custom, .jqx-tooltip-custom, .jqx-tooltip-text-custom, .jqx-tooltip-main-custom {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.jqx-grid-column-sortascbutton-custom, .jqx-expander-arrow-bottom-custom, .jqx-window-collapse-button-custom, .jqx-menu-item-arrow-up-custom, .jqx-menu-item-arrow-top-up-custom, .jqx-icon-arrow-up-custom {
    background-image: url('images/icon-up-white.png');
}
.jqx-icon-arrow-up-hover-custom {
    background-image: url('images/icon-up-white.png');
}
.jqx-menu-item-arrow-up-selected-custom, .jqx-icon-arrow-up-selected-custom.jqx-expander-arrow-expanded-custom {
    background-image: url('images/icon-up-white.png');
}
.jqx-grid-column-menubutton-custom, .jqx-grid-column-sortdescbutton-custom, .jqx-expander-arrow-top-custom, .jqx-window-collapse-button-collapsed-custom, .jqx-menu-item-arrow-down-custom, .jqx-menu-item-arrow-down-custom, .jqx-tree-item-arrow-expand-custom, .jqx-icon-arrow-down-custom {
    background-image: url('images/icon-down-white.png');
}
.jqx-icon-arrow-down-hover-custom, .jqx-tree-item-arrow-expand-hover-custom {
    background-image: url('images/icon-down-white.png');
}
.jqx-menu-item-arrow-down-selected-custom, .jqx-icon-arrow-down-selected-custom {
    background-image: url('images/icon-down-white.png');
}
.jqx-tabs-arrow-left-custom, .jqx-menu-item-arrow-top-left-custom, .jqx-icon-arrow-left-custom, .jqx-icon-arrow-down-left-custom {
    background-image: url('images/icon-left-white.png');
}
.jqx-icon-arrow-left-hover-custom {
    background-image: url('images/icon-left-white.png');
}
.jqx-menu-vertical-custom {
    background: #FFFFFF;
}
.jqx-menu-item-arrow-left-selected-custom, .jqx-icon-arrow-left-selected-custom {
    background-image: url('images/icon-left-white.png');
}
.jqx-tabs-arrow-right-custom, .jqx-menu-item-arrow-top-right-custom, .jqx-menu-item-arrow-collapse-custom, .jqx-icon-arrow-right-custom {
    background-image: url('images/icon-right-white.png');
}
.jqx-icon-arrow-right-hover-custom, .jqx-tree-item-arrow-collapse-hover-custom {
    background-image: url('images/icon-right-white.png');
}
.jqx-menu-item-arrow-right-selected-custom, .jqx-icon-arrow-right-selected-custom {
    background-image: url('images/icon-right-white.png');
}
.jqx-window-close-button-custom, .jqx-tabs-close-button-custom, .icon-close-custom {
    background-image: url('images/close_white.png');
}
.jqx-tabs-close-button-selected-custom {
    background-image: url('images/close_white.png');
}
.jqx-tabs-close-button-hover-custom {
    background-image: url('images/close_white.png');
}
.jqx-widget-custom .jqx-grid-column-header-custom, .jqx-widget-custom .jqx-grid-cell-custom, .jqx-widget-custom .jqx-grid-group-cell-custom, .jqx-grid-cell-custom {
    border-color: #262626;
}
.jqx-checkbox-check-checked-custom {
    background-image: url('images/check_white.png');
}
.jqx-checkbox-check-indeterminate-custom {
    background-image: url('images/check_indeterminate_white.png');
}
.jqx-tooltip-custom, .jqx-tooltip-main-custom {
}
.jqx-combobox-content-custom, .jqx-input-custom {
    color: #000000;
    text-shadow: none;
    border-color: #000000;
    background-color: #ffffff;
}
.jqx-combobox-input-custom {
    color: #000000;
    text-shadow: none;
}
.jqx-input-content-custom {
    color: #000000;
    text-shadow: none;
    background-color: #ffffff;
}
.jqx-fill-state-focus-custom, .jqx-popup-custom .jqx-fill-state-focus-custom {
    border-color: #111111;
}
.jqx-popup-custom.jqx-listbox-custom, .jqx-popup-custom.jqx-calendar-custom, .jqx-menu-dropdown-custom, .jqx-popup-custom.jqx-dropdownbutton-popup-custom {
    color: #000000;
    text-shadow: none;
    border-color: #000000;
    background-color: #ffffff;
}
.jqx-menu-item-arrow-right-custom, .jqx-tree-item-arrow-collapse-custom, .jqx-tree-item-arrow-collapse-hover-custom {
    background-image: url('images/icon-right.png');
}
.jqx-menu-item-arrow-left-custom {
    background-image: url('images/icon-left.png');
}
.jqx-tree-item-arrow-expand-custom, .jqx-tree-item-arrow-expand-hover-custom {
    background-image: url('images/icon-down.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-up-custom {
    background-image: url('images/icon-up-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-left-custom {
    background-image: url('images/icon-left-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-right-custom {
    background-image: url('images/icon-right-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-bottom-custom {
    background-image: url('images/icon-bottom-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-up-hover-custom {
    background-image: url('images/icon-up-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-left-hover-custom {
    background-image: url('images/icon-left-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-right-hover-custom {
    background-image: url('images/icon-right-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-bottom-hover-custom {
    background-image: url('images/icon-bottom-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-up-selected-custom {
    background-image: url('images/icon-up-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-left-selected-custom {
    background-image: url('images/icon-left-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-right-selected-custom {
    background-image: url('images/icon-right-white.png');
}
.jqx-scrollbar-custom .jqx-icon-arrow-bottom-selected-custom {
    background-image: url('images/icon-bottom-white.png');
}
.jqx-calendar-custom .jqx-icon-arrow-up-custom, .jqx-tabs-header-custom .jqx-icon-arrow-up-custom {
}
.jqx-calendar-custom .jqx-icon-arrow-left-custom, .jqx-tabs-header-custom .jqx-icon-arrow-left-custom {
}
.jqx-calendar-custom .jqx-icon-arrow-right-custom, .jqx-tabs-header-custom .jqx-icon-arrow-right-custom {
}
.jqx-calendar-custom .jqx-icon-arrow-bottom-custom, .jqx-tabs-header-custom .jqx-icon-arrow-bottom-custom {
}
.jqx-widget-custom .jqx-grid-cell-custom, .jqx-listitem-state-normal-custom, .jqx-menu-item-normal-custom, .jqx-tree-item-normal-custom, .jqx-calendar-cell-custom, .jqx-grid-cell-custom, .jqx-menu-vertical-custom .jqx-menu-item-top-normal-custom, .jqx-input-popup-custom .jqx-fill-state-normal-custom,
{
    font-family: Courier;
}
.jqx-widget-custom .jqx-grid-cell-hover-custom, .jqx-listitem-state-hover-custom, .jqx-menu-item-hover-custom, .jqx-tree-item-hover-custom, .jqx-calendar-cell-hover-custom, .jqx-grid-cell-hover-custom, .jqx-menu-vertical-custom .jqx-menu-item-top-hover-custom, .jqx-input-popup-custom .jqx-fill-state-hover-custom, .jqx-input-button-header-custom, .jqx-input-popup-custom .jqx-fill-state-pressed-custom, .jqx-input-button-header-custom {
    font-family: Courier;
}
.jqx-widget-custom .jqx-grid-cell-selected-custom, .jqx-listitem-state-selected-custom, .jqx-menu-item-selected-custom, .jqx-tree-item-selected-custom, .jqx-calendar-cell-selected-custom, .jqx-grid-cell-selected-custom, .jqx-menu-vertical-custom .jqx-menu-item-top-selected-custom, .jqx-grid-selectionarea-custom {
    font-family: Courier;
}

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

June 10, 2013 at 12:59 am Changing font #22834

sergion

Participant

Thanks a lot, Peter.

I have done exactly what you said at the 1st time, except for a little typo.

Worked perfectly!

Regards,

Sergio

Author

Posts

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

You must be logged in to reply to this topic.