In Maintain 7.6.1, I'm trying to apply a CSS class from a stylesheet to a Text control on a form. I'm using the following code to apply the stylesheet to the form:

winform show_inactive frmMain;
frmMain.cssname = "wfservers_dev.css";
winform show frmMain;

wfservers_dev.css is in my project's path.

I also had dragged the .css file from Dev Studio onto the form in the MDE window.

According to the ocumentation, you're supposed to be able to apply a particular class from the stylesheet with syntax of:

WINFORM SET form.control.CLASS TO classname;

So I have this in my code:

winform set frmMain.MainFormTitleTXT.CLASS TO "redbg";

where "redbg" is a class in my stylesheet defined as:

.redbg {
background-color: #ff0000;
}

When I run my Maintain I get the following error message:

(FOC03610) CLASS is not a field in (or member of) type WF_FRMMAIN

It seems like the syntax shown in the documentation is wrong. It doesn't seem to like "formname.control.CLASS". I tried using CLASSNAME instead. I don't get the error and my app runs but the CSS class doesn't get applied to the Text control.

Anyone know if "formname.control.CLASSNAME" is the correct syntax to apply a CSS class to a form control? Is the classname supposed to be in double quotes as well? The docs don't specify that either. I can't seem to find any more information on this anywhere.



Thanks!

Just figured out the answer my own question by running my Maintain app and viewing the HTML source in Internet Explorer.

The correct syntax is:

formname.control.cssclass = "CSS class name";

to apply a particular class to a control.
It's ".cssclass" not ".class" after control.

I'll have to submit a request to have this information corrected in the "Developing WebFOCUS Maintain Applications 7.6.1" manual.
It has the incorrect info in the PDF file I've been using.

So now I can apply the class fine but I can't override in my .css file some of the CSS attributes that are being set by Maintain like "text-decoration". If I specify something like:

.myclass {
 color: lime;
}

then the control does turn lime in color (lime text and lime border). But doing something like:

.myclass {
 text-decoration: blink;
}

has no effect on the control because in the HTML source of my running app Maintain has a text-decoration in a

<style></style>

block within the div. Here's what I see:

<div class="myclass" id=MainFormTitleTXT style="position:absolute;top:10;left:10;width:640;
height:31;visibility:hidden;font-family:Arial;font-weight:700;
font-size:14pt;font-style:normal;text-decoration:none;
border-style:solid;border-width:1px;text-align:center;"
 tabindex=-1>WebFOCUS Server Inventory (Dev)</div>

My new question is: is there a way to override the "text-decoration: none" in the

<style></style>

block with "text-decoration: blink (or whatever)" from the "myclass" class defined in my .css file?

Thanks!

Yes, it is possible by using the !important rule in your style sheet, e.g.

.myclass {
 text-decoration: blink !important;
}

This forces your style sheet rule over the normal cascade order, which is
1.Browser default
2.External style sheet
3.Internal style (within the head tags)
4.Inline style inside tag

Maintain uses Internal styles for it's own classes and inline when you change an objects properties. you can add and external style sheet, which is, of course, the least important.

I found that by using my style sheets and NEVER changing the maintain form element properties (leaving them as default), then the maintain code will not have it's style imposed. This is a debatable area as changing the font will add text-decoration:none to the inline style sheet. Working in this manner also reduces the code produced. You can help by setting the form properties at the start to be roughly what you want, This sets the internal styles, and then just changing the styles of certain elements within your style sheet.

The error in the documents has been there for quite some time, though I think that the 706 training material is correct.

Hope this helps.

!important was just what I needed. Guess I need to get myself a good CSS book. Funny, it turns out that "blink" is not supported in Internet Explorer 6's broken CSS model anyway. Too bad it's currently the only browser we use throughout the company. Looks like I may have to create an animated GIF. Thanks for the help, Alan.

Mmm. I was hoping that you were using 'blink' just as an example, not really wanting to use it at all.

CSS1 and 2 specifications do state that a browser may conform without rendering the blink on a element. IE has chosen to do this.

The W3C Web accessibility Content guidelines state - " Ensure that moving, blinking, scrolling or auto-updating objects or pages may be paused or stopped by the user". The reason is that this may affect people with dyslexia, learning disabilities, visual impairment or photosensitive epilepsy.

Many usability and accessibility experts are unsure of the legality of this type of text or image animation under various legislation regarding site accessibility worldwide. All advice not to use it if at all possible.

Lecture over.

I won't be using blink anyway. I'm aware that it's in bad taste to use it anyway. The main issue here was that I wanted to be able to use properties in a user stylesheet and be able to override the properties generated by Maintain, which I'm able to do using !important. So, yes, I was just using blink as an example while I was trying to understand how to use my user stylesheet. I noticed "line-through" doesn't work for text-decoration either but underline and overline are both support on IE.

I wasn't trying to make my Maintain form look like a Myspace page *shudder* or anything. Thanks for the tips though.