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?
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.
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.
What does it look like if you open a page with Notepad? Can you find the breadcrumb text in there?
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?
Yes. You can export your CSS from the Publish pod, modify as needed, and then import via the Publish pod.
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?
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.
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.
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.
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.