This is a migrated thread and some comments may be shown as answers.

Change background colour on click event

5 Answers 1006 Views
Button
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 29 Jul 2015, 08:38 AM

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

5 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 31 Jul 2015, 05:40 AM
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:
Hope this helps.


Regards,
Konstantin Dikov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 13 Aug 2015, 11:53 AM

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

0
Accepted
Kiril Nikolov
Telerik team
answered on 17 Aug 2015, 08:12 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 17 Aug 2015, 08:51 AM

Thanks Kiril,

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

Thanks, Mark

0
Kiril Nikolov
Telerik team
answered on 17 Aug 2015, 09:03 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Button
Asked by
Mark
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Mark
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question
or