9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

How to create a left and right background image on a WordPress blog?

by taskemann
7 replies
  • WEB DESIGN
    • |
Ok, this is the case. I want to have one left and one right background image on my WordPress blog: Ninja Worm - Where You Find The Best Flash Games!

I want it to be like the background images on this site (not the same images, but one left and one right one): Flash Games - Addicting Games - Free Games

I don't want the images to repeat, just one of each on each side and hyperlink them.


I know I have to edit the blogs CSS to do this, but I don't know exactly how. So if you have knowledge about this, please help me.

Here is the CSS code:

body {
margin: 0 auto;
padding: 0px 0px 20px 0px;
background: url('http://www.game-clicks.com/takeover/images/2-left.jpg');
font-family: Century gothic, Arial,Tahoma,sans-serif;
color: #161514;
font-size: 13px;
}

img { border: 0; margin: 0 0; }
a { color: #6F615A; text-decoration: none; }
a:hover { color: #d53030; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0px 0px; padding: 0px 0px; }
blockquote { padding-left: 10px; color: #31333F; font-style: normal; border-left: 2px solid #07A0E3; }

.clear { clear: both; }

img.centered { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; padding: 0px; }
img.alignnone { padding: 5px 5px; margin: 0px 0px 10px 0px; display: inline; background: #fff; border: 1px solid #DDDDDD; }
img.alignright { padding: 5px 5px; margin: 0px 5px 10px 10px; display: inline; background: #fff; border: 1px solid #DDDDDD; }
img.alignleft { padding: 5px 5px; margin: 0px 10px 10px 5px; display: inline; background: #fff; border: 1px solid #DDDDDD; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; }
.alignright { float: right; margin: 0px 0px 10px 10px; }
.alignleft { float: left; margin: 0px 10px 10px 0px; }

.wp-caption { border: 1px solid #DDDDDD; text-align: center; background-color: #ffffff; padding: 4px 0px 5px 0px; margin: 5px 5px; }
.wp-caption img { margin: 0px 0px 5px 0px; padding: 0px; border: 0px; }
.wp-caption p.wp-caption-text { margin: 0px; padding: 0px 0px 0px 0px; font-size: 11px; font-weight: normal; line-height: 12px; }

#wrapper { width: 1000px; margin: 0 auto; background: #F4F4F4; }
#fgpage { padding: 0px; background: #dfe3e6; background-repeat: no-repeat; }

.topad{ height: 97px; text-align: center; margin-bottom: 0px; background: #CC0000; padding-top: 7px; }

#top {
height: 118px;
margin: auto;
background-color: #f4f4f4;
width: 1000px;
}

.blogname {
width: 462px;
font-family: Georgia ,Century gothic,Verdana,Tahoma,sans-serif;
margin: 10px 0 0 0px;
float: left;
background-repeat: no-repeat;
}

.blogname h1 {
font-size: 30px;
padding: 0 0 0px 0;
font-weight: normal;
color: #cacccd;
text-align: left;
margin: 17px 0 0 25px;
}

.blogname h1 a:link, .blogname h1 a:visited {
color: #cacccd;
display: block;
}

.blogname h1 a:hover {
color: #eee;
}

.blogname h2 {
margin: 2px 0px 0px 30px;
font-size: 12px;
font-weight: normal;
color: #343434;
text-align: left;
text-transform: uppercase;
}

#headbanner {
width: 468px;
height: 60px;
float: right;
border: 0px solid black;
margin-top: 15px;
margin-right: 10px;
}

#rss {
height: 30px;
width: 485px;
float: right;
border: 0px solid black;
margin-right: 10px;
margin-top: 5px;
}

#subscribe_email_btn {
width: 50px;
height: 21px;
border: none;
background: url(images/go_dark_grey.png) no-repeat;
cursor: pointer;
margin-top: 6px;
margin-left: 7px;
}


#search_form {
float: left;
display: block;
margin-left: 10px;
}

#s {
background: none;
border: 1px solid #CCCCCC;
float: left;
margin: 0px 0px 0px 7px;
padding: 2px 3px 0px 30px;
width: 182px;
height: 18px;
outline: 0;
color: #000000;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 12px;
background-image: url(images/search_icon.png);
background-repeat: no-repeat;
background-position: 5px 1px;
}

#btn_search {
width: 50px;
height: 21px;
border: none;
background: url(images/go_dark_grey.png) no-repeat;
cursor: pointer;
margin-left: 7px;
}

#menu {
height: 20px;
display: block;
padding: 0px 0 0px 0px;
font: 12px Tahoma,Century gothic,verdana, Arial, sans-serif;
font-weight: normal;
text-transform: uppercase;
}

