Change background colour on click event

6 posts, 1 answers
  1. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 29 Jul 2015 Link to this post

    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

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 31 Jul 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 13 Aug 2015 in reply to Konstantin Dikov Link to this post

    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

  5. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 17 Aug 2015 Link to this post

    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!
     
  6. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 17 Aug 2015 in reply to Kiril Nikolov Link to this post

    Thanks Kiril,

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

    Thanks, Mark

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 17 Aug 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready