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.
Unfortunately, activation email could not send to your email. Please try again.

How do you change a theme in a menu

Thread ID:

Created:

Updated:

Platform:

Replies:

119558 Jul 8,2015 09:45 AM Jul 13,2015 08:33 AM ASP.NET MVC 5
loading
Tags: Grid
Andrew Simpson
Asked On July 8, 2015 09:45 AM

i have a simple menu in a view. How can i change its theme to the vista theme in your theme studio.
and is changing the theme on a grid similar

thanks
andrew

                    @Html.EJ().Menu("syncfusionProducts").Items(items =>
               {
                   items.Add().Url("#").Id("Jobs").Text("Jobs").Children(child =>
                       {
                           child.Add().Url("../Jobs/livejobs").Text("Live Jobs");
                           child.Add().Url("../Jobs/ByCustomer").Text("Job History");
                           child.Add().Url("../jobs/alljobs").Text("All Jobs");
                           child.Add().Url("").Text("Jobs today");
                           child.Add().Url("").Text("Jobs last 60 days");
                       });
  }).Width("100%")



Saranya Sivakumar [Syncfusion]
Replied On July 9, 2015 08:36 AM

Hi Andrew,

Thanks for using Syncfusion products.

We don’t have Themestudio support for our EJMVC control and we only have support for Classic controls. We can customize the css for EJ MVC controls using “CssClass” api. We have specify a class name for “CssClass” property as shown in the following code snippet.

<code>

@Html.EJ().Menu("syncfusionProducts").Items(items =>

               {

                   items.Add().Url("#").Id("Jobs").Text("Jobs").Children(child =>

                       {

                           child.Add().Url("").Text("Live Jobs");

                           child.Add().Url("").Text("Job History");

                           child.Add().Url("").Text("All Jobs");

                           child.Add().Url("").Text("Jobs today");

                           child.Add().Url("").Text("Jobs last 60 days");

                       });

               }).Width("100%").CssClass("vista")

</code>

After setting CssClass, we have to apply styles to the class in the style section as shown below.

<code>

.vista {

        background:#dd7b80;

    }

    .vista.e-horizontal .e-list > a,

    .vista.e-horizontal .e-list:hover > a {

        color: #c75e5d;

    }

   

. . .

</code>

We can customize the style according to our need. We have prepared the sample based on your requirement and the same can be downloaded from the following location.

http://www.syncfusion.com/uploads/user/forum/119558/ze/MenuwithVista-530752315

Please let us know if you have further queries.

Regards,

Saranya.S


Andrew Simpson
Replied On July 9, 2015 11:53 AM

Thanks

Saranya Sivakumar [Syncfusion]
Replied On July 10, 2015 07:44 AM

Hi Andrew,

Thanks for your update.

Please let us know if you have any other queries.

Regards,

Saranya.S


Andrew Simpson
Replied On July 10, 2015 08:55 AM

It has worked for the menu but does the same thing work for the grid. below is the code for my view.
What i want is for the column headers and the grid footer( where the paging arrows are) to be the same shade of blue (  color: #00003D;  ,background: #b0dff4;  ) as the menu but the following code only turns the text in the cells green. Am I using the wrong css values.

ps. i dont realy want a purple red and green grid i was using these colours to try to find out the problem.

thanks

andrew

@(Html.EJ().Grid<object>("FlatGrid").Datasource((IEnumerable<object>)Model)
         .AllowPaging()
         .CssClass("GridBlue")
         .ClientSideEvents(eve => eve.RecordClick("OnRowClick"))
        .Columns(col =>
        {
          col.Field("branch_nm").HeaderText("Bramch Name").Width(60).Add();
          col.Field("JobCount").HeaderText("Job Count").Width(50).Add();
        })
  
)
<style type="text/css" class="cssStyles">
    .GridBlue{
        background-color: purple;
        background: red;
            color: green;
    }
    .GridBlue.e-gridheader{
        background-color: purple;
        background: red;
            color: green;
    }
        .GridBlue.e-gridcontent{
        background-color: purple;
        background: red;
            color: green;
    }
       .GridBlue.e-table{
        background-color: purple;
        background: red;
            color: green;
    }
      .GridBlue.e-columnheader{
        background-color: purple;
        background: red;
            color: green;
    }
      .GridBlue.e-headercell{
        background-color: purple;
        background: red;
            color: green;
    }

      .GridBlue.e-headercelldiv{
        background-color: purple;
        background: red;
            color: green;
    }
      .GridBlue.e-hide{
        background-color: purple;
        background: red;
            color: green;
    }
     .GridBlue.e-alt_row{
        background-color: purple;
        background: red;
            color: green;
    }
     .GridBlue.e-hover{
        background-color: purple;
            color: green;
    }
    .GridBlue.e-selectionbackground {
        background-color: purple;
        background: red;
            color: green;
    }
     .GridBlue.e-gridfooter{
        background-color: purple;
        background: red;
            color: green;
    }
    .GridBlue.e-summaryrow{
        background-color: purple;
        background: red;
            color: green;
    }
     .GridBlue.e-groupdroparea{
        background-color: purple;
        background: red;
            color: green;
    }

        .GridBlue.e-horizontal .e-list > a {
            color: #00003D;
        }

</style>


Isuriya Rajan [Syncfusion]
Replied On July 13, 2015 08:33 AM

Hi Andrew,

Thanks for using Syncfusion products.

We can customize the header and footer of the grid by using specific classes of the grid and applying the styles based on our requirement.

We have created a sample and the same can be downloaded from the below location

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/119558/CustomCss-1486435401.zip


Please refer the below Knowledge base link for more information on customizing the grid appearance.

KB Link: http://www.syncfusion.com/kb/5172/how-to-customize-grid-appearance-using-custom-css

Please let us know if you have any concerns.

Regards,

Isuriya R



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.

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.

;