data/TWiki/PatternSkinCssCookbookCenterPageBorder.txt,v
changeset 0 414e01d06fd5
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/data/TWiki/PatternSkinCssCookbookCenterPageBorder.txt,v	Sat Jan 26 15:50:53 2008 +0100
     1.3 @@ -0,0 +1,135 @@
     1.4 +head	1.3;
     1.5 +access;
     1.6 +symbols;
     1.7 +locks; strict;
     1.8 +comment	@# @;
     1.9 +
    1.10 +
    1.11 +1.3
    1.12 +date	2008.01.22.03.21.35;	author TWikiContributor;	state Exp;
    1.13 +branches;
    1.14 +next	1.2;
    1.15 +
    1.16 +1.2
    1.17 +date	2006.04.01.05.55.30;	author TWikiContributor;	state Exp;
    1.18 +branches;
    1.19 +next	1.1;
    1.20 +
    1.21 +1.1
    1.22 +date	2006.02.01.12.01.22;	author TWikiContributor;	state Exp;
    1.23 +branches;
    1.24 +next	;
    1.25 +
    1.26 +
    1.27 +desc
    1.28 +@new-topic
    1.29 +@
    1.30 +
    1.31 +
    1.32 +1.3
    1.33 +log
    1.34 +@buildrelease
    1.35 +@
    1.36 +text
    1.37 +@%META:TOPICINFO{author="TWikiContributor" date="1141771402" format="1.1" version="3"}%
    1.38 +
    1.39 +---+!! PatternSkinCssCookbook Recipe: Center the page with a border
    1.40 +
    1.41 +*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.
    1.42 +
    1.43 +<div class="twikiHelp">
    1.44 +This line loads the extra style definition:
    1.45 +<verbatim>
    1.46 +   * Set USERSTYLEURL = %ATTACHURL%/centerpageborder.css
    1.47 +</verbatim>
    1.48 +You can write this line in %SYSTEMWEB%.TWikiPreferences, in WebPreferences, in your user topic or on a single page.
    1.49 +</div>
    1.50 +
    1.51 +Add the dynamic variable link to the logo image to the topic text:
    1.52 +<verbatim>
    1.53 +<style type="text/css" media="all">
    1.54 +#patternScreen {
    1.55 +background-image:url("%ATTACHURLPATH%/gradient_page.gif");
    1.56 +background-repeat:repeat-x;
    1.57 +}
    1.58 +#patternPageShadow {
    1.59 +background-image:url("%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/striped_pageshadow.gif");
    1.60 +}
    1.61 +</style>
    1.62 +</verbatim>
    1.63 +<div class="twikiHelp">
    1.64 +%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:
    1.65 +<pre>
    1.66 +&lt;style type="text/css" media="all">
    1.67 +#patternScreen {
    1.68 +background-image:url("%<nop>ATTACHURLPATH%/gradient_page.gif");
    1.69 +background-repeat:repeat-x;
    1.70 +}
    1.71 +&lt;/style>
    1.72 +</pre>
    1.73 +You can always write a =&lt;style>= in a topic - all current browsers support this - but the page won't validate as valid XHTML.
    1.74 +</div>
    1.75 +
    1.76 +<style type="text/css" media="all">
    1.77 +#patternScreen {
    1.78 +background-image:url("%ATTACHURLPATH%/gradient_page.gif");
    1.79 +background-repeat:repeat-x;
    1.80 +}
    1.81 +#patternPageShadow {
    1.82 +background-image:url("%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/striped_pageshadow.gif");
    1.83 +}</style>
    1.84 +
    1.85 +%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=""}%
    1.86 +%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"}%
    1.87 +@
    1.88 +
    1.89 +
    1.90 +1.2
    1.91 +log
    1.92 +@buildrelease
    1.93 +@
    1.94 +text
    1.95 +@d1 1
    1.96 +a1 1
    1.97 +%META:TOPICINFO{author="TWikiContributor" date="1141771402" format="1.1" version="2"}%
    1.98 +d12 1
    1.99 +a12 1
   1.100 +You can write this line in %TWIKIWEB%.TWikiPreferences, in WebPreferences, in your user topic or on a single page.
   1.101 +d23 1
   1.102 +a23 1
   1.103 +background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/striped_pageshadow.gif");
   1.104 +d46 1
   1.105 +a46 1
   1.106 +background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/striped_pageshadow.gif");
   1.107 +d49 2
   1.108 +a50 2
   1.109 +%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=""}%
   1.110 +%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"}%
   1.111 +@
   1.112 +
   1.113 +
   1.114 +1.1
   1.115 +log
   1.116 +@buildrelease
   1.117 +@
   1.118 +text
   1.119 +@d1 1
   1.120 +a1 1
   1.121 +%META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="1"}%
   1.122 +d10 1
   1.123 +a10 1
   1.124 +	* Set USERSTYLEURL = %ATTACHURL%/centerpageborder.css
   1.125 +d18 2
   1.126 +a19 2
   1.127 +html body {
   1.128 +background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/gradient_page.gif");
   1.129 +d31 2
   1.130 +a32 2
   1.131 +html body {
   1.132 +background-image:url("<nop>%PUBURLPATH%/<nop>%TWIKIWEB%/PatternSkin/gradient_page.gif");
   1.133 +d41 2
   1.134 +a42 2
   1.135 +html body {
   1.136 +background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/gradient_page.gif");
   1.137 +d50 1
   1.138 +@