Put the Breadcrumbs Proxy in the Toolbar - HTML5

[kwag_myers]

This is my first HTML5 output and I'm stuck on one requirement, which is to either remove the toolbar or add the breadcrumbs proxy to it. I've tried adding a JS to the toolbar, but can't seem to get the syntax right. I also don't see where to omit the toolbar, or even reduce the height. This is all in an effort to match the UI, which would be a snap if I had Flare 11 (top nav). Alas, I'm forced to work with version 10 for the time being.

Oh, and for added drama, if I don't make my deadline the world, as we know it, ceases to exist. So, for the sake of all mankind...please!

[chrisj]

If you don't actually need the toolbar, you can probably accomplish a more seamless UI by manipulating the #contentBodyInner ID that gets built. I was testing using Chrome developer tools, and adjusting that container's margins will essentially allow you to cover up the toolbar. You can also set that toolbar to be transparent and remove all the buttons.

If you need the toolbar and need the proxy in the toolbar I am thinking it can be done with a script, but unfortunately I'm not sure what that script would look like exactly - something that removes the proxy container from the body and places it into the toolbar button container might do the trick.

[dorcutt]

Kwag, I'm assuming that you saw Dave Lee's magnificent guide on customizing the HTML output. If not, check that out.

Using that technique to link a stylesheet, I added the following script to the skin's toolbar:

Code: Select all

$('<link>')
	.appendTo($('head'))
	.attr({type: 'text/css', rel: 'stylesheet'})
	.attr('href', 'Content/Resources/Stylesheets/HTML5.css');

$('<link>')
	.appendTo($('head'))
	.attr({type: 'text/css', rel: 'stylesheet'})
	.attr('href', 'content/resources/stylesheets/html5.css');

With a quick look in Bugzilla, the toolbar buttons are in a div of class "buttons toolbar-buttons", and Chrisj is right about manipulating the ContentBodyInner. I added the following to the stylesheet that I linked using dave's method:

Code: Select all

div.buttons.toolbar-buttons
{
	display: none;
}

div#contentBodyInner
{
	top: 0px;
}

If you change your breadcrumb proxy to the correct color, it should look like the toolbar is off and the breadcrumb proxy is part of that, not the content body. It seems to have done the trick for me anyway. Good luck with the end of the world and all.

[kwag_myers]

Thank you both for the replies. The buttons div only gets built when you have something in the toolbar. I tried using the Filler only to do this, but have not been able to find a way to control the height of the container. I'm already using Dave Lee's skin.css technique and can add text, but haven't figured out how to add the actual proxy:

Code: Select all

div.buttons::before
{
	content: "I want the breadcrumbs here, please!";
}

I currently have no buttons with all borders and backgrounds the same color. This leaves me with about a 50px margin along the top and this will have to do for now, as I need to focus on content.

[dorcutt]

Kwag, based on my understanding, you can't truly add the breadcrumb proxy to the toolbar. It is part of the Topic, not the Skin, which means that it can be controlled only by the actual Flare CSS, not the javascript-linked CSS in the toolbar. That's just my understanding; Dave Lee would know for sure.

However, what you can do is fake it:

1. Hide the toolbar entirely using the CSS in my previous post (or by disabling all toolbar buttons like you did maybe; haven't tried that personally).
2. Add the breadcrumb proxy to the top of the Master Page that you are using for the target, and format it using Flare's normal CSS stylesheet for the target so that it visually blends in with the background color/other formatting you're using for the Div around the topic (id="contentBody", though it can be controlled using the Skin mostly I think).
3. Because the breadcrumb proxy isn't added to the Default page, you'll have to add a dummy breadcrumb proxy shaped and formatted placeholder div to the top of that individual topic to keep the page layout visually consistent.

I'm not sure if you have a special reason where the breadcrumb needs to be truly part of the toolbar and not part of the topic, but this is the only way that I think is possible to accomplish what I think you're after.

[dorcutt]

To configure the roughly 50 px margin at the top, I think you can use the following code in your toolbar-linked CSS. I think you can set the height in pixels of the blank area by changing the number here:

top: 4px;

Code: Select all

div.buttons.toolbar-buttons
{
	display: none;
}

div#contentBodyInner
{
	top: 4px;
}

Good luck.

[kwag_myers]

That's it. When I tried 0px before it didn't go well. I ended up at 10px, but that looks pretty close to the UI. If that's not good enough they can spring for Flare 11.

Anyway, thanks again for taking the time.

[NorthEast]

There's a post here about how to move the breadcrumbs in the toolbar (for a HTML5 tripane skin):
viewtopic.php?f=12&t=19677

Mike's initial solution will add the breadcrumbs to the toolbar, but the breadcrumb links won't work.

Shlomo adds an alternative script, which is supposed to update the links so they work, but I can't actually get that script working.

[kwag_myers]

Thanks Dave. I think I'll keep it in the topic container in order to stay in line with the UI, which has active links in the breadcrumb. But good to know for future HTML5 projects as, aesthetically, I've never been a fan of the topic toolbar.