MyBB Community Forums

MyBB Community Forums > Community > General Discussion > Web Development and Administration > CSS Assistance Required
Full Version: CSS Assistance Required
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

Diminished

2011-10-15, 03:28 PM
Hi,

I'm working on a WHMCS theme over at http://www.astoundinghost.com

Problem is, I can't seem to set an OUTER background on all pages..like on hostgator.com

Here's my CSS, any ideas how about how I could add a background outside of the main content?

@charset "windows-1250";
body,select,input,div {
font-family:Arial, Helvetica, sans-serif, Calibri;
font-size:12px;
color:#666;
line-height:18px;
}

img {
border:none;
}

.clr {
clear:both;
height:0;
}

hr {
margin:15px 0;
}

a {
color:#ff9000;
outline:none;
text-decoration:none;
}

a:hover {
color:#ff9000;
outline:none;
text-decoration:underline;
}

.no_Margin {
margin-right:0 !important;
}

.no_BorderBottom {
border-bottom:none !important;
}

.color1 {
color:#ff9000;
}

.text01 {
font-size:20px;
font-weight:700;
letter-spacing:-1px;
}

.text02 {
font-size:14px;
font-weight:700;
line-height:20px;
letter-spacing:-1px;
}

.text03 {
font-size:12px;
font-weight:700;
color:#ff9000;
}

.mainpagewrapper {
background:url(../images/bg.png) repeat-x top #fff;
float:left;
width:100%;
}

.subpagewrapper {
background:#fff;
float:left;
width:100%;
}

.container {
width:950px;
border:1px solid #cfcfcf;
margin:0 auto;
}

.header {
width:950px;
height:125px;
float:left;
margin:0;
}

.logo {
width:300px;
height:50px;
float:left;
margin:5px 0 0 20px;
}

.logo a {
background:url(../images/logo.png) no-repeat;
width:300px;
height:100px;
display:block;
}

#menu {
width:700px;
height:31px;
float:left;
font-size:15px;
font-weight:700;
line-height:33px;
text-align:center;
margin:40px 1px;
}

#menu ul li {
float:left;
display:inline;
list-style:none;
}

#menu ul li a {
color:#000;
display:block;
padding:0 24px;
}

#menu ul li.active a {
height:41px;
color:#000;
text-shadow:none !important;
text-decoration:none;
padding:0;
}

#menu ul li.active a span.rt {
float:right;
height:33px;
padding:0 22px 0 0 !important;
}

#menu ul li.active a span.lt {
float:left;
height:33px;
padding:0 0 0 22px !important;
}

.banner {
background:url(../images/subpageBanner.jpg) no-repeat;
width:948px;
height:75px;
float:left;
padding:60px 40px 10px;
}

.bannerCon {
width:5000px;
height:400px;
float:left;
}

.bannerCon h1 {
float:left;
color:#FFF;
margin:0;
padding:0;
}

.chekhavailCon {
width:456px;
height:59px;
float:left;
margin:27px 0 0;
}

.chekhavailCon p {
color:#FFF;
font-size:16px;
margin:0;
padding:0;
}

.formcon {
background:url(../images/domaincheck.png) no-repeat left top;
width:360px;
height:37px;
float:left;
}

.textFeildCon {
width:480px;
height:36px;
float:left;
margin:8px 0 0;
}

.textField01 {
color:#000;
font-size:18px;
width:245px;
line-height:31px;
height:31px;
float:left;
border:none;
background:transparent;
padding:6px 15px 0 10px;
}

.dropDown01 {
width:90px;
font-size:18px;
color:#000;
height:37px;
float:left;
border:none;
background:transparent;
-webkit-transform:translate3d(-3px, 0, 0);
padding:7px 10px 7px 5px;
}

slect {
background:none;
background-color:transparent;
}

.bodyCon {
margin-top:18px;
width:950px;
float:left;
}

.bodyConLeft {
width:684px;
float:left;
}

.box1 {
margin-right:9px;
width:222px;
float:left;
}

.box1Top {
background:url(../images/box1Top.png) no-repeat;
font-size:19px;
line-height:39px;
padding-left:19px;
color:#FFF;
width:202px;
height:43px;
float:left;
}

.box1Content {
background:url(../images/box1repeat-x.jpg) repeat-x bottom #FFF;
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
width:180px;
float:left;
padding:10px 20px;
}

