Changing Themes

[ipadParticipant]

Hello,

i am trying to change the theme of your widgets.
i put my custom theme into the same folder as the base and classic.css file.

my grid init looks like the following example:

$(‘#divListe’).jqxGrid({
theme: ‘myTheme’,
width: 900,
height: 800,
source: dataAdapter,
groupable: true,
columns: [
{ text: ‘Dok Id’, datafield: ‘DokId’, width: 60 },
{ text: ‘Betreff’, datafield: ‘Titel’, width: 350 },
{ text: ‘Erstellt am’, datafield: ‘Erstellt_am’ },
{ text: ‘Erstellt von’, datafield: ‘Erstellt_von’, width: 85 },
{ text: ‘Referenznummer’, datafield: ‘KundenNr’, width: 115 },
{ text: ‘Dokument Art’, datafield: ‘Tabelle’ },
],
groups: [‘Erstellt_von’]
});

The Plugin still use the classic styles in my Grid.

[DimitarParticipant]

Hello ipad,

Please, make sure your links to the theme files are ordered correctly, i.e.:

There is no need to link to the file jqx.classic.css.

Best Regards,
Dimitar

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

[ipadParticipant]

Hello Dimitar,

i deleted the reference to the “jqx.classic.css”

But it stoll doesn´t work:

// Grid auf ein div anwenden und initialisieren.
$(‘#divListe’).jqxGrid({
theme: ‘myCss’,
width: 900,
height: 800,
source: dataAdapter,
groupable: true,
columns: [
{ text: ‘Dok Id’, datafield: ‘DokId’, width: 60 },
{ text: ‘Betreff’, datafield: ‘Titel’, width: 350 },
{ text: ‘Erstellt am’, datafield: ‘Erstellt_am’ },
{ text: ‘Erstellt von’, datafield: ‘Erstellt_von’, width: 85 },
{ text: ‘Referenznummer’, datafield: ‘KundenNr’, width: 115 },
{ text: ‘Dokument Art’, datafield: ‘Tabelle’ },
],
groups: [‘Erstellt_von’]
});

my includes:

Styles:

link rel=”stylesheet” href=”/_PublicResources/Styles/jqx/jqx.base.css” type=”text/css” media=”all”
link rel=”stylesheet” href=”/_PublicResources/Styles/jqx/jqx.myCss.css” type=”text/css” media=”all”

Scripts:

script src=”/_PublicResources/JavaScript/PlugIns/jqx/jqxcore.js” type=”text/javascript”>
script src=”/_PublicResources/JavaScript/PlugIns/jqx/jqxscrollbar.js” type=”text/javascript”>
script src=”/_PublicResources/JavaScript/PlugIns/jqx/jqxbuttons.js” type=”text/javascript”>
script src=”/_PublicResources/JavaScript/PlugIns/jqx/jqxlistbox.js” type=”text/javascript”>
script src=”/_PublicResources/JavaScript/PlugIns/jqx/jqxdata.js” type=”text/javascript”>
script src=”/_PublicResources/JavaScript/PlugIns/jqx/jqxdropdownlist.js” type=”text/javascript”>
script src=”/_PublicResources/JavaScript/PlugIns/jqx/jqxgrid.js” type=”text/javascript”>
script src=”/_PublicResources/JavaScript/PlugIns/jqx/jqxgrid.columnsresize.js” type=”text/javascript”>
script src=”/_PublicResources/JavaScript/PlugIns/jqx/jqxmenu.js” type=”text/javascript”>
script src=”/_PublicResources/JavaScript/PlugIns/jqx/getTheme.js” type=”text/javascript”>

[DimitarParticipant]

Hi ipad,

Please make sure the classes in your custom css file are named correctly, that is:

.class-name-theme-name

You can check out the existing theme files for reference or the online Theme Builder.

Best Regards,
Dimitar

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

[ipadParticipant]

Hi Dimitar,

the css file is from your themebuilder. I guess its in the right formatter:

.jqx-widget-myCss
{
font-family: Verdana;
}
.jqx-widget-content-myCss
{
color: #222222;
border-color: #AAAAAA;
background-color: #FFFFFF;
font-family: Verdana;
}
.jqx-widget-header-weinor
{
color: #F9F7F7;
border-color: #AAAAAA;
background-color: #CC0000;
font-family: Verdana;
}
.jqx-grid-cell-myCss
{
background-color: #FFFFFF;
}
.jqx-fill-state-normal-myCss
{
color: #222222;
border-color: #AAAAAA;
background-color: #EFEFEF;
}
.jqx-grid-selectionarea-myCss
{
border-color: #AAAAAA;
background-color: #EFEFEF;
}
.jqx-grid-cell-sort-myCss, .jqx-grid-cell-filter-myCss, .jqx-grid-cell-pinned-myCss
{
background-color: #EFEFEF;
color: #000000;
}

[DimitarParticipant]

Hi ipad,

While most of the theme seems to be generated by the Theme Builder, the class .jqx-widget-header-weinor is not. It may be the cause of the issue. It should be .jqx-widget-header-myCss.

Best Regards,
Dimitar

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

[Author]

Posts