• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Robo 2019 (Full) Breadcrumb & Related Topics Hyperlinks

Community Beginner ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

I'm using RoboHelp 2019 and producing Responsive HTML 5 help.

I am trying to match the help site to the web based application. In the app, hyperlinks are blue with a dotted underline when active:

 

Snag_29b9690a.png

 

When hovered, they have a blue background with white text.

 

Snag_29bb8717.png

 

I have achieved this for standard hyperlinks, but for some reason, this doesn't work for related topics and breadcrumbs. The background is blue, but the text is also blue and therefore can't be seen.

 

Snag_29bc9972.png

 

I did a fair amount of online research and discovered that the order in which active:, hover:, etc. are ordered in the CSS is imperative, but this doesn't appear to have made any impact. I also could not find a style for breadcrumbs.

 

Any ideas?

 

Many thanks in advance.

Views

840

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 14, 2020 Apr 14, 2020

If you undo whatever you've done, adding the following code to your stylesheet should work. Just change the colours to what you need.

div.breadcrumbs a {
  text-decoration: underline dotted !important;
  color: cornflowerblue !important;
}
div.breadcrumbs a:hover {
  text-decoration: underline dotted !important;
  color: white !important;
  background-color: navy !important;
}

 

Amebr_0-1586928921941.png

 

 

Votes

Translate

Translate
Community Expert ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

See if this helps with the Related Topics.

 

image.png

 

I think breadcrumbs are the same. Once you have some set up, you should also then see them in the CSS.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

Thanks Peter.

 

I had tried with those settings. I think the problem is that so many settings in CSS and other places seen to override each other. 

 

I'm pretty sure I fixed that by changing the order of the a.reltopics-list-item style to :link, :visited, :hover and :active. If I'm honest, I've tried so many things, I'm not 100% sure which one worked :-).

 

Thanks again for your help.

 

Tracy

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

I haven't managed to sort the breadcrumbs yet. I can't actually find a specific style for them other than the formatting that can be applied in the master page.

 

I think the settings for these come from the <ol> in the stylesheet. I've managed to get the first one working correctly, but not the other two. I've also noticed that my Home page doesn't go anywhere, which I need to resolve (but I know there's an existing post on that subject).

Snag_2afd5a3d.png

Snag_2afd7518.png

 

I think I need a lie down in a darkened room!

 

Have a good evening.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 14, 2020 Apr 14, 2020

Copy link to clipboard

Copied

If you undo whatever you've done, adding the following code to your stylesheet should work. Just change the colours to what you need.

div.breadcrumbs a {
  text-decoration: underline dotted !important;
  color: cornflowerblue !important;
}
div.breadcrumbs a:hover {
  text-decoration: underline dotted !important;
  color: white !important;
  background-color: navy !important;
}

 

Amebr_0-1586928921941.png

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 15, 2020 Apr 15, 2020

Copy link to clipboard

Copied

Thanks again Amebr - that has worked perfectly. I think a course in writing HTML code and understanding style sheets is in order.

 

I really appreciate your time. Thank you so much.

 

Tracy

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 15, 2020 Apr 15, 2020

Copy link to clipboard

Copied

LATEST

I did a course many, many, many years ago and it has stood me in good stead. 🙂

 

It does constantly change but if you have the basics you can guess at what's possible. And MDN and w3schools are your friend. 🙂

 

The other thing is becoming familiar with the browser dev tools, so you can see what the output is doing and find the css you need to target to get what you want.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp