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

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

9 answers

1 accepted

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

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

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.

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

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

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.

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'

@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...

@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.

Thanks to everyone who answers to this question.

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

@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.

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Jul 10, 2018 in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

852 views 23 12
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you