Forum OpenACS Development: 5.3.1 forms and forms.css

The upgrade to 5.3.1 forms has a nasty side effect. The grey background on the left is gone. This is visually challenging now, as before we had a nice grey block on the left which is exactly as big as the input field on the right. You can see this working perfectly when posting to forums

Now this does not seem to be possible anymore. I played around with forms.css, changed the margin-form form-label to include background-color: #e9e9e9; yet the background is only for one line on which the label is.

Is there any way to get the block back? And what about the sections? In forms.css there is no support for legend and the like at all. So sections wont work or display properly at all.
I tried to give a class to the legend as described in the documentation ({legend {class form-label}}) sadly to this avail: <legend class="form-label">User Information</legend> which did not change the look at all.

Therefore my questions, can someone who has 5.3.1 running explain in simple terms what I need to do where to

a) Visually see the sections
b) Get the old block back

I don't recall a vote by the OCT to change the default look and feel of OpenACS so drastically that old sites will not look the same again. And I have the slight feeling there are more hidden mines to trap on while doing the upgrade, so I would caution anyone upgrading at the moment.

Maybe someone has screenshots how they manage ad_forms with sections on 5.3.1? Maybe I use the wrong form.css?

Sorry for sounding a little bit annoyed, but it is hard to upgrade to 5.3.1 with productive sites if you are unable to bring back exactly the same look as before.

Hmm... at least on Firefox the trick with width=100% does not work. The background is exactly as wide as the text is.

But here is a trick:

Inside the legend tag, wrap the code in <div id="form-label"> tag and then use:

#form-legend {
background: #efefef;
text-align:center;
font-weight:bold;
width: 100%;
padding: 5px;
}

This makes it look at least someone like a section.

What do you mean with "wrap the code in tag" ? How does the wrap thing look like? Did you change the legend tag or add an id/class attribute?

Malte,

The problem with adding DIV tag inside the LEGEND block is that it's not valid HTML 4.01 transitional. Pages containing forms that use sections, are not valid HTML anymore with this change.

You can specify the class to apply to the legend by passing a list of pairs (name value). See https://openacs.org/xowiki/Web_Forms for more info.

Also, a default style can be set if none is passed for legend along with the section definition.

Malte,

By default, when no style is defined for fieldset and legend, the fieldset has a border. The legend text appears in between fieldset borders. So, styles should be applied for both fieldset and legend to get what you want. I'm not a designer and I have very little knowledge with CSS but something like the following should work:

.fieldset-class {
border: 0px solid #FFFFFF;
border-top-width: 20px;
border-top-style: solid;
border-top-color: #DDDDDD;
}

.legend-class {
background: #DDDDDD;
font-weight: bold;
}

However, there's a style for fieldset in acs-templating/www/resources/forms.css that takes precedence and custom styles won't be applied:

.margin-form fieldset, .vertical-form fieldset, fieldset {
border: 0px solid #000;
}

We'll have to fix this for next release.

It looks like the legend tag is like the title tag, h1, h2, etc. It should be inside a fieldset tag, and it can't contain any block elements. It looks like it can contain inline tags like b or i, although it is probably better to use an associated style. Can you use display: none; to remove it completely? Nice set of tags.

Okay, I agree that people spend a major part of their live on it and this is great. Sadly the gained knowledge is not disseminated properly, allowing the mere mortals to run into issues like the one with legend, but others as well.

Latest experience is that IE7 does not display the richtext form widget at all if you upgraded your site. And yes, I am using the standard.adp as well as the forms.css provided by acs-templating. This happend on three sites so far, with clients where different people where responsible for the first design (otherwise it might have been my style of CSS coding).

Strangely it is also the case with certain packages. On one site it works perfectly fine for all packages, except lars-blogger.

THis is why I called for a new page to collect all the pitfalls that you might trap into when upgrading to 5.3.1. Because there seem to be many and at this point in time I can only warn people to upgrade if they have custom extensions. And though I don't mind being a guinea pig, my enthusiasm for 5.3.1 and the new and better CSS has been considerably dented the last week.

Once I get around to it I will write down all the things I found out. Sadly at the moment I do not have a fix apart from "Hey, this is the new design, it looks much better than the old one" and praying the client never asks the question "And can I get the old one back?"

thank you. but now ie sucks. it works very well with both :)