[Solved] link colors

[Anjali]

hi,

I have a panel bar. I am displaying some items undernaetah each panel. The items are URL's to another page. The links are coming in blue color, it is very hard to see that color against the background. i am trying to change that blue color to white, but could not find where this blue color is coded. I have Site.css and telerik.blac.min.css. The blue color that i am seeing is #1D60FF.

I their any way, I can change this blue color to white.

Below is my code

<%= Html.Telerik().PanelBar()
        .Name("PanelBar")
        .HtmlAttributes(new { style = "width: 300px;" })
        .BindTo(Model, mappings =>
        {
            mappings.For<tblSection>(binding => binding
                    .ItemDataBound((item, tblSection) =>
                    {
                        item.Text = tblSection.Section;
                    })
                    .Children(tblSection => tblSection.tblSectionLinks));
            mappings.For<tblSectionLink>(binding => binding
                    .ItemDataBound((item, tblSectionLink) =>
                    {
                        item.Text = tblSectionLink.Title;

                        item.Url = tblSectionLink.Link;
                    }));
        })
%>

and telerik.black.min.css code is below

.t-widget{border-color:#080808;background-color:#4f4f4f;}.t-header,.t-grid-header{border-color:#080808;background:#050505 url('Forest/sprite.png') repeat-x 0 -368px;}.t-panelbar .t-state-hover{background-image:none;}.t-icon{background-image:url('Forest/sprite.png');}.t-editor .t-tool-icon{background-image:url('Black/editor.png');}.t-expand{background-position:0 -160px;}.t-collapse{background-position:0 -176px;}.t-rtl .t-expand{background-position:-64px -160px;}.t-plus,.t-plus-disabled{background-position:0 -256px;}.t-minus,.t-minus-disabled{background-position:-16px -256px;}.t-rtl .t-plus,.t-rtl .t-plus-disabled{background-position:0 -272px;}.t-rtl .t-minus,.t-rtl .t-minus-disabled{background-position:-16px -272px;}.t-arrow-up{background-position:-16px -160px;}.t-arrow-down{background-position:-16px -176px;}.t-state-disabled .t-arrow-up{background-position:-32px -160px;}.t-state-disabled .t-arrow-down{background-position:-32px -176px;}.t-state-hover .t-arrow-up{background-position:-48px -160px;}.t-state-hover .t-arrow-down{background-position:-48px -176px;}.t-numerictextbox .t-arrow-up{background-position:-32px -162px;}.t-numerictextbox .t-arrow-down{background-position:-32px -178px;}.t-arrow-up-small{background-position:0 -304px;}.t-arrow-down-small{background-position:-16px -304px;}.t-arrow-first{background-position:0 -192px;}.t-arrow-prev{background-position:-16px -192px;}.t-arrow-next{background-position:-32px -192px;}.t-arrow-last{background-position:-48px -192px;}.t-state-disabled .t-arrow-first{background-position:0 -208px;}.t-state-disabled .t-arrow-prev{background-position:-16px -208px;}.t-state-disabled .t-arrow-next{background-position:-32px -208px;}.t-state-disabled .t-arrow-last{background-position:-48px -208px;}.t-state-hover .t-arrow-first{background-position:0 -224px;}.t-state-hover .t-arrow-prev{background-position:-16px -224px;}.t-state-hover .t-arrow-next{background-position:-32px -224px;}.t-state-hover .t-arrow-last{background-position:-48px -224px;}.t-filter{background-position:0 -240px;}.t-clear-filter{background-position:-16px -240px;}.t-refresh{background-position:-32px -240px;}.t-icon-calendar{background-position:-48px -240px;}.t-icon-clock{background-position:-64px -336px;}.t-edit{background-position:0 -336px;}.t-delete{background-position:-16px -336px;}.t-insert,.t-update{background-position:-32px -336px;}.t-cancel{background-position:-48px -336px;}.t-group-delete{background-position:0 -288px;}.t-maximize{background-position:-16px -288px;}.t-restore{background-position:-32px -288px;}.t-close{background-position:-64px -288px;}.t-insert-top{background-position:0 -320px;}.t-insert-middle{background-position:-16px -320px;}.t-insert-bottom{background-position:-32px -320px;}.t-add{background-position:-48px -320px;}.t-denied{background-position:-64px -320px;}.t-loading,.t-widget .t-loading{background:transparent url('Black/loading.gif') no-repeat 0 0;}.t-widget,.t-link,.t-popup{color:#fff;}.t-other-month .t-link{color:#6f6f6f;}.t-group,.t-content,.t-editable-area{border-color:#080808;background-color:#4f4f4f;}.t-colorpicker .t-arrow-down{border-color:#080808;}.t-separator{border-color:#323232;background-color:#080808;}.t-alt{background-color:#494949;}.t-state-default{border-color:#080808;}.t-active-filter{background-color:#363636;}.t-state-hover{background-color:#2C2C2C;border-color:#080808;}.t-state-hover,.t-state-hover .t-link{color:#9eda29;}.t-state-active{background-color:#4f4f4f;border-color:#080808;}.t-state-selected{background:#1c1c1c;border-color:#000;}.t-state-error{border-style:ridge;border-color:#f00;background-color:#ffc0cb;}.t-button{background:#e8e8e8 url('Black/sprite.png') repeat-x 0 -96px;color:#fff;}.t-button-hover{background-position:0 -128px;color:#9eda29;}.t-state-disabled,.t-state-disabled .t-link{color:#787878;}.t-toolbar,.t-grouping-header,.t-widget .t-pager-wrapper,.t-grid-footer,.t-widget .t-status{border-color:#080808;background-color:#2C2C2C;}.t-tabstrip li.t-state-active{border-bottom-color:#4f4f4f;}.t-grid td{border-color:#454545;border-right:1px solid #454545;}.t-grouping-row td{background:#4f4f4f url('Black/sprite.png') repeat-x 0 -48px;}.t-footer-template td{background-color:#2e2e2e;border-color:#080808 #2e2e2e;}.t-footer-template-wrap,.t-footer-template-wrap table{background-color:#2e2e2e;border-color:#080808;}.t-grouping-header .t-group-indicator{color:#333;border-color:#666;}.t-grouping-dropclue{background:url('Black/sprite.png') no-repeat -48px -288px;}.t-grouping-row .t-group-cell,.t-grouping-row p{background:#4f4f4f;}.t-drag-clue{color:#fff;}.t-treeview .t-drop-clue{background-image:url('Black/sprite.png');background-position:0 -358px;}.t-panelbar .t-link,.t-panelbar .t-group,.t-panelbar .t-content{border-color:#000;}.t-filter-options,.t-menu .t-group{-moz-box-shadow:2px 2px 2px #333;-webkit-box-shadow:2px 2px 2px #333;box-shadow:2px 2px 2px #333;}.t-calendar th{background-color:#383838;border-color:#202020;}.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('Black/treeview-nodes.png');}.t-rtl .t-treeview-lines .t-top,.t-rtl .t-treeview-lines .t-mid,.t-rtl .t-treeview-lines .t-bot{background-image:url('Black/treeview-nodes-rtl.png');}.t-treeview-lines .t-item{background-image:url('Black/treeview-line.png');}.t-treeview-lines .t-last{background-image:none;}.t-window{-moz-box-shadow:0 0 5px 2px #222;-webkit-box-shadow:0 0 5px 2px #222;box-shadow:0 0 5px 2px #222;}.t-editor-button .t-state-hover{border-color:#565656 #111 #111 #565656;background-color:#232323;}.t-editor-button .t-state-active{border-color:#030303 #1f1f1f #1f1f1f #030303;background-color:#050505;}

Thanks in advance.

[Dimo]

Hi Nitu,

There is no such color as #1D60FF in the Telerik styles, it comes from Site.css - the default stylesheet of every MVC application.

You can either remove the above rule from Site.css or add this CSS rule to your application:

.t-panelbar  .t-link ,
.t-panelbar  .t-link:hover
{
    color: ....... ;
}

Regards,
Dimo
the Telerik team

[Anjali]

Thanks Dimo, it worked!!

Thanks agian for all your help.