HowTo: custom resizable "select" button with rounded corners and hover styles

2 posts, 0 answers
  1. Shukhrat Nekbaev
    Shukhrat Nekbaev avatar
    73 posts
    Member since:
    Oct 2010

    Posted 30 Mar 2011 Link to this post

    Hi,

    Note: it's quick and dirty :)

    I needed to customize the "Select" button's view to match UI, it should have had:
    1)only button, no 'fake' file input, no file list, nothing, only immediate 1 file upload (to set current picture)
    2)round corners
    3)different style when hovered
    4)resize to match inner text when site's language is changed

    Note: when button is hovered in browsers that support Flash/Silverlight cursor doesn't change to 'pointer' type, but does in IE 64-bit.
    I didn't investigate much, simple setting cursor: pointer !important; didn't do the trick (admins, any ideas?)

    Ok, you will need to create 3 background png images (2 for button's left part (one with active image another passive) and 1 for the right part, the round corner). Note that I use one of left background images as background for ruUploadProgress span when there is an upload happening with a file name being uploaded.

    .createContentPageAdditionalOptions .RadUpload
    {
        width:100px !important;
    }
    .RadUpload input
    {
        font-family: verdana !important;
    }
    .createContentPageAdditionalOptions .RadUpload input.ruFakeInput
    {
        display: none;
    }
    .RadUpload input.ruBrowse
    {
        background: url(/Images/btnLeftPartInactive.png) top left no-repeat !important;
        width: auto !important;
        line-height:21px;
        height:23px;
        text-align:left;
        margin:0px 3px 0px 0px !important;
        padding:0px 8px 3px 18px !important;
    .createContentPageAdditionalOptions .RadUpload .ruInputs
    {
        text-align:center;
    }
    .RadUpload input.ruBrowse,
    .createContentPageAdditionalOptions .RadUpload .ruUploadProgress,
    .createContentPageAdditionalOptions .RadUpload .ruCancel,
    .createContentPageAdditionalOptions .RadUpload .ruRemove
    {
        color:#fff !important;
    }
    .createContentPageAdditionalOptions .RadUpload .ruUploadProgress
    {
        background: url(/Images/btnLeftPartInactive.png) top left no-repeat !important;
        margin:0px 3px 0px 0px !important;
        height:23px;
        overflow:hidden;
        width:80px;
    }
    .RadUpload input.ruButtonHover
    {
        background: url(/Images/btnLeftPartActive.png) top left no-repeat !important;
        color: #d14b35 !important;
    }
    .RadUpload .ruFileWrap
    {
        width: auto !important;
        padding: 0px !important;
        background: url(/Images/btnRightPart.png) top right no-repeat !important;
    .RadUpload input.ruBrowse,
    .createContentPageAdditionalOptions .RadUpload .ruCancel,
    .createContentPageAdditionalOptions .RadUpload .ruRemove,
    .RadUpload input.ruFileInput 
    {
        cursor: pointer !important;
    }

    Note createContentPageAdditionalOptions class, I use it here cause I don't want to change the view of all asyncuploads I have, just particular one, next step, on the page where you have the control add following snippet:

    var modules = Telerik.Web.UI.RadAsyncUpload.Modules;
           if (modules && (modules.Silverlight.isAvailable() || modules.Flash.isAvailable())) {
               $(".ruFileWrap").live("mouseover mouseout", function (event) {
                   $(this).children("input[class != 'ruFakeInput']").toggleClass("ruButtonHover");
               });
           }

    This will enable native hovering to work when browser is using Flash/Silverlight object.

    Finally my control:
    <telerik:RadAsyncUpload runat="server" ID="RadAsyncUploadImageForNavNode" AllowedFileExtensions="jpg,jpeg,png,gif"
                       CssClass="divToBeCentered" MaxFileSize="5242880" MultipleFileSelection="Disabled" 
                       OnFileUploaded="RadAsyncUploadImageForNavNode_FileUploaded" EnableInlineProgress="false" Width="120px"
                       MaxFileInputsCount="1" OnClientFileUploaded="RadAsyncUploadImageForNavNode_OnClientFileUploaded"
                       Localization-Select="<%$ Resources:PGC, ProjectContentElement_UploadImage %>"
                       Localization-Cancel="<%$ Resources:PGC, General_Cancel %>"
                       Localization-Remove="<%$ Resources:PGC, General_Remove %>"
                       >
                   </telerik:RadAsyncUpload>

    and JS it calls when upload completes:

    function RadAsyncUploadImageForNavNode_OnClientFileUploaded(sender, args) {
                $("#btnRefreshUploadedImageToCurrentProjectElementStub").click();
            }

    so that postback happens immediately and picture is set.

    That's it, hopefully someone will find this usefull :)

    P.S.: attached file has 4 views: default, hovered, uploading and default again (after upload)
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 04 Apr 2011 Link to this post

    Hi Shukhrat,

    Thank you for sharing this how to with the community. It is really helpful and concise. I've updated your telerik points as a token of gratitude for the involvement.

    Best wishes,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top