TWiki/PatternSkinCssCookbookCenterPageBorder.mdwn

   1 # <a name="PatternSkinCssCookbook Recipe: C"></a><a name=" _PatternSkinCssCookbook Recipe:"></a> [[PatternSkinCssCookbook]] Recipe: Center the page with a border
   2
   3 **This recipe shows how to put a border around the page, while centering the page horizontally.** The example on this page uses a gradient image as background - on top of a gray base color. You can choose to set no image of course.
   4
   5 <div> This line loads the extra style definition: <pre>
   6    * Set USERSTYLEURL = %ATTACHURL%/centerpageborder.css
   7 </pre> You can write this line in %SYSTEMWEB%.TWikiPreferences, in [[Main/WebPreferences]], in your user topic or on a single page. </div>
   8
   9 Add the dynamic variable link to the logo image to the topic text:
  10
  11     <style type="text/css" media="all">
  12     #patternScreen {
  13     background-image:url("%ATTACHURLPATH%/gradient_page.gif");
  14     background-repeat:repeat-x;
  15     }
  16     #patternPageShadow {
  17     background-image:url("%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/striped_pageshadow.gif");
  18     }
  19     </style>
  20 <div><img align="top" alt="info" border="0" height="16" src="http://www.dementia.org/twiki//view/Main/WebHome/info.gif" width="16" /> If you don't write this overloading style in a template and use an external <code>.css</code> file, you need to set the image to the absolute url: <pre>
  21 &lt;style type="text/css" media="all"&gt;
  22 #patternScreen {
  23 background-image:url("%ATTACHURLPATH%/gradient_page.gif");
  24 background-repeat:repeat-x;
  25 }
  26 &lt;/style&gt;
  27 </pre> You can always write a <code>&lt;style&gt;</code> in a topic - all current browsers support this - but the page won't validate as valid XHTML. </div>