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 = %PUBURLPATH%/%SYSTEMWEB%/PatternSkinCssCookbookCenterPageBorder/centerpageborder.css
You can write this line in DefaultPreferences, in SitePreferences, in WebPreferences, in your user topic or on a single page.

Add the dynamic link to the logo image to the topic text:
<style type="text/css" media="all">
#patternScreen {
background-image:url("%PUBURLPATH%/%SYSTEMWEB%/PatternSkinCssCookbookCenterPageBorder/gradient_page.gif");
background-repeat:repeat-x;
}
#patternPageShadow {
background-image:url("%PUBURLPATH%/%SYSTEMWEB%/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">
    #patternScreen {
        background-image:url("%ATTACHURLPATH%/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.
ISorted ascending Attachment Action Size Date Who Comment
centerpageborder.csscss centerpageborder.css manage 100 bytes 17 June 2022 ProjectContributor css to frame the page centered on the screen
gradient_page.gifgif gradient_page.gif manage 3 K 17 June 2022 ProjectContributor background image
striped_pageshadow.gifgif striped_pageshadow.gif manage 234 bytes 17 June 2022 ProjectContributor  
Topic revision: r1 - 17 June 2022, ProjectContributor
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback