1
Hadesteam
Problem with background
  • 2011/9/5 11:32

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


Hello,

This is my first post on this forum. I have problem with background on my theme "kimokea". Please look at my website :http://www.kulturystyka.org.pl and U see background is not a center...

On this picture You will see my problem with background:
http://imageshack.us/photo/my-images/10/nowy1am.jpg/

My themes css:

/* CSS Document */

body {
    
font-familyVerdanaArialHelveticasans-serif;
    
margin0px;
    
padding0px;
    
font-size11px;
    
background-imageurl(images/background.png);
    
background-color#000b0d;
    
background-positioncenter top;
    
background-repeatno-repeat;
 
}
form {
    
margin0px;
    
padding0px;
}
{
    
color#AA0003;
    
text-decorationnone;
    
font-weightbold;
}
a:hover {
    
text-decorationunderline;
}
#obCenter {
    
text-aligncenter;
    
padding-bottom20px;
}
table {
    
width100%;
    
margin0px;
    
padding0px;
    
border0px;
}
#obLayout {
    
width780px;
    
margin0px auto;
    
padding0px;
    
text-alignleft;
    
background-color#FFFFFF;
}
#obNav {
    
height26px;
    
background-imageurl(images/obNav.jpg);
    
margin0px;
    
padding0px;
}
#obNav a {
    
color#FFFFFF;
    
text-decorationnone;
    
displayblock;
    
text-aligncenter;
    
font-familyArialHelveticasans-serif;
    
font-weightbold;
    
font-variantsmall-caps;
    
font-size11px;
    
letter-spacing2px;
    
line-height26px;
}
#obNav a:hover {
    
color#FFCC00;
}

#obHead {
    
background-color#AB0000;
}
td {
    
margin0px;
    
padding0px;
    
vertical-aligntop;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size11px;
}
#obR1 {
    
color#FFFFFF;
    
text-alignright;
    
padding4px 4px 0px;
    
background-color#464646;
    
border-bottom-width1px;
    
border-bottom-stylesolid;
    
border-bottom-color#000000;
}
#obR1 a {
    
color#CCCCCC;
    
font-weightnormal;
    
padding2px;
}
#obLogin {
    
text-alignright;
    
font-size10px;
    
color#FFFFFF;
    
vertical-alignmiddle;
}
#obLogin input {
    
font-size10px;
    
background-color#464646;
    
border-top-width1px;
    
border-right-width1px;
    
border-bottom-width1px;
    
border-left-width1px;
    
border-top-stylesolid;
    
border-right-stylesolid;
    
border-bottom-stylesolid;
    
border-left-stylesolid;
    
border-top-color#000000;
    
border-right-color#8D8D8D;
    
border-bottom-color#8D8D8D;
    
border-left-color#000000;
    
color#FFFFFF;
}
.
obBlock {
    
padding2px;
}
.
obBlockC {
    
padding2px;
}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul margin2pxpadding2px; list-styledecimal insidetext-alignleft;}
li margin-left2px; list-stylesquare insidecolor#2F5376}

input.formButton {}

.
item {
}
.
itemHead {
    
color#FFFFFF;
    
font-weightbold;
    
text-transformcapitalize;
    
background-color#650B03;
    
height22px;
    
line-height21px;
    
padding-left7px;
}
.
itemInfo {
    
text-alignright;
    
padding3px;
    
background-color#F4F4F4;
}
.
itemTitle a {
    
font-weightbold;
    
color#FFFFFF;
}
.
itemPoster {font-size90%; font-style:italic;}
.
itemPostDate {font-size90%; font-style:italic;}
.
itemStats {font-size90%; font-style:italic;}
.
itemBody {
    
background-color#FFFFFF;
    
margin-top5px;
}
.
itemText {
    
line-height1.5em;
    
text-alignjustify;
    
padding-right5px;
    
padding-left5px;
    
margin-top5px;
    
margin-bottom5px;
}
.
itemText:first-letter {font-size133%; font-weightbold;}
.
itemFoot {
    
text-alignright;
    
padding3px;
    
background-color#F4F4F4;
}
.
itemAdminLink {font-size90%;}
.
itemPermaLink {font-size90%;}

th {
    
background-color#650B03;
    
color#FFFFFF;
    
vertical-align middle;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size11px;
    
line-height21px;
    
height22px;
    
padding-right5px;
    
padding-left5px;
    
padding-top0px;
    
padding-bottom0px;
}

