Is there a way to make a skin look like this?

6 posts, 0 answers
  1. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 12 Nov 2007 Link to this post

    I'm just wondering if there is something to give the textbox a 3D type look.  Here is a link to a picture of what I would like my input boxes to look like.  Are there any existing skins or settings that can do this?

    http://www.crossroadshospice.com/files/notify_us_skin_sample.jpg


    Thanks.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Nov 2007 Link to this post

    Hello Dean,

    Achieving a 3D look of textboxes is easy if you set them a background image and zero borders. You can take a look at RadInput's skinning example to see what I mean:

    http://www.telerik.com/demos/aspnet/Input/Examples/Appearance/Skins/DefaultCS.aspx

    (Macromedia skin)

    However, this technique has two limitations:

    1) The background image and the textbox should have the same size.

    2) Due to IE7 browser issue, the background image shifts when the text is longer than the textbox size. Thus, using such background images is not recommended when the text typed in the textbox could become longer than the textbox itself.


    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 13 Nov 2007 Link to this post

    How do I set them to a background image?  I didn't see that in the property page.  Is it a change I need to make to the .css file?  If so, what section(s) does it go in and what is the syntax?

    If I have to modify a .css file I thought I'd just copy something like the default skin dir, rename it and then modify that version.
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Nov 2007 Link to this post

    Hello Dean,

    Speaking of RadInput, yes, you need to set the background image in the corresponding skin. For example:

    .radHoverCss_SkinName,
    .radEnabledCss_SkinName,
    .radDisabledCss_SkinName,
    .radEmptyMessageCss_SkinName,
    .radFocusedCss_SkinName,
    .radNegativeCss_SkinName,
    .radInvalidCss_SkinName
    {
        background:url(__image_url_here__) 0 0 no-repeat;
        _background-attachment: fixed; /* IE6 hack */
        height: ....... ;
        width: ...... ;
        border: 0;
        margin:0;
        padding:0;
    }

    All the CSS classes correspond to the different states of the RadInput control. You can set different background images for the different states, if you like.

    Kind regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 13 Nov 2007 Link to this post

    So can I just paste your code into a copy of an existing skin (if I change the "SkinName" to the correct skin (maybe Gold2?)?  If so, where? 

    Currently I have the 'gold' skin selected for this RadInput control as it's the closest to my graphics.  Here is the source for the style.css file of that skin.  This is just the Input Style Settings, not the wrapper section:


    1/* INPUT STYLES SETTINGS */ 
    2.radEnabledCss_Gold  
    3
    4    width: 179px; 
    5    color: #666; 
    6    border-bottom: solid 1px #cec494; 
    7    border-right: solid 1px #cec494; 
    8    border-top: solid 1px #ebe8d3; 
    9    border-left: solid 1px #ebe8d3; 
    10    background-color: #f4f3e7; 
    11
    12 
    13.radHoverCss_Gold  
    14
    15    width: 179px; 
    16    color: #242424; 
    17    border-bottom: solid 1px #948957; 
    18    border-right: solid 1px #948957; 
    19    border-top: solid 1px #d9d6c1; 
    20    border-left: solid 1px #d9d6c1; 
    21    background-color: #f4f3e7; 
    22
    23 
    24.radDisabledCss_Gold 
    25
    26    width: 179px; 
    27    color: #ccc; 
    28    border: solid 1px #ccc;  
    29    background-color: #e3e3e3;   
    30
    31 
    32.radDisabledCss_Gold a.gobutton, 
    33.radDisabledCss_Gold a.spinbutton 
    34
    35    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
    36    opacity: .3;  
    37    -moz-opacity: .3; 
    38    cursor: no-drop; 
    39
    40 
    41.radEmptyMessageCss_Gold 
    42
    43    width: 179px; 
    44    color: #000000; 
    45    border: solid 1px #c4dbf9;  
    46    background-color: #e0eeff; 
    47
    48 
    49 
    50.radFocusedCss_Gold 
    51
    52    width: 179px; 
    53    color: #000000; 
    54    background-color: #fff !important; 
    55    border-bottom: solid 1px #cec494; 
    56    border-right: solid 1px #cec494; 
    57    border-top: solid 1px #ebe8d3; 
    58    border-left: solid 1px #ebe8d3; 
    59    background-color: #f4f3e7; 
    60
    61 
    62.radNegativeCss_Gold 
    63
    64    width: 179px; 
    65    color:  #ff9900; 
    66    border: solid 1px #ff9900;  
    67    background-color: #f4f3e7; 
    68
    69 
    70.radInvalidCss_Gold 
    71
    72    width: 179px; 
    73    color: #FF9900; 
    74    border-bottom: solid 1px #cec494; 
    75    border-right: solid 1px #cec494; 
    76    border-top: solid 1px #ebe8d3; 
    77    border-left: solid 1px #ebe8d3; 
    78    background: #f4f3e7 url('Img/error-sign.gif') no-repeat center right; 
    79
    80 
    81.radLabelCss_Gold 
    82
    83    color: #FF9900;  
    84    padding-right: 5px;  
    85    white-space:nowrap; 
    86
    87 
    88.radHint_Gold  
    89
    90    background: infobackground; 
    91    margin-top: 5px; 
    92    border: solid 1px black; 
    93    text-align: left; 
    94    overflow: auto;  
    95
    96 
    97.radHint_Gold a, 
    98.radHint_Gold a:visited, 
    99.radHint_Gold a:hover 
    100
    101    margin: 2px; 
    102    color: black; 
    103    text-decoration: none; 
    104    font-size: small; 
    105
    106 



  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Nov 2007 Link to this post

    Hi Dean,

    Yes, one option is to directly paste the previously provided CSS code in the skin's CSS file. Well, you can remove unnecessary style declarations and leave just the two background-image-related ones, for example:

    .radHoverCss_SkinName,
    .radEnabledCss_SkinName,
    .radDisabledCss_SkinName,
    .radEmptyMessageCss_SkinName,
    .radFocusedCss_SkinName,
    .radNegativeCss_SkinName,
    .radInvalidCss_SkinName
    {
        background:url(__image_url_here__) 0 0 no-repeat;
        _background-attachment: fixed; /* IE6 hack */
    }


    As you said, you also have to change "SkinName" to whatever skin you are using. In this case you will have the same background image for all RadInput states (enabled, disabled, hovered, and so on).

    If you want to have different background images for the different states, you need to add the following code:

    .radEnabledCss_SkinName,
    .radHoverCss_SkinName,
    .radDisabledCss_SkinName,
    .radEmptyMessageCss_SkinName,
    .radFocusedCss_SkinName,
    .radNegativeCss_SkinName,
    .radInvalidCss_SkinName
    {
        _background-attachment: fixed; /* IE6 hack */
    }


    .radEnabledCss_SkinName
    {
       background:url(__enabled_image_url_here__) 0 0 no-repeat;
    }

    .radHoverCss_SkinName
    {
       background:url(__hover_state_image_url_here__) 0 0 no-repeat;
    }

    .radDisabledCss_SkinName
    {
       background:url(__disabled_image_url_here__) 0 0 no-repeat;
    }

    .radEmptyMessageCss_SkinName
    {
       background:url(__image_url_here__) 0 0 no-repeat;
    }

    .radFocusedCss_SkinName
    {
       background:url(__focused_image_url_here__) 0 0 no-repeat;
    }

    .radNegativeCss_SkinName
    {
       background:url(__negative_image_url_here__) 0 0 no-repeat;
    }

    .radInvalidCss_SkinName
    {
       background:url(__invalid_image_url_here__) 0 0 no-repeat;
    }


    All the best,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top