.box1Content ul {
float:left;
margin:-5px 0 0;
padding:0;
}

.box1Content ul li {
background:url(../images/chekhMark.png) no-repeat left 7px;
border-bottom:1px dashed #CCC;
padding-left:25px;
line-height:26px;
font-weight:700;
color:#575757;
list-style:none;
}

.priceCon {
background:url(../images/box1Between.png) no-repeat;
width:222px;
height:71px;
float:left;
}

.priceConLeft {
background:#00F;
width:140px;
height:71px;
float:left;
}

.img1 {
background:url(../images/img1.png) no-repeat 44px 9px;
}

.img2 {
background:url(../images/img2.png) no-repeat 47px 11px;
}

.img3 {
background:url(../images/img3.png) no-repeat 41px 8px;
}

.priceConRight {
width:82px;
height:71px;
float:left;
}

.price1 {
background:url(../images/price.png) no-repeat 18px 7px;
}

.price2 {
background:url(../images/price1.png) no-repeat 18px 9px;
}

.price3 {
background:url(../images/price2.png) no-repeat 18px 9px;
}

.box1Bottom {
background:url(../images/box1Bottom.jpg) no-repeat;
width:222px;
height:9px;
float:left;
}

.BtnCon {
color:#666;
width:182px;
height:28px;
float:left;
margin:10px 0 0;
}

.BtnCona {
font-weight:700;
float:right;
padding:5px 0 0;
}

.orderNowBtn {
width:109px;
height:28px;
float:left;
margin:0;
}

.orderNowBtn a {
background:url(../images/orderNowBtn.png) no-repeat top;
width:109px;
height:28px;
float:left;
}

.orderNowBtn a:hover {
background:url(../images/orderNowBtn.png) no-repeat bottom;
}

.Box2 {
background:url(../images/box2Bottom.png) no-repeat left bottom;
padding-bottom:7px;
margin-top:20px;
width:686px;
float:left;
}

.reasonsCon {
width:686px;
float:left;
padding-bottom:20px;
clear:both;
}

.reasonsConh1 {
font-size:18px;
font-weight:700;
color:#000;
margin:10px 0 10px 20px;
padding:0;
}

.box01 {
width:280px;
float:left;
margin:10px 0 0 20px;
}

.box01Left {
background:url(../images/bulitBg.png) no-repeat;
width:20px;
height:45px;
margin-right:10px;
font-size:bold;
text-align:center;
float:left;
}

.box01right {
width:245px;
float:left;
}

.box01right h1 {
font-size:14px;
font-weight:700;
color:#ff9000;
margin:0;
padding:0;
}

.imgStyle01 {
float:left;
margin:2px 0;
}

.bodyConRight {
width:254px;
float:right;
}

.siderBox {
width:254px;
float:left;
background:url(../images/siderBoxBottom.jpg) no-repeat left bottom;
padding-bottom:9px;
margin-bottom:20px;
}

.siderBoxTop {
background:url(../images/siderBoxTop.jpg) no-repeat;
width:234px;
line-height:42px;
font-size:20px;
padding-left:20px;
color:#FFF;
height:54px;
float:left;
}

.siderBoxContent {
background:url(../images/siderBoxRepaet-x.jpg) repeat-x left bottom #fbfbfb;
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
width:212px;
float:left;
padding:5px 20px 1px;
}

.ulStyle02 {
float:left;
margin:0;
padding:0;
}

.ulStyle02 li {
background:url(../images/chekhMark.png) no-repeat left 7px;
padding-left:20px;
line-height:26px;
border-bottom:1px dashed #b8b8b8;
letter-spacing:1px;
color:#575757;
list-style:none;
}

.pstyle01 {
color:#575757;
padding-left:20px;
margin:0;
}

.tetimonailTop {
background:url(../images/tetimonialTop.png) no-repeat;
width:20px;
height:20px;
position:absolute;
display:block;
margin:0;
}

.moreBtn {
width:86px;
height:23px;
float:right;
margin:10px 0 -10px;
}

.moreBtn a {
background:url(../images/moreBtn.png) no-repeat top;
width:86px;
height:28px;
float:right;
}

.moreBtn a:hover {
background:url(../images/moreBtn.png) no-repeat bottom;
}

.footerCon {
background:#fff;
width:100%;
padding-top:20px;
height:25px;
float:left;
}

.siteMapCon {
margin-left:40px;
width:190px;
float:left;
}

