[Solved] How do I apply certain Telerik.css colors (like from hay.css) to parts of my project ?

[IQworks]

  Hi,
      I have a project where I am creating user controls along with certain telerik controls. I want to color these user controls with the same color schemes as any ot the telerik.css classes that I might be using. Right now I am using hay.css, and I want to color some of my user controls with the hay.css green background with the border a standard hay.css border color with a statement like this .... 

                   $(

this).find('.myClass ').css("background-color", $('.t-group'));
or, maybe I could change it here ... 
     

 

.iqTooltip
{
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
display: none;
position: absolute;
background-color: #ff9;   -- HERE
border: solid 1px #333;   -- HERE
z-index: 999;
}

      Would like to do this so that if I change to another Telerik.css file, my user control will take on that color scheme ?
      I looked around on the forum and saw mostly that people wanted to change telerik.css to their own color schemes, so, I guess my question is the opposite and I could not found anything in the help ?

thanks for your time.
     

[Alex Gyoshev]

Hi IQworks,

The easiest way to do it is to use the same class names as defined in the skin, like we do in the online demos (e.g. the TreeView / Drag&Drop example - you can see that the two drop-areas on the right are exactly t-groups and are changed along with the theme). If you want to go with the JavaScript, you should do the following:

var sourceElement = $('.t-group');
var targetElement = $(this).find('.myClass');
// list of CSS properties that will be copied
$.each(['background-color',
     'background-image',
     'background-repeat',
     'color',
     'background-position'],
     function() {
         targetElement.css(this, sourceElement.css(this));
     });

Regards,
Alex Gyoshev
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.

[IQworks]

Hi Alex,
  I think I see what this is trying to do, but it isnt working exactly.
  Here is my code with the addition of your suggestion. You can see that I am already going down this road, so I must not be applying your suggestion correctly ?

  $(this).append('<div class="iqTooltip">'
               + "CompanyNo :" + companyno + '<br>' + "Contact :" + contact
               + '</div>');

        $(this).find('.iqTooltip ').css("left", $(this).position().left + 20);
        $(this).find('.iqTooltip ').css("top", $(this).position().top + $(this).height());

      //** Apply Telerik CSS
        var sourceElement = $('.t-group');
        var targetElement = $(this).find('.iqTooltip ');
        // list of CSS properties that will be copied
        $.each(['background-color',
         'background-image',
         'background-repeat',
         'color',
         'background-position'],
        function() {
         targetElement.css(this, sourceElement.css(this));
       });
     //** End Apply Telerik CSS
      alert(" griddd " + $("#CompanyGrid").html());

I debbugged this line 

targetElement.css(this, sourceElement.css(this));

like this -->  alert(" te >> "+ $(targetElement).html() + " " + $(sourceElement).css(this).val());

and I got $(sourceElement).css(this.val() = undefined ?  maybe I got the debug wrong ?
and, the last debug shows the row, no t-group stuff added to the style ? 

<tr>
<td class="ihover cName iqNameTooltip">Information Quality Works

<div style="left:20px;top:45.2px;"class="iqTooltip">CompanyNo :2<br>Contact :David
</div>

</td>

<td>David</td>
<td class="qcId"><a href="mailto:[e-mail]">[e-mail]</a></td>
<td class="cId" style="display: none;">2</td>
<td class="t-last gId" style="display: none;">David</td>

thanks for your time again. 
  

[Alex Gyoshev]

Hello IQworks,

The JavaScript function is growing too much of a hack to be maintainable. Is there any reason you don't want to use our CSS classes, like in the example that I linked to? Adding multiple class names to an HTML element shouldn't be a problem.

Kind regards,
Alex Gyoshev
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.

[IQworks]

  Hi Alex,
    I understand.  Unfortunaly i could not use the ".HtmlAttributes(new { @class = "t-group" }) " from the link you sent because this div is being created dynamically, but,  from this response you sent (with your warning about loosing control - I need to keep this mind) I tried this  .......
      I added "t-group" to this dynamically created div .....   

  $(this).append('<div class="iqTooltip t-group">'
               + "CompanyNo :" + companyno + '<br>' + "Contact :" + contact
               + '</div>');

   But this time, I commented out the background-color in the inline css.... and I got the Telerik.css background-color.   

.iqTooltip
{
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
display: none;
position: absolute;
/*background-color: #ff9;* --- I needed to comment this out
border: solid 1px #333;
z-index: 999;
}

 I see that the iqTooltip background-color had specificity over the t-group property If I read the telerik documentation corrrectly ( http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/)    

 thanks for your time and advice Alex