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.
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:
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; } |
The 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.
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.