Site Tools


HtmlBox Styling

Developer: RhinoScript
Summary: Discusses how to enable visual styles on buttons and controls in HTML dialogs

Question

I am trying to make an HTML dialog box and display it with RhinoScript's HtmlBox method. If I preview the dialog in Internet Explorer, I get the styling I want, which is the default styling for buttons, input fields, etc. used by the operating system. It looks identical to the user interface controls in Rhino.

When I use the HtmlBox method to display the dialog, it looks much different and less appealing. Could it be that the HtmlBox and the web control that it is using are displaying with a wrong default style sheet? My goal is to make a user interface which perfectly fits into Rhino's existing user interface elements.

Answer

To enable visual styles for your dialog, add the following META tag to the <head> section of your HTML file:

<META HTTP-EQUIV="MSThemeCompatible" CONTENT="yes">

More information

There are many applications, written in HTML and deployed as an HTML Application (HTA) or a Win32 application, that use HTML or host the WebObject in their user interface (UI) elements. When running in Windows, these applications can look consistent with Win32-based applications running on the same operating system. Following are some considerations when applying visual styles to HTML content.

Visual styles in relation to HTML content applies only to Intrinsic HTML Controls such as buttons, scroll bars, and select controls. The Windows visual style is applied automatically to controls on HTML pages. If you do not want your page to have a visual style applied, use the META tag with its attribute set to no. The META tag is documented in a following section.

HTML pages that change Cascading Style Sheets (CSS) properties such as background or border do not have a visual style applied to them. They display the specified CSS attribute.

When specified as part of the content, most CSS properties do apply to elements that have visual styles applied.

By default, visual styles are applied to Microsoft Internet Explorer. But there are options in Internet Explorer that let you turn off visual styles. To turn visual styles on or off on an HTML page, either choose Options in the browser, or set the META tag on a page. To use the META tag, add a META tag to the <head> section of your pages. You need to add this tag only once; visual styles apply it to all the page content. This also applies to content packaged as HTAs. To turn on visual styles, the META tag must be:

<META HTTP-EQUIV="MSThemeCompatible" CONTENT="yes">

To turn off visual styles, use:

<META HTTP-EQUIV="MSThemeCompatible" CONTENT="no">

Note, if the browser setting and the tag setting do not agree, the page will not apply visual styles. For example, if the META tag is set to no and the browser is set to enable visual styles, visual styles will not be applied to the page. But if either the browser or META tag is set to yes and the other item is not specified, visual styles will be applied.

Visual styles might change the layout of your content. Also, if you set certain attributes on Intrinsic HTML Controls, such as the button width, you might find that the label on the button is unreadable under certain visual styles.


developer/scriptsamples/htmlboxstyling.txt ยท Last modified: 2016/04/07 by sandy