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

Change background of item

3 Answers 32 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Natan
Top achievements
Rank 1
Natan asked on 10 Nov 2013, 11:51 AM
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

3 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 11 Nov 2013, 02:37 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Natan
Top achievements
Rank 1
answered on 11 Nov 2013, 05:37 PM
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;
}

0
Magdalena
Telerik team
answered on 12 Nov 2013, 10:07 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Menu
Asked by
Natan
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Natan
Top achievements
Rank 1
Share this question
or