This is a migrated thread and some comments may be shown as answers.

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

5 Answers 168 Views
Designs, skins, themes
This is a migrated thread and some comments may be shown as answers.
dean.carrefour
Top achievements
Rank 1
dean.carrefour asked on 12 Nov 2007, 07:08 PM
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.

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Nov 2007, 12:41 PM
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
0
dean.carrefour
Top achievements
Rank 1
answered on 13 Nov 2007, 03:06 PM
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.
0
Dimo
Telerik team
answered on 13 Nov 2007, 03:46 PM
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
0
dean.carrefour
Top achievements
Rank 1
answered on 13 Nov 2007, 07:28 PM
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:


/* INPUT STYLES SETTINGS */ 
.radEnabledCss_Gold  
    width: 179px; 
    color: #666; 
    border-bottom: solid 1px #cec494; 
    border-right: solid 1px #cec494; 
    border-top: solid 1px #ebe8d3; 
    border-left: solid 1px #ebe8d3; 
    background-color: #f4f3e7; 
 
.radHoverCss_Gold  
    width: 179px; 
    color: #242424; 
    border-bottom: solid 1px #948957; 
    border-right: solid 1px #948957; 
    border-top: solid 1px #d9d6c1; 
    border-left: solid 1px #d9d6c1; 
    background-color: #f4f3e7; 
 
.radDisabledCss_Gold 
    width: 179px; 
    color: #ccc; 
    border: solid 1px #ccc;  
    background-color: #e3e3e3;   
 
.radDisabledCss_Gold a.gobutton, 
.radDisabledCss_Gold a.spinbutton 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
    opacity: .3;  
    -moz-opacity: .3; 
    cursor: no-drop; 
 
.radEmptyMessageCss_Gold 
    width: 179px; 
    color: #000000; 
    border: solid 1px #c4dbf9;  
    background-color: #e0eeff; 
 
 
.radFocusedCss_Gold 
    width: 179px; 
    color: #000000; 
    background-color: #fff !important; 
    border-bottom: solid 1px #cec494; 
    border-right: solid 1px #cec494; 
    border-top: solid 1px #ebe8d3; 
    border-left: solid 1px #ebe8d3; 
    background-color: #f4f3e7; 
 
.radNegativeCss_Gold 
    width: 179px; 
    color:  #ff9900; 
    border: solid 1px #ff9900;  
    background-color: #f4f3e7; 
 
.radInvalidCss_Gold 
    width: 179px; 
    color: #FF9900; 
    border-bottom: solid 1px #cec494; 
    border-right: solid 1px #cec494; 
    border-top: solid 1px #ebe8d3; 
    border-left: solid 1px #ebe8d3; 
    background: #f4f3e7 url('Img/error-sign.gif') no-repeat center right; 
 
.radLabelCss_Gold 
    color: #FF9900;  
    padding-right: 5px;  
    white-space:nowrap; 
 
.radHint_Gold  
    background: infobackground; 
    margin-top: 5px; 
    border: solid 1px black; 
    text-align: left; 
    overflow: auto;  
 
.radHint_Gold a, 
.radHint_Gold a:visited, 
.radHint_Gold a:hover 
    margin: 2px; 
    color: black; 
    text-decoration: none; 
    font-size: small; 
 



0
Dimo
Telerik team
answered on 15 Nov 2007, 04:37 PM
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
Tags
Designs, skins, themes
Asked by
dean.carrefour
Top achievements
Rank 1
Answers by
Dimo
Telerik team
dean.carrefour
Top achievements
Rank 1
Share this question
or