How do you change a theme in a menu

[Andrew Simpson]

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]

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]

Thanks

[Saranya Sivakumar]

Hi Andrew,

Thanks for your update.

Please let us know if you have any other queries.

Regards,

Saranya.S

[Andrew Simpson]

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]

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