Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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?

 

5 answers

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

The default CSS is here: confluencedefaultpdf.css

0 votes

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

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>

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.

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

Suggest an answer

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

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

463 views 24 9
Join discussion

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you