Forum Discussion

jamjar's avatar
jamjar
Contributor
14 years ago

Setting styles to an isolated link

Hello all,

 

I have a small problem in trying to style an isolated link from the HTML that Lithium produces for one of our forums.

 

When you try and view a question that somebody has posted to a Q&A section, there is a link that says 'View Entire Topic’ in between the question box and the list of potential answer boxes.  This is not a general post, this is a post that is specifically for questions and answers.

 

The HTML it produces is:

 

<div class="lia-quilt-column-alley lia-quilt-column-alley-left">

     <div class="lia-menu-bar top-block lia-component-menu-bar">

          Tweet Question & Topic Options

     </div>

     <div class="tweet-form">

         Tweet Form

     </div>    

     <div class="lia-message-view lia-component-question">

          Question Post Contents  

          <a class="lia-link-navigation report-abuse-link">Report Inappropriate Content</a>

          <a class="lia-link-navigation add-tag-link">Add Tag...</a> 

          <a class="lia-link-navigation comment-action-link">Comments</a>

     </div>

     <a class="lia-link-navigation">View Entire Topic</a>

     <div class="lia-message-view lia-component-answer-list">

          Answer Post Contents

          <a class="lia-link-navigation report-abuse-link">Report Inappropriate Content</a>

          <a class="lia-link-navigation add-tag-link">Add Tag...</a> 

          <a class="lia-link-navigation comment-action-link">Comments</a>

     </div>

</div>

 

You could argue that I use the .lia-link-navigation on the link I want to style but this would be possible as that same class name is being shared across other elements on the page that I don't really want to be affected with the styles that I want to apply.  On top of that, it is not in a parent div or use a unique class of it's own that I could use to isolate it.

 

Any advice anyone colud offer would be great.

 

Thanks

Andrew

 

 

1 Reply

  • AdamN's avatar
    AdamN
    Khoros Oracle
    14 years ago

    Hmmm... that's not ideal, is it?

     

    Perhaps you could do something like:

    .lia-component-question+.lia-link-navigation { ... }

     

    You may want to precede that with some additional parent elements to avoid any conflicts.