Styling the breadcrumb divider

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Jbleasdale
Propeller Head
Posts: 58
Joined: Tue Mar 21, 2017 3:35 pm

Styling the breadcrumb divider

Post by Jbleasdale »

Hi all,

Looking for advise on styling the Breadcrumb divider. By default it is > and I have found where to change that in the style sheet... but I want to change its colour and cant seem to do that.

I opened the stylesheet in text and did the following, is it right and if so what am I missing?

Code: Select all

MadCap|breadcrumbsProxy
{
	border-bottom: none;
	font-family: 'Plain Ultralight';
	font-size: 14px;
	line-height: 22.5px;
	font-style: normal;
	mc-breadcrumbs-prefix: ' ';
	mc-master-page: url('../MasterPages/OtherTopics.flmsp');
	mc-breadcrumbs-divider: '>'; color: FF7045;
	color: #000000;
}
While we are talking about styles... does anyone know how to style the search input 'search' text to centre in the search bar rather than stay left?
Joe Bleasdale

My Linkedin

Image
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Styling the breadcrumb divider

Post by ChoccieMuffin »

Thinking in my head rather than doing it in Flare, but I suspect you can create a span and apply that to the divider, much as I have done with my p.note. Worth giving it a try...

Code: Select all

	p.note
	{
		mc-auto-number-format: 'Note: ';
		mc-auto-number-class: note;
		padding: 3px 10px 3px 10px;
		margin-right: 0;
		background-color: #f5f5f5;
		border-top: solid 0.5pt #a9a9a9;
		border-bottom: solid 0.5pt #a9a9a9;
		page-break-before: avoid;
		mc-next-tag: p;
	}


	span.note
	{
		font-weight: bold;
	}
If you do something like that, then the line "mc-breadcrumbs-divider: '>'; color: FF7045;" in your code should be something like

Code: Select all

mc-breadcrumbs-divider: '>'; 
mc-breadcrumbs-divider-class: breadcrumb;
And you'd need to add the span as well:

Code: Select all

span.breadcrumb
{
color: FF7045;
}
Give it a go and see what happens!
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Styling the breadcrumb divider

Post by NorthEast »

If you look at the HTML of the output, you'd see that the divider has its own tag and class; e.g.

Code: Select all

<span class="MCBreadcrumbsDivider"> > </span>
So you just need to add the CSS to your stylesheet to format this; e.g.

Code: Select all

span.MCBreadcrumbsDivider { color: #FF7045; }
Jbleasdale
Propeller Head
Posts: 58
Joined: Tue Mar 21, 2017 3:35 pm

Re: Styling the breadcrumb divider

Post by Jbleasdale »

Styling the Span did it. Thanks Guys.

Why is that span not in the MainStyles sheet?
Joe Bleasdale

My Linkedin

Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Styling the breadcrumb divider

Post by NorthEast »

Jbleasdale wrote:Styling the Span did it. Thanks Guys.

Why is that span not in the MainStyles sheet?
Anything you see with a MadCap| prefix in the stylesheet (like dropdowns, breadcrumbs, xrefs) has to be processed when the target is built.

If you look at the HTML in the target output, you'll see that the single MadCap|breadcrumbsProxy tag in your source topic is replaced in the target with a number of various tags/classes.
This makes it easier to style the item in one place, rather than deal with several different styles.

So the tags/classes you see in the output simply don't exist in the source. And if it isn't supported in the MadCap| style, then you have to live with that.

However, you can discover what tags/classes are generated in a particular output type, and tweak the CSS like I've shown.
Just bear in mind that at some point in the future that tag/class name might change (they sometimes do), and you'll have to update your CSS again to match it.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Styling the breadcrumb divider

Post by ChoccieMuffin »

Dave Lee wrote:If you look at the HTML of the output, you'd see that the divider has its own tag and class; e.g.

Code: Select all

<span class="MCBreadcrumbsDivider"> > </span>
So you just need to add the CSS to your stylesheet to format this; e.g.

Code: Select all

span.MCBreadcrumbsDivider { color: #FF7045; }
So I was almost there with my suggestion! :lol:
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Post Reply