#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
height: 20px;
}

#menu ul li {
float: left;
margin: 0px 0px ;
padding: 0px 0px;
line-height: 50px;
}

#menu ul li a {
color: #000000;
display: block;
font-weight: normal;
padding: 0px 10px;
}

#menu ul li a:hover,#menu.current_page_item a {
color: #000000;
display: block;
text-decoration: none;
}

#loginbox {
margin: 0px;
padding-left: 10px;
width: 990px;
background: #CC0000;
color: #FFFFFF;
height: 33px;
line-height: 33px;
text-align: center;
}

#loginbox a {
color: #FFFFFF;
font-weight: bold;
}

#loginbox a:hover {
color: #FFF;
font-weight: bold;
text-decoration: underline;
}

#catcontainer {
display: block;
padding: 0px;
font: 12px tahoma,Century gothic,verdana, Arial, sans-serif;
font-weight: normal;
text-transform: uppercase;
background: #CD0000;
}

#catmenu {
margin: 0px;
padding: 0px;
width: 1000px;
background: #CC0000;
height: 33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #FFFFFF;
display: block;
margin: 0px;
padding: 10px 10px 9px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background: #fff ;
color: #495D5C;
margin: 0px;
padding: 10px 10px 9px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background: #CC0000;
width: 150px;
color: #fff;
font-size: 13px;
font-family: tahoma, century gothic,Georgia, sans-serif;
font-weight: normal;
text-transform: uppercase;
float: none;
margin: 0px;
padding: 8px 10px 7px 10px;
border-bottom: 1px solid #50585f;
border-left: 1px solid #50585f;
border-right: 1px solid #50585f;
}

#catmenu li li a:hover, #catmenu li li a:active {
background: #42474B;
color: #DFF4FF;
padding: 8px 10px 7px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -32px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.fghover ul ul, #catmenu li.fghover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.fghover ul,
#catmenu li li.fghover ul, #catmenu li li li.fghover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.fghover {
position: static;
}

#content_game {
width: 1000px;
height: 100%;
padding: 5px 0px 0px 0px;
}

#content {
float: left;
width: 650px;
height: 100%;
padding: 5px 0px 0px 5px;
}

#content h1 {
font-family: Georgia, serif;
font-size: 20px;
text-transform: uppercase;
font-weight: normal;
padding: 0px 0px 5px 0px;
margin: 0px;
color: #0578AD;
text-decoration: none;
text-align: center;
}

#content .single h1 a {
color: #0578AD;
}

#content .single h1 a:hover {
text-decoration: underline;
}

#play_game {
text-align: center;
width: 100%;
height: 100%;
}

.title{
margin: 0 0 0 0px;
padding: 0px 0px 5px 10px;
}

.game_title {
text-align: center;
float: left;
margin: 0 0 0 5px;
padding: 0px 0px 0px 0px;
}

.game_title a {
color: #0578AD;
}

.game_title img {
border: 2px solid #ccc;
padding: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.game_title img:hover {
border: 2px solid #0578AD;
padding: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.thumb_link {
position: relative;
}

.thumb_link img{
width: 85px;
height: 85px;
z-index: 10;
}


.thumb_link .lb_enabled {
display: block;
width: 14px;
height: 13px;
background: url(images/icon_trophy.png) no-repeat;
position: absolute;
right: 88px;
top: -85px;
z-index: 9999;
}


#gamelist {
clear: both;
width: 640px;
}

#gamelist h1 {
background-image: url(images/bg_cat.png);
background-repeat: no-repeat;
background-position: right;
margin-left: 3px;
margin-right: 3px;
}

#gamelist ul {
float: left;
width: 640px;
font-size: 10px;
margin: 0 0 0 5px;
padding: 0;
list-style: none;
color: #504945;
background: #fff url(images/bg_post.jpg) repeat-x;
border: 1px solid #ccc;
}

