Hello, as the title already says I would like to import a CSS file into the PDF stylesheet so that I can put certain specific formats into this second CSS file. The ultimate goal would be to a have a second CSS file which is in fact a PHP file and allows me to set this formats dynamically. Does anybody know if this is possible or even know how? Or is there an easier way to make PDF exports more dynamic? I made a quick try with the following and then decided to better ask here before I go much further. * I created a dummy CSS file "test.css" and uploaded it as an attachement * I copied this attachement's URL (which was something like /download/attachements/xxxxxxx/test.css) * I opened the PDF Stylesheet at Space Admin > Look and Feel > PDF Stylesheet * I copied @import url("/download/attachements/xxxxxxx/test.css") all; as the first line into my PDF Stylesheet * I made a PDF Export via Tools > Export to PDF * I was hoping that the exported PDF would show signs of my test.css formatting but it didn't Thanks

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Is it possible to import a CSS file into the PDF stylesheet

Steffen Heller

Hello,

as the title already says I would like to import a CSS file into the PDF stylesheet so that I can put certain specific formats into this second CSS file. The ultimate goal would be to a have a second CSS file which is in fact a PHP file and allows me to set this formats dynamically.

Does anybody know if this is possible or even know how? Or is there an easier way to make PDF exports more dynamic?

I made a quick try with the following and then decided to better ask here before I go much further.

I created a dummy CSS file "test.css" and uploaded it as an attachement
I copied this attachement's URL (which was something like /download/attachements/xxxxxxx/test.css)
I opened the PDF Stylesheet at Space Admin > Look and Feel > PDF Stylesheet

I copied

@import url("/download/attachements/xxxxxxx/test.css") all;

as the first line into my PDF Stylesheet

I made a PDF Export via Tools > Export to PDF
I was hoping that the exported PDF would show signs of my test.css formatting but it didn't

Thanks

Accepted answers

All comments

This isn't PHP (I haven't got that far yet!) but I add macros to some of my pages with CSS in them. I use @media print to make sure the styles don't affect the Confluence site.

Steffen Heller

Hello,

quite a while since I posted this request.

I think what I had in mind was something similiar to "CSS Custom Styles" as described at https://www.adaptavist.com/display/Builder/CSS+Custom+Styles

I now tried again and used different syntax to make sure it won't fail because of the spelling:

