"Re-engineering" HTML5 Output to Update source project

[StephenD]

I have an old Flare 11 project that I have been asked to edit.
The original authors have used some python scripts to edit the output so that the Tripane Layout matches the company branding. These scripts don't work now with my laterst version of Flare.
I have 2 sets of Flare files: the source files and I have the formatted output.

How do I update my Flare source project to match this older, correctly formatted output so that when I build and publish in Flare, i don't need the python scripts to tweak the look and feel?

I can see if I inspect the correct output, the search bar and the header layout in the Default.htm all sit in the Styles.css, but if I take the Syles.css from the Output and put it into the Program Files/Flare ... directory, it does nothing.

I've read and tried Dave Lee's 2014 advice, but can't getthat to work.

Any suggestions as to what I can take from the output and where to put that into the source?

[NorthEast]

I think a lot depends on exactly what those python scripts did in your old project. What sort of things do you need to do, that you can't achieve using just the skin editor?

Since you're coming from Flare 11, my first suggestion would be to investigate whether you can use the Side Nav skin instead of Tripane. Unless you are using a feature that is only available with Tripane (like project merging), then Side Nav is probably a better option, and easier to hack/customise if you need to.

If you need to use Tripane, then the process I published in 2014 to add a stylesheet to the Tripane skin will still work in Flare 2020.
https://ukauthor.wordpress.com/2014/08/ ... tml5-skin/

You shouldn't be copying any files from the output and putting them in the source. I'd suggest you use the browser dev tools (F12) to look at HTML/CSS in the output in order to understand how it works. Then if you can't customise it via the skin editor, only then look at what CSS or JS you might need to customise the output.

[StephenD]

Thanks Dave.
The python scripts moved the search box to the left of the tripane, removed the slide arrow that you use to resize the Content section. Adjusted the width of the borders. And a few other tweaks to meet the company branding. So small(ish) changes.

If I look in the project at the Style in the HTML5 Skin for the Search bar, for example, that's not the style that is used in the Output.
I have opened the dev tools to look at the HTML/CSS in the Output. So I'm thinking that I should try to grab the XML from the Output and put it 'somewhere' in the source files.

Just having a little trouble untangling the multiple stylesheets, skins and editors in the source from the Output.

I thought there might be a simple 'find and replace'! But let me try your process again and see what I come up with.
Thanks again for the help and advice.

[ChoccieMuffin]

What you get in the output isn't going to be terribly useful if you just copy it from the old output into your updated project. The reason for this is that when Flare builds an output, it processes things like Madcap-specific styles and turns them into something a regular browser can interpret correctly. But as Dave says, use the information in there to identify which bits of your Flare project you need to update.

I'm assuming you do have the old Flare project to play with, and not just the old output? If so, what does your built output look like if you build it in Flare 2020 (or whatever version you're using)? Is it more or less right, or are there lots of things that you're going to need to change? Or just the things you've mentioned, like moving search box etc?

Are you able to edit the skin in the latest version of Flare to do what you want?

I also second the suggestion for using sidenav rather than tripane, as the output is a much more up-to-date look, and it's very well documented. (This is coming from someone who until recently was generating only PDFs and CHMs, and I've managed to get what I want.)

[StephenD]

Yes, I have the original Flare source material as well as a copy of the Output directory.
And, yes, I can look at the HTML/CSS but just confused as to where to update the source material. I guess as you mentioned, the Flare process changes files, which is why the original authors used the python scripts.
And when I output using Flare 2020, that's when I see the problems.
It doesn't look too different. It is mainly the tripane layout issues I mentioned.

But I can't seem to manage the changes in the skin editor. Perhaps I'll have to have a look at the sidenav and play a lot more!

Thanks guys

[StephenD]

Just wanted to update this thread for anyone else having a similar issue.
I copied the Styles.css from the old output folder to the new output folder and fixed the issue.