Using CSS @Include function

Eric Lachance · Post by **Eric Lachance** » Mon Jul 19, 2010 6:03 am

Hello,

I would like to know if there is any way to include a second stylesheet in the WebHelp output. That is, I have a secondary stylesheet that I do not want to integrate in the main Styles.CSS, I have multiple projects using the same main stylesheet, but not the same secondary stylesheet. This secondary stylesheet is for use in an automatic code formatting script that does code highlighting and formatting. Since more than one programming/scripting languages are used in our software, we don't want to use the same color everywhere (plus our colouring scheme is not the same between software anyway).

I was able to add the javascript code needed by adding a master page with the includes in the <head> section (and the javascript script line that initiates everything is in the <body> because Flare loves re-ordering the lines in the output for some reason), but any CSS <link> that I add is removed in the output.

I used the @include standard CSS function in my stylesheet but, if I add it as the first line it causes a bug in Flare: when I re-open the project, the style selector in the formatting bar is all weird (it shows all styles starting with . , along with some madcap: styles and some html.xxx styles). If I add the @include at the end, I get an error in Flare when I generate my WebHelp output (@imports not valid here).

So either I'm stuck with having a longer styles drop-down, or I have to manually tweak my output. Is there another way I don't know of?

Post by **NorthEast** » Mon Jul 19, 2010 7:49 am

I use multiple stylesheets in our projects - both methods you've tried should work.

(1) Using @import

The CSS I use is @import, I've not heard of @include before.
My main stylesheet doesn't have any styles in it, and looks like this:

Code: Select all

/*<meta />*/

@import url('A.css');

@import url('B.css');

(2) Using multiple stylesheet links in master page

Before Flare v6 (or maybe earlier?), you could only have one stylesheet link in a topic or master page; but you can now have multiple links. However, this won't work if you set a master stylesheet at the project or topic level, it will replace all your stylesheet links and substitute them with one link (the master).

If you're using v5 or earlier, I found a workaround to add extra styelseet links; if you add them in between the </head> and <body> tags of a master page they will still be included in the output (after the MadCap.css link).

Eric Lachance · Post by **Eric Lachance** » Mon Jul 19, 2010 8:03 am

Dave,

Yes you're right, I'm using @import, not @include. Oops. I'm currently on Flare 6.1, by the way.

Perhaps it has something to do with the actual CSS that's in the included stylesheet. I tried in a new, blank project (the KnowledgeBase example project) and it does precisely the same thing. I'm not sure if this should be reported as a bug though.

Here's the stylesheet:

Code: Select all

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1.1em !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1em !important;
  min-height: inherit !important;
  min-height: auto !important;
}

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
}
.syntaxhighlighter.source {
  overflow: hidden !important;
}
.syntaxhighlighter .bold {
  font-weight: bold !important;
}
.syntaxhighlighter .italic {
  font-style: italic !important;
}
.syntaxhighlighter .line {
  white-space: pre !important;
}
.syntaxhighlighter table {
  width: 100% !important;
}
.syntaxhighlighter table caption {
  text-align: left !important;
  padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
  width: 100% !important;
}
.syntaxhighlighter table td.code .container {
  position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: white !important;
  padding-left: 1em !important;
  overflow: hidden !important;
  white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important;
}
.syntaxhighlighter table td.code .line {
  padding: 0 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
  padding-left: 0em !important;
}
.syntaxhighlighter.show {
  display: block !important;
}
.syntaxhighlighter.collapsed table {
  display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
  padding: 0.1em 0.8em 0em 0.8em !important;
  font-size: 1em !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
  display: inline !important;
  margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
  padding: 0 !important;
  display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
  display: inline !important;
}
.syntaxhighlighter .toolbar {
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 10px !important;
  z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {
  display: inline !important;
}
.syntaxhighlighter .toolbar a {
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
  display: none !important;
}
.syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
  line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
  padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
  background: none !important;
}
.syntaxhighlighter.printing .line .number {
  color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
  color: black !important;
}
.syntaxhighlighter.printing .toolbar {
  display: none !important;
}
.syntaxhighlighter.printing a {
  text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
  color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
  color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
  color: #056905 !important;
}
.syntaxhighlighter.printing .keyword {
  color: #FF0000 !important;
  font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
  color: gray !important;
}
.syntaxhighlighter.printing .variable {
  color: #C04848 !important;
}
.syntaxhighlighter.printing .value {
  color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
  color: #0000FF !important;
}
.syntaxhighlighter.printing .constants {
  color: #FF0000 !important;
}
.syntaxhighlighter.printing .script {
  font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
  color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
  color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
  color: black !important;
}

