12 Replies Latest reply on Apr 17, 2013 6:38 AM by OptumMac

    Visited Links - Override all link colors

    SueKL Level 1

      Hi,

      I'm using RH8 in WebHelp and IE.  I read all the former postings regarding people having the same problem and some mentioned a fix in a .css but the .css wasn't available with the posting of March 25, 2008.

       

      My visited link color seems to override all other link colors.  Originally I had the link colors in a style sheet and changed the colors in the .css.  That didn't work and all colors still were the visited link color.  I deleted the link colors from this .css and added the link colors via the RoboHelp Edit Styles.  Either way doesn't seem to work and all link colors are my visited color.  I've tried clearing my cache several times and this doesn't work, neither does deleting the history.

       

      Can anyone shed some light on this?  Thanks very much for any help you can provide.

        • 1. Re: Visited Links - Override all link colors
          MergeThis Level 4

          The .css file is your style sheet.

           

          You need to place the a: styles in specific order (think the mnemonic LoVeHAte) inside the .css file:

           

          LinkVisitedHoverActive

           

          That is:

           

          a:link {

               styles }

          a:visited {

               styles }

          a:hover {

               styles }

          a:active {

               styles }

           

          Although you can combine any of these, such as a:link,visited { style }, you're probably better off keeping them separate (easier to maintain later).

           

          For more CSS help, see the W3C tutorial site.

           

           

          Good luck,

          Leon

          • 2. Re: Visited Links - Override all link colors
            Captiv8r Adobe Community Professional & MVP

            Hi there

             

            In addition to Leon's excellent advice, here is a tip for easily opening the .CSS in Windows Notepad. (Notepad is the logical choice for making these edits. RoboHelp will insist on opening its own CSS dialog.)

             

            Right-click the Project Manager and choose Explore. This will open Windows Explorer at the project location. From there, you are able to locate the CSS file and right-click to open it with Windows Notepad.

             

            Cheers... Rick

             

             

            Helpful and Handy Links

            RoboHelp Wish Form/Bug Reporting Form

            Begin learning RoboHelp HTML 7 or 8 moments from now - $24.95!

            Adobe Certified RoboHelp HTML Training

            SorcererStone Blog

            RoboHelp eBooks

            • 3. Re: Visited Links - Override all link colors
              SueKL Level 1

              Thanks very much, Leon and Rick.  I'm getting there.  I changed my .css in Dreamweaver to be in the order specified.  Now they're still purple for many of them but are blue when I hover over them.  Some other links are blue.  I should have mentioned that many of the links that are initially purple are in my mini-TOC which I put in each page (not via a Master page).  I looked in the .html code for them but couldn't see a color property.  I don't see where I can change this property.

               

              I have other things in my .css. (not links but headings, etc.) before the link properties.   Should I put the Link/Visited/Hover/Active before anything else in the style sheet?

               

              Thanks again for your responses, I appreciate your time.

              • 4. Re: Visited Links - Override all link colors
                MergeThis Level 4

                If you look into the HTML code of the output in the mini-TOC block, you'll see two style settings:

                 

                A class setting for the Show/Hide dropspot label:

                 

                ... <a class="dropspot" ...

                 

                A standard hyperlink to the RH-generated bookmarks:

                 

                ... <a href="#MiniTOCBookMark2" ...

                 

                That second one should follow whatever settings you've previously set up in your CSS file.

                 

                If you want these mini-TOC links to be different, you could set the default "a href" styles with one look, and then set up a separate class for other normal topic hyperlinks, such as "a.topic:link { styles }", "a.topic:visited { styles }", etc.

                 

                The other thing to keep in mind is this: the reason for the name Cascading Style Sheets.

                 

                The styles in the .css file

                     are overridden by the styles in the <HEAD> section of the topic page

                          which are overridden by styles added in-line (at a specific instance of formatted content).

                 

                Those last two could be affecting your results.

                 

                [Another thing: don't use the Styles window (by double clicking the .css file in Project Manager). In my projects, the "Hyperlink" styles it "previews" do not agree with my .css settings. I suggest you do all your work in the .css file with Notepad or a similar text editing tool.]

                 

                 

                Good luck,

                Leon

                • 5. Re: Visited Links - Override all link colors
                  SueKL Level 1

                  Hi Leon,

                  Thanks again.  I looked at the code in the "view source" as you suggested for the <a href="#MiniTOCBookMark2"...  I'm puzzled because there is no color definition here just:

                   

                  <div align="left" class="droptext" id="MTPOPUP31335" >
                  <ul style="text-align:left; font-family:Verdana;font-size:10pt;font-weight: normal;font-style: normal;text-decoration: underline;"  >
                    <li><a href="#MiniTOCBookMark2" style="font-family:Verdana;font-size:10pt;font-weight: normal;font-style: normal;text-decoration: underline;">Purpose</a>
                  </li>
                    <li><a href="#MiniTOCBookMark3" style="font-family:Verdana;font-size:10pt;font-weight: normal;font-style: normal;text-decoration: underline;">Screen Tour</a>

                  I looked in the mini-TOC set-up (Format Placeholder) and don't see anywhere where I can define what the color is supposed to be for visited links and don't understand how I could change this.  I even checked the "use styles from topic" box to see if that made a difference.  I'm still getting the "visited" color for my links unless I hover over, then they're blue.  I edited the .css (Dreamweaver) I inherited from another similiar project for this project and put the links in the order you suggested.  The style sheet used for this project just starts w/the BODY.

                   

                  I really appreciate your help and time responding to my questions. 

                   

                  Thanks,

                  Sue

                  • 6. Re: Visited Links - Override all link colors
                    MergeThis Level 4

                    Would you mind pasting the code, in your next posting, for every style that starts with "a", so that we can gain more insight?

                     

                     

                    Good luck,

                    Leon

                    • 7. Re: Visited Links - Override all link colors
                      SueKL Level 1

                      Hi Leon,

                      Here is all the code with "a" type styles in the .css.  Again, I also have the links also in the mini-TOC but didn't see a way via the Format Placeholder to change

                      this.  Currently, most of my links are showing up as the "visited" color -- grey.  I'm going to revisit this link issue again very soon but have to get a ton of content in now.  I really appreciate your efforts.

                       

                      Thanks,

                      Sue

                       

                       

                       

                      A.expandspot {
                      cursor: hand;
                      font-style: italic;
                      font-size: 10pt;
                      font-family: Verdana;
                      color: #800000;
                      text-decoration: none;
                      }
                      SPAN.expandtext {
                      font-style: italic;
                      font-weight: normal;
                      color: #ff0000;
                      font-family: Verdana;
                      font-size: 8pt;
                      }
                      A.dropspot {
                      cursor: hand;
                      color: #008000;
                      font-style: italic;
                      font-size: 10pt;
                      text-decoration: none;
                      }
                      A.glossterm {
                      cursor: hand;
                      font-size: 10pt;
                      font-family: Verdana;
                      font-style: italic;
                      color: #0000ff;
                      text-decoration: none;
                      }
                      SPAN.glosstext {
                      font-style: italic;
                      font-weight: normal;
                      color: #0000ff;
                      font-family: Verdana;
                      font-size: 10pt;
                      }
                      OL,
                      UL {
                      margin-top: 0px;
                      margin-bottom: 0px;
                      }
                      p.breadcrumbs {
                      font-size: 8pt;
                      x-on-hover: fontchange(bold=on);
                      x-next-class: breadcrumbs;
                      x-next-type: p;
                      }
                      A.breadcrumbs {
                      font-size: 10pt;
                      }
                      A:link {
                      font-size: 10pt;
                      font-family: Verdana;
                      color: #0000ff;
                      text-decoration: underline;
                      }
                      A:visited {
                      font-size: 10pt;
                      font-family: Verdana;
                      color: #808080;
                      text-decoration: underline;
                      }
                      A:hover {
                      font-size: 10pt;
                      font-family: Verdana;
                      color: #0000ff;
                      }
                      A:active {
                      font-size: 10pt;
                      font-family: Verdana;
                      color: #0000ff;
                      text-decoration: underline;
                      }
                      A.popupspot {
                      font-size: 10pt;
                      font-family: Verdana;
                      }

                      • 8. Re: Visited Links - Override all link colors
                        MergeThis Level 4

                        Try placing these above any other "A." classes (A.expandspot, etc.). I suspect that this placement in the file might be just as important as the LVHA hierarchical order.

                         

                        A:link {

                        font-size: 10pt;

                        font-family: Verdana;

                        color: #0000ff;

                        text-decoration: underline;

                        }

                        A:visited {

                        font-size: 10pt;

                        font-family: Verdana;

                        color: #808080;

                        text-decoration: underline;

                        }

                        A:hover {

                        font-size: 10pt;

                        font-family: Verdana;

                        color: #0000ff;

                        }

                        A:active {

                        font-size: 10pt;

                        font-family: Verdana;

                        color: #0000ff;

                        text-decoration: underline;

                        }

                         

                         

                        Good luck,

                        Leon

                        • 9. Re: Visited Links - Override all link colors
                          SueKL Level 1

                          Hi Leon,

                          I tried this and no luck.  I'm going to have to revisit next week when I'm back in.

                           

                          Thanks again for all of your help.  I really appreciate it.

                           

                          Sue

                          • 10. Re: Visited Links - Override all link colors
                            Captiv8r Adobe Community Professional & MVP

                            Hi Sue

                             

                            Another thing I don't believe I've seen mentioned is to check for an embedded style. Just look at the HTML code behind the topic. Look in the head area. If you find anything other than a linked CSS file, try deleting it and see if that fixes the issue.

                             

                            tmp1.PNG

                             

                            Best of luck to you in resolving it... Rick

                             

                            Helpful and Handy Links

                            RoboHelp Wish Form/Bug Reporting Form

                            Begin learning RoboHelp HTML 7 or 8 moments from now - $24.95!

                            Adobe Certified RoboHelp HTML Training

                            SorcererStone Blog

                            RoboHelp eBooks

                            • 11. Re: Visited Links - Override all link colors
                              SueKL Level 1

                              Hi Rick,

                              Thanks again for the response.  I checked and the only thing that appears is the "text/css" that follows the stylesheet name (that I think is generated).  I can't see any inline styles following this.  It appears fine in the View/preview mode (eyeglasses) but when I generate and put out to the server all links appear "visited" color no matter how many times I clear my history/cache or who is viewing.

                               

                              I'll get to the bottom eventually.  Thanks again for your responses.

                               

                              Sue

                               

                              link name.png

                              • 12. Re: Visited Links - Override all link colors
                                OptumMac

                                After spending multiple hours trying to get the hyperlink(visited) style in the css to do what I wanted, this answer: resequencing the order so that link, visited, hover, active come before expandspot is what finally works. Thank you.