Create Three Columns On A Page

Example: Create three columns within the body of a journal entry or HTML page.

Note: You can add, edit or omit style declarations to your preference. Column widths including all margins set should be sized to fit within the page body width so that they align correctly.

CSS:

#column1 {color: #000; background: #fff; width: 200px; margin: 20px; padding: 10px; border: 1px solid #ccc; float: left;}

#column2 {color: #000; background: #fff; width: 200px; margin: 20px; padding: 10px; border: 1px solid #ccc; float: left;}

#column3 {color: #000; background: #fff; width: 200px; margin: 20px; padding: 10px; border: 1px solid #ccc; float: left;}

HTML:

<div id="column1"><p>Your content here.</p></div>

<div id="column2"><p>Your content here.</p></div>

<div id="column3"><p>Your content here.</p></div>

Create A Full Height Window Body Border

Example: Stretch the window body border to the full height of the page. 

Note: This modification stretches the window body border you set within the fonts, colors and styles editor to full page height.

body { height: auto; }

Center the Window Body Background Image

Example: Set the window body background image so that it centers in the browser window.

Note: When using this modification do not include the background image within the window body border element of the fonts, colors and styles editor.

body {
background-image: url(/storage/YOUR_IMAGE.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
}

Create A Full Width Layout

Example: You want the width of your pages to span the width of the browser.

Note: Some elements for example: #pageHeaderWrapper, #pageBodyWrapper and #pageFooterWrapper — do not exist by default within the native style editor. These elements can still be customized either by adding them to the editor manually within advanced settings, or by writing Custom CSS to style them. Both of these methods are overviewed in the CSS guide here.

#canvasWrapper, #canvas, #pageHeaderWrapper, #pageBodyWrapper, #pageFooterWrapper {
    width:100%;
    min-width:$CanvasWidth$;
    margin:0;
    padding:0;
    overflow:visible;
}

#pageBodyWrapper { float:left; }

#pageHeader, #pageBody, #pageFooter {
    width:$CanvasWidth$;
    margin:0 auto;
}

Position A Sidebar Column

Example: Move an entire sidebar column farther down the page.

#sidebar1Wrapper {margin-top: 50px;}

/* Use #sidebar1Wrapper, #sidebar2Wrapper or both. To move a column farther up a page instead, use a negative pixel amount in your code */

Remove Background Images In Flont Tempate

Example: Remove the white corner background images above page content and sidebar sections within Flont template.

Delete the following 2 lines of code from your Custom CSS area:

#contentWrapper { background: transparent url(/layout/images/cornerR.png) no-repeat right top; padding-top: 30px; }

.verticalNavigationBar .sectionWrapper { background: transparent url(/layout/images/cornerL.png) no-repeat top left; padding-top: 30px; }

Remove the Link "My Response Is On My Own Website" From Journal Entries

Example: Prevent the link "my response is on my own website" from displaying in journal entries.

#modulePage1234567 .caption-text a {
display:none;
}