Where is the default CSS?

[Ben Rogers]

I'm not seeing the css styling for Card tabs shown in the docs, so I'd like to tweak the css for that element and perhaps other items as well. When I follow the CSS editing tutorial/instructions, I end up looking at a big, empty text box in which I'm supposed to paste new CSS.

The view does not make sense to me because I'm looking to tweak default elements that are styled with the default CSS. To change the CSS, I'd have to go to the HTML view of a page, look up the element IDs and classes, then go back to the blank CSS textbox and enter new CSS. This seems tedious, so I suspect I'm missing something obvious. Is it possible to view and edit the space CSS directly?

[Steffen Heller]

Just a little add-on to the main question in the title.

The default CSS is here: confluencedefaultpdf.css

[Elena_Lurye]

Hi Ben,

I understand that your question is from 2015... But I was looking for the same thing and  found something here - https://confluence.atlassian.com/confkb/how-to-hide-elements-in-confluence-using-css-or-javascript-313458894.html

[Steffen Heller]

Hi Ben,

To change the CSS, I'd have to go to the HTML view of a page, look up the element IDs and classes, then go back to the blank CSS textbox and enter new CSS. This seems tedious, so I suspect I'm missing something obvious.

Your description is perfect. You don't miss or misunderstand anything. That is exactly the way it works.

I wonder how one would create a border around a tab. . . parameters and macros aren't HTML elements.

Here you are on a slightly wrong track. As you said before you have to go to the HTML view of a page. But what you posted, that code with lines like <ac:macro ac:name="deck">, is not the HTML code of the page but some confluence internal syntax (in confluence you don't have direct access to the HTML code itself).

In other words:

If you want to create a border around something (for example a HTML element like a table) you must have a look at the HTML source code, search for that specific HTML element and inspect the HTML code around it for anything that might have influence on the appearance of that element. This might include other HTML elements like <span>, <div> or other <table> that are built around "your" element plus all kinds of CSS classes or ids that are attached to any of these HTML elements.

To get going you need some help. "Firebug" is a free add-on that enables you to do all of what I described above: Open the confluence page and the underlying HTML code in two parallel windows, highlight a confluence page element in the main window and automatically get all the information about the underlying HTML and CSS code in the other.

With that and some luck you can go to Space Admin > Look and Feel > PDF Layout (the "empty text box") and define your own customized CSS code.

[Ben Rogers]

So the typical css edit involves manually inspecting the page HTML to see what the classes and IDs are? That's a rough workflow. I wonder how one would create a border around a tab. . . parameters and macros aren't HTML elements.

<div class="innerCell">
<ac:macro ac:name="deck">
<ac:parameter ac:name="id">Parent</ac:parameter>
<ac:rich-text-body>
<ac:macro ac:name="card">
<ac:parameter ac:name="id">overview</ac:parameter>
<ac:parameter ac:name="default">true</ac:parameter>
<ac:parameter ac:name="label">Overview</ac:parameter>
<ac:parameter ac:name="effectType">fade</ac:parameter>
<ac:rich-text-body>
<h1>Roadmap</h1>

[Rodrigo Girardi Adami]

Hi Ben,

I believe that you can only edit the CSS through the Space tools -> look and feel as stated here. Editing directly the space CSS might not be possible. I'll leave this question open so others can participate and contribute.

Cheers,

Rodrigo