HTML export with CSS

Question

Hi. This is a problem which has been flagged before in the following two discussions (at least):

https://jira.atlassian.com/browse/CONF-16264

http://forums.atlassian.com/message.jspa?messageID=257363923

In brief, when you export one or more pages from a space to HTML, most of the styles don't go with them. The only styles that are exported are a bunch of colours, but the font reverts to the browser default and all margins and positioning go walkies (example CSS below). This is a real PITA for me, as I'm developing a templating system in our installation of Confluence (3.5) precisely so that I can export a bunch of formatted pages to HTML for import into other systems, such as Virtual Learning Environments.

Going by the blurb, the Scroll Wiki Exporter plugin should enable styles in export, but I don't know if this plugin is installed and if it is I don't know how to use it.

So, my related questions are:

* Has this problem been solved yet by Atlassian?
* If the answer to that is 'no', as I suspect, then can I create custom styles in Space Admin | Stylesheet and get those exported with the HTML package?
* If the answer to that is 'no', as I suspect, I'll have to manually include Confluence stylesheets in the exported package, in which case can anyone tell me how I can get my mitts on them?
* Is there any other way in which I can apply a stylesheet to exported HTML docs, without manually editing each doc?

Please note that I'm only a space administrator, not the sysadmin, so I don't have access to sysadmin functions or the base Confluence installation.

And yes, I do need to export to HTML as well as PDF, for local reasons that are too tedious to explain. If it were just PDF that we needed then I'd be fine because exported PDFs are styled perfectly.

Any suggestions welcome.

Fred

--------

Example exported CSS file (styles/site.css):

/* Could not locate resource: /includes/css/master.css */
/* Could not locate resource: /includes/css/wiki-content.css */
/* Could not locate resource: /includes/css/tabs.css */
/* Could not locate resource: /includes/css/menu.css */
/* Could not locate resource: /includes/css/menu-ie.css */
/* Could not locate resource: /includes/css/tables.css */
/* Could not locate resource: /includes/css/panels.css */
/* Could not locate resource: /includes/css/master-ie.css */
/* Could not locate resource: /includes/css/renderer-macros.css */
/* Could not locate resource: /includes/css/content-types.css */
/* Could not locate resource: /includes/css/login.css */
/* Could not locate resource: /includes/css/sprites/icons-sprite.css */
/* Could not locate resource: /includes/css/information-macros.css */
/* Could not locate resource: /includes/css/layout-macros.css */

/*
    Colors for Confluence (included for all themes by default).
*/
h1, h2, h3, h4, h5, h6,
.wiki-content h1,
.wiki-content h2,
.wiki-content h3,
.wiki-content h4,
.wiki-content h5,
.wiki-content h6,
.pagetitle,
.steptitle,
.substeptitle,
.formtitle,
th.confluenceTh,
table.confluenceTable th.confluenceTh,
table.admin th,
.form-element-large,
.form-element-small,
#com-atlassian-confluence .mce_h1 span.mceText,
#com-atlassian-confluence .mce_h2 span.mceText,
#com-atlassian-confluence .mce_h3 span.mceText,
#com-atlassian-confluence .mce_h4 span.mceText,
#com-atlassian-confluence .mce_h5 span.mceText,
#com-atlassian-confluence .mce_h6 span.mceText {
    color: #003366 ;
}

.wiki-content h1,
.wiki-content h2 {
 	border-bottom-color: #3c78b5 ;
}

.wiki-content-preview {
    border-left-color: #3c78b5 ;
    border-right-color: #3c78b5 ;
}

.pageSectionHeader {
    border-bottom-color: #cccccc ;
}

.panel {
    border-color: #3c78b5 ;
}

.panelHeader,
.menuheading,
.pageheader,
.sectionbottom {
    border-bottom-color: #3c78b5 ;
}

.topRow {
    border-top-color: #3c78b5 ;
}

.tabletitle, .pageSectionHeader {
	border-bottom-color: #3c78b5 ;
}

a:link,
a:visited,
a:focus,
a:hover,
a:active,
#default-labels-header a.add,
a.blogHeading,
.more-comments a {
	color: #006DAF ;
}

/* @aui-override: tab colour, review after https://studio.atlassian.com/browse/AJS-557 is resolved */
.aui-tabs ul.tabs-menu li.menu-item a {
	color: #006DAF ;
}
/* @end */

h1 a:link,
h1 a:visited,
h1 a:focus,
h1 a:hover,
h1 a:active {
    color: #006DAF ;
    border-bottom-color: #003366 ;
}

.spacenametitle-printable,
.spacenametitle-printable a,
.spacenametitle-printable a:visited {
    color: #999999;
}

.tableview th {
    color: #003366 ;
    border-bottom-color: #3c78b5 ;
}

blockquote {
    border-left-color: #3c78b5 ;
}

.navBackgroundBox {
    background: #cccccc ;
}

.previewBoxTop,
.previewContent,
.previewBoxBottom,
.functionbox {
    border-color: #3c78b5 ;
}

.smalltext-blue {
    color: #3c78b5 ;
}

.tabnav,
.comment .tabnav,
ul.tabnav {
    border-bottom-color: #cccccc ;
}

.tabnav .tabs a {
    border-color: #cccccc ;
    background: #cccccc ;
}

.tabnav .tabs a:link,
.tabnav .tabs a:visited {
    color: #ffffff ;
}
.tabnav .tabs a:hover {
    color: #ffffff;
    background: #003366 ;
    border-color: #003366 ;
}

