Style Specific Text Using CSS

Example: Change the style of a particular word or paragraph using CSS that can be used throughout your site.

In HTML:

<span class="styleText">Your Text Here.</span>

In CSS:

.styleText {color:#a23333; font-size:12px; font-weight:bold; text-decoration:underline;}

Hide Journal Excerpt Links

Example: Hide journal excerpt links within entries.

.journal-read-more-tag {display:none;}

Hide Drop-down Folder Icons

Example: Hide the drop-down folder icons within sidebar navigation.

.verticalNavigationBar .folder-closed a.folder-link,
.verticalNavigationBar .folder-open a.folder-link { background-image:none; }

Hide the Link Group Title In Links Page

Example: Hide the link group title from the Links page module so it doesn't display.

#linkGroup123456 .title {display:none;}
#linkGroup123456 li .title {display:block;}

Hide Page Titles

Example: Hide the page title on a specific page.

#modulePage1234567 h2 {

display:none;

}

Hide Bullets Within A List

Example: Hide bullets within all lists.

ul li { list-style-type: none; }

Create Image Borders

Example: Put borders around images using colors and styles of your choice.

Note: You can use dotted, dashed or solid borders and change pixel size and border color to your preference. 

/*Put a border around every image in your site including sidebar images. */

img {border: 5px solid #cccccc;}

/*Put a border around images within the page body content only */

.body img {border: 5px solid #333333;}

/* Put a border around images only on specific pages */

#modulePage1234567 .body img {border: 5px solid #666666;} 

Change the Style of Bullets Within Lists

Example: Change the style of bullets within lists from disc to square.

Note: other possible list style types you can use: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none.

.link-group-list li ul li { list-style-type: square; }

Change Gallery Navigation Scrollbars

Example: Change the default gray scrollbar in Picture gallery thumbnail navigation.

Change the scrollbar color:

#sslightbox_scrollleftimg {

background: #000000;

}

#sslightbox_scrollrightimg {

background: #000000;

}

Use a background image:

#sslightbox_scrollleftimg {
background-color: #ffffff;
background: url(/storage/Left_Scroll.jpg);
background-repeat: no-repeat;
width: 15px;
height: 55px;
}

#sslightbox_scrollrightimg {
background-color: #ffffff;
background: url(/storage/Right_Scroll.jpg);
background-repeat: no-repeat;
width: 15px;
height:55px;
}

Change Section Background Color On Hover

Example: Change the background color of sidebar sections on hover.

.sectionWrapper:hover {background:#eeeeee;}

Style Image Captions On Pages and Journal Posts

Example: Change the font style of captions for images inserted into pages and journal posts. 

.thumbnail-caption {
font-family: Georgia,'Times New Roman',serif;
font-size: 10px;
text-align: center;
color: #000000;
background: #cccccc;
padding: 5px 0;
}

Style Unregistered Comments

Example: Add a generic icon to unregistered comments.

/* UNREGISTERED COMMENTER */

.comment-wrapper.authored-by-none { background: url(/storage/icon-unreg50.png) no-repeat 0 8px; padding: 0 0 0 75px; }

Style Comments By Author

Example: Place an image of Tyler next to his Journal comments.

/* TYLER */

.comment-wrapper.authored-by-tyler { background: url(/storage/layout/icon-tyler50.png) no-repeat 0 8px; padding: 0 0 0 75px; }

Round Single Corners of An Element

Example: Round a single corner of a section.

Note: This modification uses CSS3 and is supported only in Firefox, Safari and Chrome browsers. You will not see CSS3 based modifications in Internet Explorer.

.section {
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}

Round All Corners of An Element

Example: Round all section corners.

Note: This modification uses CSS3 and is supported only in Firefox, Safari and Chrome browsers. You will not see CSS3 based modifications in Internet Explorer.

.section {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

Change the Site Title Link Hover Color

Example: Change the site title link hover to a color of your own choice.

h1 a:hover {color: #000000;}

Add Drop Shadows to Text

Example: Add drop shadows to text — for example, journal entry titles.

Values: x-coordinate of shadow, y-coordinate of shadow, blur radius of shadow, shadow color (#hex)

Note: This modification uses CSS3 and is supported only in Firefox, Safari and Chrome browsers. You will not see CSS3 based modifications in Internet Explorer.

h2.title a:link {
text-shadow:1px 1px 3px #DDDDDD;
}

Add Drop Shadows To Box Elements

Example: Add a drop shadow to columns — for example, the content area of your site.

Values: x-coordinate of shadow, y-coordinate of shadow, blur radius of shadow, shadow color (#hex)

Note: This modification uses CSS3 and is supported only in Firefox, Safari and Chrome browsers. You will not see CSS3 based modifications in Internet Explorer.

#content {
box-shadow: 0px 0px 10px #ccc;
-moz-box-shadow: 0px 0px 10px #ccc;
-webkit-box-shadow: 0px 0px 10px #ccc;
}

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