#gamelist li {
float: left;
width: 155px;
margin-left: 3px;
padding: 0;
overflow: hidden;
}

.date {
font-size: 11px;
font-family: Tahoma, century gothic,Arial,Verdana,Helvitica,sans-serif;
padding: 0px 10px;
color: #75481F;
text-transform: uppercase;
line-height: 20px;
}

#cat_view {
width: 300px;
height: 170px;
float: left;
margin: 0px 0px 15px 10px;
padding: 0px 5px 5px 5px;
color: #504945;
font: 13px tahoma, century gothic,Arial,verdana, sans-serif;
background: #fff url(images/bg_post.jpg) repeat-x;
border: 1px solid #ccc;
-moz-border-radius: 5px;
border-radius: 5px;
}

#cat_view h4 {
padding: 5px 5px 0px 5px;
}

.cat_link {
float: right;
text-align: right;
font-weight: bold;
height: 17px;
width: 101px;
margin: 7px 5px 0 2px;
padding-right: 17px;
background: url(images/more.png) no-repeat 0 0;
background-position: right;
}
.cat_link a {
color: #fff;
}

.single {
width: 210px;
height: 400px;
float: left;
margin: 0px 0px 15px 3px;
padding-top: 10px;
padding-bottom: 10px;
color: #504945;
font: 13px tahoma, century gothic,Arial,verdana, sans-serif;
background: #fff url(images/bg_post.jpg) repeat-x;
border: 1px solid #ccc;
-moz-border-radius: 5px;
border-radius: 5px;
}

.single h1 {
background-image: url(images/bg_cat.png);
background-repeat: no-repeat;
background-position: right;
margin-left: 3px;
margin-right: 3px;
}


.single h2 {
margin: 0px 0 5px 0;
padding: 5px 0px 0px 10px;
text-align: left;
font: 24px Georgia,century gothic,Arial,verdana, sans-serif;
font-weight: normal;
overflow: hidden;
}

.single h2 a, .single h2 a:link, .single h2 a:visited {
color: #252525;
background-color: transparent;
}
.single h2 a:hover {
color: #31333F;
background-color: transparent;
}

