Horizontal rule between header and topic/toc - hack the skin
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Horizontal rule between header and topic/toc - hack the skin
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
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
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
-
- Propellus Maximus
- Posts: 810
- Joined: Wed Jul 25, 2012 11:36 am
- Location: Ann Arbor, MI
Re: Horizontal rule between header and topic/toc - hack the skin
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:
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;"
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" />
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
Re: Horizontal rule between header and topic/toc - hack the skin
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.
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.
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
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.
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
Sorry, JQuery. My mistake.
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
Actually, it doesn't seem to be working. I guess because the new responsive templates work differently.
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Re: Horizontal rule between header and topic/toc - hack the skin
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#responsiveHeaderstraygoat wrote:Actually, it doesn't seem to be working. I guess because the new responsive templates work differently.
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.
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
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:
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).
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>');
});
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).
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Re: Horizontal rule between header and topic/toc - hack the skin
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.straygoat wrote: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).
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.
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 wrote:What attribute are you adding/editing in the style sheet to control the appearance of the Test Link?
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
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?
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?
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
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?
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?
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
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?
Any ideas on the best way around this?
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Re: Horizontal rule between header and topic/toc - hack the skin
2) If you want to insert a tag, then use jQuery; e.g. use append to add content inside the header:
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).
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.
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>');
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.
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 wrote: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?
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
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.
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.
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
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.
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.
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Re: Horizontal rule between header and topic/toc - hack the skin
It works fine for me.
The full script would be:
And the CSS:
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>');
});
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;
}
-
- Sr. Propeller Head
- Posts: 153
- Joined: Wed Apr 04, 2012 3:39 am
- Location: The Midlands, UK.
- Contact:
Re: Horizontal rule between header and topic/toc - hack the skin
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!
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
Re: Horizontal rule between header and topic/toc - hack the skin
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
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
Re: Horizontal rule between header and topic/toc - hack the skin
Yes, see my technique about how to add a stylesheet to the skin: http://ukauthor.wordpress.com/2014/08/0 ... tml5-skin/Spectre wrote: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
And in your skin stylesheet, just add a the border to the body tag.
Re: Horizontal rule between header and topic/toc - hack the skin
Many thanks Dave, that is extremely comprehensive.
-
- Propeller Head
- Posts: 30
- Joined: Tue Jul 22, 2014 6:30 am
- Location: Austin TX
Re: Horizontal rule between header and topic/toc - hack the skin
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?
Re: Horizontal rule between header and topic/toc - hack the skin
Yes, there's an example of how to do this in my post:kellyh_hochanadel wrote: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?
http://ukauthor.wordpress.com/2014/08/0 ... tml5-skin/
-
- Propeller Head
- Posts: 30
- Joined: Tue Jul 22, 2014 6:30 am
- Location: Austin TX
Re: Horizontal rule between header and topic/toc - hack the skin
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?
Any ideas?
Re: Horizontal rule between header and topic/toc - hack the skin
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.
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.
-
- Propeller Head
- Posts: 30
- Joined: Tue Jul 22, 2014 6:30 am
- Location: Austin TX
Re: Horizontal rule between header and topic/toc - hack the skin
That makes total sense! Great suggestion, Dave. This has been immensely helpful.