Webinar on CSS

[Bruce]

Hi Guys,

Last Friday's ClarionLive webinar on the new "calendar" functionality in NetTalk went off very well. We did however hit the limit for attendance to the live webinar, so I'm pleased to say the recordings are available here
http://www.clarionlive.com/index.php?option=com_docman&task=cat_view&gid=42&Itemid=57

I've also agreed to do a follow-up on Feb 18th on CSS. While this will primarily cover customizing CSS for your own apps, the knowledge will also be useful for those who need to do some CSS work in any web app (be it PHP or ASP or whatever.)

So mark Friday 18th in your diary, and, as before, you you want to be assured of a spot "live" then make sure you join the webinar early.

Cheers
Bruce

[Bruce]

ClarionLive Webinar number 97 is now available for download at

http://www.clarionlive.com/index.php?option=com_docman&task=cat_view&gid=42&Itemid=57

This is required-watching for those wanting CSS questions answered. No excuses now, just go do your homework.

Feel free to post follow up questions into this thread for future viewers.

To start the ball rolling Mike Springer had a question; (emphasis mine)

==================
I'm sort of stumped on what seems to me to be a simple "problem".  The default behavior on my netwebbrowse has the browse header row in orange with black font.  I want to simply change the browse header to be dark blue with white font in the header.

I created a CSS file called ms-browse-header-color.css.  The
content of the file is:

..ms-browse-header-color
{
background-color:#0033CC;color:#FFFFFF !important;
}

Then, in the NetWebBrowse CSS tab, in the Browse Header entry, I have
"ms-browse-header-color"

This does, in fact, change the background color of the browse header row (all columns) to a dark blue, but the column header text is still the
default black instead of white.

Can you suggest the approach to change the browse header background color and font color?
========================================

Here's the answer;

In the attached picture you can see the custom class added to the <thead> section. Inside that you have a <tr> which is the header row, then <th> which is the header cell. You'll also notice an anchor tag <a> (a hyperlink in other words) inside the header cell.

Now hyperlinks are interesting because, in the absence of specific styling rules, the browser controls the color of the link. Usually Blue for a link you haven't visited, and a Purple for linksyou have.

By clicking on the <a> you can see the styles on the right. And there's no  color specifically for <a> tags in that list.

Now you'll remember from the webinar that you can set the properties of a sub-tag using the space syntax.So if you add;

..ms-browse-header-color a{
color:#FFFFFF;
}

to your style file, then the color of the hyperlink (which is what the text
is) will change.

You'll notice the header is underlined - which of course is the standard
visual clue to a user that they can click on it. I think you should keep this from a usability point of view, however some people like to take it away. The style property for that is
text-decoration: none;

If you're some kind of psychopath you can even do something like
text-decoration: blink;

Valid values for text-decoration are;
underline, overline, line-through, blink, none

now for a really cool trick;

it's possible for you to have multiple text-decoration attributes. So for
something different try;

text-decoration: underline overline;

Cheers
Bruce


[attachment deleted by admin]