CSS Tips for NetTalk programmers

[Bruce]

Update: If you are new to editing Css in NetTalk see this thread first on making your own Css files;
http://www.nettalkcentral.com/index.php?option=com_smf&Itemid=36&topic=116.0

CSS is a language, and as such has behaviors and abilities that are not immediately apparent when you are approaching it for the first time. The goal of this thread is to highlight some of the behaviors that you may not expect coming from a programming background. It it not meant to be a comprehensive overview of css though - your own learning and discovering is recommended.

I'll assume for this thread that you have a custom.css of your own included in your app. The changes you make will be to your custom.css, not to the shipping NetTalk files.

Overriding using the same name class

Firstly, you're aware that NetTalk ships with a bunch of CSS, created either by us or by the jQuery project. What you may not know is that you can override specific settings in your custom.css file.

For example;
.nt-entry{
 background-color: #FDFDFD;
 border: 1px solid #888;
 padding-left: 2px;
 padding-right: 2px;
 vertical-align:top;
}

The above is the standard NetTalk class for an entry field. You'll notice it sets a number of properties, including the border. Now you could of course create your own class, and set it (globally) to be used by your app. But if you're keeping most of the settings the same, just changing, say the border, then you can create your own declaration of nt-entry in your custom.css

.nt-entry{
 border: 0px;
}

now your setting automatically overrides my setting, but all the other settings remain the same. If I add to the nt-entry class, you automatically get those additions.

Using this approach it's possible for you to tweak the shipping classes, without editing the shipping file.

You're also able to use this approach to extend, or alter the jQuery style (classes that start with ui).

[Bruce]

I've done a ClarionLive webinar on CSS which is highly recommended viewing for NetTalk designers.
http://www.clarionlive.com/index.php?option=com_docman&task=cat_view&gid=42&Itemid=57

[Bruce]

Stu complained yesterday about the "size of the jQuery Tabs are too big".
Of course that's a personal preference, although I tend to agree. But like with all things visual it's all CSS based, so it's trivial to change. Here's some CSS, which you would add to your custom.css file to change the tab size.

.nt-tab-title{
font-size:1em;
}

.ui-tabs .ui-tabs-nav li a {
padding: 0.3em 0.5em;
}

Stu went one further and added;

.ui-tabs-nav {
  height: 30px;
}

Remember - if you don't like it, use Firebug (or your favorite browser-style-viewer) to play around with the settings.

[Johan van Zyl]

DesignFestival

http://designfestival.com/10-top-css-design-resources/?utm_source=dlvr.it&utm_medium=facebook&utm_campaign=10-top-css-design-resources

SitePoint
http://reference.sitepoint.com/css

CSS Editors

http://speckyboy.com/2008/09/15/7-free-css-editors-which-is-the-best-you-choose/

http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/

http://www.hongkiat.com/blog/top-css-editors-reviewed/

http://sixrevisions.com/css/10-top-notch-css-editors/