Copy link to clipboard
Copied
Using an HTML page template, FM generates breadcrumbs in my HTML5 output. However, I did not find a possibility to assign a certain font to the breadcrumbs. The breadcrumbs are always displayed with the default font of the browser (Times Roman for me), even if 'Arial, sans-serif' is set as the font for the Help project in my layout. This behavior is reproducible with the common browsers on different machines and operating systems. Changing the default font in the browser is not what I want.
Does anybody have an idea?
Copy link to clipboard
Copied
I suspect the easiest way to change it is to look at the HTML of the resulting output and see what style is being applied to them; then create an entry for that in your CSS.
Copy link to clipboard
Copied
I tried that, but it seems that the breadcrumbs do not have a style at all. I expected to see something like '<p class="FM_breadcrumbs>, but the Inspector in Firefox does not show any style for the breadcrumbs.
Copy link to clipboard
Copied
What does it look like if you open a page with Notepad? Can you find the breadcrumb text in there?
Copy link to clipboard
Copied
That pointed me into the right direction, thanks. I now see the style name, i.e ."<p class=\"pt_breadcrumbs\" >", in the Inspector and in Notepad after adding it as an attribute to my HTML page template and importing the modified template. So far, so good. However, in the browser the breadcrumbs are still displayed in Times Roman where I want them to be in Arial. So I will add an entry to my CSS and see how this changes the display.
And a new question: Is there any possibility to persist the modification of the CSS so that I do not need to edit it after each publication run?
Copy link to clipboard
Copied
Yes. You can export your CSS from the Publish pod, modify as needed, and then import via the Publish pod.
Copy link to clipboard
Copied
So, I now have the style for the breadcrumbs in the generated HTML files. And if I add an entry for that style to the generated CSS, the breadcrumbs are displayed correctly in the browser. A big step forward.
However, I cannot get FM to remember that style in the CSS. I tried the proposed sequence of steps (export generated CSS, modify it, import modified CSS), but to no effect. With each publishing run, FM is generating a new CSS file, but without the declaration for the breadcrumbs. I repeated the steps above and looked into the exported CSS (named RHstyleMapping.css). There I see the declaration for the breadcrumbs style, but it seems to never make it into the CSS. As a workaround I could manually replace the generated CSS with my modified CSS file in the output folder, which gives the expected result. But this would need to be done after each publishing, something I would like to avoid.
Anything else I could try?
Copy link to clipboard
Copied
Finally I can answer my own question. Using the modified CSS as an override template and importing it by checking 'Override Styles for This Output' did the trick. Problem solved.
Thanks for your help.
Copy link to clipboard
Copied
I'm glad you got your problem solved!!
However, it does sound like you're taking more steps than I expected.
Any chance you could record a screencast of your process and send me a link?
If so, with a few pointers I may be able to shorten/automate your process.
Copy link to clipboard
Copied
Thanks, but not worth the effort. The process is fast and easy as it is: 1 Prepare CSS. 2 Import CSS to override styles. That's all.
Copy link to clipboard
Copied
you may find that the css formats the breadcrumbs (or allows you to customize them) using context, and not class. Do you have an HTML/CSS expert in house? If not, I suggest you engage one via Fiverr or similar service to dig into it.