Customizing Side Navigation Skin display

[DownintheHoller]

Hello,

I'm new to MadCap and am looking for pointers, resources, and suggestions for customizing a side navigation skin--that is, how would we add/edit style elements to include ones not listed/defined in the Styles panel of the HTML5 Skin Editor? At this point, a basic overview of how the .flskn file relates to other files would be helpful. For example, if we want to set a maximum weight and a maximum height to the border, how do we go about defining that? If we want to insert multiple images in the header, how do we go about defining them? What other files, aside from the [sidenavigation_name].flskn file, do we need to know about and modify?

Thank you for your suggestions.

[NorthEast]

The skin editor makes it easy to style your output (without having to dig into complex HTML and CSS), but you're also quite limited in how far you can customise it - so if it's not included in the skin editor (or skin components), then Flare doesn't provide any way to do it.

So if you need to customise it further, then you're completely on your own and have to do it manually - and write your own CSS, javascript, or whatever is required.

If you use the browser developer tools (press F12), you can inspect the output from Flare, and see its HTML structure and the CSS used.

If you need to change the style of something, then that's not usually too difficult. You can just add CSS in your own stylesheet that adds to, or overrides, the CSS in Flare's output stylesheets.

If you need to change anything structural in the HTML, then that's a bit more complicated, since you can't change how Flare builds the HTML structure. For example, I add the name of our product (in text) into the header area of our Side Nav skin. To do that, I include a div containing the product name in the template/master page (so it's added to each topic in the output), and then I use some simple javascript to move the div with the product name into the header area so it replaces the logo image.

So you probably will need some basic knowledge of HTML, CSS, and javascript. Flare's output does include jQuery, so basic manipulation of the HTML structure is quite easy, even for a non-developer like me.
But a lot depends on exactly what you want to customise - some things will be easier than others.

One word of warning is that when you customise the output in this way, you also run the risk that Flare's output might change in the next version, and you have to re-work any customisations.
For that reason, I'd make sure you fully understand and can fix whatever custom code that you use in your project.

[DownintheHoller]

Very helpful, Dave, very helpful indeed. Thank you very much.