.single_game {
width: 620px;
margin: 0px 5px 5px 12px;
height: 100%;
color: #504945;
font: 13px tahoma, century gothic,Arial,verdana, sans-serif;
background: #fff url(images/bg_post.jpg) repeat-x;
border: 1px solid #ccc;
padding-left: 10px;
padding-top: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.single_game textarea {
width: 95%;
height: 150px;
margin: 0 0 20px 0;
font-size: 11px;
font-weight: normal;
}

.singlepage {
width: 630px;
height: 100%;
margin: 0px 10px 15px 3px;
padding-top: 10px;
padding-bottom: 10px;
color: #504945;
font: 13px tahoma, century gothic,Arial,verdana, sans-serif;
background: #fff url(images/bg_post.jpg) repeat-x;
border: 1px solid #ccc;
-moz-border-radius: 5px;
border-radius: 5px;
}

.category{
font-size: 10px;
font-family: Tahoma, century gothic,Arial,Verdana,Helvitica,sans-serif;
padding: 3px 5px 3px 20px;
background: url(images/category.png) no-repeat;
text-transform: uppercase;
}

.category a:link,.category a:visited{
color: #0578ad;
}

.category a:hover{
color: #333;
}

.entry {
margin: 0 0;
padding: 0px 5px 5px 5px;
line-height: 20px;
}

.entry img {
border: 2px solid #ccc;
padding: 4px;
margin-right: 5px;
margin-top: 3px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.entry img:hover {
border: 2px solid #0578AD;
padding: 4px;
margin-right: 5px;
margin-top: 3px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.entry a:link,
.entry a:visited {
color: #AC0604;
background-color: transparent;
}
.entry a:hover {
color: #455236;
background-color: transparent;
text-decoration: none;
}

.entry p{
margin: 5px 5px;
padding: 0px 0px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}

.related{
margin: 0px 5px 15px 12px;
height: 100%;
color: #504945;
font: 13px tahoma, century gothic,Arial,verdana, sans-serif;
background: #fff url(images/bg_post.jpg) repeat-x;
border: 1px solid #ccc;
padding-left: 10px;
padding-top: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.related h3{
margin: 0px 0 5px 0;
padding: 5px 0px 0px 10px;
text-align: left;
font: 18px Georgia,century gothic,Arial,verdana, sans-serif;
font-weight: bold;
overflow: hidden;
text-transform: uppercase;
color: #07577F;
}

.related ul{
margin: 0px 0px;
padding: 0px 0px;
list-style-type: none
}

.related ul li{
margin: 0px 0px;
padding: 5px 10px;
list-style-type: none;
line-height: 24px;
font: 14px Georgia,century gothic,Arial,verdana, sans-serif;
font-weight: bold;
}

.related ul li a:link, .related ul li a:visited{
color: #222;
}

.related ul li a:hover{
color: #0A7CAF;
}

.moregames {
height: 100px;
border: 2px solid #ccc;
padding-right: 4px;
font-weight: normal;
-moz-border-radius: 5px;
border-radius: 5px;
}

.moregames img {
border: 2px solid #ccc;
padding: 4px;
margin: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.moregames img:hover {
border: 2px solid #0578AD;
padding: 4px;
margin: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#rightcol{
float: right;
width: 340px;
padding: 0 5px 10px 0;
}

.sidebar1{
float: left;
width: 165px;
padding-top: 5px;
padding-right: 0px;
font-size: 13px;
font-family: Tahoma,Georgia,Century gothic, Arial, sans-serif;
}

.sidebar1 h2 {
line-height: 30px;
font-size: 14px;
color: #fff;
margin: 5px 0 5px 0 ;
padding: 0px 0 0 5px;
background: #CC0000;
font-weight: bold;
font-family: Georgia,Century gothic, Arial, sans-serif;
text-transform: uppercase;
border: 1px solid #40494F;
}

.sidebar1 ul {
list-style-type: none;
margin: 0 ;
padding: 0;
}

.sidebar1 ul ul {
list-style-type: none;
margin: 0;
padding: 0px 0px 10px 0px;
background-repeat: no-repeat;
}

.sidebar1 ul ul ul {
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

.sidebar1 ul ul ul ul {
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

.sidebar1 ul li {
height: 100%;
line-height: 18px;
float: left;
clear: left;
width: 160px;
}

.sidebar1 ul li a:link, .sidebar1 ul li a:visited {
color: #333;
text-decoration: none;
padding: 5px 0px 5px 5px;
display: block;
border-bottom: 1px dotted #fff;
}

.sidebar1 ul li a:hover {
color: #2676A1;
}

.sidebar1 p {
padding: 7px 10px;
margin: 0;
}

.sidebar1 table {
width: 100%;
text-align: center;
color: #787d7f;
}

.sidebar2{
float: right;
width: 165px;
padding-top: 5px;
padding-right: 5px;
font-size: 12px;
font-family: Tahoma,Georgia,Century gothic, Arial, sans-serif;
}

.sidebar2 h2 {
line-height: 30px;
font-size: 14px;
color: #fff;
margin: 5px 0 5px 0 ;
padding: 0px 0 0 5px;
background: #CC0000;
font-weight: bold;
font-family: Georgia,Century gothic, Arial, sans-serif;
text-transform: uppercase;
border: 1px solid #40494F;
}
.sidebar2 ul {
list-style-type: none;
margin: 0 ;
padding: 0;
}

.sidebar2 ul ul {
list-style-type: none;
margin: 0;
padding: 0px 0px 10px 0px;
background-repeat: no-repeat;
}

.sidebar2 ul ul ul {
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

.sidebar2 ul ul ul ul {
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

.sidebar2 ul li {
height: 100%;
line-height: 18px;
float: left;
clear: left;
width: 160px;
}

.sidebar2 ul li a:link, .sidebar2 ul li a:visited {
color: #333;
text-decoration: none;
padding: 5px 0px 5px 5px;
display: block;
border-bottom: 1px dotted #fff;
}

.sidebar2 ul li a:hover {
color: #2676A1;
}

.sidebar2 p {
padding: 7px 10px;
margin: 0;
}

.sidebar2 table {
width: 100%;
text-align: center;
color: #787d7f;
}

.sidebar3{
float: left;
width: 333px;
margin-right: 5px;
font-size: 13px;
color: #2676A1;
font-family: Tahoma,Century gothic, Arial, sans-serif;
}

.sidebar3 h2 {
line-height: 30px;
font-size: 14px;
color: #fff;
margin: 5px 0 5px 0 ;
padding: 0px 0 0 5px;
background: #CC0000;
font-weight: bold;
font-family: Georgia,Century gothic, Arial, sans-serif;
text-transform: uppercase;
border: 1px solid #40494F;
}

.sidebar3 ul{
list-style-type: none;
margin: 0px 0px ;
padding: 0px 0px;
}

.sidebar3 ul li {
height: 100%;
line-height: 28px;
padding: 0px 0px 0px 5px;
border-bottom: 1px dotted #fff;
}
.sidebar3 ul li ul{
height: 100%;
line-height: 28px;
padding: 0px 0px 0px 0px;
}

.sidebar3 ul li ul li {
height: 100%;
line-height: 28px;
padding: 0px 0px 0px 0px;
border-bottom: 1px dotted #fff;
}

.sidebar3 ul li a:link, .sidebar3 ul li a:visited {
color: #333;
text-decoration: none;
padding: 0px 0px 0px 0px;
}

.sidebar3 ul li a:hover {
color: #2676A1;
}


#footbar{
width: 1000px;
padding: 0px 0px 30px 0px;
margin: 0px 0px;
float: left;
background: #FCFCFC url(images/bottom.jpg) repeat-x;
font-family: Tahoma,Georgia,Century gothic, Arial, sans-serif;
}

#footer {
height: 40px;
padding: 25px 0 0 0px;
color: #eee;
font-size: 12px;
font-weight: normal;
text-align: center;
letter-spacing: 1px;
font-family: Tahoma,georgia,Century gothic, Arial, sans-serif;
float: left;
width: 1000px;
border-top: 5px solid #0998da;
background-color: #066088;
}

#footer a:link , #footer a:visited{
color: #eee;
}

#footer a:hover {
color: #fff;
}

.fleft{
float: left;
padding: 0 0 0 15px;
}

.fright{
float: right;
padding: 0 15px 0 0;
}

#navigation{
width: 600px;
margin: 0px 0px 0px 0px;
padding: 2px 15px 10px 12px;
text-align: center;
}

h2.pagetitle {
padding: 5px 5px;
margin: 0px 0 10px 5px;
font-size: 16px;
text-align: center;
color: #4A413C;
font-family: Georgia,Century gothic,Arial, Helvetica, sans-serif;
}

.post {
margin: 0px 0px 5px 5px;
padding: 3px 0 0 0;
float: left;
background: #ebe1d2;
border: 1px solid #ded5c9;
display: inline;
color: #6c5b42;
font-style: italic;
font-family: Georgia,century gothic,Arial,verdana, sans-serif;
}

.post h2 {
margin: 0px 0 0px 0;
padding: 0px 0px 3px 0px;
text-align: left;
font-size: 18px;
overflow: hidden;
font-weight: normal;
height: 20px;
}

.post h2 a, .post h2 a:link, .post h2 a:visited {
color: #354151;
background-color: transparent;
}

.post h2 a:hover {
color: #354151;
background-color: transparent;
}

.post img {
border: 0;
float: left;
padding: 4px 4px;
background: #fff;
border: 1px solid #ddd;
margin: 2px 5px 2px 0px;
}

.breadcrumb{
padding: 5px 10px;
margin: 0px 5px 5px 13px;
border: 1px solid #DEDCDD;
font-size: 13px;
font-weight: normal;
color: #444;
background: #fff;
font-family: tahoma,Century gothic,Arial, Helvetica, sans-serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.adtop { margin-bottom: 5px;}
.adright { margin: 5px 5px; float: right;}

.allcomments {
height: 100%;
padding: 0px 8px 0px 10px;
margin: 0px 0px;
}

#comment{
height: 100%;
padding: 0px 10px;
margin: 0px 0px;
}

h3#comments {
padding: 5px 10px;
margin: 10px 0px;
border: 1px solid #DEDCDD;
font-size: 20px;
font-weight: normal;
color: #444;
background: #fff;
font-family: Georgia,Century gothic,Arial, Helvetica, sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

h3#pingbacks {
padding: 5px 10px;
margin: 10px 0px;
border: 1px solid #DEDCDD;
font-size: 20px;
font-weight: normal;
color: #444;
background: #fff;
font-family: Georgia,Century gothic,Arial, Helvetica, sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#respond{
height: 100%;
padding: 0px 5px;
margin: 5px 0px;
background: #fff;
border: 1px solid #DEDCDD;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#respond h3{
padding: 5px 10px 5px 10px;
margin: 10px 0px;
font-size: 22px;
font-weight: normal;
color: #444;
font-family: Georgia,Century gothic,Arial, Helvetica, sans-serif;
}

#commentform {
padding: 0px 10px 10px 10px;
margin: 0px 0px 0px 0px;
color: #BFAFA7;
font-family: tahoma,Century gothic,Arial, Helvetica, sans-serif;
}

#commentform p {
color: #3f79c4;
}

#commentform input {
background: #F4F4F4;
border: 1px solid #DEDCDD;
color: #444;
padding-left: 10px;
}

