Change background colour on click event

[Mark]

Hi there,

Please can you advise how I can change the background colour of a standard button (with class "k-button") for the click event.  Currently it goes orange when you click it, but I need it to go blue to keep in line with my site colour themeing.  This is my markup :-

 <a class="k-button" href="#" onclick="addNote();">Add Note</a>

This button is inside a Kendo window control ​toolbar, but I am sure I'll need it generally across the site.

Thanks, Mark

[Konstantin Dikov]

Hello Mark,

If you want to change the color for the state of the button when you click on it you could override the following CSS selector:

<style>
  .k-button.k-state-focused,
  .k-button.k-state-focused:hover{
      background-color: blue;
  }
</style>

You can test the above approach at the following link:

• http://dojo.telerik.com/ANuVi/8

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Mark]

Hi Konstantin,

I'm afraid that didn't work - it's still orange when I clock onto it.  The button is inside a grid which is inside a Kendo window - not sure if that makes a difference.  I even tried adding !important to the style but no difference.  Here's my CSHTML file code (there are 4 buttons which all have the issue)  :-

<style type="text/css">
  .k-button.k-state-focused, .k-button.k-state-focused:hover {
      background-color: blue !important;
  }
</style>

@( Html.Kendo().Grid((IEnumerable<Models.PortalUserNoteViewModel>)ViewData["Notes"])
    .Name("grid")
    .Sortable()
    .DataSource(datasource => datasource
        .Ajax()
        .Sort(sort => sort.Add("Created").Descending())
        .ServerOperation(false)
    )
    .Columns(columns =>
    {
        columns.Bound(sv => sv.ItemNo).Title("Ref.");
        columns.Bound(sv => sv.CreatedFormatted).Title("Taken");
        columns.Bound(sv => sv.Note).Title("Description");
        columns.Bound(sv => sv.PortalUser).Title("Added By");
        columns.Bound(sv => sv.Company).Title("Company");
    })
    .ToolBar(tools =>
    {
        tools.Template(@<text>
            <div class="toolbar">
                <a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
                <div style="float:right;">
                    <a class="k-button" href="#" onclick="addNote('@ViewData["NoteType"]', '@ViewData["NoteTypeID"].ToString()');">Add Note</a>
                    <a class="k-button" href="#" onclick="printNotes();">Print</a>
                    <a class="k-button" href="#" onclick="closeNoteWindow();">Close</a>
                </div>
            </div>
        </text>);
    })
    .Events(e => e
                .ExcelExport("excelExport")
                .DataBound("portalUserNotesDatabound"))
    .Excel(excel => excel
                .FileName("JobLog.xlsx")
                .AllPages(true))
)​

Any more suggestions to fix this?

Thanks, Mark

[Kiril Nikolov]

Hello Mark,

 

Maybe this will help:

 

http://dojo.telerik.com/IvoCU

 

As you are not using the Kendo UI Button, but just the regular button where the styles are applied differently.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Mark]

Thanks Kiril,

That worked perfectly.  I also added box-shadow: none and border: none to remove the orange border too.

Thanks, Mark

[Kiril Nikolov]

Hello Mark,

 

I am happy to the problem is now resolved.

In case something else comes up - do not hesitate to contact us.

 

Regards,
Kiril Nikolov
Telerik