Style Discussion Module Posts By User

Example: Style owner / participant posts in discussions module threads.

Note: This modification styles posts by user name within the actual thread only.  Replace "username" in the CSS below with the exact user login name of your member (case sensitive).

.authored-by-username .comment { background-color: #D5D5D5; border: 1px solid #D5D5D5; }
/*Styles background color / borders for specific user.*/

.authored-by-username .comment, .section { -webkit-border-radius: 8px; -moz-border-radius: 8px; }
/*Adds rounded corners to the post (optional)*/

Add A Background Image To An Element

Example: Add a background image to a specific sidebar.

#sidebar1Wrapper { background-image: url(/storage/pattern.jpg); }

Horizontal Text Navigation

Example: Create a second level of horizontal text navigation at the top of your page.

In CSS:

#topNav { height: 30px; text-align: right; margin: 0px -20px; }
/*Negative margin used here to position and override default style setting*/

#topNav a { border-right: 1px solid #ffffff; color: #ffffff; font-family: Arial; font-size: 10px; padding: 0 15px; text-decoration: none;  }
/*Sets font, border, padding style around link text*/

#topNav a:last-child { border-right: none; }
/*Hides last border right*/

In HTML:

Note: Uses Pre-HTML Injection Point. Code injection requires Advanced Package or higher

<div id="topNav">
<a href="yourdomain.com/page">Home</a>
<a href="yourdomain.com/page">About</a>
<a href="yourdomain.com/page">Contact</a>
</div>

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;
}