.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}
.syntaxhighlighter.printing .line .content {
  border: none !important;
}
.syntaxhighlighter.collapsed {
  overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
  color: blue !important;
  background: white !important;
  border: 1px solid #6ce26c !important;
}
.syntaxhighlighter.collapsed .toolbar a {
  color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
  color: red !important;
}
.syntaxhighlighter .toolbar {
  color: white !important;
  background: #6ce26c !important;
  border: none !important;
}
.syntaxhighlighter .toolbar a {
  color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
  color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
  color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
  color: blue !important;
}
.syntaxhighlighter .keyword {
  color: #006699 !important;
}
.syntaxhighlighter .preprocessor {
  color: gray !important;
}
.syntaxhighlighter .variable {
  color: #aa7700 !important;
}
.syntaxhighlighter .value {
  color: #009900 !important;
}
.syntaxhighlighter .functions {
  color: #ff1493 !important;
}
.syntaxhighlighter .constants {
  color: #0066cc !important;
}
.syntaxhighlighter .script {
  font-weight: bold !important;
  color: #006699 !important;
  background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
  color: gray !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
  color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
  color: red !important;
}

.syntaxhighlighter .keyword {
  font-weight: bold !important;
}

As far as adding a second stylesheet to a master page (which is added in the output), as I said when I try to add the line <link href="Resources/Stylesheets/secondary.css" rel="stylesheet" /> in the source code of the Master page, that line is simply stripped from the output and never appears in the WebHelp. I of course have no idea why it would do that.

Post by **NorthEast** » Tue Jul 20, 2010 3:02 am

I tried that code in a stylesheet and it imports fine.

When you say you get a lot of styles beginning with a '.', do you mean things like:
.bold
.break
.color1
... etc

These are in that stylesheet code you pasted, so I'd expect them to be displayed in the style list.

As for the html styles, if you mean html.concept, html.reference; these are topic styles for DITA.

Eric Lachance wrote:As far as adding a second stylesheet to a master page (which is added in the output), as I said when I try to add the line <link href="Resources/Stylesheets/secondary.css" rel="stylesheet" /> in the source code of the Master page, that line is simply stripped from the output and never appears in the WebHelp. I of course have no idea why it would do that.

Like I said, it will strip out your stylesheet links if you have set a master stylesheet. Check both your Project properties and Target properties and make sure the Master Stylesheet is set to (default) in both.

Try adding a second stylesheet link using Tools > Stylesheet links; if you have a master stylesheet set, it will stop you and display a message.

Eric Lachance · Post by **Eric Lachance** » Tue Jul 20, 2010 6:38 am

Dave,

I think I know what you mean, that the styles are added by my additional stylesheet. The styles did work, the import was fine, I guess I just wasn't expecting Flare to add a bunch of <div> classes at the top. That was a wrong assumption on my part though.

I tried removing the default stylesheet from the project and targets, and indeed the <link> line remains in the output.

Thanks Dave!

Eric Lachance · Post by **Eric Lachance** » Tue Jul 20, 2010 11:17 am

Hmn actually this causes another problem.

If I output to PDF and I don't have a master stylesheet enabled, the whole stylesheet is disabled.

Now what do I do, I can't apply a stylesheet to a Page Layout, only to a Master Page!

Post by **NorthEast** » Wed Jul 21, 2010 2:17 am

Eric Lachance wrote:Hmn actually this causes another problem.

If I output to PDF and I don't have a master stylesheet enabled, the whole stylesheet is disabled.

Now what do I do, I can't apply a stylesheet to a Page Layout, only to a Master Page!

Interesting, I'd never noticed you can't link a page layout with a stylesheet.
If you don't use a master stylesheet, the (default) setting will use the first CSS file it finds in alphabetical order.
My main stylesheet (which uses @import) comes first in the list, so I'd never noticed this.

I'd suggest putting in a feature request.

Eric Lachance · Post by **Eric Lachance** » Wed Jul 21, 2010 6:52 am

Thanks Dave, I submitted a feature request.

In reality, I'd much rather not use @import since this means it's included in all my outputs (which is not necessary). Plus I'd like to import stylesheets *sometimes* on a per-page basis, since the CSS controls the colouring scheme of the syntax highlighter I use it for, and I wanted the ability to use either or depending on what I was showing. Doesn't matter much really but it would have been nice.

For now continuing to use @import is a workaround, so I'll use that (with the minor annoyance it brings).

Thanks again!

MadCap Software Forums

Using CSS @Include function

Using CSS @Include function

Re: Using CSS @Include function

Re: Using CSS @Include function

Re: Using CSS @Include function

Re: Using CSS @Include function

Re: Using CSS @Include function

Re: Using CSS @Include function

Re: Using CSS @Include function