logo

Redefining the look of HTML

Are you bored with those old, gray buttons and text boxes? I bet you are! Well, why not change them? It's easy with Cascading Style Sheets, new from the W3C.

Does that sound like some cheesy ad on local radio? Sorry.... It's true though, it is very easy to make your pages look a little different and, dare I say, professional.

This article is mainly in response to the mails I get asking me how I make the buttons and input boxes look so "professional" (Seems silly to explain it in every reply when I can do it once here). The answer is using CSS. Don't get scared though as it is, as I said earlier, easy.

In the case of the fields and buttons I simply add the following CSS to all pages:

INPUT {
color: #808080;
background-color: transparent;
font: bold 8pt verdana;
border: 1px solid #808080;
}


What this does is tell the browser that ALL elements of type INPUT should inherit these styles. In my case I have the first line also include other elements that I want to look similar:

INPUT, TEXTAREA, SELECT {


Notice, that buttons are not included in this line. That is because your standard 'button' is actually an Input HTML element where type='button'.

All we need to do now is plug this in to all our pages. How do we do that though? There are various ways but I prefer to use a .css file (R5 users read Page). First create a Page called 'global_ie.css' that is "Treated as HTML" and add your CSS to it. Now, in the head of your forms ($$HTMLHead field or equivalent) add the following formula:

bt := @If(@BrowserInfo("BrowserType")="Microsoft"; "ie"; "nn");
db := @ReplaceSubstring( @Subset( @DBName; -1); "\\"; "/");
"<link rel=\"stylesheet\" type=\"text/css\" href=\"/"+ db +"/global_"+ bt +".css\">"


Notice that there is also a need for a page called 'global_nn.css'. This is becuase Netscape is next to useless and supports almost none of these nice styles. If you were to redefine input elements using CSS and use it with Netscape there is a side-effect where little boxes appear here and there. Wierd (and annoying - sort it out Netscape!).

Using this method of redefining the look of HTML elements there are almost no limits as to what is possible. Too much to even touch upon here. Let's look at one example though - say we want all links to be in UPPERCASE (have you noticed they already are on this page?). All we need do is redefine the Anchor <a> element.

A {
text-transform : uppercase;
}


Hey presto!

If you want to get to know CSS is more detail then I would recommend firstly buying the Dynamic HTML book and then investing in TopStyle, shown below, which takes some pain out of the syntax and testing.

TopStyle



Note: In web-design it is almost impossible to hide this kind of design data. Once you get used to this methodology you may well find yourself looking at the source of a page and finding where the CSS is stored so that you can enter its path in to the URL and take a quick peek ;-)

Feedback

  1. Very Cool Indeed!

  2. Lovely tip, but.....

    (and with apologies for being pedantic) you need to change the HTML header equation to strip out spaces as well, or it won't find the Netscape page.

    For example, until I hashed it to:

    bt := @If(@BrowserInfo("BrowserType")="Microsoft"; "ie"; "nn"); db := @ReplaceSubstring( @Subset( @DbName; -1); "\\"; "/"); db2 := @ReplaceSubstring( db; " "; "+"); "<link rel=\"stylesheet\" type=\"text/css\" href=\"/"+ db2 +"/global_"+ bt +".css\">"

    It wouldn't find the styles in netscape.

      • avatar
      • Jake
      • Tue 13 Mar 2001

      Re: Lovely tip, but.....

      Woops. Sorry. My fault...

      What I tend to do (and assume everybody does) is to always create database file names that are less than 8 characters, always lower-case and contain no spaces e.g. "store.nsf"... this way you are almost gauranteed no problems with platforms, browsers etc. Not that easy for databases that are "moved" to the web I know so probably best to use Richard's tip anyway.

      Talking of Netscape, I downloaded version 6 this weekend and, after making numerous changes, CodeStore now "works" with Netscape (4 and 6). Wow.... never I thought I'd see the day. I actually caught myself telling a colleague that Netscape 6 "isn't that bad".

      Jake -CodeStore

      Show the rest of this thread

  3. HELP ! Cannot get SELECT to appear with transparent background.

    I am trying to get a SELECT (Notes field of type Combobox) to appear with a transparent background. I have setup a style sheet in the HTML Head Content of the form using your code "INPUT, TEXTAREA, SELECT{"....

    Can you tell why it will not work ? I am using IE 5.0

    1. Re: HELP ! Cannot get SELECT to appear with transparent background.

      Hmmm, interesting! I just took a "quick" look and it appears that this is not supported/possible.

      The only thing I can think of is to use the same background stlye for the SELECT as you do it its parent object....

      Jake -CodeStore

      Show the rest of this thread

    • avatar
    • Ian Gillett
    • Fri 25 May 2001

    No hover hand?

    Hi,

    Is there any way to reinstate the hand, which should appear when you hover the mouse over a button?

    1. Re: No hover hand?

      Are you sure there should be a hand cursor when you hover over a button!? If so you can apply one using the following line of CSS:

      cursor : hand;

      The trouble is that buttons are in the <input> class, so this hand would also apply to fields. It may be better to define a class that you can apply to the buttons one by one...

      Jake -CodeStore

  4. Will formating work on Computed Fields?

    I'm new at this. Can you tell me if I can apply CSS to computed fields and computed for display fields?

    1. Re: Will formating work on Computed Fields?

      When Domino sends Computed fields to the browser it is as text, so you will not be able to use the <input> tag's style.

      Best way to do it is wrap your field inside a <span> tag and apply a class to this: [<span class="passthru">] <span class=".ComputedFields"> put your field here </span> [</span>] You now need to add this to your CSS. You can make it easy by putting it in the same place as your input definition, like this: [<span class="css">] .ComputedFields, input, select, textarea{ background-color:#ff6600; } [</span>]

      HTH, drop me a line if you have any problems, Jake PS If you computed fields are in table cells you can apply the style to that instead of using the <span> tag....

      Show the rest of this thread

  5. Does this work with Text in tables?

    I have done what you suggested in the article, but it doesn't seem to change any text that appears on the form. Any Input fields are converted correctly but if i add font styles for BODY or TABLE, Domino seems to ignore them.

    I used TopStyle to check the StyleSheet and it works properly, so I'm not sure what is happening.

    1. Re: Does this work with Text in tables?

      If you want a Style definition to apply to text on the page AND in the tables you do it like this:

      BODY, TD{ font-style:...; }

      The problem you are having may be that domino is using the <font> tag on your text. CSS cannot override this! To stop domino doing this do NOT apply text formatting to any text on the form.

      Jake -CodeStore

      Show the rest of this thread

  6. Thank You!

    Thank you for boiling this down to its simplest elements so that it can be easily understood by Notes developers.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "Miscellaneous"

« Previous Article Next Article »
JavaScript PickList, Version 1.1   Listing search results in groups

About This Article

Author: Jake Howlett
Category: Miscellaneous
Keywords: Style Sheets; CSS;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »