Highlighted

FM2017 / HTML5 output: Styling breadcrumbs

Explorer ,
Jan 31, 2018

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? 

Views

221

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

FM2017 / HTML5 output: Styling breadcrumbs

Explorer ,
Jan 31, 2018

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? 

Views

222

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
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

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.

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
Reply
Loading...
Jan 31, 2018 0
Explorer ,
Jan 31, 2018

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.

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
Reply
Loading...
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

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?

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
Reply
Loading...
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

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.

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
Reply
Loading...
Jan 31, 2018 0
Explorer ,
Jan 31, 2018

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?

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
Reply
Loading...
Jan 31, 2018 0
Adobe Community Professional ,
Jan 31, 2018

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.

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
Reply
Loading...
Jan 31, 2018 0
Explorer ,
Feb 01, 2018

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?

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
Reply
Loading...
Feb 01, 2018 0
Explorer ,
Feb 01, 2018

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.

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
Reply
Loading...
Feb 01, 2018 0
Adobe Community Professional ,
Feb 01, 2018

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.

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
Reply
Loading...
Feb 01, 2018 0
Explorer ,
Feb 04, 2018

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.

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
Reply
Loading...
Feb 04, 2018 0