.siteMapCon h1 {
font-weight:400;
color:#9a9999;
font-size:20px;
margin:0;
padding:0;
}

.siteMapCon ul {
float:left;
margin:10px 0 0;
padding:0;
}

.siteMapCon ul li {
background:url(../images/aerrow.png) no-repeat left 8px;
list-style:none;
padding-left:20px;
color:#333;
line-height:24px;
}

.copyRightCon {
color:#9a9999;
margin-top:1px;
padding-top:1px;
border-top:0 solid #212020;
width:950px;
text-align:center;
}

.subbanner {
background:url(../images/subpageBanner.jpg) no-repeat;
width:948px;
height:100px;
float:left;
padding:80px 0 0 28px;
}

.subbannerCon {
width:490px;
float:left;
}

ul.liststyle2 {
list-style:none;
width:212px;
margin:0;
padding:0;
}

ul.liststyle2 li {
color:#333;
font-size:12px;
width:100%;
float:left;
margin:0;
padding:2px 0;
}

.textfielstyle1 {
width:202px;
float:left;
line-height:24px;
color:#333;
padding:5px;
}

ul.sidemenu li {
line-height:24px;
color:#333;
border-bottom:1px solid #d2d2d2;
border-top:1px solid #fff;
}

ul.sidemenu li a {
color:#333;
font-size:16px;
font-weight:700;
text-decoration:none;
display:block;
padding:5px 10px;
}

ul.sidemenu li a:hover {
text-decoration:underline;
}

.information {
width:684px;
float:left;
margin:0;
}

.basic_header {
background:url(../images/headingbg1.png) no-repeat;
font-size:18px;
line-height:43px;
font-weight:700;
padding-left:20px;
border:none;
color:#FFF;
margin:0;
}

.basic ul li {
background:url(../images/bullet.png) no-repeat 18px 18px;
list-style:none;
font-size:14px;
font-weight:700;
line-height:50px;
padding-left:45px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
color:#333;
}

.Style04 {
background:url(../images/headingbg1.png) no-repeat -357px top !important;
color:#FFF;
padding:0 !important;
}

.Style05 {
background:url(../images/headingbg1.png) no-repeat !important;
color:#FFF;
}

