107 lines
2.9 KiB
Plaintext
107 lines
2.9 KiB
Plaintext
|
head 1.2;
|
||
|
|
access;
|
||
|
|
symbols;
|
||
|
|
locks; strict;
|
||
|
|
comment @# @;
|
||
|
|
|
||
|
|
|
||
|
|
1.2
|
||
|
|
date 2006.04.01.05.55.30; author TWikiContributor; state Exp;
|
||
|
|
branches;
|
||
|
|
next 1.1;
|
||
|
|
|
||
|
|
1.1
|
||
|
|
date 2006.02.01.12.01.22; author TWikiContributor; state Exp;
|
||
|
|
branches;
|
||
|
|
next ;
|
||
|
|
|
||
|
|
|
||
|
|
desc
|
||
|
|
@new-topic
|
||
|
|
@
|
||
|
|
|
||
|
|
|
||
|
|
1.2
|
||
|
|
log
|
||
|
|
@buildrelease
|
||
|
|
@
|
||
|
|
text
|
||
|
|
@%META:TOPICINFO{author="TWikiContributor" date="1141771402" format="1.1" version="2"}%
|
||
|
|
|
||
|
|
---+!! PatternSkinCssCookbook Recipe: Center the page with a border
|
||
|
|
|
||
|
|
*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.
|
||
|
|
|
||
|
|
<div class="twikiHelp">
|
||
|
|
This line loads the extra style definition:
|
||
|
|
<verbatim>
|
||
|
|
* Set USERSTYLEURL = %ATTACHURL%/centerpageborder.css
|
||
|
|
</verbatim>
|
||
|
|
You can write this line in %TWIKIWEB%.TWikiPreferences, in WebPreferences, in your user topic or on a single page.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
Add the dynamic variable link to the logo image to the topic text:
|
||
|
|
<verbatim>
|
||
|
|
<style type="text/css" media="all">
|
||
|
|
#patternScreen {
|
||
|
|
background-image:url("%ATTACHURLPATH%/gradient_page.gif");
|
||
|
|
background-repeat:repeat-x;
|
||
|
|
}
|
||
|
|
#patternPageShadow {
|
||
|
|
background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/striped_pageshadow.gif");
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</verbatim>
|
||
|
|
<div class="twikiHelp">
|
||
|
|
%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:
|
||
|
|
<pre>
|
||
|
|
<style type="text/css" media="all">
|
||
|
|
#patternScreen {
|
||
|
|
background-image:url("%<nop>ATTACHURLPATH%/gradient_page.gif");
|
||
|
|
background-repeat:repeat-x;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</pre>
|
||
|
|
You can always write a =<style>= in a topic - all current browsers support this - but the page won't validate as valid XHTML.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style type="text/css" media="all">
|
||
|
|
#patternScreen {
|
||
|
|
background-image:url("%ATTACHURLPATH%/gradient_page.gif");
|
||
|
|
background-repeat:repeat-x;
|
||
|
|
}
|
||
|
|
#patternPageShadow {
|
||
|
|
background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/striped_pageshadow.gif");
|
||
|
|
}</style>
|
||
|
|
|
||
|
|
%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=""}%
|
||
|
|
%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.1
|
||
|
|
log
|
||
|
|
@buildrelease
|
||
|
|
@
|
||
|
|
text
|
||
|
|
@d1 1
|
||
|
|
a1 1
|
||
|
|
%META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="1"}%
|
||
|
|
d10 1
|
||
|
|
a10 1
|
||
|
|
* Set USERSTYLEURL = %ATTACHURL%/centerpageborder.css
|
||
|
|
d18 2
|
||
|
|
a19 2
|
||
|
|
html body {
|
||
|
|
background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/gradient_page.gif");
|
||
|
|
d31 2
|
||
|
|
a32 2
|
||
|
|
html body {
|
||
|
|
background-image:url("<nop>%PUBURLPATH%/<nop>%TWIKIWEB%/PatternSkin/gradient_page.gif");
|
||
|
|
d41 2
|
||
|
|
a42 2
|
||
|
|
html body {
|
||
|
|
background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/gradient_page.gif");
|
||
|
|
d50 1
|
||
|
|
@
|