[RESOLVED] Change color of selected hyperlink in a masterpage

I have used the accordion menu in a masterpage.
The top level is something like this:

HTML Code:

---

                <Header>
                    <a href="default.aspx" onclick="return false;" class="Link" >HOME </a> 
                </Header>

---

Is there a way to change the color of the text if the selected menu item is active?

HTML Code:

---

.HEADER
A:Active{color:red;}
{
}

---

in the style sheet doesn't seem to do anything.

Hey,

You should definitely be able to do this, but it may be a combination of things that is making it not work. The first thing you need to rule out is that there aren't any other styles overriding what it is you think you are doing.

The easiest way that I have found to do this is to use the FireBug Addin for firefox. If you haven't used this before, I would thoroughly recommend it. It allows you to inspect any html element, and looks at all the styles that are being applied to it, see the screen shot here:

Attachment 72256

Hopefully you can see that I have selected the element which contains your name, and on the right hand side you can see all the CSS being applied.

Have a look here for an introduction to using FireBug:

http://www.evotech.net/blog/2007/06/...on-to-firebug/

One more thing that may help you is this:

http://www.w3schools.com/css/

Hopefully armed with these tools you will be able to figure out what you want to do. I am hesitant to jump in with a solution at this point because I have found that CSS is something best learnt by doing. If you are struggling though, post back.

Gary

I think you might be misunderstanding the :active pseudo class for the menu item's active item - it's probably just semantics.

In CSS, :active specifies the style for the hyperlink when you are clicking it. In your context, you want to change the style of the currently selected menu item - the CSS has no way of knowing what an accordion control is or what the concept of 'active' means here.

If you're using the Accordion AJAX control, then it has certain properties you can use (example)

Code:

---

HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected"

---

All you need to do then is set those properties to your css class names.

I'm still battling with this. At one point I had something working..Where it was fixing the selected item as bold until something else was selected. I have stripped it back to a starting point. Hoping that someone can show me what the problem is. I would have thought that defining the HeaderCssClass, HeaderSelectedCssClass & ContentCssClass with the Accordion would cascade the style. It doesn't seem to do anything.


In the form I have this:

Code:

---

      <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <asp:UpdatePanel ID ="UpdatePanel1" runat="server">
            <ContentTemplate>
            <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" FadeTransitions="true"
            FramesPerSecond="40" TransitionDuration="250" RequireOpenedPane="false"
            AutoSize="None"  HeaderCssClass="menuHeader" HeaderSelectedCssClass="menuHeaderSelected"
            ContentCssClass="menuContent" >
            <Panes>
                <cc1:AccordionPane ID="AccordionPane1" runat="server">
                <Header>
                    <a href="" onclick="return false" >PROFILE</a> 
                </Header>
                <Content>
                    <div>
                    <a href=""  >ABOUT US</a>
                    </div>
                    <div>
                    <a href=""  >SERVICES</a> 
                    </div> 
                </Content>
                </cc1:AccordionPane>
            </Panes>
            </cc1:Accordion>
            </ContentTemplate>
            </asp:UpdatePanel>

---

In the Stylesheet I have this

Code:

---

.menuHeader
        a:hover {color:Blue}
        {
    }
.menuHeaderSelected
        a:hover {color:Blue}
    {
    }

.menuContent
  a:hover{color:Blue}
    {
    }

---

Remove the a:hover. Also, why are there empty braces after the CSS class definitions?

Hey,

You might find this helpful:

http://www.asp.net/learn/ajax-videos/video-87.aspx

Gary

I blanked it out so that someone could play with it. I guess that confuses things.
But even if I have

Code:

---

.menuHeader
        {
        color: white;
    }
.menuHeaderSelected
    {
    color: white;
    }

.menuContent
{
        color: white;
}

---

They are not white so I don't understand what

Code:

---

HeaderCssClass="menuHeader" HeaderSelectedCssClass="menuHeaderSelected"
            ContentCssClass="menuContent"

---

does.

Hey,

If you watch the video that I linked to, I think everything should become clear.

Gary

Yea..I've been trying to use that tutorial to understand it but it's not much help.


He defines the HeaderCssClass class but then overrides it with a .accordionlink class. The ContentCssClass is also overridden.

So the HeaderCssClass and ContentCssClass never actually get used.

I need to use them and want to differentiate between HeaderCssClass & HeaderSelectedCssClass. My next problem is that there is no ContentSelectedCssClass property in the accordion control.

Hey,

I am not sure I understand what your problem is, the HeaderCssClass and the ContentCssClass are used?!?! Have you downloaded the sample code and had a look?

The example clearly shows how you can use the HeaderCssClass and ContentCssClass. In addition, the author of the sample has then used additional CSS Classes to separately define the anchor tags. This is probably due to the fact that the same style is applied to other anchor tags, not solely to anchor tags that exist within the Header of the Accordion.

How you structure your CSS is up to you, it is personal preference.

You are correct when you say that there isn't a ContentSelectedCssClass, but I am unclear why you need this? The purpose of the Accordion is that only one pane is visible at a time, as a result, you don't need a separate CSS Class for the content, you only need one.

Gary

Gary,

I think I've worked it out. Your right, I don't need a CSSclass for content.

I didn't know how to correctly apply the hover or active conditions to the CSSClass.
Needs to be done this way it seems, not as in my earlier post.

Code:

---

.HEADER a:hover{color:red}
.HEADER a:active{color:Blue}
.CONTENT a:hover{color:Red}
.CONTENT a:active{color:Blue}
.Link{color:Black;}

