News
IBM to offer mobile security as a service IBM will start delivering mobile security-as-a-service (MaaS) through its own cloud infrastructure in India, a move that is expected to better address in-country data requirements... IBM Spectrum Computing: IBM has enlarged its portfolio of software-defined infrastructure solutions with cognitive features for workload management.  * LiFi internet technology has been introduced, the new type of wireless internet connection that gives 100 times faster than traditional WiFi -- Invented by Professor Harald Haas from the University of Edinburgh. * Sci. Rachid Yazami has developed a smart chip that charges smartphones in less than 10 minutes. BenQ has launched BlueCore projector - Consumer electronics major BenQ has launched its first BlueCore laser light source projector. For those unaware, devices with BlueCore laser technology have a high contrast output of 80000:1 with an extended lamp life and efficiency. ***
  Feb 25 2016 10:59AM     Micheal Ryan
  0 Comments    784 Views  
Here Micheal provided a simple example for gridview custom css

Here simple example for Gridview custom design with alternate row colour on mouse hover.

Separate color for header. 

HTML Code:

Copy the HTML code and paste it in your design page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div align="center">
            <h4>
                The&nbs p;Developer Tips - Beyond the Knowledge</h4>
            <h2>
                ExcelSh eet content in GridView</h2>
            <asp:GridView ID="grdContent" runat="server" Width="50%" CssClass="mygrdContent" PagerStyle- CssClass="pager" HeaderStyle-CssClass="header" RowStyle- CssClass="rows" 
            AllowPaging="True">

            </asp:GridView>
        </div>
    </div>
    </form>
</body>
</html>

CSS:

Copy the CSS code and paste it in your design page.

<style>
        .grdContent
        {
            width: 80%;
            border: solid 2px black;
            min-width: 80%;
        }

        .header
        {
            background-color: #646464;
            font-family: Arial;
            color: White;
            border: none 0px transparent;
            height: 25px;
            text-align: center;
            font-size: 16px;
        }

        .rows
        {
            background-color: #fff;
            font-family: Arial;
            font-size: 14px;
            color: #000;
            min-height: 25px;
            text-align: left;
            border: none 0px transparent;
        }

        .rows:hover
        {
            background-color: #ff8000;
            font-family: Arial;
            color: #fff;
            text-align: left;
        }

        .selectedrow
        {
            background-color: #ff8000;
            font-family: Arial;
            color: #fff;
            font-weight: bold;
            text-align: left;
        }

        .mydatagrid a /** FOR THE PAGING ICONS  **/
         {
            background-color: Transparent;
            padding: 5px 5px 5px 5px;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }

        .mygrdContent a:hover /** FOR THE PAGING ICONS  HOVER STYLES**/
        {
            background-color: #000;
            color: #fff;
        }

        .mygrdContent span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/
         {
            background-color: #c9c9c9;
            color: #000;
            padding: 5px 5px 5px 5px;
        }

        .pager
        {
            background-color: #646464;
            font-family: Arial;
            color: White;
            height: 30px;
            text-align: left;
        }

        .mygrdContent td
        {
            padding: 5px;
        }

        .mygrdContent th
        {
            padding: 5px;
        }

    
</style> 


Sample Result:

            


Here I gave simple example for gridview custom design. Thanks.

BackToTop
Comments



 
Search
1&1 Hosting
Recent Posts
Bind Gridview from CSV file in Asp.Net C#
Jun 18 2016 11:38PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Feb 27 2016 11:51AM Posted By John
Gridview custom CSS in ASP.Net
Feb 25 2016 10:59AM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Feb 25 2016 10:20AM Posted By Micheal
Read excel file and convert to List in C#
Feb 25 2016 6:26AM Posted By Michael
Encryption and Decryption for Password in C#
Feb 17 2016 3:52AM Posted By Michael
How to create Chart in ASP.Net C#
Feb 16 2016 8:03AM Posted By Michael Ryan
Tags
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: