How to create style sheets for Syncfusion Asp.net mvc tools?

[Gary Cryer]

I have to re-skin the menu tool and the grid control to meet a clients web visual style guidelines. The thing is I found how to set the custom style sheets but not how to define them. Can I get a document on what .class names do the elements of a menu to use? Or do I just write a style for the

that defines the menu control and then pass it to the menu control's CustomCss method? What about with grids?

Thanks in advance,
Gary Cryer

[Gary Cryer]

The following is a simple example of what I am trying to do.

Menu:

• @Html.ActionLink("Home","Index","Home")




• @Html.ActionLink("User Profile", "UserProfile", "UserProfile")

@{Html.Syncfusion().Menu("menu")
.Height(30).Render();}

CSS-1 :

ul
{
background: #FF00FF;
}

CSS-2 :
ul li
{
background: #FF00FF;
}

Scenario 1: If I define CSS-1 as an inline style for the menu, the menu background changes to the defined color.

Scenario 2: If I define CSS-1 in a separate style sheet the background does not change.

Scenario 3: If I define CSS-2 in a separate style sheet the background of the line item does change.

How do I get Scenario 2 to work?

[Meena]

Hi Gary,

Thanks for using Syncfusion products.

Your requirement of customizing the CSS of Grid and Menu could be achieved by changing the respective CSS classes.

We have created a sample on Menu and Grid with CustomCss and the same can be downloaded from the attachment.

Let us know if you have any other concerns.

Regards,
Meena



custom-area-1829221278_89d05462.zip

[Gary Cryer]

So to help me understand better lets look at one of the style classes that was provided for the greenish grid.

.Syncfusion-Grid-Greenish .GroupTopLeftCell, .Syncfusion-Grid-Greenish .TopRightCell, .Syncfusion-Grid-Greenish .TopLeftCell
{
background-image: url(/Content/css/CustomCss/Images/Greenish_sprite.png);
background-color: transparent;
border-color: #A0B345;
}


If I am making it a custom style I would replace the class name ".Syncfusion-Grid-Greenish" to my custom style name and leave the other class names like ".GroupTopLeftCell" as is, Then edit the body of the style as needed. Does this sound correct?

[Meena]

Hi Gary,

Yes you are correct.

You could change the base class name and leave the other static classes as such while customizing the CSS.

Let us know if you have any other concerns.

Regards,
Meena

[Gary Cryer]

In the case of the Menu control, I lose the Horizontal orientation whenever I add a CustomCSS. I have tried using the Orientation method to manually set the orientation to horizontal, but it had no effect and the menu continued to display vertical. Can I get an example of how to style the menu bar while maintaining the Horizontal orientation?

[Meena]

Hi Gary,

Thanks for the update.

We have created a sample on Menu with Custom CSS in which the reported issue “vertical orientation” will not occur.

We have two different CSS files for horizontal and vertical orientation. Therefore, we would suggest you to add the CSS of horizontal Menu. The same is explained in the sample and it can be downloaded from the attachment.

Please let us know if you have any other questions or concerns.

Regards,
Meena




Menu1508970750_9d5b8361.zip

[Gary Cryer]

Is this the correct solution in the zip file? I see only one Custom.css file with the office2007blue class names inside of it.

[Meena]

Hi Gary,

Sorry for the inconvenience.

As I mentioned before, the base class name is common and we can have any name for it.

I just named that as “Office2007Blue”. Now I have created a sample and changed the class name for your convenience. It can be downloaded from the below link.

Menu1508970750_9d5b8361(1)215257867.zip

Please let me know if you have any other concerns or questions.

Regards,
Meena

[Gary Cryer]

Meena,

Thanks for the style sheet. When I applied it to the menu control I did not lose the Orientation. I can tweak this file to meet the client needs and use it as a learning tool. I will post back later if I need more guidance.

Thanks again,
Gary

[Gary Cryer]

Oops! I spoke to soon.When I change the class name I lose all styling. let me set you through what I have done.

1. I copied the "custom" style into my css file call MainMenuStyle.css
2. I have added the MainMenuStyle.css to the Syncfusion StyleManager.
3. When creating the Syncfusion menu tool, I used the "custom" class name into the CustomCSS method like so .CustomCSS("custom").

This works fine. What I did next:

4. In the style sheet I replaced the "custom" class name with the "MainMenu" class name.

5. When creating the Syncfusion menu tool, I used the "MainMenu" class name into the CustomCSS method like so .CustomCSS("MainMenu").

Doing this I lose all styling. Keep in mind I have only changed the class name to something more suitable for the project. I have attached the file for your review. Until then I think I can just continue using the sheet with the "custom" class name in place since it still works when I change the name back.

thanks again in advance,
Gary




MainMenuStyle_3e4e333a.zip

[Meena]

Hi Gary,

Thanks for the update.

We have checked your CSS file and noticed that you have given the class name as “MainMenu”. We would suggest you to give the class name as “mainmenu” since we are converting the class names to lower case internally.

We have also created a sample for your convenience and the same can be downloaded from the below link.

Menu1508970750_9d5b8361(1)1678081166.zip

Please let us know if you have any other concerns.

Regards,
Meena

[Gary Cryer]

That worked! So internally the class names are converted to lower case, so when I pass in the class name to the CustomCSS method, it is looking for caps? Did not realize that CSS was case sensitive. I am still a web UI noob.

[Meena]

Hi Gary,

Thanks for the update.

Yes it is looking for caps, since we are converting to lower case internally.

Please let us know if you have any other concerns or questions.

Regards,
Meena