Custom CSS in PowerBuilder Webforms

[SaLiMoS]

Hi All,
I saw lot of post asking for how to customize PB webform application
using css style sheets and saw different solutions and most of the
solutions was for customization of DW so i summarized all the post in
this one and a kind of a solution at the end which can be helpful for
lot of people.

Well Sybase say that "you can customize the css files generated with
the
solution in the IIS, But at your own risk".
The problem is that even if you change the styles in the css file
(xp.css &
classic.css) this will not affect the styling of the application,
because the
application controls are styled using inline styling which override
any CSS
Class Styles.

But What can be done on the DW controls level is styling it to some
extend
through AppendHTML and ValueIsHTML properties. for example the
bellow:
In the "Append HTML Syntax" :
style="background:Red; color:blue; font-weight:bold"

And this one is cool for text headers:
style="filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFE0E0E0,
endColorstr=#7FFF8000)
PROGID:DXImageTransform.Microsoft.DropShadow(Color='black', OffX=1,
OffY=1);"

Some text shadows:
style="filter:
progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,
strength=2);"
style="filter:
progid:DXImageTransform.Microsoft.Shadow(direction=140,color=#666666,strength=
3);"

OK That can be helpful is DW styling. but what if i want to style
other than
the DataWindows, what about buttons, textboxes, and other controls
with more
artistic styles than the ones provided in the control properties. From
my web
experience and with some research i found a workaround for this
problem.
(Limited to some extend in some browsers due to some incompatible
styles.)

What you have to do is create a custom style sheet in the solution
folder on
IIS, for example "mycustom.css"
now Import this style sheet into xp.css and classic.css by adding the
following
syntax:
@import url("mycustom.css");

Now in the custom style sheet "mycustom.css"
Add your css rules, and for each property in the css rule add at the
end before
the semicolumn (;) !important.
The !important will tell the browser to override the inline style of
the control with this style in the class.
For example:
div{
background: Yellow !important;
}

p{
color:#fefefe !important;
font-family:Arial !important;
font-weight:bold !important;
}

button{
border:1px #ccc dashed !important;
}

#control_id{
width:100px !important;
}

That should do the Trick. :D

some reference links:
http://newsgroupstats.info/article/forums.sybase.com/sybase.public.powerbuilder.net.webform/4814/CSS-Issue.html
http://www.lmpx.com/nav/article.php/forums.sybase.com/sybase.public.powerbuilder.net.webform/4288/read/index.html

[Bruce Armstrong [TeamSybase]]

Although this group is active on the Sybase server the feed between Google and the Sybase server is not currently working. If you post through Goolge the post will never show up on the Sybase server, and most people who answer questions in that group will never see it. Instead, you may want to access the Sybase newsgroups directly at:

http://www.sybase.com/detail_list?id=11507&pageNum=1&multi=true&show=1248