Where is the default CSS?

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?

 

4 answers

This widget could not be displayed.

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

This widget could not be displayed.

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>

This widget could not be displayed.

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.

This widget could not be displayed.

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

The default CSS is here: confluencedefaultpdf.css

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Sep 17, 2018 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...

601 views 8 6
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