Welcome Guest Search | Active Topics | Sign In | Register

DatePickers with skin causing repetitive CSS Options
SDDP
Posted: Monday, March 23, 2009 4:36:29 PM
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
eo_support
Posted: Monday, March 23, 2009 4:50:44 PM
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!
SDDP
Posted: Monday, March 23, 2009 7:02:23 PM
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.
eo_support
Posted: Monday, March 23, 2009 8:02:46 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Thanks for the update. Glad it works for you!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.