Rank: Member Groups: Member
Joined: 3/16/2009 Posts: 23
|
I am developing a large web form with several DatePickers on it as well as many other input fields. I styled the date picker with the designer with the Vista style, then decided that instead of having all that markup in each datepicker, I would use a skin file. That worked of course, but in the output of the page, at the top, there is a style tag where it writes out the styles from the skin file. Problem is, it writes out the styles for each datepicker on the form. Is there a way with skin files to have it write out the styles once, then have each datepicker use them, or do I have to do that manually? Is this an EO issue, or is this just the way skin files work?
Code: HTML/ASPX
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker1 {background-color:white;border-bottom-color:Silver;border-bottom-style:solid;border-bottom-width:1px;border-left-color:Silver;border-left-style:solid;border-left-width:1px;border-right-color:Silver;border-right-style:solid;border-right-width:1px;border-top-color:Silver;border-top-style:solid;border-top-width:1px;color:#2C0B1E;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker2 {border-bottom-color:#f5f5f5;border-bottom-style:solid;border-bottom-width:1px;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker3 {font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker4 {background-image:url(/Pangea_app/eo_web.ashx?id=ea683ccb-8959-4a00-885c-6a338c8ee201);background-position:center center;background-repeat:no-repeat;color:#1c7cdc;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker5 {background-image:url(/Pangea_app/eo_web.ashx?id=562603cf-0c12-4f71-86b5-94a2f698ccc6);background-position:center center;background-repeat:no-repeat;color:#1176db;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker6 {color:gray;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker7 {cursor:pointer;cursor:hand;margin-bottom:0px;margin-left:4px;margin-right:4px;margin-top:0px}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker8 {background-image:url(/Pangea_app/eo_web.ashx?id=a14227f7-2e5d-4448-bae4-6110bac73a85);background-position:center center;background-repeat:no-repeat;color:Brown;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker9 {cursor:pointer;cursor:hand}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Eff_DateDatePicker10 {font-family:Verdana;font-size:8.75pt;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker1 {background-color:white;border-bottom-color:Silver;border-bottom-style:solid;border-bottom-width:1px;border-left-color:Silver;border-left-style:solid;border-left-width:1px;border-right-color:Silver;border-right-style:solid;border-right-width:1px;border-top-color:Silver;border-top-style:solid;border-top-width:1px;color:#2C0B1E;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker2 {border-bottom-color:#f5f5f5;border-bottom-style:solid;border-bottom-width:1px;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker3 {font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker4 {background-image:url(/Pangea_app/eo_web.ashx?id=ea683ccb-8959-4a00-885c-6a338c8ee201);background-position:center center;background-repeat:no-repeat;color:#1c7cdc;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker5 {background-image:url(/Pangea_app/eo_web.ashx?id=562603cf-0c12-4f71-86b5-94a2f698ccc6);background-position:center center;background-repeat:no-repeat;color:#1176db;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker6 {color:gray;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker7 {cursor:pointer;cursor:hand;margin-bottom:0px;margin-left:4px;margin-right:4px;margin-top:0px}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker8 {background-image:url(/Pangea_app/eo_web.ashx?id=a14227f7-2e5d-4448-bae4-6110bac73a85);background-position:center center;background-repeat:no-repeat;color:Brown;font-family:Verdana;font-size:8pt}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker9 {cursor:pointer;cursor:hand}
.eo_css_ctrl_ctl00_ContentPlaceHolder1_ctl00_AppFormView_Common_Proposed_Exp_DateDatePicker10 {font-family:Verdana;font-size:8.75pt;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px}
etc. Thanks
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
This is neither an EO issue nor a skin issue. The root of the problem is that when each DatePicker is rendered, it has no knowlege about another DatePicker is using the same style. The easiest way around this is to convert all CssText to CssClass. Taking the DatePicker's SelectedDayStyle for example, this is how it works:
1. Expand SelectedDayStyle, you should see CssText property is set to include some CSS attributes such as font, color, etc; 2. Instead of setting CssText property, you can move the contents of CssText to a separate .css file, give it a class name, then set CssClass property to that class name;
The DatePicker has a button to do the conversion for you. You would right click the DatePicker, then select "Edit DatePicker..." to bring up the DatePicker Builder, then click "To CSS Class...", that will convert all CssText to CssClass. It places the result in the DatePicker's CssBlock property. You will need to move the result from CssBlock to a separate .css file and then reference that file.
Thanks!
|
Rank: Member Groups: Member
Joined: 3/16/2009 Posts: 23
|
Thanks, I'm glad you have that "To CSS Class..." button, that saved a lot of manual work. Following that procedure instead of the skin file made the output HTML around 50Kb smaller.
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Thanks for the update. Glad it works for you!
|