Change background of item

[Natan]

Hi,

I am trying to set the background for our main items in the bar.
Attached please find the current look , and what I want it to look like.

Main requirements are:
1. Rounded edges
2. Gradient color
3. Text on top of the image, and not as a part of it.

I don't mind setting the bg color directly, or setting bg image,
but I'm not sure how to do this.

Could you please advise?

Thanks,
Omer

[Magdalena]

Hi Omer,

1. Rounded edges
   The easiest way is apply the border-radius property to the .rmItem elements. If you would like to support the project also in IE8 and older versions it is necessary to use background images.
2. Gradient color
   To achieve the gradient as in the image you provided, you can apply the box-shadow property to the .rmItem as well. For example
   

   .rmItem {
       box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8) inset,
           -2px -2px 4px rgba(0, 0, 0, 0.5) inset;
   }

   
   
   
3. Text on top of the image, and not as a part of it.
   The text could be specified by the Text property of the Tab. The text will appear automatically.

Regards,
Magdalena
Telerik

[Natan]

Hi,

I've written a gradient in my css:
For some reason it effects the top items,
and the second and third sub items only, please see the attached image.

I would like to change the appereance of top items and sub items
independant from each other.

Another issue I have is how to set text color and font?
I tried setting it in .rmitem but it had no effect.

Attached below is my css.
Thanks,
Omer


.rmItem {
  background: rgb(184,225,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(184,225,252,1) 0%, rgba(169,210,243,1) 10%, rgba(144,186,228,1) 25%, rgba(144,188,234,1) 37%, rgba(144,191,240,1) 50%, rgba(107,168,229,1) 51%, rgba(162,218,245,1) 83%, rgba(189,243,253,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(184,225,252,1)), color-stop(10%,rgba(169,210,243,1)), color-stop(25%,rgba(144,186,228,1)), color-stop(37%,rgba(144,188,234,1)), color-stop(50%,rgba(144,191,240,1)), color-stop(51%,rgba(107,168,229,1)), color-stop(83%,rgba(162,218,245,1)), color-stop(100%,rgba(189,243,253,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
font-weight:bold;
color: green;
}

[Magdalena]

Hi Omer,

Thank you for getting back to us.

If you are using our embedded skins, you must use a stronger selector to overwrite the inbuilt CSS styles. This is the reason why the text color property does not apply to your project. The stronger selector in your case could be for example html .RadMenu a.rmLink. You can also stop using of embedded skins by setting the property EnableEmbeddedSkins to false.

To change the background of the root items you can apply a gradient to the .rmRootGroupto. And again - if you are using embedded skins, please use a stronger selector (for example html .RadMenu .rmRootGroup) or set the property EnableEmbeddedSkins to false. To apply styles only to the sub-items, please use the .rmGroup in your selectors.

Regards,
Magdalena
Telerik