#commentform textarea {
background: #F4F4F4;
border: 1px solid #DEDCDD;
color: #444;
width: 95%;
padding: 5px 5px;
}

.comments input#submit {
width: auto;
line-height: 25px;
padding: 3px 5px;
background-color: #0083DB;
border: 2px solid #005F9F;
color: #fff;
font-family: tahoma,Century gothic,Arial, Helvetica, sans-serif;
}

ol.commentlist {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
}

ol.commentlist li {
border: 1px solid #DEDCDD;
margin: 0 0 10px;
padding: 5px 7px 5px 57px;
position: relative;
}

ol.commentlist li div.comment-author {
padding: 0 170px 0 0;
}

ol.commentlist li div.vcard {
font: 20px Georgia, helvetica,arial,sans-serif;
padding: 5px 0px;
}

ol.commentlist li div.vcard cite.fn {
font-style: normal;
}

ol.commentlist li div.vcard cite.fn a.url {
color: #000;
text-decoration: none;
}

ol.commentlist li div.vcard cite.fn a.url:hover { color: #000; }

div.vcard img.avatar {
border: 5px solid #ddd;
left: 7px;
position: absolute;
top: 7px;
}

ol.commentlist li div.comment-meta {
font: 12px Tahoma, helvetica,arial,sans-serif;
position: absolute;
right: 10px;
text-align: right;
top: 5px;
}

ol.commentlist li div.comment-meta a {
color: #0083DB;
text-decoration: none;
}

ol.commentlist li div.comment-meta a:hover {
color: #000;
}
ol.commentlist li p {
font: normal 12px Tahoma, helvetica,arial,sans-serif;
margin: 0 0 1em;
line-height: 18px;
color: #546C88;
}

ol.commentlist li ul {
font: normal 12px/1.4 helvetica,arial,sans-serif;
list-style: square;
margin: 0 0 1em;
padding: 0;
text-indent: 0;

}
#cancel-comment-reply{
padding: 10px 0px 0px 0px ;
}

