ThemeRoller issue

art

I applied one of the Jquery ThemeRoller templates on my server-side paginated datatable. The two minor issues which are coming up are that the font is not being shown correctly and that the full number pagination collapses and therefore becomes useless. See screenshot: http://screencast.com/t/XdENXDppv9

Any help would be appreciated. I haven't changed anything in the sunny template files which I downloaded and the bJQueryUI flag is also set to 'true'. I use the following code:

[code]

@import "../../media/css/sunny/jquery-ui-1.8.18.custom.css";
@import "../../media/css/demo_table.css";






[/code]

allan

Try loading in the DataTables demo file that is designed for ThemeRoller:

[code]
@import "../../media/css/demo_table_jui.css";
[/code]

It has a few modifications that are suitable for what ThemeRoller needs.

Allan

art

That made it look a lot better! However, the font issue remains. The font is not being shown correctly as in the examples under Styling->ThemeRoller. See current screenshot: http://screencast.com/t/LlbPjsum

allan

What does Firebug say about the font? Where it is coming from, what is being applied / overridden etc?

Allan

art

From the style tab in Firebug I get the following code. Not sure but it looks like the helvetica family needs to be changed, any clue where to do that?

[code]
body.font-size-is-xlarge {
font-size: 15px;
line-height: 1.7em;
}
gantry.css (line 44)
.font-family-helvetica {
font-family: Helvetica,Arial,FreeSans,sans-serif;
}
gantry.css (line 36)
body {
text-rendering: optimizespeed;
}
templa...cko.css (line 9)
body {
font-family: Helvetica,Arial,sans-serif;
}
template.css (line 10)
html, body {
height: 100%;
margin-bottom: 1px;
}
template.css (line 9)
body {
background: none repeat scroll 0 0 #E4DDCE;
}
style9.css (line 57)
body {
color: #423119;
}
style9.css (line 10)
body {
color: #333333;
}
gantry.css (line 85)
html, body {
margin-bottom: 1px;
}
gantry.css (line 84)
body {
font-family: Helvetica,Arial,Sans-Serif;
font-size: 12px;
line-height: 1.7em;
}
gantry.css (line 43)
body {
min-width: 960px;
}
gantry.css (line 13)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, caption {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
}
[/code]

allan

How about:

[code]
td, th {
font-family: Helvetica,Arial,FreeSans,sans-serif;
}
[/code]

Allan

art

Thanks Allen, in which file do you suggest me to include that?

allan

Any of your CSS files.

allan

Hi art,

Put it into /dt/media/css/demo_table_jui.css . Looking at your page, you've got the DataTable inside an iframe, which is a completely separate document - any style changes in the parent document won't effect the child document in the iframe. So if you want a style applied, you need to put it into one of the two CSS files that you include in the iframe (demo_table_jui.css or the ThemeRoller stylesheet) - or include an extra document with the change.

Regards,
Allan

art

OK I did change the css file and it also changed on the page. However, it is still a lot different compared to the font style and size shown in the examples here: http://datatables.net/styling/themes

allan

The font size etc in my demo pages are controlled by the demo_page.css file (which you probably don't want). It sounds like you either want to include you default stylesheet for your site into the iframe document, or have a few global styles - for example rather than:

[code]
td, th {
font-family: Helvetica,Arial,FreeSans,sans-serif;
}
[/code]

which applies only to the cells - as you are seeing on your page - use:

[code]
body {
font-family: Helvetica,Arial,FreeSans,sans-serif;
}
[/code]

Allan

aelibby

May I sugget you change the section:
.paging_full_numbers .ui-button {
padding: 2px 6px;
margin: 0;
cursor: pointer;
* cursor: hand;
color: #333 !important;
}

To:
.paging_full_numbers .ui-button {
padding: 2px 6px;
margin: 0;
cursor: pointer;
* cursor: hand;
}

Assigning a hard coded font color when using the jquery ui messes up the pagination buttons with dark themes. It makes the numbers and text impossible to read without highlighting. Removing that line makes it so that the theme's font color takes over and things are much more legible.

allan

Hi,

The problem with removing that line is that in my demos the default styling for the A tags takes priority and they become blue in the demos. I think this might be an area that simply requires a little bit of configuration to get it working smoothly with different themes. An alternative would be to add extra information to the selector that would target specifically my demo pages, but that could be equally as confusing.

I'd certainly like to improve the stylesheets that DataTables has in the zip package to make them easier to customise, so I'll very much bear this in mind when it do that.

Thanks of rate feedback!

Allan

aelibby

This is only for the themeroller supported datatables.

Your demos (if they are like my tables) should default to whatever the current theme's colors are.

allan

In this example - http://datatables.net/release-datatables/examples/basic_init/themes.html - if I remove the color CSS attribute, then the blur colour of the links shows through in the paging control, so I need to take that into account.

Allan

aelibby

I am using the "jquery.dataTables_themeroller.css" file and without removing that line all of my dark themes were borked. Removing that line has made all of my themes work fine for active and inactive pagination stuff, so I dunno.

Unfortunately my project is on an intranet so I can't show you an example. I might be able to whip something up on my site at home for you to look at sometime soon.

allan

Its okay - I know exactly what you mean. I'm not not certain what is the best way to integrate it into my download package. I'll have a think about the structure of the CSS to see how it can be improved.

Allan

aelibby

Roger that.