td#headerbanner {width: 100%; background-color: #2F5376; vertical-align: middle; text-align:center;}
td#headerbar {border-bottom: 1px solid #dddddd; background-image: url(hbar.gif);}


td#leftcolumn th {vertical-align: middle;}
td#leftcolumn div.blockTitle {
    
padding0px 3px;
    
font-size12px;
    
color#000000;
    
font-weightbold;
    
line-height21px;
    
height22px;
    
text-alignleft;
    
vertical-alignmiddle;
    
padding-left10px;
    
background-image:url(images/lewa.gif); 
    
background-positionleft
    
background-repeatrepeat;
    
color#f7f7f7; 
    
font-weightbold
    
height33px;
}
td#leftcolumn div.blockContent {
    
padding3px;
    
line-height120%;
    
line-height120%;
}


td#centercolumn {
    
padding5px;
}


td#centercolumn th {vertical-align: middle;}
td#centerCcolumn {padding: 0px;}
td#centerCcolumn .blockTitle {
    
padding0px 3px;
    
font-size12px;
    
color#FFFFFF;
    
font-weightbold;
    
margin-top0px;
    
margin-right0px;
    
margin-left0px;
    
line-height15px;
    
height16px;
    
background-color#650B03;
    
padding0 0 0 30px
    
background-image:url(images/srodek.gif); 
    
background-positionleft
    
background-repeatrepeat
    
color#f7f7f7; 
    
font-weightbold
    
height33px
vertical-alignmiddle;}
}
td#centerCcolumn .blockContent {
    
padding3px;
    
line-height120%;
    
background-color#FFFFFF;
    
margin0px;

}

td#centerLcolumn {width: 50%; padding: 0px 5px 0px 0px;}
td#centerLcolumn .blockTitle {
    
padding0px 3px;
    
font-weightbold;
    
margin-top0px;
    
line-height21px;
    
height22px;
    
background-color#EAEAEA;
}
td#centerLcolumn .blockContent {
    
padding3px;
    
line-height120%;
    
background-color#EAEAEA;
    
margin0px;

}

td#centerRcolumn {width: 50%; padding: 0px 0px 0px 5px;}
td#centerRcolumn .blockTitle {
    
padding0px 3px;
    
font-weightbold;
    
line-height21px;
    
height22px;
    
background-color#EAEAEA;
}
td#centerRcolumn .blockContent {
    
padding3px;
    
line-height120%;
    
background-color#EAEAEA;
    
margin0px;
    
}

div#content {text-align: left; padding: 0px;}

td#rightcolumn {
    
padding5px;
    
width220px;
    
background-color#F9F9F9;
    
border-left-width1px;
    
border-left-stylesolid;
    
border-left-color#CCCCCC;
}
td#rightcolumn th {vertical-align: middle;}
td#rightcolumn .blockTitle {
    
padding0px 3px;
    
font-size12px;
    
color#464646;
    
font-weightbold;
    
line-height21px;
    
height22px;
    
text-alignleft;
    
padding0 0 0 30px
    
background-image:url(images/prawa.gif); 
    
background-positionleft
    
background-repeatrepeat
    
color#f7f7f7; 
    
font-weightbold
    
height33px
    
vertical-alignmiddle;}
}
td#rightcolumn .blockContent {
    
padding3px;
    
line-height120%;
}

#footerbar {
    
text-align:center;
    
padding3px;
    
font-size10px;
    
color#650B03;
    
height30px;
}

td#mainmenu a {
    
displayblock;
    
margin0;
    
padding4px;
    
color#ffffff;
    
font-weightnormal;
    
font-size12px;
    
border-bottom-width1px;
    
border-bottom-styledotted;
    
border-bottom-color#999999;
}
td#mainmenu a:hover {
    
text-decorationnone;
    
color#ffffff;
    
background-color#FFFFFF;
}
td#mainmenu a.menuTop {
    
padding-left10px;
    
color#ffffff;
}
td#mainmenu a.menuMain {
    
padding-left10px;
}
td#mainmenu a.menuSub {
    
color#ffffff;
    
padding-left19px;
}

td#usermenu a {display: block; margin: 0; padding: 4px;}
td#usermenu a:hover {}
td#usermenu a.menuTop {}
td#usermenu a.highlight {background-color: #fcc;}