#cancel-comment-reply-link{
color: #fff;
font-size: 10px;
line-height: 15px;
font-family: Tahoma, Georgia,arial,sans-serif;
padding: 4px 10px;
margin: 0px 0px 0px 12px;
background: #778F9F;
border: 2px solid #666;
}

ol.commentlist li div.reply a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}

ol.commentlist li ul.children {
list-style: none;
margin: 1em 0 0;
text-indent: 0;
}

ol.commentlist li ul.children li.depth-2 {
margin: 0 0 .25em;
}

ol.commentlist li ul.children li.depth-3 {
margin: 0 0 .25em;
}

ol.commentlist li ul.children li.depth-4 {
margin: 0 0 .25em;
}

ol.commentlist li.even {
background: #fff url(images/bg_post.jpg) repeat-x;
border: 1px solid #D1D8DF;

}

ol.commentlist li.odd {
background: #fff url(images/bg_post.jpg) repeat-x;
border: 1px solid #ddd;
}

ol.commentlist li.pingback div.vcard {
padding: 0 170px 0 0;
}

#myslides{
background: #262B2F;
}

.stepcarousel{
position: relative;
overflow: scroll;
width: 952px;
height: 165px;
margin: 0px 14px 0px 14px;
background: #262B2F;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px 10px;
width: 120px;
background: #14181a;
height: 140px;
border: 1px solid #373C3F;
}

