Description A div block at the top of the main content that displays a preview box when Preview is clicked in the editing panel. Containers Contained by #main-content Contains: .preview-message

Outline Click to view in closer detail!

Details

Whenever you are editing a standard page, you have the option to click Preview. If you do, you will see the page as it would look with the new edits you made to the page. Along with this, a preview box will display alerting you that what you are looking at is indeed a preview. By default, the box is pink with a dashed border.

#action-area-top contains this preview message, but it is not the preview message itself. This id is located at the top of the page, above even the #page-title. So, in essence, all it does is provide a location for the actual preview message (made using .preview-message).

Examples

The #action-area-top on this page has been given a border to showcase its position. Notice that it is very thin since it contains nothing.

#action-area-top{    border: 1px solid #F00; }

Try It on the CSS Zone Sandbox!

Base CSS