.outer {
}
.
head {background-color#F2F2F2; padding: 5px; font-weight: bold;}
.even {
    
padding5px;
    
background-color#F4F4F4;
}
.
odd {padding5px;}
.
foot {background-color#F2F2F2; padding: 5px; font-weight: bold;}
tr.even td {
    
padding5px;
    
background-color#F4F4F4;
}
tr.odd td {padding5px;}

div.errorMsg background-color#FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.confirmMsg background-color#DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg background-color #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}

div.xoopsCode background#FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
div.xoopsQuote background#FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}


.comTitle {font-weightboldmargin-bottom2px;}
.
comText {padding2px;}
.
comUserStat {font-size10pxcolor#2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weightnormal;}
.
comUserStatus {margin-left2pxmargin-top10pxcolor#2F5376; font-weight:bold; font-size: 10px;}
.comUserRank {margin2px;}
.
comUserRankText {font-size10px;font-weight:bold;}
.
comUserRankImg {border0;}
.
comUserName {}
.
comUserImg {margin2px;}
.
comDate {font-weightnormalfont-styleitalicfont-sizesmaller}
.
comDateCaption {font-weightboldfont-stylenormal;}
#leftcolumn {
    
padding10px;
    
width200px;
    
background-color#ffffff;
    
border-right-width1px;
    
border-right-stylesolid;
    
border-right-color#CCCCCC;
}
#obFooter {
    
font-size10px;
    
line-height17px;
    
height18px;
    
text-alignleft;
    
padding5px;
    
background-color#222123;
    
color#FFFFFF;
    
border-top-width2px;
    
border-top-stylesolid;
    
border-top-color#000000;
}
img {
    
border0px;
}
#obBanner {
    
text-aligncenter;
    
padding5px;
}


.
intextPodtrzeni {
    
color#AA0003;
    
text-decorationunderline;
    
font-weightbold;
    
border-bottom1px double # AA0003;
}


Best regards.

2
Mamba
Re: Problem with background
  • 2011/9/5 12:07

  • Mamba

  • Moderator

  • Posts: 11366

  • Since: 2004/4/23


It seems like the background image is centered, but the problem is that the image itself is shifted to the left.

The left margin in the image is smaller than the right one, so if you center your content table, you'll have a gap on the left.

Fix the image, and you'll be OK.

Or shift the content to the left by around 14 pixels, so it matches the image.
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

3
Hadesteam
Re: Problem with background
  • 2011/9/5 12:39

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


OK thanks ! But tell me how can I move the page 14 pixels to the left ?

Regards.

4
Tarik
Re: Problem with background
  • 2011/9/5 13:03

  • Tarik

  • Not too shy to talk

  • Posts: 170

  • Since: 2010/2/3 1


Like Mamba said you must either shift the image or shift the content
here is the shifted image
http://img851.imageshack.us/img851/8459/backgroundpq.png
Some people like what you do,
-- some people hate what you do,
---- but most people simply don’t give a damn.

5
chco2
Re: Problem with background
  • 2011/9/5 14:02

  • chco2

  • Module Developer

  • Posts: 374

  • Since: 2004/3/5 1


try adding to the style :

#obLayout { margin-left:-10px; }
“It's amazing the way people cling to insults. Or what they think are insults.”

6
Hadesteam
Re: Problem with background
  • 2011/9/7 15:57

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


Big thanks for Your help - it Works :)

I have one more question... i`m using module "icontent" www.kulturystyka.org.pl/modules/icontent but in single page not displays TITLE PAGE - this is very important for me for Seo Friendly Titles.

Look at this single page:
http://www.kulturystyka.org.pl/modules/icontent/index.php?page=70

This module only displays "iContent" in title :(

Any sugestions ?

Regards.

7
MACTEP
Re: Problem with background
  • 2011/9/7 18:37

  • MACTEP

  • Not too shy to talk

  • Posts: 127

  • Since: 2009/4/4 5


You do not think at all of users.
1. The background picture in PNG - occupies 180кB, at code conversion in jpg the picture occupies 21 кB and if to cut out the unnecessary middle, 17кB - economy 163 кB

2. Logo - 2ddc.png - occupies 300кB. At code conversion in jpg it is received 35 кB - economy 265 кB

Total, instead of 480кБ we load all 52кB. What for once again to anger the visitor?

8
Hadesteam
Re: Problem with background
  • 2011/9/8 11:42

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


MACTEP - thank you for these instructions applied to them and changed the image size.

But what about module icontent ?

Regards.

Login

Who's Online

204 user(s) are online (109 user(s) are browsing Support Forums)


Members: 0


Guests: 204


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits