Change background of item

4 posts, 0 answers
  1. Natan
    Natan avatar
    6 posts
    Member since:
    Sep 2013

    Posted 10 Nov 2013 Link to this post

    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
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 11 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Natan
    Natan avatar
    6 posts
    Member since:
    Sep 2013

    Posted 11 Nov 2013 Link to this post

    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;
    }

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 12 Nov 2013 Link to this post

    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.
Back to Top