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; } } }

Where can I find a list with all Confluence CSS elements ?

unknown

Actually I try to modify the output for Confluence which I create when I export a page into a PDF. I recognized that there are already a lot of build-in featues (elements) you can use with your self-written CSS code.

So I was looking for a list with all Confluence build-in elements. I searched the documention, and I tried to find the list with a searchengine but found nothing.

I am looking for these elements: header, pagecount, date and time, URL, footer .... and all the others.

My example code (with the use of some elements)

@top-left
    {
        content: element(header);
    }
    @bottom-left 
    {
        content: element(footer);
    }

Any help is highly appreciated !

Peter

Accepted answers

Steve Gerstner [bridgingIT]

To sum my points up:

Peter, you are not looking for confluence specific stuff, it's basic css, but for so called paged-media:

http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1

In the confluence documentation, this could be a starting point:

Then you may look for this: https://confluence.atlassian.com/display/DOC/Customising+Exports+to+PDF

and this

https://confluence.atlassian.com/display/DOC/Advanced+PDF+Export+Customisations

The pagenumber itself is a css feature like a counter -> http://www.w3.org/TR/CSS21/generate.html

but I assume, if it's not in the documentation, the only way is to understand how it works and then search the sourcecode.

For me it seems to be not so usual css stuff, but nothing spefic to confluence or atlassian. Hope reading those documentation links helps

Greetings Steve

All comments

Steve Gerstner [bridgingIT]

Hi Peter,

CSS-Files are build dynimcally for your context.

See under webresource contexcts: https://developer.atlassian.com/display/CONFDEV/Web+Resource+Module

This means that the files you get in your browser depends on the plugins you have installed.

The best way to get all definitions is to download them via your browser, but if you want to override them, the best way is to write your own web resource module in your own plugin. Providing your users with style macros could be a security thread in my opinion...

Greetings

Steve

Matthew J. Horn

The best way to find out what styles are being used on your site is to open a page, then view the network traffic in a browser like Chrome. You'll see batch.css and other CSS files coming across the wire.

The batch.css files are combinations of a variety of stylesheets and styles across Confluence that are rolled up into a single file for transfer. They include your custom styles, Global stylesheets, Space-specific stylesheets, plus styles you set in the Admin panel.

Because there are so many moving parts that add styles, there is no centralized place.

unknown

Thank you for the fast reply. I immediately changed my question, now it has more text so it is easier to understand.

I am not looking for CSS code. But I will the search the developer documentation.

Steffen Heller

I had the same question a while ago: https://answers.atlassian.com/questions/50936/pdf-export-which-css-properties-do-work-and-which-ones-not<br< a="">>

The answer (in very short):

Confluence supports CSS 2.1 with some exceptions. If you consult a CSS 2.1 docu you should find information about all the elements that are available.

Don't know if anything has changed since then (probably not ;-)

unknown

I am NOT looking for CSS Code

I am looking for the special-Confluence build-in features like URL, pagename, date, pagenumber, chapter and so on.

You can refer to these special-Confluence build-in features in CSS with the prefix 'element'

Steve Gerstner [bridgingIT]

Then you may look for this: https://confluence.atlassian.com/display/DOC/Customising+Exports+to+PDF

and this

https://confluence.atlassian.com/display/DOC/Advanced+PDF+Export+Customisations

Steve Gerstner [bridgingIT]

Here is a little more information, thos parts can either be some css

like @page-> http://www.w3.org/TR/CSS2/page.html

or it can be a variable in less (I'm not sure if there is a less processor in the pdf generation):

http://en.wikipedia.org/wiki/LESS_(stylesheet_language).

To get a clue on this, you have to take a deeper look in the pdf styling documentoin from my last post and maybe you have to search the confluence source code for files with the ending .less.

Hope this helps a little bit

Steffen Heller

@Peter:

Can you post a link where you read about these built-in CSS features with a "element" prefix? That sounds interesting but I am still not sure what you are talking about...

unknown

Here it is. It is a link Steve already posts in an older comment: https://confluence.atlassian.com/display/DOC/Customising+Exports+to+PDF#CustomisingExportstoPDF-ExampleCustomisations

Search the page for 'content:'

Steve Gerstner [bridgingIT]

To sum my points up:

Peter, you are not looking for confluence specific stuff, it's basic css, but for so called paged-media:

http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1

In the confluence documentation, this could be a starting point:

Then you may look for this: https://confluence.atlassian.com/display/DOC/Customising+Exports+to+PDF

and this

https://confluence.atlassian.com/display/DOC/Advanced+PDF+Export+Customisations

The pagenumber itself is a css feature like a counter -> http://www.w3.org/TR/CSS21/generate.html

but I assume, if it's not in the documentation, the only way is to understand how it works and then search the sourcecode.

For me it seems to be not so usual css stuff, but nothing spefic to confluence or atlassian. Hope reading those documentation links helps

Greetings Steve

Steffen Heller

@Peter:

100% agree with Steve:

The examples in the Confluence docu use standard CSS. There are no specific built-in features. And since it is a standard the Confluence docu doesn't go any deeper. The key to understand is browsing through CSS 2.1 and some CSS 3 docu.

unknown

Thanks to everyone who answers to this question.

I think Steve is right, there is no special-Confluence stuff - everything is 'normal' CSS

Steffen Heller

@Peter:

If you are still interested, here are a few things you can do with CSS in Confluence.

header/footer:
https://answers.atlassian.com/questions/169645/show-heading-1-in-custom-header

pagecount:

@bottom-left {
content: "Page " counter(page) " of " counter(pages);
}

Other things you can do is automatic numbering for e.g. headings or displaying page numbers of cross references.

What is not possible is displaying the date, time, the URL or name of the current page.

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