ASP.Net MVC : How to customize webgrid pager UI

Question

I need to add some html tag into webgrid pager. webgrid pager is a tfoot tag.

My current grid UI looks like below picture.

but i want my pager look like below picture.

I want to add some image and text along with pager links.

I took help from this website http://www.creativebloq.com/web-design/create-custom-tables-webgrid-9134626

They just replace some tag with more tag this below way

.ToString().Replace("<tfoot><tr><td","<tfoot><tr class='footstuff'><td></td><td style='color: black;'>Records " + firstRecord + " to " + lastRecord + " of " + grid.TotalRowCount  + "</td><td></td><td></td><td></td><td")

their full grid code look like.

@MvcHtmlString.Create(
grid.GetHtml(mode: WebGridPagerModes.All, tableStyle: "tranlist", headerStyle: "headerstyle",  firstText: "First", lastText: "Last",   
columns: grid.Columns(
grid.Column("TranDate", header: "Trans Date", format: @<text>@item.TranDate.ToShortDateString()</text>),
grid.Column("Description", header: "Transaction Description", style: "bigcolumn"), grid.Column("Units", header: "Units", style: "smallcolumn"),
grid.Column("UnitPrice", header: "Unit Price", format: @<text>@item.UnitPrice.ToString("$0.00")</text>, style: "medcolumn"),
grid.Column("Total", canSort: false, header: "Total Price", format: @<text>@{double q = (item.Units * item.UnitPrice);} @q.ToString("$0.00")</text>, style: "medcolumn"),
grid.Column("TransactionID", header: "Action", style: "linkcolumn", canSort: false,
format: @<text> @Html.ActionLink("Edit", "Edit", new { id = item.TransactionID })
| @Html.ActionLink("Delete", "Delete", new { id = item.TransactionID })</text>)))
.ToString().Replace("<tfoot><tr><td","<tfoot><tr class='footstuff'><td></td><td style='color: black;'>Records " + firstRecord + " to " + lastRecord + " of " + grid.TotalRowCount  + "</td><td></td><td></td><td></td><td")
)

So I restructured my webgrid code as below but it did not work. In my case nothing has been added in pager area. see my code below and tell me where i made the mistake.

@MvcHtmlString.Create(
grid.GetHtml(
        tableStyle: "webgrid-table",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        selectedRowStyle: "webgrid-selected-row",
        rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
        firstText: "<<",
        previousText: "<",
        nextText: ">",
        lastText: ">>",
        numericLinksCount: 5,
        columns:
            grid.Columns
            (
            grid.Column(columnName: "ID", header: "ID", format: @<text>@item.ID</text>,style:"SmallCols"),
            grid.Column(columnName: "FirstName", header: "First Name", format: @<text>@item.FirstName</text>,style:"NameColWidth" ),
            grid.Column(columnName: "LastName", header: "Last Name", format: @<text>@item.LastName</text>,style:"NameColWidth"),

            grid.Column(columnName: "StateName", header: "State Name", format: @<text>@item.StateName</text>,style:"NameColWidth"),
            grid.Column(columnName: "CityName", header: "City Name", format: @<text>@item.CityName</text>,style:"NameColWidth"),
            grid.Column(header: "IsActive",
            format: @<text><input id="select" class="box" name="select" 
            type="checkbox" @(item.IsActive ? "checked='checked'" : "") value="@item.IsActive" /></text>
            , style: "text-center checkbox-width SmallCols")
            ))
.ToString().Replace("<tfoot><tr><td", "<tfoot><tr class='footstuff'><td></td><td style='color: black;'>Records 1 to 2 of 5 </td><td></td><td></td><td></td><td")
)            

looking for help. thanks