A div block at the top of the main content that displays a preview box when Preview is clicked in the editing panel.


Image Unavailable
Click to view in closer detail!


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).


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

Not defined in Base CSS.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License