51 lines
2.1 KiB
Plaintext
51 lines
2.1 KiB
Plaintext
|
%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"}%
|