@import url(/download/attachments/xxx/test.css);
@import url("/download/attachments/xxx/test.css");
@import url(http://domainname/download/attachments/xxx/test.css);
@import url("http://domainname/download/attachments/83886825/test2.css");

Also I used different test.css with and without <style type="text/css">....</style

The result is still the same: It doesn't do anything with the stylesheet.

In the above mentioned web page there is talk about "Theme configuration". I don't know what that is and perhaps that is the mistake and there is something important that I haven't done or can't do (I am just a normal user without administrative rights).

Any hints are appreciated.

DavidH

I suspect that because Confluence isn't a web server, it doesn't know anything about importing CSS files. The PDF export uses the CSS definitions (static) that are in the PDF export stylesheet.

You do know that this stylesheet is only for exporting a page/space to PDF, right? There's another stylesheet for display of Confluence pages. And the Export to PDF stylesheet works in conjunction with the Layout (HTML) settings for PDF export, which define cover page, headers and footers.

Hope that helps

DavidH

To follow up, these are the CSS 2.1 selectors:

The following table summarizes CSS 2.1 selector syntax:

<th>Pattern</th><th>Meaning</th><th>Described in section</th>

*	Matches any element.	Universal selector
E	Matches any E element (i.e., an element of type E).	Type selectors
E F	Matches any F element that is a descendant of an E element.	Descendant selectors
E > F	Matches any F element that is a child of an element E.	Child selectors
E:first-child	Matches element E when E is the first child of its parent.	The :first-child pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
E:active E:hover E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	Matches any F element immediately preceded by a sibling element E.	Adjacent selectors
E[foo]	Matches any E element with the "foo" attribute set (whatever the value).	Attribute selectors
E[foo="warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning".	Attribute selectors
E[foo~="warning"]	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".	Attribute selectors
E[lang\|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".	Attribute selectors
DIV.warning	Language specific. (In HTML, the same as DIV[class~="warning"].)	Class selectors
E#myid	Matches any E element with ID equal to "myid".	ID selectors

Hi,

Here's some thoughts and examples for you, although I wouldn't recommend this if you had another option.

What CSS does Confluence PDF Export support?

The PDF export is based on an older version of Flying Saucer PDF exporter and it also supports some elements of CSS 3 such as @page, for example.

Themes affect the CSS that displays on the Confluence wiki.

An idea for creating semi-dynamic CSS on Confluence pages

Disclaimer: this is not standard practice and I am not recommending it. It is merely an untested idea of one way you could possibly achieve what you were asking about!

As I said before, I don't know about adding CSS to the stylesheet with PHP, but if you get an admin to add a user macro for you, then you might be able to use velocity if-statements to set up some semi-dynamic conditions and select sections of CSS from your macro to add to a specific page. This would apply to all pages exported together because CSS in Confluence pages gets added to the end of the other CSS in the document that you are exporting.

Here's a simple example of an old-style macro that should output wiki markup depending on parameters set for the macro in the page and using velocity if-statements:

{warning:title=Deprecated Feature}
This feature was deprecated in version *${paramversion}*
#if($parampage)
See [${parampage}] for details of the replacement feature.
#end
{warning}

You'd need to add the parameter definitions to your macro for new versions of Confluence. Then you could make decisions based on the values entered in the macro browser for these parameters.

Here's a simple example of CSS that you can add to a Confluence macro that outputs HTML. If you added this to a Confluence page and exported that page or a group of pages to PDF, it would print without any headers or footers on standard pages and without page breaks before headers, so someone can cut and paste the text only from the PDF, for example.

<style type="text/css">
@page
{
  @bottom-left {}
  @bottom-center {}
  @bottom-right {}
  @top-left {}
@top-center{}
@top-right {}

@}

@media print
{
h1, h2, h3, h4
{
 page-break-before: avoid;
}
}
&lt;/style&gt;

So perhaps you could combine these two ideas and create macros with parameters that add different sections of CSS to the page, depending on the macro parameters.

This is assuming that your admins are incredibly friendly and helpful, and you are working on a restricted set of pages that wouldn't harm anyone else's work. Then maybe you could create a macro that had different CSS settings for draft documents, final customer documents, internal documents, etc. and with different parameters that you would enter before you exported to PDF.

Mary-Jane

kimberly anders

I have tried every combination of syntax... I am successful with the text page title using the PDF Sytle sheet. But I cannot figure out how to add an image on the header or title page with an image. The suggested HTML in the PDF layout for the page header and title page did not work for me.

- Using Confluence on demand and the jira issue gadget on the page.

The only thing I can get to working is the text title in the middle of the PDF page using this in the PDF Style Sheet for the theme. How can I add an image in the left side of the page header and create a title page. Thank you.

@top-center

{

content: "Release Notes";

font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;

font-size: 8pt;

}

Steffen Heller

@kimberly:

The page you mentioned describes how to add an image.

Attach the image to a Confluence page.

View the list of attachments on that page, then right-click the image and copy its location.

Paste the link into the appropriate src="" attribute in your PDF Stylesheet, as shown above.

Edit the image URL so that it is relative, by removing the first part of the URL before /download/....

Take this description. Ignore step 3 but follow steps 1, 2 and 4 to get the needed image URL. Then use this image URL to add the image to the Title page or the header section using:

<img src="/download/..../image.png" />

kimberly anders

The image URL is https://mecomm.atlassian.net/wiki/download/attachments/14090500/logo_mcp.png?api=v2

I added this to the PDF Layout for the title page and nothing happens in the pdf export not even a blank title page. I added it to the page export header too and nothing happens.

What is the syntax to add borders around the table of the jira issues? And what is the syntax to add a Header row at the top of each page. The table continues on multiple pages.

Here is the space I am tring to customize the PDF template:
https://mecomm.atlassian.net/wiki/display/MCPrelease/Release+Notes+3.1+EP7

Thank you

Steffen Heller

If the image URL is https://mecomm.atlassian.net/wiki/download/attachments/14090500/logo_mcp.png?api=v2and you add <img src="/download/attachments/14090500/logo_mcp.png"/> to the "PDF Space Export Title Page" then you have that image on your title page.

If "nothing happens in the pdf export" then something is wrong with your PDF export.
How do you do the export? Do you use "Tools > Export to PDF" ?

If so, use this instead: "Browse > Advanced > PDF Export > Export PDF Options" (hopefully this exists in OnDemand!?)

Sean Curtis

Steffen that probably won't work. The URL for your image is an absolute one ... /download/attachments/... but the link you posted above that has a context path of /wiki/download/attachments/...

Try adding /wiki onto the image src.

kimberly anders

Yes, the using the space export PDF was the solution then the CSS styles are applied. (using OnDemand)

What is the CSS to include the page URL on the exported PDF?

Thank you.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

export

css

pdf