data/TWiki/PatternSkinCssCookbookCenterPageBorder.txt,v
author Colas Nahaboo <colas@nahaboo.net>
Sat, 26 Jan 2008 15:50:53 +0100
changeset 0 414e01d06fd5
permissions -rw-r--r--
RELEASE 4.2.0 freetown
     1 head	1.3;
     2 access;
     3 symbols;
     4 locks; strict;
     5 comment	@# @;
     6 
     7 
     8 1.3
     9 date	2008.01.22.03.21.35;	author TWikiContributor;	state Exp;
    10 branches;
    11 next	1.2;
    12 
    13 1.2
    14 date	2006.04.01.05.55.30;	author TWikiContributor;	state Exp;
    15 branches;
    16 next	1.1;
    17 
    18 1.1
    19 date	2006.02.01.12.01.22;	author TWikiContributor;	state Exp;
    20 branches;
    21 next	;
    22 
    23 
    24 desc
    25 @new-topic
    26 @
    27 
    28 
    29 1.3
    30 log
    31 @buildrelease
    32 @
    33 text
    34 @%META:TOPICINFO{author="TWikiContributor" date="1141771402" format="1.1" version="3"}%
    35 
    36 ---+!! PatternSkinCssCookbook Recipe: Center the page with a border
    37 
    38 *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.
    39 
    40 <div class="twikiHelp">
    41 This line loads the extra style definition:
    42 <verbatim>
    43    * Set USERSTYLEURL = %ATTACHURL%/centerpageborder.css
    44 </verbatim>
    45 You can write this line in %SYSTEMWEB%.TWikiPreferences, in WebPreferences, in your user topic or on a single page.
    46 </div>
    47 
    48 Add the dynamic variable link to the logo image to the topic text:
    49 <verbatim>
    50 <style type="text/css" media="all">
    51 #patternScreen {
    52 background-image:url("%ATTACHURLPATH%/gradient_page.gif");
    53 background-repeat:repeat-x;
    54 }
    55 #patternPageShadow {
    56 background-image:url("%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/striped_pageshadow.gif");
    57 }
    58 </style>
    59 </verbatim>
    60 <div class="twikiHelp">
    61 %ICON{info}% If you don't write this overloading style in a template and use an external =.css= file, you need to set the image to the absolute url:
    62 <pre>
    63 &lt;style type="text/css" media="all">
    64 #patternScreen {
    65 background-image:url("%<nop>ATTACHURLPATH%/gradient_page.gif");
    66 background-repeat:repeat-x;
    67 }
    68 &lt;/style>
    69 </pre>
    70 You can always write a =&lt;style>= in a topic - all current browsers support this - but the page won't validate as valid XHTML.
    71 </div>
    72 
    73 <style type="text/css" media="all">
    74 #patternScreen {
    75 background-image:url("%ATTACHURLPATH%/gradient_page.gif");
    76 background-repeat:repeat-x;
    77 }
    78 #patternPageShadow {
    79 background-image:url("%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/striped_pageshadow.gif");
    80 }</style>
    81 
    82 %META:FILEATTACHMENT{name="centerpageborder.css" attr="" autoattached="1" comment="css to frame the page centered on the screen" date="1129323328" path="centerpage.css" size="259" user="TWikiContributor" version=""}%
    83 %META:FILEATTACHMENT{name="gradient_page.gif" attachment="gradient_page.gif" attr="" comment="background image" date="1141771401" path="gradient_page.gif" size="3854" stream="gradient_page.gif" user="TWikiContributor" version="1"}%
    84 @
    85 
    86 
    87 1.2
    88 log
    89 @buildrelease
    90 @
    91 text
    92 @d1 1
    93 a1 1
    94 %META:TOPICINFO{author="TWikiContributor" date="1141771402" format="1.1" version="2"}%
    95 d12 1
    96 a12 1
    97 You can write this line in %TWIKIWEB%.TWikiPreferences, in WebPreferences, in your user topic or on a single page.
    98 d23 1
    99 a23 1
   100 background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/striped_pageshadow.gif");
   101 d46 1
   102 a46 1
   103 background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/striped_pageshadow.gif");
   104 d49 2
   105 a50 2
   106 %META:FILEATTACHMENT{name="centerpageborder.css" attr="" autoattached="1" comment="css to frame the page centered on the screen" date="1129323328" path="centerpage.css" size="259" user="ArthurClemens" version=""}%
   107 %META:FILEATTACHMENT{name="gradient_page.gif" attachment="gradient_page.gif" attr="" comment="background image" date="1141771401" path="gradient_page.gif" size="3854" stream="gradient_page.gif" user="Main.ArthurClemens" version="1"}%
   108 @
   109 
   110 
   111 1.1
   112 log
   113 @buildrelease
   114 @
   115 text
   116 @d1 1
   117 a1 1
   118 %META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="1"}%
   119 d10 1
   120 a10 1
   121 	* Set USERSTYLEURL = %ATTACHURL%/centerpageborder.css
   122 d18 2
   123 a19 2
   124 html body {
   125 background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/gradient_page.gif");
   126 d31 2
   127 a32 2
   128 html body {
   129 background-image:url("<nop>%PUBURLPATH%/<nop>%TWIKIWEB%/PatternSkin/gradient_page.gif");
   130 d41 2
   131 a42 2
   132 html body {
   133 background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/gradient_page.gif");
   134 d50 1
   135 @