Editing CSSs in Confluence OnDemand

[Bill]

If you are using Confluence OnDemand, can you edit the CSSs for online topics or for exported PDF documents? In the user guide, the topic "Styling Confluence with CSS" gives me the impression that you cannot.

[Pascal · Accepted solution]

Well, actually I was about to settle with the "no css styling in OnDemand" restriction, until I found a really good workaround, by making use of the "{style}" macro.

Go to Space Admin > Themes and select "Configure theme" for your current theme. In the header text you can now use the "{style}" macro like so:

{style}
  .wiki-content h1 { 
    border-bottom: 1px solid #98bddd !important; 
  }
  a.blogHeading {
    font-size: 14pt !important;
  }
  .blog-post-listing .wiki-content {
    color: #637687 !important;
  }
{style}

Works like a charm in our OnDemand instance and I hope Atlassian keeps this option open for us who want to customize the look and feel of our spaces.

[Bill]

I've never used the {style} macro, but it seems to apply to only one page. This doesn't sound practical for a whole document.

[Pascal]

Wisherut, if you look at the description of the header text of a theme you'll see that it says: "Display a banner or text at the top of every page in this space by entering wiki markup here.". And that's exactly how it works. Hence, all CSS rules specified here are all applied to all pages within the space. Copy and paste my example and see for yourself.

[Miguel Piedrahita]

Very helpful, thanks Pascal

[Zaqir Virani]

They should include this in their proper documentation, it's very handy.

[calv81]

Thank you so much!!!!!

I even love the css codes that you provided as an example 

[Miguel Piedrahita]

Hmm, apparently the Documentation Theme has been discontinued in OnDemand.  The default theme does not appear to allow you to "Configure theme", so I'm not seeing a way to apply Pascal's workaround.  Does anybody have a solution for this?

[John Tolle]

The Style macro no longer works for OnDemand (a.k.a. Cloud) Confluence in the Admin Theme Header/Sidebar/Footer/etc. areas.

Entering a style block in the Header...

{style}
  .myCSSclass {
    color: #ff0000;
  }
{style}

Will cause the following to appear in the source code:

Unknown macro: { color}

Fortunately, entering good old CSS in the Style macro still works just fine on a standard page.  The macro works a bit differently (which is good!) in that the contents of the macro are the CSS styles themselves, rather than content to be displayed.  It is also possible to point the macro at an external CSS file using the Import attribute of the Style macro.

.myCSSclass {
  color: red;
  font-weight: bold;
  /* etc. */ 
}

P.S. While editing the style, the tab key does what you want it to do!

When done creating/editing styles, apply them to the contents of Div macros, using the class attribute.

This is cumbersome to apply across multiple pages, but at least custom styles are still possible.

[Gino Marckx]

Yes, this macro allows you to style certain things on a page in Confluence Cloud . However, it seems to cause the entire page to be rendered in an iframe, which in turn causes the entire page to be surrounded with whitespace that does not belong there.

Any solutions to that?

[kristofferb]

To add to what Pascal Lindelauf said, this can also be done globally in Confluence Cloud. Go to Confluence administration → [Look and Feel] Sidebar, header and footer.

I found the pre and code tags not to be distinctive enough, so I added this:

{style} code, pre { background-color: rgb(238,238,238) ; } {style}

[Jason Ota]

Fantastic. Thanks for clarifying this. I can resize fonts.

{style}

.wiki-content p {

font-size: 12px;

}

{style}

[Pascal]

@Jason, sorry... I forgot to mention that theme configuration is not available for every theme. We primarily use the Documentation Theme and it's available for that in "Space Admin > Themes" under the descriptive text of the Documentation Theme.

[Jason Ota]

Where is this option? For OnDemand Confluence 5.0, I can see Confluence Admin -> Themes, but there is no option for "Configure theme". Cheers.

This is an essential feature that I would love to have. Being unable to adjust the font size and padding is a massive weakness in the OnDemand offering.

[JohnA]

Hi Wisherut,

I'm sorry to say that styling Confluence OnDemand with CSS is classified as one of the restricted functions for the OnDemand platform, so this isn't permitted as per our policy on the restricted functions on the OnDemand platform: https://confluence.atlassian.com/display/AOD/Restricted+Functions+in+Atlassian+OnDemand

Therefore, if you require to stylise your Confluence instance or customise your .PDF export templates then youy will need to migrate to a self-hosted instance of Confluence.

All the best,
John

[Bill]

Does that apply PDF output, too? I've been trying unsuccessfully to experiment with customizing PDF output. For example, I wanted to use the HTML code in one of your examples to create a customized title page. Some of your instructions directed me to identify the location of an image that I wanted to put on the title page, but when I right-clicked on the image to get the location, the location was not available.