Using global CSS in your cfform
The other day someone asked in the comments about a way to use CSS classes instead of adding inline styles in each control. One of the problems is that using inline code consume a lot of Kb and it's good to save size as much as possible because a form only allows the use of 32Kb (or 64Kb depending on who you ask :)). Right now, it is not possible to include an external CSS file with all our styles. I wish ( and it's on top of my list) that the next update will allow it :)
For now, and because we have the onLoad event in the CF Updater 7.01 we can set up some global styles when the form loads and save some Kb to spend in other places.
The idea of this technique is to set the properties of the components that we want to change when the form loads one by one. Note that any inline style will overwrite the global style for that control. Also, for styles that are inheritable (themeColor for example), you can use the style property of the form tag. A list of controls with their properties can be found on the Flex docs. In this example I'm just showing a few of them.
The looks like thiscfform name="myform" height="400" width="280" format="Flash" onload="formOnLoad()">
<cfformitem type="script">
function formOnLoad()
{
// Do anything that you need to do in the onload Event
// call the function that is in charge of applying the styles
applyStyles();
}
function applyStyles()
{
_global.styles.CheckBox.setStyle("fillColors", [0x006699, 0xffffff]);
_global.styles.RadioButton.setStyle("fillColors", [0x006699, 0xffffff]);
_global.styles.Form.setStyle("color", 0x000000);
_global.styles.Button.setStyle("borderThickness", 1);
_global.styles.Panel.setStyle("backgroundColor", 0xE5F0F9);
_global.styles.Panel.setStyle("color", 0xffffff);
_global.styles.Panel.setStyle("headerColors", [0x277DC6,0x50ABF7]);
_global.styles.HBox.setStyle("backgroundColor", 0x006699);
_global.styles.HBox.setStyle("marginTop", 10);
_global.styles.HBox.setStyle("marginBottom", 10);
_global.styles.HBox.setStyle("marginLeft", 10);
_global.styles.Accordion.setStyle("fillColors", [0x277DC6,0x50ABF7]);
_global.styles.Accordion.setStyle("selectedFillColors", [0xff6600,0xffcc00]);
_global.styles.Accordion.setStyle("themeColor", 0x0066cc);
_global.styles.Accordion.setStyle("color", 0x0ffffff);
_global.styles.TextArea.setStyle("fontSize",14);
_global.styles.TextInput.setStyle("fontSize",9);
}
</cfformitem>
<cfformgroup type="hBox">
<cfformgroup type="panel" width="240" label="Panel">
<cfformgroup type="accordion" width="210" height="300" label="Containers">
<cfformgroup type="page" label="Inputs">
<cfinput type="text" width="100" label="Input" name="inputText" value="Some small text"/>
<cfinput type="password" width="100" label="Password" name="password" />
<cfinput type="dateField" width="100" label="Date Field" name="inputDate" />
<cftextarea type="text" name="displayText" label="TextArea" width="100" height="100" >Some large text</cftextarea>
</cfformgroup>
<cfformgroup type="page" label="Buttons, CheckBoxes, Radios">
<cfformitem type="text" width="175">Check Box</cfformitem>
<cfinput type="checkBox" label="Check me" name="inputCB" />
<cfformitem type="text" width="175">Radio Buttons</cfformitem>
<cfinput type="radio" label="Yes" checked="true" name="radiobutton" value="y" />
<cfinput type="radio" label="No" name="radiobutton" value="n" />
<cfinput type="button" name="mybutton" value="Button" />
</cfformgroup>
<cfformgroup type="page" label="Calendar">
<cfcalendar name="myCalendar" label="Calendar"></cfcalendar>
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfform>
Some other useful styles (replace the style, ie: "fillColors", with your own definition):
Tabs:
_global.styles.Tab.setStyle("fillColors", [0x277DC6,0x50ABF7]);
_global.styles.Tab.setStyle("selectedFillColors", [0xff6600,0xffcc00]);
Tab pages
_global.styles.VBox.setStyle("backgroundColor", 0x507A9C);
Dropdowns
_global.styles.ComboBox.setStyle("fillColors", [0x006699, 0xffffff]);
_global.styles.ComboBox.setStyle("backgroundColor", 0x006699);
Calendar (dateFields and cfcalendar)
_global.styles.CalendarLayout.setStyle("rollOverColor",0x996699);
_global.styles.CalendarLayout.setStyle("selectionColor",0xcc33ff);
_global.styles.CalendarLayout.setStyle("todayColor",0xcc33ff);
Validation tooltip colors
_global.styles.ErrorTip.setStyle( "borderColor", 0x339900);
_global.styles.ErrorTip.setStyle( "color", 0x000000);
Bret
Very Similar to your system, I have been using an include file in which I have all of my different styles set up. Then, I just call the style I have set for that cfformgroup.
Example:
Include file
<cfset style1 = "fontColor:##000000;etc">
Then, in the file I use the variable to call the style:
<cfformgroup type = "page" style = "#style1#">
This is as close to inline css support as I have found.
Nahuel
I use to do it that way, but you need to put that in every control and cf creates a different style object for each control spending a lot of Kb.
tony
any ideas?
John Farrar
Laura
Your code works, but I think you are not seeing anything because you did not try writing in the input. The style you are setting will only apply to the input text, not its label. For labels, you need to set the style in the outer container, whatever it is.
John,
Do the following:
//this sets the second header, starts at 0
var header = containers.getHeaderAt(1);
header.setStyle("fillColors", [0x009933,0x50ABF7]);
You can apply as many properties as you want to that specific pane. "containers" is the id of the accordion:
<cfformgroup type="accordion" id="containers">
Rick Smith
_global.styles.Page.setStyle("marginTop", 0);
I want to get rid of the margin in the page inside the accordion.
John Farrar
Thanks
John Farrar
Thanks
Nahuel
You need to put that inside this function
function applyStyles()
{
// Here
}
and add an id to this tag
<cfformgroup type="accordion" id="containers" width="210" height="300" label="Containers">
John Farrar
John Farrar
Also... when selecting a tab the other tabs jump colors. I sure would like a DOM tool for Flash Forms to see what is connected where and what the parameters are!
Laura
What you are probably seeing ("jump colors") is because the normal color is different from the normal fill color:
_global.styles.Accordion.setStyle("fillColors", [0x277DC6,0x50ABF7]);
_global.styles.Accordion.setStyle("selectedFillColors", [0xff6600,0xffcc00]);
John Farrar
Now... is there a way to get the form to show as 100% height and width?
John Farrar
Now... is there a way to get the form to show as 100% height and width?
Laura
By default, cfform takes all the available space. You can also use width="100%" height="100%"
Pope
Jason
Does #include the .as is the best choice?
6dust
Chris
can you control the space between formgroups as well with CSS? I have a vertical group that contains a number of horizontal groups. Between those horizontal groups there always is a space of maybe 20px that I can't get rid of.
cffomgroup type="vertical"
cfformgroup type="horizontal"
cfformitem...
cfformitem...
/cfformgroup
cfformgroup type="horizontal"
cfformitem...
cfformitem...
/cfformgroup
/cfformgroup
I tried to apply the style attribute verticalGap, both inline and with onLoad, but, to no avail.
Any ideas?
Thank you,
Chris
C Smith
Jones
I tried
_global.styles.TabNavigator.setStyle("backgroundColor", 0x507A9C);
but the form did not load.
Laura
The tab navigator headers are set with the Tab selector:
_global.styles.Tab.setStyle("fillColors", [0x277DC6,0x50ABF7]);
_global.styles.Tab.setStyle("selectedFillColors", [0xff6600,0xffcc00]);
Chris,
I am not seeing the space between the groups, verticalGap should help, also try the margin property.
C Smith,
selects are styled with ComboBox selector:
_global.styles.ComboBox.setStyle("fillColors", [0x006699, 0xffffff]);
_global.styles.ComboBox.setStyle("backgroundColor", 0x006699);
Jones,
Your code works fine. If your form does not load it must be some other error. However, if you do not see the background color changing is because you need to use:
_global.styles.VBox.setStyle("backgroundColor", 0x507A9C);
in addition to your code (otherwise there will be a white margin between the tabs and the colored background)
Jones
Chris
> I am not seeing the space between the groups,
> verticalGap should help, also try the margin
> property.
err... I had set the height attibute to a higher value than needed... actually it was no margin, it was the given height. *blush*
Thank you for still trying to help. :-)
Chris
Jason
Something like ListContains() in CF
Any help will be grateful!
DerekB
My form is pretty simple - six text inputs, five of which are required. No data or anything being preloaded. The applyStyles() function only sets a handful of styles for TextInput, Accordion and Button.
The form loads quick enough, but times out when hitting submit, without all the required fields filled in.
With the styles in, timeout. Without the onLoad, validation okay.
Fortunately the rest of the styling on the page is green and the design dept is happy with haloGreen. I'm not being paid to fix it so unfortunately it's going to stay this way. However, it would be interesting to know what the possible cause might be.
Lachie Thomas
Love this site and have appreciated some really useful advice on it!
Just thought I would let you know something that I have just discovered.
I hate the prospect of adding styles to individual files. Using this example I have created a way to attach an external style file that is working for me. I am sure this is possible several ways but this is what I have done. It might defeat the purpose of global styles or create a larger form file size but anyway, It seems to be working for me.
Under the cfform creation there is code starting with
<cfformitem type="script">
function formOnLoad()
{
ect...
Then styles for the form are created.
I thought why not create an external file with this code in it and do a <cfinclude> and link to these styles.
So it looks something like this
<cfformitem type="script">
<cfinclude template="formcss.cfm">
</cfformitem>
I then attached this code to some other forms in my site and it brought the styles in also. This means that if you want to change a style item you can do it in the external file and therefore across your whole site.
I also got this code to work as I wanted a way to change the style depending on a variable
<cfformitem type="script">
<cfif isdefined('var1')>
<cfinclude template="formcss.cfm">
<cfelse>
<cfinclude template="formcss2.cfm">
</cfif>
</cfformitem>
Thanks for all the amazing articles asfusion!
Lachie
Michael
Does anybody else has difficulties styling a cfcalendar? and something else that came to my attention is that styling a cfcalendar doesn't have any effect on the cfinput type="datefield".
Does anyone has some examples for this how to modify those 2 components with "_global", just as in this example? My main problems are with the rollOverColor, selectionColor and the todayColor in the cfcalendar and I'm totally stuck with the cfinput type=datefield. I've tried _global.styles.DateField... and _global.styles.DateChooser... , but without any luck.
Any help is very much appreciated (and I love what you do with this stuff!)
Laura
Use CalendarLayout
_global.styles.CalendarLayout.setStyle("rollOverColor",0x996699);
_global.styles.CalendarLayout.setStyle("selectionColor",0xcc33ff);
_global.styles.CalendarLayout.setStyle("todayColor",0xcc33ff);
Michael
Carlton Smith
Joshua Buttler
I have a question that I have been searching for an answer on now for about a week. I know that I can set a background-image on a cfformgroup type=panel using the style attribute. I have also tried to do it using "_global.styles.Panel.setStyle("backgroundImage", "myimage.jpg");" to no avail. Is there a way to set that image dynamically using actionscript? It seems if I put the actionscript value of say “myGrid.selectedItem.myColumn” into the background-image style of the panel, it doesn't like that at all and only seems to work with CF vars not AS vars which I want so that it can change dynamically without actually "refreshing" the .cfm page. I hope this makes sense and any help would be much appreciated.
Thanks!
Joshua Buttler
Since I am here, any idea how to apply a style to a "CFFORMITEM type="html">?
Thanks!
Steven Ross
if you wanted to change the alternating color on the rows:
_global.styles.DataGrid.setStyle("alternatingRowColors", [0x277DC6,0x50ABF7]);
the documentation is here:
http://livedocs.macromedia.com/flex/15/asdocs_en/
Smylar
Is it possible to change the color of only one tab. I try to change the color of only one tab using :
<cfformgroup type="page" style="background-color:##EDFDE7; headerColors:##BAFF96, ##EDFDE7">
But does not consider it.
Have a solution ?
Laura
I don't think there is a way to do that due to the way the tabnavigator is set up.
Casey
Holly
Laura
Flex and Flash docs :)
Holly,
not with styles, but you can use the button type image:
<cfinput type="image" src="myIcon.gif" ....>
doug777
<cfform name="myForm" format="flash" action="actionPage.cfm" method="post" skin="halosilver" onload="formOnLoad()">
<cfformitem type="script">
function formOnLoad()
{
_global.styles.Form.setStyle("backgroundColor", 0x99ccff);
_global.styles.Form.setStyle("borderColor", 0x99ccff);
}
</cfformitem> etc.
Doug
Mike Kaminsky
If you follow this path:
C:\CFusionMX7\wwwroot\WEB-INF\cfform
you will notice two files in the directory: flex-config.xml and global.css
The flex-config.xml file is used to set various options that are used by the flex engine when generating the Flash Form SWF. Inside this file is a setting which controls where to find the global.css file. By default, it is set to look for global.css in the same directory as flex-config.xml ... just thought I'd mention it (actually that's how I discovered what global.css is for).
OK, so if you look inside global.css - it is blank. All you need to do is add regular CSS to this file. The flex engine or the flash player (I'm not sure exactly how this works) will then apply the styles without adding size to your SWF. I have a guess that these styles may be included in the compiled SWF (cfform.swc.cfswf) that loads the library of components initially and that is where they are referenced.
Here is the code I included in my global.css ... I thought I should show it here because you will need to know the names of the various components to change their styles.
Form {
theme-color: #003366;
roll-over-color: #D0E0EF;
text-roll-over-color: #003366;
selection-color: #D0E0EF;
text-selected-color: #003366;
color: #003366;
disabled-color: #666666;
font-family: Arial,Helvetica,sans-serif;
font-size: 12;
font-weight: bold;
indicator-gap: 8;
}
Tab {
tab-height: 26;
}
Panel {
header-colors: #003366,#003366;
color: #EEEEEE;
header-height: 22;
margin-top: 10;
panel-border-style: roundCorners;
shadow-direction: center;
}
DataGrid {
font-weight: normal;
header-colors: #EAF1F5,#EAF1F5;
}
Tree {
font-weight: normal;
header-colors: #EAF1F5,#EAF1F5;
}
HDividedBox {
background-color: #EEEEEE;
}
Button {
fill-colors: #D0E0EF,#EEEEEE;
border-thickness: 3;
}
TextArea {
font-weight: normal;
border-style: inset;
}
ComboBox {
font-weight: normal;
fill-colors: #EAF1F5,#EAF1F5;
corner-radius: 4;
}
CalendarLayout {
font-weight: normal;
header-colors: #D0E0EF,#D0E0EF;
today-color: #003366;
}
TextInput {
font-weight: normal;
}
RadioButton {
font-weight: normal;
}
CheckBox {
font-weight: normal;
}
Hope that helps everybody!
Cheers - Mike Kaminsky (ICF Consulting)
George
Thanks
George
tigerlady
<cfformitem type="html" style="color:##330099; font-size:14px;" bind="{data.selectedItem.Co_info}
{data.selectedItem.Address}
{data.selectedItem.city}, {data.selectedItem.State} {data.selectedItem.zip}
{data.selectedItem.ph}"></cfformitem>
but it doesn't work. The form still works but the styles don't.
Also is there a way to use html tags inside of a form item type like <h1>mytext</h1>
Is there a book or a place that gives helpful syntax? Thanks.
Laura
You can change the scrollbar by using
_global.styles.ScrollBar.setStyle("trackColors", [0x006699, 0xffffff]); or other style properties.
I don't think the arrows can be changed though.
Check the Flex style explorer:
http://weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html
Most of the time you need to make the properties camel-case.
tigerlady,
Use fontSize:14; without "px".
See the docs for the list of tags you can use: http://livedocs.macromedia.com/flash/mx2004/main_7_2/00001040.html
Michael White
these don't seem to work:
_global.styles.Tab.setStyle("tabHeight",35);
I still have a white gap in my tab navigator page even though I use the follow styles:
_global.styles.VBox.setStyle("backgroundColor", 0xF5F5F5);
_global.styles.Tab.setStyle("marginTop",0);
global.styles.Tab.setStyle("backgroundColor", 0xf5f5f5);
Michael White
_global.styles.TextArea.setStyle("borderStyle","solid");
_global.styles.TextArea.setStyle("dropShadow","yes");
but if you also have a combobox you'll have to do this:
_global.styles.ComboBox.setStyle("borderStyle","none");
_global.styles.ComboBox.setStyle("dropShadow","false");
otherwise you will get a VERY ugly result on your combo boxes (CFSELECT)
Michael White
<cfformgroup type="tabNavigator" style="background-color:##F5F5F5;">
[I guess "backgroundColor" works the same as "background-color"]
Michael White
Jim Wilson
// checks for changes in tabNavigator
function checkTabNavigation(){
if(csmTabNavigator.selectedIndex!=0){
if(selectedDocket.text==''){
alert('Docket not selected.');
csmTabNavigator.selectedIndex=0;
}
}
}
Rick Tuinenburg
Scott
But yet the style remains. How do I get rid of it? I cleare dmy cache and everything but the style remains even though the global.css is now blank.
Mike Kaminsky (ICF Consulting)
Ian Bale
Anyone found a way to do this?
Ian Bale
<cfformgroup type="accordion" visible="Yes" enabled="Yes" width="300" height="400" id="myAccordian">
<cfformgroup type="page" label="page 1" visible="Yes" enabled="Yes" id="myAccordianPage">
<cfgrid name="testGrd1" width="300" height="200">
<cfgridcolumn name="testme" header="titlebar">
</cfgrid>
</cfformgroup>
function setStyle()
{
myAccordianPage.setStyle("marginTop",-3);
myAccordianPage.setStyle("marginLeft",-3);
myAccordianPage.setStyle("marginRight",-3);
myAccordianPage.setStyle("marginBottom",-3);
}
This is great, but I don't really want to add this code to every single page within every accordian. I could really do with knowing what gobal style I can set to achive the same thing...
I've tried setting margin properties on Page (since we're using a page fromgroup type in CF, and also on VBox since flex docs suggest that that is used inside accordians. Also on Panel, and the Accordion itself. All to no avail. Think I'm stuck now, so any help greatly appreciated!
Ian Bale
Unfortunately, it looks like all margins are hard coded to 10 in nonInheritedStyles function in the generated actionscript file. So It always set 10 regardless of what you specify anywhere :(
So, I've come up with the following. I give all my accordion tags and ID, then use the following setStyle function in my onLoad:
function setStyle()
{
// Give all accordion tags an ID, and put those IDs in the array below.
// Code will then remove margins from all accordion pages!! :)
var accordionArray = ["myAccordion","myOtherAccordion"];
for (var a=0;a<accordionArray.length;a++)
for (var i=0;i<_root[accordionArray[a]].numChildrenCreated;i++)
{
var tempID = _root[accordionArray[a]].__childDescriptors[i].id;
_root[tempID].setStyle("marginLeft",-3);
_root[tempID].setStyle("marginTop",-3);
_root[tempID].setStyle("marginRight",-3);
_root[tempID].setStyle("marginBottom",-3);
}
}
Still not ideal having to populate the array with all the IDs, so I'm still in the market for something better if you have any ideas?
Anyway,hopefully this will help someone get at least this far...
Boybles Maldooney
<cfform method="get" name="TestPanel" preloader="no" format="flash" height="210" width="300" skin="haloblue" >
<cfformgroup type="hdividedbox" width="200" height="90" visible="yes" enabled="yes" style="cornerRadius:15;panelBorderStyle:roundCorners;borderThickness:1;backgroundColor:##E5E7FE;">
<cfformgroup type="horizontal">
<cfformgroup type="vertical">
<cfformitem type="text" >Test</cfformitem>
<cfformitem type="text" >Panel</cfformitem>
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfform>
Maggie
This is what I'm down to, and the issue is that although the image shows up in the background, it stays aligned in the center, no matter what I do.
Any insight on how I can force this image to the left in the background with a background-repeat:repeat-y?
<cfform name="formName"format="flash" style="background-color:##f9f9f9;background-image: url(#request.imgDir#/cfFormBg.jpg);background-position:left;background-repeat:repeat-y;" width="100%">
Maggie
Maggie
Jim Gram
Larry
I have a cfform that has a panel and within the panel a tabnavigator...nothing fancy. When I changed the background on my web page from white to another color (in my case gray), I noticed what appears to be white border around the form. Does anyone know what this is or how to get rid of it?? I have tried a few things based off this article. One attempt was using a global approach by using _global.styles.Form.setStyle(
("borderThickness", 0) and a few other things but have had no luck in getting rid of the pesky white border.
Any suggestiong would be greatly appreciated!
Larry
bscott
<cfform style="backgroundAlpha: 0;" wmode="transparent">
MikeyJ
Thx!
MikeyJ
<cfform name="myform" height="600" width="480" format="Flash" onload="formOnLoad()">
<cfformitem type="script">
function formOnLoad()
{
applyStyles();
}
function applyStyles()
{
mypanel1.setStyle("headerColors", [0x277DC6,0x50ABF7]);
mypanel1.setStyle("color", 0xffffff);
mypanel1.setStyle("panelBorderStyle", "roundCorners");
mypanel1text.setStyle("color", 0x000000);
mypanel2.setStyle("headerColors", [0xffffcc,0xffcc00]);
mypanel2.setStyle("backgroundColor", 0x000000);
mypanel2.setStyle("color", 0x000000);
mypanel2.setStyle("dropShadow", 0);
mypanel2text.setStyle("color", 0xffffff);
}
</cfformitem>
<cfformgroup type="vBox">
<cfformgroup id="mypanel1" type="panel" width="240" label="Panel">
<cfformitem id="mypanel1text" type="text">test</cfformitem>
</cfformgroup>
<cfformgroup id="mypanel2" type="panel" width="240" label="Panel">
<cfformitem id="mypanel2text" type="text">test</cfformitem>
</cfformgroup>
</cfformgroup>
</cfform>
Jason
John
Does anyone know how change the colour of the header font in a cfgrid and have another font colour for the rows in the same cfgrid? I've tried using headerStyle, but have had no luck. Here's an example of my code:
import mx.styles.CSSStyleDeclaration;
var dataGridHeaderStyles = new CSSStyleDeclaration ();
dataGridHeaderStyles.setStyle ("color", 0xFFFFFF);
dataGridHeaderStyles.setStyle ("headerColors",[0x277DC6,0x004175]);
dataGridHeaderStyles.setStyle ("fontWeight", "bold");
_global.styles.DataGrid.setStyle("headerStyle", "dataGridHeaderStyles");
_global.styles.DataGrid.setStyle("color", 0x000000);
Any help would be greatly appreciated!
Cheers,
John
John
Cheers anyway,
John
sasha_oza
I am getting this..and i downloaded you source files and still getting that message. can any one tell me how to fix it.
Error Occurred While Processing Request
Attribute validation error for tag CFFORMITEM.
The value of the attribute TYPE, which is currently "script", must be one of the values: HRULE,HTML,TEXT,VRULE,SPACER.
Please try the following:
* Enable Robust Exception Information to provide greater detail about the source of errors. In the Administrator, click Debugging & Logging > Debugging Settings, and select the Robust Exception Information option.
* Check the ColdFusion documentation to verify that you are using the correct syntax.
* Search the Knowledge Base to find a solution to your problem.
Browser Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Remote Address 127.0.0.1
Referrer
Date/Time 11-Dec-07 06:31 PM
thank you....
or might be because you guys use cf 8..that could be a problem... thank you for your time.
Frederick
Nick
http://www.asfusion.com/examples/item/using-global-css-in-your-cfform
I have saved this page in Dreamweaver 8, but it doesn't run in IE browser and I get a HTTP 500 internal server error suggesting there is an error with the programing. I have of course placed it into an already functioning local site I'm working on, so its hopefully nothing to do with things at my end.
The issue I have of course is that I am self taught and I have to this point only used working examples to edit and learn from. Trial an error by changing variables has got me so far, but since I have never used this scripting before I have no idea where to start.
I assume there are other pages I'm supposed to reference to (CSS?), or scripts I'm supposed run (Java?), or other programes I need to view it on a local server (Flash, Flex?).
Anyway.. wondering if anyone could shed some light on my newbie problem...
Many Thanks,
Nick.
Nick