Custom CSS question

[markster]

I've been using the stock Sunny theme in my web app development. However I didn't like the puce color background on the log in screen and wanted to convert it to basic background white. When I used Firebug to examine the code, I found the color was coming from the themes.css file and that the div was specified as nt-rounded with a color of #EEEEFF. I then added a custom.css file to the styles tab in Web Handler with the following text that override that div's attributes:

.nt-tab-inner nt-rounded {
    background-color: #FFFFFF;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    padding: 5px;

When I compiled and run the program, nothing had changed. When I looked in the gzipall.bat file, I see in the Sunny theme section that my custom.css file has been added at the end, but there's no sign of the themes.css file anywhere. When I looked at the other files listed in the gzipall.bat file, I found the color reference for the .nt-rounded color attribute in the nettalk-ui.css file. When I changed that attribute directly, the color appeared properly.

So the question is why does Firebug show the color coming from the themes.css when it is actually coming from nettalk-ui.css and why didn't my custom.css override to what it's supposed to do?

Regards, Mark

[Bruce]

Hi Mark,

this is an excellent question.
It's useful to think of CSS and JS files as being "compiled".

On the one hand it's useful to keep separate css files separate. ie the jQuery ui files, the nettalk files, your custom files - it makes sense that these are all separate from a development point of view. On the other hand, for performance reasons, it's good to combine the files into a single css file, and then compress them into a .gz file.

Think of the GzipAll.Bat file as the "compiler" in this case. (So if you change a source file, you can "recompile" by re-running GzipAll.Bat).

What you saw in your first look was "theme.css" - which is actually the "compiled" css file. So that information wasn't useful to you. Fortunately you found the "source" file, but that's more down to your persistence than anything else.

so what _could_ you have done? Well, (especially while developing styles), it's possible to run your site with "uncompiled" css files. In other words all the separate files are sent to the browser, and compression is not used. This is set in the WebServer procedure, on the Advanced tab, "combine and compress files". If you tick this _off_, then you'll be able to see the exact sources, and go from there. Once you're done, put it back on, and (crucially) re-run Gzipall.bat.

A good explanation of the order of the files, and where you slot yours in, is here;
http://www.capesoft.com/docs/NetTalk6/NetWebThemes.htm

Cheers
Bruce

[markster]

I've enclosed the theme file for my program which clearly shows my overrides appended from my custom.css file at the end (they've also been appended to the theme.fat.css and the gz versions).
I've also enclosed a snapshot of the program with Firebug clearly showing that my override spec is not being used for the displayed background color.

What's wrong?

Regards,

Mark

[attachment deleted by admin]

[Bruce]

Hi Mark,

unfortunately your Txt file got truncated. can you zip & repost please?

cheers
Bruce

[Bruce]

actually, it might just be your class;

try this in your custom css file;

.nt-rounded {
    background-color: #FFFFFF;
}

Cheers
Bruce

[markster]

Yes, that worked. I'll go back to a CSS for Dummies book I have online and review the syntax!

Mark