To create a custom visual style for the C1Menu control based on the Arctic visual style, complete the following:
1. Copy the theme folder C:\Program Files\ComponentOne\Studio for ASP.NET\C1WebUI\VisualStyles to a new folder in your Visual Studio project. ~/VisualStyles/ArcticFoxNew/C1Menu
2. Open the styles.css file inside the new folder, rename all the classes name to make sure they end with the new visual style name "ArcticFoxNew".
3. Replace all instances of _ArcticFox with _ArcticFoxNew.
Suppose the original class name is .C1Menu_ArcticFox, then rename it to .C1Menu_ArcticFoxNew.
4. Save the modified .css file.
Note: Make sure the read-only attribute is unchecked for the styles.css file.
5. Save and close your Visual Studio project.
6. Reopen your Visual Studio project.
7. Set the VisualStylePath to" ~/VisualStyles".
8. Set UseEmbeddedVisualStyles to "False".
9. Set the VisualStyle to the new external custom theme, "ArcticFoxNew".
10. Now you can open the new styles.css file and edit the correspondent CSS classes. In this example, we modify the background colors for the main menu and submenu items.
11. Open the new styles.css file and locate the selector name, .C1Menu_ArcticFoxNew .C1Link .C1TextNode for the text in the link menu item types. Replace the color: #333333 with the color:#330066. This will change the menu item’s text.
.C1Menu_ArcticFoxNew .C1Link .C1TextNode
{
color:#330066;
}
12. Locate the .C1Menu_ArcticFoxNew-C1Horizontal selector and set the background color to #CCCCFF for the C1Menu control. This will change the container’s background color for the C1Menu control.
.C1Menu_ArcticFoxNew-C1Horizontal {
display: block;
padding: 0;
margin: 0;
background: #C7C7C7 url(Images/menu-horizontal.png) repeat-x 0 -120px;
border:solid 1px #999999;
width:100%;
/* min-height:32px; */
background: #CCCCFF;
}
13. Set the background color for the hover state of the link item in the C1Menu control to #CC99FF This will change the background color when you hover over a link item in the C1Menu control.
.C1Menu_ArcticFoxNew .C1Active,
.C1Menu_ArcticFoxNew .C1Hover,
.C1Menu_ArcticFoxNew .C1Focus,
.C1Menu_ArcticFoxNew .C1Opened
{
display: block;
background:#FDFDFD url(Images/menu-horizontal.png) repeat-x 0 -210px;
text-decoration: none;
background:#CC99FF;
}
14. Save and run your project.
|
