adding custom content above the TOC

[fvila]

Hi all,
Based on a tri-pane skin I would like to add some custom content above the TOC and below the header. Specifically I want the TOC to contain info about the guides describing one product, and above the TOC I want to have a drop-down listing the available products. How could I achieve that? I imagine it's possible to add in some html using jQuery, but that would slow down the loading of the page... Beyond that, is it possible to add custom stuff inside the header or footer?

[NorthEast]

It's possible to add stuff to the header area, as you can include a 'toolbar' script that is run with the skin. I don't think it would really make a lot of difference to the speed.

I wrote an article and produced an example project here:
Customising the Flare HTML5 Tripane skin

[fvila]

Thanks Dave!
I found that by adding the following (indented) at the end of Example 1 in your ModCap.flskn, I could insert content where I wanted to, ie below the header and above the TOC:

Code: Select all

/* Example 1 ...*/
$(document).ready(function(){
 ...
	    $("#home").after("<p>ZZZZZZZZZZZZZZZZ</p>");
});
/* End Example 1 */

Now I'll have to find a way of building the content I want. As it's a list of links to products covered by multiple Flare projects I guess that will involve building stuff on the server.
(If someone reading this is wondering, the <p> replaces a <p> tag to avoid disrupting the XML)

[Sarianna]

Thank you for this code, Dave, it’s just what I need for my project! However, I did run across a difficulty in using it, and I’d like to ask if you or anyone else has any tips.

Edit: I'm using Flare version 10.2.2, in case that is relevant.

I kept wondering why the skin.css stylesheet in my project did not seem to work even though I used your custom Javascript code from Example 2. In the final build, I kept on getting the header title in plain text in the top left corner, the situation at the end of your Example 1, in spite of adding the skin.css stylesheet and linking code.

By experimenting with my target settings, I discovered that the crucial thing seemed to be the “Exclude content not linked directly or indirectly from the target” option on the Advanced page of the target. I tend to keep that box checked, because I have a lot of legacy and reference stuff etc. in my project folders that I don’t want included in the final output, but I do like to keep around for possible further use. However, the skin.css stylesheet worked properly only after that option was unchecked.

This means that in order to get the header title to display as it should, I would need to clean up all the project folders on Flare and remove anything that shouldn’t be in the output, which is a major chore. Apparently Flare does not consider skin.css to be “indirectly linked from the target” even though the target is set to use my main website skin, which includes the custom Javascript code linking skin.css. Any idea if there’s some way to work around this?

[ChoccieMuffin]

Sarianna, the only suggestion I can come up with is to create a condition (e.g. DoNotUse) and apply that condition to all the topics you don't want to ever appear in your outputs, then exclude that condition from all your targets. It'll be tedious, but you'll only need to do it once. Then you can uncheck the "exclude content..." check box but not have those topics appear anywhere.

[Sarianna]

Thanks for the tip, ChoccieMuffin, but for the same amount of work I might just as well remove all non-output topics from the project and chuck them somewhere else. However, now that I had a chance to browse around the forum a while, I found a few more posts (also by Dave Lee, as it happens ) with further workarounds that seem to have worked for the people originally asking the questions:

viewtopic.php?f=6&t=16643&p=118278&hili ... ss#p118278

"In the target, have you set Exclude content not linked directly or indirectly from the target (on Advanced tab)?
If you have, and you added a stylesheet for a tripane skin using the method above, then that stylesheet won't be included because Flare cannot 'see' the link in the script.
A workaround for this is to add a link to that stylesheet somewhere in your project, e.g. add it to any topic."

I tried to add a link to the skin.css stylesheet in one topic of my project, but it did not work for me. Is there something wrong with the link itself? It's in the <head> section in the format:

<link href="../Resources/Stylesheets/skin.css" rel="stylesheet" type="text/css"/>

Another discussion of the same problem is here:
viewtopic.php?f=6&t=15864
where Dave mentions that the master stylesheet on both project and target have to be set to (default) in order for stylesheet links in topics to work. I also tried that, but with no success - the skin.css link was still ignored. An additional problem with this approach was that I also lost a bunch of other styles that I had created for my custom master stylesheet.

Actually, all I really want to have is a title at the top of the page, where Dave's example has the text "Customised skin", I don't really need further customization at this point. A stupendously crude workaround might be grafting together an image that includes both the logo and the title text, and using that in place of the plain logo image in the top left corner. I'll have to try it and see how terrible it looks .

Also, I clearly need to learn more CSS...

[ChoccieMuffin]

www.w3schools.com is a GREAT resource for learining css. They have a bunch of tutorials and a reference section that I have pinned to my browser as I use it all the time.

Can't help with your other problem, but I'm sure someone will be along soon.

[NorthEast]

Not sure what to suggest about the skin.css being excluded; I never use the Exclude content... option myself because of problems like this.

If you are simply just adding CSS for the title itself, then bear in mind that you can just include inline CSS in the HTML using style="..." (rather than use a skin.css file).
e.g.:

Code: Select all

$("#header>a").after('<div id="header-title" style="font-size: 16px; font-weight: bold; color: red;"></div>');

[Sarianna]

Thanks for both tips, I'll have to try them out!