Horizontal rule between header and topic/toc - hack the skin

[straygoat]

Hello

I'm not a big fan of Flare's skin and want to make a slight alteration to the appearance of the skin - I want to be able to add a div between the header and the TOC and Topic so that I can then put a horizontal rule in the div. Is this possible without ditching the skin completely? Could anyone advise on how to achieve it?

Thanks

[kwag_myers]

I'm guessing your outputting WebHelp? If so, my approach is to edit the Default.htm and keep a copy outside the project. Then copy the file into the project after each build. Since many of my projects require this and other hacks, I have a script I run to automate the process. However, instead of a div, I add a boarder to the bottom of the toolbar frame:

Code: Select all

<frame name="mctoolbar" title="Toolbar" src="Skin/Toolbar.htm" frameborder="5" style="border-bottom-color:#6C6C6C; border-bottom-width:1px; border-bottom-style:solid;" scrolling="no" longdesc="Content/SkinSupport/mctoolbar_longdesc.htm" noresize="noresize" />

In this example I've changed the frameborder value from 0 to 5 and added style="border-bottom-color:#6C6C6C; border-bottom-width:1px; border-bottom-style:solid;"

[NorthEast]

I have a solution for inserting content in the HTML5 skin, here:
http://forums.madcapsoftware.com/viewto ... 878#p99068

That uses a toolbar script to insert content in the header, and shows how to add a stylesheet to the skin; and the same principle will apply to adding a div below the header.

[straygoat]

That looks promising, Dave. Thanks. I may need some more advice when it comes to manipulating the header, but we shall see. I'm not up on java, but that's never been a huge issue before.

[straygoat]

Sorry, JQuery. My mistake.

[straygoat]

Actually, it doesn't seem to be working. I guess because the new responsive templates work differently.

[NorthEast]

Actually, it doesn't seem to be working. I guess because the new responsive templates work differently.

That particular example is for the header in the desktop layout, so it'll work in desktop mode. The HTML file has a different header for the responsive layout - div#responsiveHeader

If you use something like Firebug/Developer tools to inspect the HTML in responsive mode, you can check what tags/classes are used for the responsive header; then use the jQuery to modify that as appropriate.

[straygoat]

Thanks Dave. I had a play adding <divs> post build last night, and could add horizontal rules everywhere in the header apart from where I wanted - above the logo, top or bottom of search box were no problem, between header and body proved troublesome. And I don't want to edit post-build anyway if at all possible (otherwise I would have just ditched the skin altogether).

With your code example from the other thread:

Code: Select all

$(document).ready(function(){
   $('#header>a').after('<a href="http://www.madcapsoftware.com" target="_blank" style="position:absolute; right:300px; top:40%;">Test link</a>');
});

What attribute are you adding/editing in the style sheet to control the appearance of the Test Link?

Thanks for your help on this. Jquery is next on my list of things to learn (after XML and DITA...lot of hard work ahead).

[NorthEast]

Thanks Dave. I had a play adding <divs> post build last night, and could add horizontal rules everywhere in the header apart from where I wanted - above the logo, top or bottom of search box were no problem, between header and body proved troublesome. And I don't want to edit post-build anyway if at all possible (otherwise I would have just ditched the skin altogether).

This is where you need to use Firebug/Developer tools, to inspect how the skin HTML/CSS is constructed. I use Firebug, and experiment by making 'live' changes to the CSS to see what happens, and once I'm happy then I add that to my stylesheet CSS.

For example, in responsive mode, you have div#contentBody, and inside that are div#responsiveHeader, div.buttons, and div#contentBodyInner.

These are positioned, so if you want to insert a new tag between the header and toolbar, then you might adjust the position of the toolbar; e.g. adjust the top property for div.buttons.

If you just simply want a hoizontal line/separator, then you possibly don't need to inject any HTML anyway; you might be able to just add a bottom border to the header.

What attribute are you adding/editing in the style sheet to control the appearance of the Test Link?

I'm not including anything in the CSS to style the link; to do that, just add your own id/class to the link, and style that in the stylesheet.

[straygoat]

Thanks, I will look into Firebug.

What I really want to achieve is to:

1. Add a border to the bottom the header - I can do that
2. Add an extra DIV (or equivalent) between the top of the TOC and Body and the bottom of the header.
3. Make the background of the header a different colour to the background of the rest of the page (behind the TOC and Body boxes).

Do you think 2 and 3 are only going to be achievable though JQuery?

[straygoat]

That Firebug tip has helped a lot - thanks for that. I have almost managed to achieve what I want, just through editing the styles.css for the skin.

What I really want to do now is add a DIV between the header and the body. I can add the div to the styles.css, but which file does flare use to determine what divs go in the default.htm?

[straygoat]

Grrrr!!! I forgot that when Flare builds the output, it wipes the output folder and builds new stylesheets for the skin again - using the defaults + info from the skin file in Flare.