#squaretab a {
    border-color: #cccccc ;
}

#squaretab a:link,
#squaretab a:visited {
    background-color: #cccccc ;
}

#squaretab a:hover {
    color: #ffffff;
    background-color: #003366 ;
    border-color: #003366 ;
}

table.blogcalendar {
    border-color: #3c78b5 ;
}

.blogcalendar th.calendarhead,
a.calendarhead,
a.calendarhead:link,
a.calendarhead:visited,
a.calendarhead:hover {
    background-color: #cccccc ;
    color: #ffffff ;
}

.searchGroupHeading {
    background-color: #cccccc ;
    color: #ffffff ;
}

.permissionTab {
    background: #cccccc ;
    color: #ffffff ;
}

.permissionSuperTab {
    background: #003366 ;
    color: #ffffff;
}

/* styles for links in the top bar */
.topBar {
    background-color: #cccccc;
}

.basicPanelContainer {
    border-color: #cccccc ;
}

.greynavbar {
    border-top-color: #cccccc 
}

div.license-personal {
   background-color: #cccccc;
   color: #ffffff ;
}

div.license-personal a {
   color: #ffffff ;
}

#header {
    background-color: #cccccc;
}
#header a,
#breadcrumbs,
#header .ajs-menu-bar li.ajs-menu-item a.trigger {
    color: #000000;
}
.breadcrumbs {
 	border-color: #3c78b5 ;
}

#navigation, #tab-navigation {
    border-bottom-color: #cccccc ;
}

#com-atlassian-confluence .aui-dd-parent .aui-dropdown .dropdown-item a,
.ajs-menu-bar li.ajs-menu-item .ajs-drop-down a {
    color: #535353 ;
}
#header .ajs-menu-bar li.ajs-menu-item .ajs-drop-down a {
    color: #003366 ;
}

#com-atlassian-confluence .aui-dd-parent a.perms-dropdown-trigger:hover,
#com-atlassian-confluence .aui-dd-parent a.perms-dropdown-trigger:focus,
#com-atlassian-confluence .aui-dd-parent .aui-dropdown .dropdown-item.active a,
.menu-section-list li.active a,
.menu-section-list li.active a:hover,
#navigation .ajs-menu-bar .ajs-button a:hover,
/* .ajs-menu-bar .ajs-menu-item.opened, */
.ajs-menu-bar .ajs-menu-item li.active a,
.aui-dd-parent .aui-dropdown li.active,
.aui-dd-parent .aui-dropdown li.active span,
.aui-dd-parent .aui-dropdown a:focus span,
.ajs-menu-bar .ajs-menu-item.opened .ajs-drop-down li.active a,
#navigation .ajs-menu-bar li.ajs-button a.active,
#header .ajs-menu-bar li.ajs-menu-item.opened .ajs-drop-down li.active a,
.ajs-content-hover .popup-follow a:hover {
    color: #ffffff ;
    background-color: #6699cc ;
}
#header .ajs-menu-bar li.ajs-menu-item.opened,
#header .ajs-menu-bar li.ajs-menu-item.opened a.trigger {
    background-color: #336699 ;
    border-color: #336699 ;
}
.ajs-menu-bar .ajs-menu-item.opened a.trigger {
    background-color: #6699cc ;
}

#header .ajs-menu-bar .ajs-drop-down {
    border-color: #cccccc;
}
#header .ajs-menu-bar .ajs-drop-down li.separator {
    border-top-color: #cccccc;
}

.tab-navigation .tab a {
    background-color: #cccccc ;
    border: 1px solid #cccccc ;
    color: #ffffff ;
}
.tab-navigation .tab a:hover {
    color: #ffffff;
    background-color: #003366 ;
    border-bottom-color: #003366 ;
}

.tabletitle, .heading-text-color {
    color: #003366 ;
}

ol.autocompleter li.focused {
	background: #6699cc ;
	color: #ffffff ;
}

/* End colour styles for Confluence */

/* Could not locate resource: /includes/css/default-theme.css */

Jim Birch · Answer

Also, there's a php script in that issue that can be used to build site.css from current component stylesheets.  You could do the same process manually if you're not a PHP ninja.

Jim Birch · Answer

Sorry to be slow, been busy...

I use an existing copy.  I just had a quick look and can't find where it comes from.  I have a feeling that it might have been part of an earlier version.  This means that it could be out of date so if something formats strangely you might have to edit the stylesheet manually, possibly after reviewing the current styles.  However, I haven't found a problem.

I have attached the site.css that I use to the Atlassian issue on this problem:

https://jira.atlassian.com/browse/CONF-16264

Just replace the site.css in the zip with the linked one.

Jim

Fred Riley1 · Answer

Thanks for the reply, Jim. Although "messy" that might be a temporary solution until Atlassian addresses this problem. Where can I find the site.css file in Confluence, do you know? If I look at an ordinary page in a workspace there are many stylesheets loaded, but I can't see site.css amongst them. It would certainly be useful to have a defined site.css file, as the site.css that appears in the exported zipfile includes error messages, eg:

/* Could not locate resource: /includes/css/master.css */

Whereas if I could use one site.css for all exports, I could put @import statements into it, eg:

@import url("/includes/css/wiki-content.css");

Of course, I'd also have to manually copy all the CSS files to the export package. Klunky and time-consuming, but it should work.

Fred