.stepcarousel .panel p{
text-align: left;
overflow: hidden;
margin: 5px 5px;
}

.stepcarousel .panel h2{
height: 16px;
overflow: hidden;
margin: 0px 5px ;
font-size: 13px;
font-weight: normal;
text-align: center;
font-family: Tahoma,century gothic,Arial,verdana, sans-serif;
text-transform: uppercase;
}

.stepcarousel .panel h2 a:visited ,.stepcarousel .panel h2 a:link{
color: #778F9F;
}

.stepcarousel .panel img{
background: #040404;
margin: 10px 10px 8px 10px;
padding: 0px 0px;
}

#postlist {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 390px;
}

#postlist ul{
width: 335px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#postlist li {
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
width: 323px;
float: left;
height: 80px;
overflow: hidden;
background: #fff url(images/bg_post.jpg) repeat-x;
border: 1px solid #ddd;
-moz-border-radius: 5px;
border-radius: 5px;
}

#postlist li h2 {
color: #CC0000;
font-size: 16px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#postlist li h2 a {
color: #CC0000;
text-decoration: none;
}

#postlist li img {
float: left;
margin-right: 5px;
background: #EFEFEF;
}

.fcats{
overflow: hidden;
font-size: 12px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.fcats a:link,.fcats a:visited {
color: #0284C2;
}

.auth{
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 12px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}

.listi{
line-height: 30px;
font-size: 14px;
color: #fff;
margin: 5px 0 5px 0 ;
padding: 0px 0 0 5px;
background: #CC0000;
font-weight: bold;
font-family: Georgia,Century gothic, Arial, sans-serif;
text-transform: uppercase;
border: 1px solid #40494F;
width: 328px;
}


.widgets {
width:333px;
overflow:hidden;
margin-top:5px;
padding:0px 0px 0px 0px;
background:#FFFFFF;
border:1px solid #ccc;
}


.widgets a {
color: #222;
text-decoration: none;
}

.widgets a:hover {
color: #009;
text-decoration: underline;
}

/*** BuddyPress Intergration ***/
#item-header {
padding: 10px;
}

#item-nav {
/* padding: 10px;*/
}

.item-list-tabs {

}


#object-nav {
margin: 0px;
padding: 0px;
background: #DFE3E6;
color: #2676A1;
}

#object-nav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#object-nav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#object-nav li a, #object-nav li a:link, #object-nav li a:visited {
color: #2676A1;
display: block;
margin: 0px;
padding: 10px 10px 9px 10px;
}

#object-nav li a:hover, #object-nav li a:active {
background: #CC0000;
color: #fff;
margin: 0px;
padding: 10px 10px 9px 10px;
text-decoration: none;
}

#object-nav li li a, #object-nav li li a:link, #object-nav li li a:visited {
background: #CC0000;
width: 150px;
color: #fff;
font-size: 13px;
font-family: tahoma, century gothic,Georgia, sans-serif;
font-weight: normal;
text-transform: uppercase;
float: none;
margin: 0px;
padding: 8px 10px 7px 10px;
border-bottom: 1px solid #50585f;
border-left: 1px solid #50585f;
border-right: 1px solid #50585f;
}

#object-nav li li a:hover, #object-nav li li a:active {
background: #CC0000;
color: #fff;
padding: 8px 10px 7px 10px;
}

#object-nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#item-body #subnav {
margin-top: 5px;
padding: 0px;
/*background: #DFE3E6;*/
color: #2676A1;
}

#item-body #subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#item-body #subnav li a, #item-body #subnav li a:link, #item-body #subnav li a:visited {
color: #2676A1;
display: block;
margin: 0px;
padding: 5px;
}

#item-body #subnav li a:hover, #item-body #subnav li a:active {
color: #CC0000;
text-decoration: underline;
}

#whats-new-form { padding: 10px; }

