Forum OpenACS Q&A: ad_context_bar and link attributes

Posted by Randy O'Meara on
I'm not any type of css wizard but I'm trying to find my way around the various css elements defined in the oacs-provided css files. In all cases I have seen, <a> tag attributes are set by a class definition, and the class is specified inside the <a> tag:

    <a href="/location/..." class="button">Link Text</a>

Some of the attributes: font size, font family, and others can be controlled from the enclosing block:

    <div class="enclosing">
      <a href...>...

Some attributes cannot be set from the outer block: text decoration, visited and hover attributes. Given that a "class" is included in the link definition, they can be set as follows:

    a.button:link{link settings}
    a.button:visited{visited settings}
    a.button:hover{hiver settings}

Procedure ad_context_bar does not allow you to specify any css settings to include when generating the context_bar, so a "class" cannot be contained in the links that are generated. The context_bar's appearance does not match (or even blend with) the look and feel of the rest of the page.

Is there a way to control the link, visited, and hover attributes if no "class" is contained in the link definition?

If not, has anyone modified ad_context_bar to accept css that is then included in the string that it returns?

Is it worthwhile to get this into the toolkit?


Posted by Tom Ayles on

You can specify the link, hover and visited pseudo-class attributes as follows:

a:hover { ... }
a:link { ... }
a:visited { ... }

That would set the default behaviour for links with no class. However, what might be more useful is to limit the rules to links within a certain div. So the stylesheet would be like:

div.subsite-context-bar a:hover { ... }
div.subsite-context-bar a:link { ... }
div.subsite-context-bar a:visited { ... }

Then, in the master template, the context bar HTML is already wrapped in a div with class subsite-context-bar (NB: I heard somewhere that some browsers don't like - and _ in class names, though I've never had any trouble myself). This way you can control the styling of only the links in the context bar. This approach might not be rendered properly on older browsers though. To catch these cases then you probably would need somehow to pass a class name into ad_context_bar.

Posted by Raad Al-Rawi on

I'm not quite sure what you're aiming for, but if the context bar is enclosed within, say, a DIV that is styled with a class - e.g.

    <div class="subsite-context-bar">

then you could define/control the styling for the links within the context bar by doing something like this:

    font-size: 90%;
    font-weight: bold;

    .subsite-context-bar a
    border-bottom: 1px dotted #000000;

    .subsite-context-bar a:visited

    .subsite-context-bar a:hover
    border-bottom: 1px solid #BB0000;
    text-decoration: none;

That way, I don't think a change to ad_context_bar is necessary (unless I'm very much mistaken!)