Customising your own Styles

[Bruce]

There are a lot of questions in the forums that can be answered by changing the CSS for a specific item. However editing the supplied CSS files are dangerous, since changes you make will be lost with the next NetTalk update.

This post describes the steps needed for you to use your own CSS file. Inside this file you can put your own styles (based on the shipping ones if you like.)

Step 1:
--------
Create a new CSS file in your \web\styles folder. This is a text file, you can use something like notepad to create it. Name it whatever you like - custom.css is popular. (But be careful Notepad doesn't call it custom.css.txt)


Step 2:
---------
Add this CSS file to the list in the Web Server procedure, Styles tab.


Step 3:
---------
Into this new CSS file you can place your own styles. Usually the easiest way to start is by copying an existing style from the all.css file and then renaming it, and modifying it to your needs.

NOTE: CSS IS CASE SENSITIVE


Step 4:
---------
In your net web app, set the "thing" (it might be a browse, or a form field, or whatever) to use the new style. There are CSS tabs just about everywhere that give you a lot of control over the CSS class that is being used.

EXAMPLE:
-----------
To change the style of a browse

a) Do Step 1 and Step 2 as laid out above.

b) For a browse, go to the NetWebBrowse Settings, to the CSS Classes tab. Notice that the browse is (by default) set to use the 'BrowseTable' class

c) open \web\styles\all.css in Notepad. Find the BrowseTable style and copy it to your custom.css file. Notice that it has 3 parts to it...

.BrowseTable {
  font-family: Tahoma, Verdana,  Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #333;
  margin: 5px 0px 5px;
  border-collapse: collapse;
  border: 1px solid #888;
  padding: 0px;
}

.BrowseTable th {
  font-weight: bold;
  padding: 2px;
  border: 1px solid #AAA;
}

.BrowseTable td {
  padding: 2px;
  border: 0px solid #AAA;
  height: 20px;
}

They need a unique name so rename these 3 bits, to say MyBrowseTable in the custom.css file.

d) make any changes to the browse "look" that you want. For example to give each "cell" in the browse a border, set the border in the "td" section to 1

.myBrowseTable {
  font-family: Tahoma, Verdana,  Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #333;
  margin: 5px 0px 5px;
  border-collapse: collapse;
  border: 1px solid #888;
  padding: 0px;
}

.myBrowseTable th {
  font-weight: bold;
  padding: 2px;
  border: 1px solid #AAA;
}

.myBrowseTable td {
  padding: 2px;
  border: 1px solid #AAA;
  height: 20px;
}

e) Back in the App, change the browse to use 'myBrowseTable' instead of 'BrowseTable'

REMEMBER CSS IS CASE SENSITIVE so make sure you get the Case right.

f) Lastly - Compile and run your program, and run the browser. You will need to press Ctrl-F5 in your browser after making changes to the CSS file in order to see the changes take effect.

You do not need to re-compile, or re-run the program while you fiddle with CSS changes. Just pressing Ctrl-F5 will reload the new file.

You will need to re-compile and re-run if you change any setting in the APP (for example a setting on the CSS Classes tab.)

[sukhendu]

Hi Bruce,

I followed all 6 steps in creating a custom.css file, but the app is still using all.css file.  I'm not sure where to tell the app to use custom.css and where to use .myheadingtable.

I have added custom.css in NetWebserver / Extensions / NetTalk or Net Simple Object (3) / Settings /Styles / Insert for Browser:ALL

Where do I tell the app to use .myheadingtable ?

Thanks,
Sukhendu

[Mike Grigsby]

Hi Sukhendu, The all.css is specified outside of the application as a default. What you should do is add your custom.css file as a style file in the main frame of the application (or wherever the NetTalk or NetSimple Object, with a base class of NetWebServer--usually this is the Main procedure, at least in the demo apps).

Then go to the tabs: Settings | Styles, and insert your own CSS file.

[Bruce]

Hi Sukhendu,

All the procedures have a "Css Styles" tab. This is where you set the various Css styles for all the components on that window. Then you can also apply styles to browse columns, individual form fields, and so on if desired.

Cheers
Bruce

[sukhendu]

Hi Mike and Bruce,

Still no luck. 

On Demo App3 (Basic Login), I'm trying to change the color of the banner "CapeSoft Email Server - Configuration".

I can change the color by changing the color option on line 526 of all.css file in .headingtable td  section.  I created a custom.css file by copying the relavent sections from all.css and added the word my next to dot (following the documentation). Next, added this to WebServer procedure (the one that hangs from the Main procedure in this Demo 3 App).  And then what?  Where do I tell the app to use .myheadingtable td from custom.css?

Thanks for your help.
Sukhendu

[Mike Grigsby]

Hi Sukhendu,

So you absolutely must take Bruce's advice from previous threads and download the plugin "Firebug" for the Firefox browser!

I couldn't build apps without it now. I'm always using the "Inspect" button. If you do that in this app, and highlight the heading, you'll see that the properties are in the ".headingtable td {" area of all.css. The color is defined as #999999;.

Go to your web/styles folder, bring up the all.css file in notepad or some other editor, and change the value as you like. Save it and refresh and it should be change.

The big gotcha that I spent a couple hours on one time is that the directory has a file called all.css.gz that it seems to prefer getting style classes from. Delete this file and the program will then look just to the all.css file.

SO, now that I've totally not answered your question and just realized it... the class is being called (in demo 3) from the procedure PageHeaderTag. So go to the Extensions | NetTalk Web Border Extension. Then look for the XHTML tab and the section for headingPlain. You'll see that the class it calls is "headingtable". So change it to "myheadingtable" and it will use your custom class. Notice that the heading is in the column tag "<td>", so it will use the .myheadingtable td that you have defined.

Awhile back I bought a great book on CSS that you may want to look for. It's full color with pictures (so it keeps my attention<g>), called "the Zen of CSS design" by Dave Seah and Molly E Holzschlag.  It's a beautiful book and very inspiring.

[Bruce]

Advanced:

This thread explains how to create your own all.js and all.css files from the component js and css parts.

http://www.nettalkcentral.com/index.php?option=com_smf&Itemid=36&topic=957.0

Cheers
Bruce