We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

101461 Oct 25,2011 05:01 PM UTC Nov 7,2011 03:10 PM UTC ASP.NET MVC (Classic) 13
loading
Tags: Tools
Gary Cryer
Asked On October 25, 2011 05:01 PM UTC

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
Replied On October 26, 2011 08:47 PM UTC

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

Menu:

@{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 [Syncfusion]
Replied On October 27, 2011 01:04 PM UTC

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
Replied On October 27, 2011 10:21 PM UTC

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 [Syncfusion]
Replied On October 28, 2011 06:57 AM UTC

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
Replied On November 1, 2011 03:29 PM UTC

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 [Syncfusion]
Replied On November 2, 2011 05:26 AM UTC

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
Replied On November 2, 2011 06:57 PM UTC

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 [Syncfusion]
Replied On November 3, 2011 06:56 AM UTC

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
Replied On November 3, 2011 07:56 PM UTC

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
Replied On November 3, 2011 08:24 PM UTC

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 [Syncfusion]
Replied On November 4, 2011 09:25 AM UTC

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
Replied On November 4, 2011 04:25 PM UTC

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 [Syncfusion]
Replied On November 7, 2011 03:10 PM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;