.activity, .profile, #massage { padding: 10px; }
#background #blog #create #image #left #wordpress
  • Profile picture of the author WebsiteBegin
    Do you mean the sides of the content-area? The off-white sides? I believe that's controlled by the Wrapper. So try this;
    #wrapper {
    width: 1000px;
    margin: 0 auto;
    background:url("ImageLink");}
    Didn't test it because my browser is being a bit screwy. But that should fix your problems.
    Signature
    WebsiteBegin | Learn to Build and Manage an Amazing Website

    Follow me on Twitter - Joeb3219
    {{ DiscussionBoard.errors[6000582].message }}
    • Profile picture of the author taskemann
      Originally Posted by WebsiteBegin View Post

      Do you mean the sides of the content-area? The off-white sides? I believe that's controlled by the Wrapper. So try this;
      #wrapper {
      width: 1000px;
      margin: 0 auto;
      background:url("ImageLink");}
      Didn't test it because my browser is being a bit screwy. But that should fix your problems.
      No, not the wrapper but the background behind the wrapper. I want one image on each site.
      {{ DiscussionBoard.errors[6003264].message }}
  • Profile picture of the author taskemann
    I tried with this piece of code, but it didn't work:

    #leftHalf {
    background: url(images/bg-1.jpg);
    width: 50%;
    position: absolute;
    left: 0px;
    height: 100%;
    }

    #rightHalf {
    background: url(images/bg-2.jpg);
    width: 50%;
    position: absolute;
    right: 0px;
    height: 100%;
    }

    Any suggestions?


    Thanks!
    {{ DiscussionBoard.errors[6003317].message }}
    • Profile picture of the author WebsiteBegin
      Originally Posted by taskemann View Post

      I tried with this piece of code, but it didn't work:




      Any suggestions?


      Thanks!
      Sorry for the late reply. I figured it out. It's in the body tag. I used your logo as the background image - replace it with what you want.

      body {
      background: url("http://ninjaworm.com/wp-content/themes/fungames/images/logo.png") repeat scroll 0 0 transparent;
      color: #161514;
      font-family: Century gothic,Arial,Tahoma,sans-serif;
      font-size: 13px;
      margin: 0 auto;
      padding: 0 0 20px;


      }
      Signature
      WebsiteBegin | Learn to Build and Manage an Amazing Website

      Follow me on Twitter - Joeb3219
      {{ DiscussionBoard.errors[6003425].message }}
      • Profile picture of the author taskemann
        Originally Posted by WebsiteBegin View Post

        Sorry for the late reply. I figured it out. It's in the body tag. I used your logo as the background image - replace it with what you want.

        body {
        background: url("http://ninjaworm.com/wp-content/themes/fungames/images/logo.png") repeat scroll 0 0 transparent;
        color: #161514;
        font-family: Century gothic,Arial,Tahoma,sans-serif;
        font-size: 13px;
        margin: 0 auto;
        padding: 0 0 20px;


        }

        Thank you for the reply, but I think you have misunderstood me. I don't want one picture to be repeated in the background, but two different background images. One left and one right image that doesn't repeat at all.

        If you take a look this sites background, you'll understand what I mean: Flash Games - Addicting Games - Free Games
        {{ DiscussionBoard.errors[6003511].message }}
  • Profile picture of the author taskemann
    Yes I made it! And here is the code :

    body {
    margin: 0 auto;
    padding: 0px 0px 20px 0px;
    background: url(http://www.url.com/left.jpg) top left no-repeat, url(http://www.url.com/right.jpg) top right no-repeat, #3F3F3F;
    font-family: Century gothic, Arial,Tahoma,sans-serif;
    color: #161514;
    font-size: 13px;
    }

    Now I must figure out how I can hyperlink them! But thank you anyway WebsiteBegin!
    {{ DiscussionBoard.errors[6003605].message }}
    • Profile picture of the author WebsiteBegin
      Originally Posted by taskemann View Post

      Yes I made it! And here is the code :




      Now I must figure out how I can hyperlink them! But thank you anyway WebsiteBegin!
      Gar, I figured that out last night but I kind of fell asleep infront of my computer-_- #NerdProblems Sorry I couldn't post it, glad you figured it out (: Site is looking good.
      Signature
      WebsiteBegin | Learn to Build and Manage an Amazing Website

      Follow me on Twitter - Joeb3219
      {{ DiscussionBoard.errors[6007872].message }}

Trending Topics