.c1_header {
background:url(../images/headingbg1.png) no-repeat center;
font-size:18px;
line-height:43px;
font-weight:700;
text-align:center;
border:none;
color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

.c1 ul li {
list-style:none;
font-size:18px;
font-weight:700;
line-height:50px;
text-align:center;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
color:#333;
}

.Style03 {
font-size:26px !important;
font-weight:700;
color:#ff9000 !important;
}

.OrderNowBtn {
height:33px;
width:94px;
margin:10px auto;
}

.OrderNowBtn a {
background:url(../images/ordernow3.png) no-repeat top;
height:33px;
width:94px;
display:block;
}

.OrderNowBtn a:hover {
background:url(../images/ordernow3.png) no-repeat bottom;
}

.feature_header {
background:url(../images/headingbg1.png) repeat-x center center;
font-size:18px;
line-height:43px;
font-weight:700;
border:none;
padding-left:20px;
color:#FFF;
margin-top:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

.feature ul li {
list-style:none;
font-size:14px;
line-height:44px;
padding-left:20px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
color:#333;
}

.c2 ul li {
list-style:none;
font-size:14px;
color:#333;
line-height:44px;
text-align:center;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}

.check {
background:url(../images/chekhMark.png) no-repeat center;
}

.BorderStyleLt {
border-left:1px solid #e4e7eb;
}

ul.noboderRt li {
border-right:none !important;
}

.blankbox {
width:648px;
float:left;
background:url(../images/box1bottom.png) no-repeat left bottom;
padding-bottom:30px;
}

.blankboxtop {
background:url(../images/box1top.png) no-repeat left top;
width:648px;
height:11px;
float:left;
}

.blankboxCon {
background:url(../images/box1bg.png) repeat-x left bottom #fff;
width:646px;
float:left;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
}

.blankboxCon h1 {
background:url(../images/headingbg1.png) no-repeat left top;
line-height:46px;
font-size:20px;
font-weight:700;
color:#000;
margin:0 0 20px;
padding:0 0 0 20px;
}

.blankboxCon2 {
float:left;
width:606px;
padding:0 20px;
}

.login2 {
width:80px;
float:left;
height:29px;
}

.login2 a {
background:url(../images/login2.png) no-repeat left top;
width:80px;
height:29px;
display:block;
}

.login2 a:hover {
background:url(../images/login2.png) no-repeat left bottom;
}

.NoBorder {
border:none !important;
}

.ulStyle03 {
float:left;
width:100%;
margin:0;
padding:0;
}

.ulStyle03 li {
line-height:26px;
border-bottom:1px dashed #b8b8b8;
letter-spacing:1px;
color:#575757;
list-style:none;
margin-top:5px;
}

.ulStyle03 li a {
font-size:18px;
color:#575757;
}

.Box4 {
background:url(../images/box2Bottom.png) no-repeat left bottom;
padding-bottom:7px;
width:686px;
float:left;
margin:0 0 20px;
}

.reasonsCon2 {
width:644px;
float:left;
padding:0 20px;
}

.reasonsConh12 {
font-size:18px;
font-weight:700;
color:#000;
margin:10px 0;
padding:0;
}

ul.liststyle1 li {
color:#333;
font-size:14px;
width:100%;
float:left;
padding:5px 0;
}

.bannerCon ul,.subbannerCon ul {
float:left;
margin:0 40px 0 0;
padding:0;
}

.bannerCon ul li,.subbannerCon ul li {
background:url(../images/liBg.png) no-repeat left 7px;
padding-left:17px;
list-style:none;
font-size:14px;
line-height:26px;
color:#e8e8e8;
}

optgroup,option {
background:none;
}

.Box2Top,.Box4Top {
background:url(../images/box2Top.png) no-repeat bottom #FFF;
width:686px;
height:7px;
float:left;
}

.Box2Content,.Box4Content {
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
width:684px;
float:left;
}

.siteMapCon ul li a,.copyRightCon ul li a {
color:#9a9999;
}

ul.sidemenu,ul.liststyle1 {
list-style:none;
margin:0;
padding:0;
}

.basic,.feature {
float:left;
width:261px;
}

.c1,.c2 {
float:left;
width:141px;
text-align:center;
}

body,#menu ul,.box01right p,.basic ul,.feature ul,.c1 ul,.c2 ul {
margin:0;
padding:0;
}

Cheers.

Alex Smith

2011-10-15, 04:06 PM
body {
background: #000;
}

Change the 000 to the color you want.

Euan T

2011-10-15, 04:08 PM
Try something like:

body, .subpagewrapper {
	background: blue;
}

Obviously, you can change blue to any colour or an image or w/e.

Diminished

2011-10-15, 04:15 PM
Neither of them worked, sadly. :/

Euan T

2011-10-15, 04:19 PM
Use my code, but change it to:

body, .subpagewrapper {
    background: blue !important;
}

Either that, or edit line 72 of style.css.

Diminished

2011-10-15, 04:23 PM
(2011-10-15, 04:19 PM)euantor Wrote: [ -> ]Use my code, but change it to:

body, .subpagewrapper {
    background: blue !important;
}

Either that, or edit line 72 of style.css.

That changed the whole thing. I only want outside of the border to be coloured, where there's no content like on Host Gator.

Euan T

2011-10-15, 04:25 PM
What do you mean by the whole thing? That will change the background of the whole body - as I thought you wanted. Could you please clarify exactly what you want?

Diminished

2011-10-15, 04:26 PM
(2011-10-15, 04:25 PM)euantor Wrote: [ -> ]What do you mean by the whole thing? That will change the background of the whole body - as I thought you wanted. Could you please clarify exactly what you want?

Like, the outer part of the page...not the middle where the content is..Look at http://www.hostgator.com/

They have the grey background on every page, and no background where the content is, in the middle.

CorysRevenge

2011-10-15, 04:29 PM
Out your CSS code into a file called style.css if you haven't already. Now if I'm understanding what your asking you want the same background on each page. Do this by adding this code into the <head> tags of each page.

<LINK href="style.css" rel="stylesheet" type="text/css">

Make sure the style.css is in the same directory as your other pages. Smile Hope I helped.

sunjava1

2011-10-15, 04:31 PM
First you need to wrap up your content in a div. 
<body>
<div id="content">  your whole web site conent </div>
</body>


body{
background:#ccc;
}
#content{
background:#fff;
width:80%
}
Pages: 1 2
MyBB Community Forums > Community > General Discussion > Web Development and Administration > CSS Assistance Required