WebSite:D 2 CSS Tips
CSS (Cascading Style Sheets) is a style sheet language used to describe the look and formatting of a document (your website). The additional CSS can be used to override the CSS produces by the website to make additional changes.
These are codes you can add to the Additional CSS section when editing your theme (View theme in the admin > Additional CSS). There are many sections you will see below.
Text between /* and */ is a comment and describes what the code does.
When you see a #, that is the beginning of a color code (hexadecimal). Example: #FFFFFF is white, #000000 is black. You can change those color codes accordingly.
When you see a px, that indicates a size in pixels. Example: 20px is 20 pixels.
HEADER
/* MAKE THE HEADER BACKGROUND TRANSPARENT */
#headerContainer {
background: transparent;
}
/* ALIGNS HEADER IMAGE TO THE RIGHT */
#header img {
text-align: right;
float: right;
}
/* CENTERS TEXT IN THE HEADER */
#header {
text-align: center;
}
/* CENTERS IMAGES IN THE HEADER */
#header img {
margin: auto;
}
TOP MAIN MENU
/* CHANGE THE FONT SIZE IN THE MAIN MENU */
#topMainMenu a {
font-size: 17px;
}
/* CHANGE THE LINE HEIGHT OF THE MAIN MENU */
#topMainMenu {
line-height: 35px;
}
/* ADD MORE SPACING BETWEEN MENU LINKS TO THE RIGHT*/
#mainmenu li {
margin: 0 20px 0 0;
}
/* ADD MORE SPACING BETWEEN MENU LINKS TO THE LEFT*/
#mainmenu li {
margin: 0 20px 0 0;
}
/* HAVE MENU BACKGROUND SPAN 100% ACROSS THE PAGE BUT KEEP LINKS WITHIN THE PAGE SIZE. */
#topMainMenuContainer {
width: 100%;
}
#topMainMenu{
width: 1024px;
margin: auto;
}
/* ADD A SHADOW TO THE MAIN MENU */
#topMainMenuContainer {
-moz-box-shadow: 0px 1px 10px #999999;
-webkit-box-shadow: 0px 1px 10px #999999;
-goog-ms-box-shadow: 0px 1px 10px #999999;
box-shadow: 0px 1px 10px #999999;
}
/* ADD A TEXT SHADOW TO THE LINKS */
#topMainMenu a {
text-shadow:1px 1px 1px #999999;
}
/* ADD A DROP SHADOW ON THE DROPDOWN MENU */
#mainmenu div {
-moz-box-shadow: 3px 6px 10px #999999;
-webkit-box-shadow: 3px 6px 10px #999999;
-goog-ms-box-shadow: 3px 6px 10px #999999;
box-shadow: 3px 6px 10px #999999;
}
/* ADJUST THE WIDTH OF THE PHOTO ALBUM DROPDOWN MENU */
#mainmenu .photos {
width: 300px;
}
/* ALIGN MENU ITEMS RIGHT TO LEFT */
#mainmenu li {
float: right;
}
/* TRANSPARENT BACKGROUND FOR MENU */
#topMainMenuContainer {
background: transparent;
border: 0;
}
/* MAKE ALL MENU ITEMS UPPERCASE */
#mainmenu li a {
text-transform:uppercase;
}
/* ADD SOME TRANSPARENCY TO THE MENU */
#topMainMenuContainer {
/* for IE */
filter:alpha(opacity=80);
/* CSS3 standard */
opacity:0.8;
}
/* ADDS A SHADOW AROUND THE TEXT IN THE MAIN MENU */
#topMainMenu a {
text-shadow:1px 1px 1px #FFFFFF;
}
/* ADD A BORDER TO THE LEFT AND RIGHT OF THE MAIN MENU */
#topMainMenuContainer {
border-left: solid 1px #B8969E;
border-right: solid 1px #B8969E;
}
PAGE BODY
/* REMOVE THE BORDER AROUND THE MAIN CONTENT PAGE BODY */
#main_container {
border: 0;
}
/* MAKE THE PAGE BODY TRANSPARENT */
#main_container {
background: transparent;
}
/* MAKE THE BLOG PREVIEWS BACKGROUND TRANSPARENT AND NO BORDERS */
.subPage, .blogPreview {
background: transparent;
border: 0;
}
/* MAKE THE HOME PAGE RIGHT COLUMN BACKGROUND TRANSPARENT AND NO BORDERS */
.homePageRightColumn {
background: transparent;
border: 0;
}
/* MAKE THE HOME PAGE PHOTO ALBUM LISTING BACKGROUND TRANSPARENT AND NO BORDERS */
.homePagePhotoAlbums {
background: transparent;
border: 0;
}
/* ADDS A BORDER BETWEEN PAGE CONTENT AND SIDE MENU */
#pageContentContainer, .homePageLeftColumn {
border-right: dotted 1px #c2c2c2;
}
/* Text shadow on h1, h2, h3 tags (titles and such) */
h1, h2, h3 {
text-shadow:1px 1px 1px #000000;
}
/* ADDS A SHADOW AROUND PAGE */
#page-wrapper {
margin: 16px auto 0 auto;
width: 1024px;
-moz-box-shadow: 1px 1px 10px #424242;
-webkit-box-shadow:1px 1px 10px #424242;
-goog-ms-box-shadow:1px 1px 10px #424242;
box-shadow: 1px 1px 10px #424242;
}
BLOG STUFF
/* DON'T SHOW THE ENTRY TIME */
.theTime { display: none; }
/* STYLE THE VIEW FULL POST LINK ON BLOG PREVIEWS*/
.viewFullPost a {
border: solid 1px #80a48f;
background: #9cbfab;
color:#FFFFFF;
}
/* ADDS A SHADOW AROUND THE VIEW FULL POST LINK ON BLOG PREVIEWS*/
.viewFullPost a {
-moz-box-shadow: 0px 1px 10px #121212;
-webkit-box-shadow: 0px 1px 10px #121212;
-goog-ms-box-shadow: 0px 1px 10px #121212;
box-shadow: 0px 1px 10px #121212;
}
/* STYLE THE OLDER / NEW BLOG LINK SECTIONS UNDER BLOG POSTS */
#blogNextPrev .older, #blogNextPrev .newer{
border: solid 1px #c2c2c2;
background:#e2e2e2;
color: #999999;
}
/* ADDS A BORDER AROUND THE BLOG PHOTOS */
.blogPhoto .photo{
border: solid 20px #c2c2c2!important;
}
/* ADDS A SHADOW ON THE BLOG PHOTOS */
.blogPhoto .photo{
-moz-box-shadow: 3px 6px 10px #999999;
-webkit-box-shadow: 3px 6px 10px #999999;
-goog-ms-box-shadow: 3px 6px 10px #999999;
box-shadow: 3px 6px 10px #999999;
}
/* MAKES BLOG PREVIEW BACKGROUND TRANSPARENT */
.blogPreview {
background: transparent;
border: 0;
}
/* ADDS SPACING AND BORDER ON BLOG PREVIEW LISTINGS */
.blogPreview {
border-bottom: dotted 1px #c2c2c2;
margin-bottom: 20px;
padding: 6px 6px 10px 6px;
width: 92%;
}
/* ADDS A SHADOW UNDER BLOG PREVIEW LISTINGS */
.blogPreview {
-moz-box-shadow: 0px 10px 10px #999999;
-webkit-box-shadow:0px 10px 10px #999999;
-goog-ms-box-shadow:0px 10px 10px #999999;
box-shadow: 0px 10px 10px #999999;
}
/* ADDS A GLOW AROUND BLOG PREVIEW LISTINGS */
.blogPreview {
-moz-box-shadow: 1px 1px 10px #000102;
-webkit-box-shadow:1px 1px 10px #000102;
-goog-ms-box-shadow:1px 1px 10px #000102;
box-shadow: 1px 1px 10px #000102;
}
/* ADDS ROUNDED CORNERS TO BLOG PREVIEWS */
.blogPreview {
-moz-border-radius: 8px;
border-radius: 8px;
}
SIDE MENU
/* MAKE ALL SIDE MENU BACKGROUNDS TRANSPARENT */
#linksMenuContainer , .blogSideMenu , #linksMenu, #linksMenu .menuHeader, #linksMenu .sideMenuItem, #photoCartLogin{
background: transparent;
border: 0;
}
/* ADDS MORE SPACING BETWEEN RECENT POSTS IN BLOG MENU AND ALSO ADDS A BORDER BETWEEN POSTS */
.blogSideMenu {
border-bottom: dotted 1px #c2c2c2;
margin-bottom: 20px;
padding-bottom:10px;
}
/* ADDS BORDER BETWEEN SIDE MENU AND PAGE CONTENT */
#pageContentContainer, .homePageLeftColumn {
border-right: solid 1px #e2e2e2;
}
/* ADD A SHADOW BETWEEN PAGE CONTENT AND SIDE MENU */
#pageContentContainer, .homePageLeftColumn{
border-right: dotted 1px #121212;
padding: 6px;
-moz-box-shadow: 10px 0px 10px #121212;
-webkit-box-shadow: 10px 0px 10px #121212;
-goog-ms-box-shadow: 10px 0px 10px #121212;
box-shadow: 10px 0px 10px #121212;
}
/* MAKES BLOG SIDE MENU POSTS ONLY SHOW MINI THUMBNAILS */
.blogSideMenu {
float: left;
width: auto;
}
.blogSideMenu .title , .blogSideMenu .date, .blogSideMenu .snippet {
display: none;
}
.blogSideMenu .thumbnail {
margin: 0;
}
blogSideMenu {
margin: 4px;
padding: 4px;
}
HOME PAGE
/* CHANGE FONT SIDE OF HOME PAGE LABELS */
#homePageLabels {
font-size: 17px;
}
/* MAKE HOME PAGE LABELS ITALIC */
#homePageLabels {
font-style:italic;
}
/* MAKE THE HOME PAGE RIGHT COLUMN BACKGROUND TRANSPARENT AND NO BORDERS */
.homePageRightColumn {
background: transparent;
border: 0;
}
/* MAKE THE HOME PAGE PHOTO ALBUM & PHOTO CART LOGIN BACKGROUND TRANSPARENT AND NO BORDERS */
.homePagePhotoAlbums , #photoCartLogin {
background: transparent;
border: 0;
}
SPECIAL STUFF
/* THE FOLLOWING MAKES THE PAGE SLIGHTLY LARGER TO ADD PADDING AND MOVE
THE MENU UP IN THE HEADER AREA */
#main_container{
margin-top: 5px;
border-top: solid 1px #e2e2e2;
}
#headerContainer {
margin-bottom: -30px;
padding: 10px;
display: block;
}
#page-wrapper {
margin: 16px auto 0 auto;
width: 1050px;
background: #FFFFFF;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 1px 1px 10px #999999;
-webkit-box-shadow:1px 1px 10px #999999;
-goog-ms-box-shadow:1px 1px 10px #999999;
box-shadow: 1px 1px 10px #999999;
}
PHOTO ALBUMS
/* CHANGES THE BACKGROUND COLOR THAT FADES IN BEFORE THE PHOTO VIEW */
#photoShowBGSolid {
background: #FFFFFF !important;
}
FONTS
/* IMPORTS FONTS TO USE */
@font-face {
font-family: "Dancing Script";
src: url("/ms_themes/fonts/DancingScript.eot");
}
@font-face {
font-family: "Dancing Script";
src: url("/ms_themes/fonts/DancingScript.ttf");
}
/* SETS THE FONT FOR PAGE TITLES - H1, H2 */
h1,h2 {
font-family: 'Dancing Script', arial;
}
/* SETS THE SIZE FOR PAGE TITLES - H1, H2 */
h1, h1 a { font-size: 30px; }
h2, h2 a { font-size: 21px; }