---

It also seems like you need a general CSSClass (.Link) specifically applied to each hyperlink.

Code:

---

<a href="" onclick="return false;" class="Link" >HEADER</a>

---

Then the HEADER and CONTENT classes override this .Link Class.

Strangely you can't apply the one class making the ContentCssClass & HeaderCssClass unnecessary.

Code:

---

.Link{color:Black;}
.Link a:hover{color:Red;}
.Link a:active{color:Blue;}

---

I still haven't worked out if the "active" part of it works but I hope so.

A hyperlink is considered to be an active hyperlink from the time a user presses and releases the mouse button when clicking on the hyperlink. When designing a Web page, you can choose a font color to represent active hyperlinks.

I can't see the point to this as the the time between a person pressing and releasing on a hyperlink should be only a fraction of a second. So I still have the problem of setting a style to a selected hyperlink in the masterpage after the child page has loaded.

Can anyone help?

Hey,

Have you considered using the visited style:

http://www.w3schools.com/CSS/css_pseudo_classes.asp

I am still trying to understand why you need to do this though?!?!?

Gary

Hej,
Thanks for your help here.

I have a list of hyperlinks in the left hand table menu of a masterpage that to link to different pages.
If I click on each link then I want it to remain highlighted somehow that I am currently at that page.

I only want the active hyperlink to have a new style. Not all the Menu items I have visited.

Hey,

Are we still talking about the link within the header of the Accordion Control? If we are, then surely the fact that the content for that pane of the accordion control being visible should be enough of an indication. No?

If not, then how about making the following change to the sample that you downloaded from the video I linked to earlier.

Edit the StyleSheet.css to the following (notice the parts in bold that have changed):

Code:

---

.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
        font-family: Arial, Sans-Serif;
        font-size: 12px;
        font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionHeader a
{
        color: Green;
}

.accordionSelectedHeader a
{
        color: Aqua;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

.accordionLink
{
 background-color: #D3DEEF;
    color: white:
}

.watermark {
        background: #FFAAFF;
}

.popupControl {
        background-color:#AAD4FF;
        position:absolute;
        visibility:hidden;
        border-style:solid;
        border-color: Black;
        border-width: 2px;
}

.modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
}

.modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
}

.sampleStyleA {
        background-color:#FFF;
}

.sampleStyleB {
        background-color:#FFF;
        font-family:monospace;
        font-size:10pt;
        font-weight:bold;
}

.sampleStyleC {
        background-color:#ddffdd;
        font-family:sans-serif;
        font-size:10pt;
        font-style:italic;
}

.sampleStyleD {
        background-color:Blue;
        color:White;
        font-family:Arial;
        font-size:10pt;
}

---

And then modify the aspx page as follows:

Code:

---

<&#37;@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />   
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
    <ajaxToolkit:Accordion ID="MyAccordion" runat="server"
                          SelectedIndex="0"
                          HeaderCssClass="accordionHeader"
                          HeaderSelectedCssClass="accordionSelectedHeader"
                          ContentCssClass="accordionContent"
                          FadeTransitions="true"
                          FramesPerSecond="40"
                          TransitionDuration="250"
                          AutoSize="None">
    <Panes>
          <ajaxToolkit:AccordionPane ID = "AccordionPane1" runat = "server">
          <Header>
            <a href = "" onclick = "return false;"> Section 1</a>
          </Header>
          <Content>
           
...

---

Notice I have removed the class from the anchor tag. Instead, the style for the a in the CSS file is used. If you use the above, then you should see that the link is Aqua when selected, and Green when not. Also, I have added the HeaderSelectedCssClass to the definition of the Accordion control.

It isn't particularly nice to look at, but it is just to emphasize the point.

Hope that helps!!

Gary

Thanks gep13,

I still have a problem with hyperlink items being selected in the Content.
I found the attached example that solves the problem but it is written in C#. Can anyone convert it to VB for me?


http://www.codeproject.com/KB/aspnet...inkscolor.aspx

I've finally worked it out.

In each page linked from the accordion menu needs to have this page load event:

Code:

---

Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim hl As HyperLink = Master.FindControl("HyperlinkID")
        hl.CssClass = "MenuSelected"
    End Sub
End Class

---

Maybe I haven't..I would have thought that this was simple but I have scoured the net.

Does anyone know how to change the style of an ?attribute? <a> based on its ID in a masterpage from a subpage?

It's possible to change it if the tag has runat="server" and an ID.

Did setting the CssClass not work? In addition to the CssClass property, you have access to the .Styles collection as well as the .Attributes collection.

It works ok for hover. HeaderSelectedCCS doesn't work so well but I need links in the content to change style anyway.

I don't know what you mean by the .Styles and .Attributes collection.

This

Code:

---

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim hl As HyperLink = Master.FindControl("lnk1")
        hl.CssClass = "Selected"
    End Sub

---

works ok if the hyperlink is embeded in the form but not if the hyperlink is in the accordion. Can anyone suggest how to modify the code above to find the hyperlink control in the accordion control?

Hey,

Simply doing a FindControl on the Master will not find the controls that exist within the Accordion. This is being the Accordion Control in a control container, and as such, you will need to recurse into the Accordion to find the controls within in.

You can do this by doing something like the following:

Code:

---

Master.MyAccordion.Panes[0].FindControl

---

Where this is finding the controls in the first Pane of the Accordion. Whenever you are using the FindControl method, you should always first check to see whether the method has returned null (i.e. is hasn't found the control) before accessing properties or methods of that control.

Gary