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

655

Likes

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

Adobe Community Professional , 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; }

Likes

Translate

Translate
Adobe Community Professional ,
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.

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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

Likes

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.

 

 

Likes

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
Adobe Community Professional ,
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

 

 

Likes

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

Likes

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
Adobe Community Professional ,
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.

Likes

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