Difference: PatternSkinCssCookbookCenterPageBorder (1 vs. 2)

Revision 207 Mar 2006 - Main.TWikiContributor

Line: 1 to 1
 

PatternSkinCssCookbook Recipe: Center the page with a border

Line: 15 to 15
 Add the dynamic variable link to the logo image to the topic text:
<style type="text/css" media="all">
Changed:
<
<
html body { background-image:url("/pub/TWiki/PatternSkin/gradient_page.gif");
>
>
#patternScreen { background-image:url("/pub/TWiki/PatternSkinCssCookbookCenterPageBorder/gradient_page.gif");
 background-repeat:repeat-x; } #patternPageShadow {
Line: 28 to 28
 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:
<style type="text/css" media="all">

Changed:
<
<
html body { background-image:url("/pub/TWiki/PatternSkin/gradient_page.gif");
>
>
#patternScreen { background-image:url("%ATTACHURLPATH%/gradient_page.gif");
 background-repeat:repeat-x; } </style>
Line: 38 to 38
 

META FILEATTACHMENT attr="" autoattached="1" comment="css to frame the page centered on the screen" date="1129323328" name="centerpageborder.css" path="centerpage.css" size="259" user="ArthurClemens" version=""
Added:
>
>
META FILEATTACHMENT attachment="gradient_page.gif" attr="" comment="background image" date="1141771401" name="gradient_page.gif" path="gradient_page.gif" size="3854" stream="gradient_page.gif" user="Main.ArthurClemens" version="1"

Revision 114 Oct 2005 - Main.TWikiContributor

Line: 1 to 1
Added:
>
>

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.

This line loads the extra style definition:
   * Set USERSTYLEURL = %ATTACHURL%/centerpageborder.css
You can write this line in TWikiPreferences, in WebPreferences, in your user topic or on a single page.

Add the dynamic variable link to the logo image to the topic text:

<style type="text/css" media="all">
html body {
background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/gradient_page.gif");
background-repeat:repeat-x;
}
#patternPageShadow {
background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/striped_pageshadow.gif");
}
</style>
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:
<style type="text/css" media="all">
html body {
background-image:url("/pub/TWiki/PatternSkin/gradient_page.gif");
background-repeat:repeat-x;
}
</style>
You can always write a <style> in a topic - all current browsers support this - but the page won't validate as valid XHTML.

META FILEATTACHMENT attr="" autoattached="1" comment="css to frame the page centered on the screen" date="1129323328" name="centerpageborder.css" path="centerpage.css" size="259" user="ArthurClemens" version=""
 
This website uses only proprietary and third party technical cookies to ensure the correct operation of its web pages and to improve its services.
By continuing to navigate the website you consent to the use of cookies. To learn more, or deny your consent, consult the privacy policy
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.