Any ideas on the best way around this?

[NorthEast]

2) If you want to insert a tag, then use jQuery; e.g. use append to add content inside the header:

Code: Select all

	$("#responsiveHeader").append('<div id="my-stuff-responsive">My stuff in responsive header</div>');

	$("#header").append('<div id="my-stuff">My stuff in normal header</div>');

Chances are you'll use one of the jQuery functions like append, prepend, before, after.

Then style #my-stuff and #my-stuff-responsive in the skin stylesheet (how to add a skin stylesheet is in my example).

Code: Select all

div#my-stuff
{
	background-color: red;
}


div#my-stuff-responsive
{
	background-color: green;
}

3) If you want to modify styles of elements in the skin, find out the element tag and id/class (using Firebug), and again just set the CSS modifications in your skin stylesheet.

Grrrr!!! I forgot that when Flare builds the output, it wipes the output folder and builds new stylesheets for the skin again - using the defaults + info from the skin file in Flare.

Any ideas on the best way around this?

Don't edit the output - the point of my example is that the script inserts the HTML content and the stylesheet used to style it.

[straygoat]

Got ya! Cheers.

I'll give that a go and see how I get on.

I had a discussion with someone at MadCap not so long ago and they mentioned getting rid of the skin in future releases. Can't come soon enough if you ask me! I'd much prefer a css-based TOC and a div layout editor.

[straygoat]

Well, some joy at last. I added the stylesheet script from your other post, created a skin.css and added styles for the background of the header. I also added the code you suggested for adding extra content to the header (exactly as you put it, just to see how/if it works).

Result: background colour of header changed, so I can now edit the style of the skin exactly how I want it. But no new content was added to (or around) the header, so that part hasn't quite worked.

[NorthEast]

It works fine for me.

The full script would be:

Code: Select all

/* link to skin stylesheet */

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

/* include link in lowercase, in case lowercase option set in target */

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

$(document).ready(function(){
	$("#responsiveHeader").append('<div id="my-stuff-responsive">My stuff in responsive header</div>');
	$("#header").append('<div id="my-stuff">My stuff in normal header</div>');
});

And the CSS:

Code: Select all

div#my-stuff
{
	background-color: red;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}


div#my-stuff-responsive
{
	background-color: green;
	position: relative;
	bottom: 10px;
	left: 0;
	right: 0;	
}

[straygoat]

Right, thanks for that. I'll give it a try as soon as I can and see how it goes. If I can get this working, I'll owe you!

[Spectre]

Hi,

In a similar vein, is it possible to add a border to the top and bottom of the help container? Now, you might see that as unnecessary, as the border would be provided by a browser element or the Windows taskbar, say, but let's assume that you want a horizontal line at the bottom and top of the help. Can that be done? The answer is doubtless in this thread already, but I'm struggling...

Cheers

[NorthEast]

Hi,

In a similar vein, is it possible to add a border to the top and bottom of the help container? Now, you might see that as unnecessary, as the border would be provided by a browser element or the Windows taskbar, say, but let's assume that you want a horizontal line at the bottom and top of the help. Can that be done? The answer is doubtless in this thread already, but I'm struggling...

Cheers

Yes, see my technique about how to add a stylesheet to the skin: http://ukauthor.wordpress.com/2014/08/0 ... tml5-skin/

And in your skin stylesheet, just add a the border to the body tag.

[Spectre]

Many thanks Dave, that is extremely comprehensive.

[kellyh_hochanadel]

Is there a way to easily reposition the header logo and search bar within the header area? Would this need to be done by adding a stylesheet to the skin?

[NorthEast]

Is there a way to easily reposition the header logo and search bar within the header area? Would this need to be done by adding a stylesheet to the skin?

Yes, there's an example of how to do this in my post:
http://ukauthor.wordpress.com/2014/08/0 ... tml5-skin/

[kellyh_hochanadel]

I got it to work, sort of/mostly. For some reason, when it compiles, it's not placing the skin.css with the override properties in the Content/Resources/Stylesheets directory in the Output folder. I could move it manually every time I compile with far less headache than modifying the styles.css in the output every time, but if other people have gotten this to work, methinks there is some magic I am missing here.

Any ideas?

[NorthEast]

If the file isn't being copied to the output, then you've probably set the target to 'Exclude files not linked...' (on Advanced tab).

If you use that setting, then the skin.css file won't be included in the output, as there's no link to it from anywhere in the project (as the script dynamically adds the link at runtime).
So you either need to (a) switch off the 'Exclude files not linked...' setting, or (b) if you really need to use that setting, then you will need to add a stylesheet link to skin.css somewhere in your project (e.g. just add it to a single topic somewhere), so that Flare will 'see' the link.

[kellyh_hochanadel]

That makes total sense! Great suggestion, Dave. This has been immensely helpful.