Theme Builder

Sometimes content is too wide to fit on screen and causes nasty horizontal scroll bars - this quick tutorial explains how to mitigate some of these issues and make common panels look nicer at the same time...

The CSS in this tutorial requires a standards-compliant web browser. If you're using Microsoft's quick preview tool (Internet Explorer) some of this won't have effect.

Getting Started

Ok, let's get started with the most common problem - content that's too wide. Add the following to your Custom CSS:

/* ------ oversized content ------ */
.atb-content img {
  max-width: 100%;
}
.atb-content .panel {
  overflow: auto;
}
td.pagebody > table {
  table-layout: fixed;
}

This does three things:

• Ensures that images do not take up more than 100% of the available width in the content panel. If they are bigger, the browser will scale them down to fit!
• In cases where content is unavoidably large, scroll the content area instead of the whole web page - this ensures that most content will still wrap normally and be viewable without scrolling.
• Prevent the browser from re-sizing the page body width

Code and NoFormat macros

The code macro and noformat macro are notorious for creating content that's too wide to fit on screen - the following CSS will help tame them and make them look a bit nicer at the same time:

/* ------ better code panels ------ */
div.code,
div.preformatted {
  -moz-border-radius: 6px 6px;
  -webkit-border-radius: 6px 6px;
  background-color: #F0F0F0;
  border: 1px solid #D4D4D4;
  border-radius: 6px 6px;
  margin-left: 0;
  margin-right: 0;
  max-width: 730px;
}
div.code .panelContent,
div.preformatted .panelContent {
  background-color: transparent;
}

Attachments macro (and attachments screens)

The [AtlassianConfluence:attachments macro] is another trouble causer as it's designed for full-width themes on a big monitor. For a tutorial on taming this macro, see our blog.

Nicer Panels

There are four panels that are regularly used in wiki pages:

This is the tip macro

This is the info macro

This is the warning macro

This is the note macro

With some subtle tweaks we can make them look much nicer (as shown above):

/* ------ nicer panels ------ */
table.tipMacro,
table.infoMacro,
table.warningMacro,
table.noteMacro {
  -moz-border-radius: 6px 6px;
  -webkit-border-radius: 6px 6px;
  border-radius: 6px 6px;
}
table.tipMacro td,
table.infoMacro td,
table.warningMacro td,
table.noteMacro td {
  padding:10px 10px;
}

By adding round borders and improved padding, the macros look much cleaner.