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

This widget could not be displayed.

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

This widget could not be displayed.

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

This widget could not be displayed.

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

This widget could not be displayed.

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

This widget could not be displayed.

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.

This widget could not be displayed.

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'

This widget could not be displayed.

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

This widget could not be displayed.

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

This widget could not be displayed.

Thanks to everyone who answers to this question.

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

285 views 2 4
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