Possible to edit CSS Styles directly + use custom selectors?

[codymeyer]

Hi there. I am a front-end developer at a company that uses Madcap Flare 8 for our help documentation.

I recently had a very fast crash course in the application (I have never used it before). We are outputting to HTML 5.

So far, in order to edit the styles of the HTML 5 output, I have just been editing the Styles.css file in the output folder. I realize that this is not the optimal way, as every time you build your project you will have to add the CSS again.

I spent a few hours yesterday trying to figure out how to add the CSS that I added to the output Styles.css to the project so that it is included every time the project is built. I did not have any luck.

I tried changing the master css file to one that I created and every time I built my CSS it was nowhere to be found in the output (it looks like it just defaulted back to the default HTML 5 skin).

Some of the stuff I am trying to do includes

Code: Select all

#header {
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #383838), color-stop(100%, #1c1c1c));
	background-image: -webkit-linear-gradient(#383838, #1c1c1c);
	background-image: -moz-linear-gradient(#383838, #1c1c1c);
	background-image: -o-linear-gradient(#383838, #1c1c1c);
	background-image: linear-gradient(#383838, #1c1c1c);
	-webkit-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset, rgba(0, 0, 0, 0.4) 0 3px 4px;
	-moz-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset, rgba(0, 0, 0, 0.4) 0 3px 4px;
	box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset, rgba(0, 0, 0, 0.4) 0 3px 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 1px solid #000000;
	height: 55px;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 50;
}

.tree-node.tree-node-inner.tree-node-collapsed > div:hover {
	background: #6cab26;
	background-image: url('Images/book-selected.png'); /* fallback */
	background-image: url('Images/book-selected.png'), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(66, 66, 66, 0.4)), color-stop(100%, rgba(117, 117, 117, 0.4)));
	background-image: url('Images/book-selected.png'), -webkit-linear-gradient(rgba(66, 66, 66, 0.4), rgba(117, 117, 117, 0.4));
	background-image: url('Images/book-selected.png'),   -moz-linear-gradient(rgba(66, 66, 66, 0.4), rgba(117, 117, 117, 0.4));
	background-image: url('Images/book-selected.png'),      -o-linear-gradient(rgba(66, 66, 66, 0.4), rgba(117, 117, 117, 0.4));
	background-image: url('Images/book-selected.png'),         linear-gradient(rgba(66, 66, 66, 0.4), rgba(117, 117, 117, 0.4));
	background-repeat: no-repeat;
	background-position: right;
}

How can one go about truly editing the CSS down to the nitty gritty and get it included whenever you build?

Thanks!

[LTinker68]

In the Content Explorer pane, expand the Resources folder then the Stylesheets sub-folder. You'll one or maybe two stylesheets. To know which stylesheet the output is using, open the HTML5 target and see what file it's pointing to. By default, I think it points to Modern.css. To edit the stylesheet, you can either double-click on the stylesheet in the Stylesheets folder to edit it using the Stylesheet Editor GUI, or you can right-click on the file and select Open with > Internal Text Editor to edit it in code view.

For the record, there will be several stylesheets in the output. One is your topic stylesheet, there could be a table stylesheet if you set one up, and Flare creates one or two stylesheets to support some of its features. Your topic stylesheet and table stylesheets will be referenced last in the topics in the output, so any modifications you make to the topic or table stylesheets will override the Flare-generated stylesheets.

[codymeyer]

Thanks for the quick reply.

I tried what you recommended but had no luck. My CSS changes are not showing up in the output.

I made a video showing a quick example of what is going on. I created a new project, set Styles.css as the master stylesheet, and edited Styles.css to make the background color in logo in the header red. I then built the project, and the logo's background-color was not changed.

I think that this might have to do with the Skin. At the end of the video I go into the output folder and see that the stylesheet in the Output folder under Resources/Stylesheets has my edit in it, while the skins Styles.css file does not.

http://www.youtube.com/watch?v=toQqmUvjkqM

[whunter]

I didn't watch the video, but one of the first things to check in this sort of situation is that you made the edit in the correct stylesheet medium. For example, if you made the edit in the Print medium, but the output is set to use the Default medium, then it's not going to show up in the output. It is a pretty common thing for people to not notice what medium the stylesheet is currently set to, and accidentally make the edit in the wrong medium.

[NorthEast]

codymeyer - you're looking at two completely different stylesheets in the output, they just both happen to have the same name styles.css.

When you look at the HTML code of the output help, the page is built up from two files - the 'root' help file (e.g. Default.htm), which includes an iframe tag containing a separate file for the help topic.

The head section of the root help file has a stylesheet link to Skins/Default/Stylesheets/Styles.css.
You can't see or edit this file in the source, it is only present in the output; it is generated by Flare during the build, and includes styles that you set in the skin editor.

The head section of the help topic files will also have their own stylesheet link(s), which style the topic only (they don't affect anything else, as they're inside an iframe). The topic stylesheets are the ones you see in the source; e.g. Content/Resources/Stylesheets/styles.css, which are copied to the same folder in the output.


Anyway, what you're trying to do is edit the CSS used for the 'skin' not the topic; i.e. the stylesheet used by 'root' help file, not the topic file. However, in Flare you can only edit the skin's appearance using the Skin editor; you can't directly edit the skin CSS file, as that is generated by Flare during the build.

I have found a workaround for this though - I add my own stylesheet to the root help topic, which includes any CSS modifications that I can't set using the skin editor.

In the skin editor Toolbar tab, you can enter your own custom javascript (on the right). Any script you enter here will be run in the root help file (Flare includes it in Toolbar.js).

I use the following jQuery* script to add a stylesheet link to my own stylesheet (skin.css), which includes any modifications I need to make for the root help file. Note the CSS file could be anywhere inside the Content folder. (*jQuery is already used by HTML5 help, you don't need to include it.)

Code: Select all

$('head').append('<link rel="stylesheet" href="Content/Resources/Stylesheets/Skin.css" type="text/css" />');

So in the output root help file, it will initially look like this:

Code: Select all

<head>
...
<link href="Skins/Default/Stylesheets/Styles.css" rel="Stylesheet">
<link href="Skins/Default/Stylesheets/TextEffects.css" rel="Stylesheet">
...
</head>

And after the script is run it looks like this:

Code: Select all

<head>
...
<link href="Skins/Default/Stylesheets/Styles.css" rel="Stylesheet">
<link href="Skins/Default/Stylesheets/TextEffects.css" rel="Stylesheet">
...
<link type="text/css" href="Content/Resources/Stylesheets/Skin.css" rel="stylesheet">
</head>

[codymeyer]

codymeyer - you're looking at two completely different stylesheets in the output, they just both happen to have the same name styles.css.

When you look at the HTML code of the output help, the page is built up from two files - the 'root' help file (e.g. Default.htm), which includes an iframe tag containing a separate file for the help topic.

The head section of the root help file has a stylesheet link to Skins/Default/Stylesheets/Styles.css.
You can't see or edit this file in the source, it is only present in the output; it is generated by Flare during the build, and includes styles that you set in the skin editor.

The head section of the help topic files will also have their own stylesheet link(s), which style the topic only (they don't affect anything else, as they're inside an iframe). The topic stylesheets are the ones you see in the source; e.g. Content/Resources/Stylesheets/styles.css, which are copied to the same folder in the output.


Anyway, what you're trying to do is edit the CSS used for the 'skin' not the topic; i.e. the stylesheet used by 'root' help file, not the topic file. However, in Flare you can only edit the skin's appearance using the Skin editor; you can't directly edit the skin CSS file, as that is generated by Flare during the build.

I have found a workaround for this though - I add my own stylesheet to the root help topic, which includes any CSS modifications that I can't set using the skin editor.

In the skin editor Toolbar tab, you can enter your own custom javascript (on the right). Any script you enter here will be run in the root help file (Flare includes it in Toolbar.js).

I use the following jQuery* script to add a stylesheet link to my own stylesheet (skin.css), which includes any modifications I need to make for the root help file. Note the CSS file could be anywhere inside the Content folder. (*jQuery is already used by HTML5 help, you don't need to include it.)

Code: Select all

$('head').append('<link rel="stylesheet" href="Content/Resources/Stylesheets/Skin.css" type="text/css" />');

So in the output root help file, it will initially look like this:

Code: Select all

<head>
...
<link href="Skins/Default/Stylesheets/Styles.css" rel="Stylesheet">
<link href="Skins/Default/Stylesheets/TextEffects.css" rel="Stylesheet">
...
</head>

And after the script is run it looks like this:

Code: Select all

<head>
...
<link href="Skins/Default/Stylesheets/Styles.css" rel="Stylesheet">
<link href="Skins/Default/Stylesheets/TextEffects.css" rel="Stylesheet">
...
<link type="text/css" href="Content/Resources/Stylesheets/Skin.css" rel="stylesheet">
</head>

Awesome! This works great! Thanks so much for coming up with this trick!

[SteveO]

On planet Flare, all must bow to Dave Lee. Many thanks for this.

[NorthEast]

Since I posted that, I found a better way to insert the stylesheet link - the original didn't work reliably in all browsers.

So for the first bit of code, use this instead:

Code: Select all

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

[KonstantinA]

Guys, the workaround with custom javascript, appending <link> tags to the DOM is great, but, I encountered another problem:
One of my projects does (HTML5 Triplane targeet) does not include custom css files into output. E.g I have one .css file, directly linked to the target, and another one for this workaround. Both css files reside in Content/Resources/Stylesheets, But only one file is pulled to the output folder.
Any ideas on this?
Thanks

[NorthEast]

I have one .css file, directly linked to the target, and another one for this workaround. Both css files reside in Content/Resources/Stylesheets, But only one file is pulled to the output folder.

So, which file isn't included in the output?

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.

[KonstantinA]

Thanks much, Dave. The problem was with Exclude content not linked directly or indirectly from the target.
Now I got what I wanted.

[Nerdycreative]

Hi Dave
This looks like a great technique and I want to use it on the standard HTML5 - Top Navigation skin, specifically (but not limited to) the Header.
I simply cannot locate anywhere that I can add custom javascript in the skin editor of Flare 12. Have trawled the net and the help site for assistance but am totally stuck.
Is this even possible?

[NorthEast]

Hi Dave
This looks like a great technique and I want to use it on the standard HTML5 - Top Navigation skin, specifically (but not limited to) the Header.
I simply cannot locate anywhere that I can add custom javascript in the skin editor of Flare 12. Have trawled the net and the help site for assistance but am totally stuck.
Is this even possible?

This discussion was about how to attach stylesheets to the tripane skin, but you won't have this problem if you're using the top nav skin, as the skin components are part of your topic in the output.

So for the top nav skin, you can include any CSS changes for the top nav header directly in your normal topic stylesheet.
Obviously, that's just to tweak CSS that you can't edit in the skin editor itself.

[Nerdycreative]

I am so sorry but I dont understand you. I've ordered the introductory Flare books (and will read them cover to cover) and i've got what i could from online help but meanwhile if you have time can you answer this please:
I'm using the standard HTML5 - Top Navigation skin and it's applied to my 2 Targets. The only way that I can edit it is thru the restrictive Skin Editor. I want to do something not offered there.
I'm guessing that you mean that i can add style rules to my main style sheet (the standard MainStyles.css) to do what i want (because Targets dont seem to have their own style sheets, just skins - What is a "normal topic stylesheet"?). I could write the style rules in MainStyles but the skin editor gives me few clues about what it is naming the important entities, for example, Menu Item > Font that i want to target.
If I have missed an explanation of this in the help site, feel free to direct me to the page.
Grateful for any help

[NorthEast]

Flare's skin editor will only provide certain options for styling the top nav skin. The skin editor just makes it easier to edit these styles, without having to deal with all CSS that's actually used in the output.

However, if you want to change something that's not available in the skin editor, you have to work out the CSS required yourself.

To do this, open the output in a browser, then press F12 to show the browser tools. There should be an 'inspect' option that you can use to examine the HTML and CSS.

Your CSS modifications just needs to be included in your main stylesheet - the stylesheet that you've linked from either a topic, master page, or a target (as a master stylesheet).

[Nerdycreative]

Thank you. It's taken me a while to grasp that in Flare most of the html and css is written "fresh" every build and to know where to look for it. Basic Dreaweaver skills did not prepare me for this

But I'm there now and managing to intervene in the styling, as I wanted. Thanks for your patience.
NC

[TeleTech]

Hi Dave Lee, thanks for your helpful tips, I am using your Jquery to add my stylesheet to the head, and my styles are being added, however they are not working. Initially I am just trying to do this with the company logo as a test. To do this I have set a the background image of the .logo class. When I view my project the logo area is blacked out - my style is applied by the path is wrong. I know this because when I look at it with Chrome Dev tools I can that although the path to my logo image has been added, when I expand the property I see another property - background-image, with path which has been mangled - the slashes between directories in the path have been removed, which explains why my image does not display. Meanwhile, after I open Chrome Dev tools, the default logo reappears, this seems to be due to some responsive styles. So I tried to override the mangled path by setting background-image explicitly, but then there is another issue - Madcap seems to have an HTML BASEREF property so that my path always has this path prefix. I tried using ../../ and ..\..\ to find the path but it doesn't "get it" - feeling very frustrated and wonder if Dave you can help

[TeleTech]

codymeyer - you're looking at two completely different stylesheets in the output, they just both happen to have the same name styles.css.

When you look at the HTML code of the output help, the page is built up from two files - the 'root' help file (e.g. Default.htm), which includes an iframe tag containing a separate file for the help topic.

The head section of the root help file has a stylesheet link to Skins/Default/Stylesheets/Styles.css.
You can't see or edit this file in the source, it is only present in the output; it is generated by Flare during the build, and includes styles that you set in the skin editor.

The head section of the help topic files will also have their own stylesheet link(s), which style the topic only (they don't affect anything else, as they're inside an iframe). The topic stylesheets are the ones you see in the source; e.g. Content/Resources/Stylesheets/styles.css, which are copied to the same folder in the output.


Anyway, what you're trying to do is edit the CSS used for the 'skin' not the topic; i.e. the stylesheet used by 'root' help file, not the topic file. However, in Flare you can only edit the skin's appearance using the Skin editor; you can't directly edit the skin CSS file, as that is generated by Flare during the build.

I have found a workaround for this though - I add my own stylesheet to the root help topic, which includes any CSS modifications that I can't set using the skin editor.

In the skin editor Toolbar tab, you can enter your own custom javascript (on the right). Any script you enter here will be run in the root help file (Flare includes it in Toolbar.js).

I use the following jQuery* script to add a stylesheet link to my own stylesheet (skin.css), which includes any modifications I need to make for the root help file. Note the CSS file could be anywhere inside the Content folder. (*jQuery is already used by HTML5 help, you don't need to include it.)

Code: Select all

$('head').append('<link rel="stylesheet" href="Content/Resources/Stylesheets/Skin.css" type="text/css" />');

So in the output root help file, it will initially look like this:

Code: Select all

<head>
...
<link href="Skins/Default/Stylesheets/Styles.css" rel="Stylesheet">
<link href="Skins/Default/Stylesheets/TextEffects.css" rel="Stylesheet">
...
</head>

And after the script is run it looks like this:

Code: Select all

<head>
...
<link href="Skins/Default/Stylesheets/Styles.css" rel="Stylesheet">
<link href="Skins/Default/Stylesheets/TextEffects.css" rel="Stylesheet">
...
<link type="text/css" href="Content/Resources/Stylesheets/Skin.css" rel="stylesheet">
</head>

Hi Dave,
I tried this with Flare v12 but it only appends the stylesheet to the Default.htm, not the topic iFrames inside it. I'm trying

var cssLink = document.createElement("link")
cssLink.href = "file://C:/Users/s.thompson/Documents/My Projects/TBM1/vfo_styles.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['topic'].document.body.appendChild(cssLink);

And this

$('#topic').contents().find('h1').css({
color: 'purple'
});

$(document.getElementById('topic').contentWindow.document).ready(function() {
$('topic').contents().find('head').append('<link rel="stylesheet" href="//nas01/sso/TeamProactive/Madcap_projects_general/vfo_styles.css" type="text/css" />');
});

But nothing is working, can you suggest something?

[NorthEast]

Hi Dave,
I tried this with Flare v12 but it only appends the stylesheet to the Default.htm, not the topic iFrames inside it.

My script won't add a stylesheet to topics inside the iframe - it's not supposed to do that.

The post I put in this thread is about how to add a stylesheet to Default.htm file, so that you can add a stylesheet that modifies the Tripane skin.

If you want to add stylesheets to topics, you don't need a script to do that, just add the stylesheet links to the topics/master page in Flare.