Project | Project in just completed a system, (based on ASP.net) requires the system to provide multiple styles, the user can choose the system style freely. We implemented this function simply and efficiently by replacing it with CSS style files. The implementation steps are as follows:
1. Define CSS style files, which can be named STYLE_BLUE.CSS, etc.:
2. Set the corresponding CSS class in each program page (*.aspx)
3. User login to take out the style of its settings (value is CSS file name, such as Style_blue) use session to save
4. Go to specific page, remove CSS style from session, load corresponding CSS file in file header (such as STYLE_BLUE.CSS)
Of course, multiple CSS files will be prefabricated if you need multiple styles.
The same way that you write the color values of page elements in a database, and then read them again,
Advantages:
Less work \ No need to deal with the database more than once (read user-set CSS filename only when you are at the system)
Disadvantage: The user can not set the style of the page element freely, but the user set the page element to require the user has a certain aesthetic basis, this shortcoming in the application system is generally negligible.
Appendix I: CSS style files
A:link,a:active,a:visited{text-decoration:none; Color: #000000}
A:hover{text-decoration:underline; Color: #4455aa}.
SelectedItem
{
Background-color: #8AC8DF;
}
Body
{
Font-family:verdana,sans-serif; font-size:9pt; Background-color: #F6f6f6;
Scrollbar-face-color: #DEE3E7;
Scrollbar-highlight-color: #FFFFFF;
Scrollbar-shadow-color: #DEE3E7;
Scrollbar-3dlight-color: #D1D7DC;
Scrollbar-arrow-color: #006699;
Scrollbar-track-color: #EFEFEF;
Scrollbar-darkshadow-color: #98AAB1;
}
. table_table
{
Font-family:verdana,sans-serif;
font-size:9pt;
Background-color: #4682b4
}
. table_head
{
Font-family:verdana,sans-serif;
font-size:10pt;
Background-color: #C1D0E1;
COLOR: #ffffff;
Background-image:url (blue.gif);
}
. Table_strong
{
Font-family:verdana,sans-serif;
font-size:9pt;
Background-color: #4682b4;
COLOR: #ffffff;
Font-weight:bold;
}
. table_trline
{
Font-family:verdana,sans-serif;
font-size:9pt;
Background-color: #C1D0E1;
height:19pt;
Text-align:center;
COLOR: #ffffff;
Font-weight:bold;
}
Tr
{
Font-family: Song body;
font-size:9pt;
Background-color: #F8F8F3;
Text-align:center
}
. t{line-height:1.4}
Div
{
Font-family:verdana,sans-serif;
font-size:9pt;
}
Form{font-family:verdana,sans-serif; FONT-SIZE:8PT}
input{font-size:9pt; COLOR: #000080; Background-color: #EFEFEF}
input.buttonface {font-size:9pt; COLOR: #000080; Background-color: #d2e9ff}
Input.dialogbotton {font-size:9pt; Color:rgb (0,0,128); Background-color:rgb (255,204,51)}
. submit{font-size:9pt; COLOR: #000080; Background-color: #d2e9ff}
textarea {border-width:1; Border-color: #000000; Background-color: #efefef; font-family: Arial; font-size:9pt;}
Select {border-width:1; Border-color: #000000; Background-color: #FFFFFF; font-family: song body; font-size:9pt;}
Option{font-family: Song body; Font-size:9pt;background-color: #efefef}. Menu_button
{
Border-bottom: #1864AE 1px solid;
Border-left:rgb (233,244,249) 0px solid;
Border-right: #1864AE 1px solid;
Border-top: #0051E7 0px solid;
Cursor:hand;
Background-color: #4682b4;
}
. Menu
{
font-size:9pt;
Background-color: #74A3C9;
}
. navpoint {
Cursor:hand; Color:white; Font-family:webdings;background-color: #4682b4;
}
P{font-family:verdana,sans-serif; FONT-SIZE:9PT}
Br{font-family:verdana,sans-serif; FONT-SIZE:9PT}
Appendix II: In the *.aspx page, the DataGrid sets the class in the CSS
<asp:datagrid id= "dgrdnet" runat= "Server" class= "table_table" width= "100%" enableviewstate= "False"
autogeneratecolumns= "False" cellpadding= "1" cellspacing= "1" cssclass= "table_table" borderwidth= "0px" >
<alternatingitemstyle horizontalalign= "left" verticalalign= "Middle" ></AlternatingItemStyle>
<itemstyle horizontalalign= "left" height= "30px" ></ItemStyle>
<Columns>
<asp:boundcolumn datafield= "Rfq_number" headertext= "RFQ" ></asp:BoundColumn>
<asp:boundcolumn datafield= "Item_code" headertext= "ItemCode" ></asp:BoundColumn>
<asp:templatecolumn headertext= "Itemdesc" >
<ItemTemplate>
<asp:textbox runat= "Server" text= ' <%# DataBinder.Eval (Container, "Dataitem.item_desc")%> ' >
</asp:textbox>
</ItemTemplate>
<EditItemTemplate>
<asp:textbox runat= "Server" text= ' <%# DataBinder.Eval (Container, "Dataitem.item_desc")%> ' >
</asp:TextBox>
</EditItemTemplate>
