SalesLogix web client – making a “button” with both text and an image

There is no standard ASP.Net control that allows you to have a button that contains both an image and text.  You could create a custom control that would allow for this but you can do this by using a standard ASP.Net control in conjunction with a custom style sheet.

Lets take a look at how we can make a button similar to this:

First off we will use an asp:LinkButton control in our page markup, similar to this:

<asp:LinkButton CssClass=”lnkPreview” ID=”Preview” runat=”server”  ToolTip=”Preview record” OnClientClick=”DoSomething()” Width=”45px”>&nbsp;&nbsp;Preview</asp:LinkButton>   

The key thing here is the tag CssClass.  In this example I have defined a custom CSS template directly on my page called “lnkPreview”.  Lets take a look at that syntax:

<style type=”text/css”>
    .lnkPreview:link
    {
        margin:0px 0px 0px 0px;
        background:url(images/icons/search_16x16.gif) left center no-repeat;
        padding: 0em 1.2em;
        font: 10pt “tahoma”;       
        color: #000000;
        text-decoration: none;
        font-weight: normal;
        letter-spacing: 0px;
        border-style:outset;
        border-color:ButtonFace;
        width:75px;
        cursor:pointer;        
        }
    .lnkPreview:hover
    {
        margin:0px 0px 0px 0px;
        background:url(images/icons/search_16x16.gif) left center no-repeat;
        padding: 0em 1.2em;
        font: 10pt “tahoma”;
        color: #336699;
        text-decoration: none;
        font-weight: normal;
        letter-spacing: 0px;
        border-style:inset;
        border-color:ButtonFace;
        width:75px;  
        cursor:pointer;    
    }
</style>

In this style example I have two parts to my style sheet, the standard style (link) and a style applied while hovering over the “button” (hover).

That is all there is to it.  Adding custom Styles to your environment can add a lot of functionality to your pages.