CSS basics

[Keith]

Hi

I started to experiment with CSS to change the look of my application.  I made a file CustomT.Css which contained:

.my-quarter-time{
background-color:yellow;
}

This file was in Web/Themes/ui-lightness/.

CustomT.Css was included as a Theme file on Settings/Styles/Files/Theme Files on the Nettalk Extension.  I then added 'my-quarter-time' to the CSS tab on a field on a Form (Entry Class).

Compile and run produced a slight change to the look of the element to which I had attached my class (two of the edges of the value box were straight rather than rounded) but the background colour was not changed to yellow.  In Firebug I saw this for the element:

<input id="SCE__qtrmile" class="my-quarter-time nt-entry-right nt-entry-readonly" type="text" data-do="imm" maxlength="6" autocomplete="off" style="width: 3.5em;" size="5" readonly="readonly" value="16.67" name="SCE__qtrmile">
</div>

This looked ok because it had my class (my-quarter-time) but in the Firebug Style window I could not find .my-quarter-time

I have obviously not linked this up properly.

Thanks for your help.

Keith

[Stu]

Hi Keith,

I find it a good idea to always run gzipall.bat after any css changes.

Also, you shouldn't need to compile the server to see changes with css.

1. Make the changes.
2. Run gzipall.bat.
3. Hit F5 (or maybe CTRL F5) to refresh page.

[Bruce]

while playing with Css you probably want to turn off "combining". This makes the edit-test cycle faster.
WebServer procedure, Extensions, Settings / Advanced.

cheers
Bruce

[Keith]

Thanks Stu,

I ran Gzipall and everything clicked into place.  And, of course Bruce, a comment about running the bat file was in the 'Book' but I glossed over it.

I also see now what Gzip is all about.

Thanks, this is a big step forward.

Cheers

Keith