XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme and template troubleshooting 
  4.  / Problem with background
Register
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-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    font-size: 11px;
    background-image: url(images/background.png);
    background-color: #000b0d;
    background-position: center top;
    background-repeat: no-repeat;
 
}
form {
    margin: 0px;
    padding: 0px;
}
a {
    color: #AA0003;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}
#obCenter {
    text-align: center;
    padding-bottom: 20px;
}
table {
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}
#obLayout {
    width: 780px;
    margin: 0px auto;
    padding: 0px;
    text-align: left;
    background-color: #FFFFFF;
}
#obNav {
    height: 26px;
    background-image: url(images/obNav.jpg);
    margin: 0px;
    padding: 0px;
}
#obNav a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 11px;
    letter-spacing: 2px;
    line-height: 26px;
}
#obNav a:hover {
    color: #FFCC00;
}

#obHead {
    background-color: #AB0000;
}
td {
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}
#obR1 {
    color: #FFFFFF;
    text-align: right;
    padding: 4px 4px 0px;
    background-color: #464646;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
}
#obR1 a {
    color: #CCCCCC;
    font-weight: normal;
    padding: 2px;
}
#obLogin {
    text-align: right;
    font-size: 10px;
    color: #FFFFFF;
    vertical-align: middle;
}
#obLogin input {
    font-size: 10px;
    background-color: #464646;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #8D8D8D;
    border-bottom-color: #8D8D8D;
    border-left-color: #000000;
    color: #FFFFFF;
}
.obBlock {
    padding: 2px;
}
.obBlockC {
    padding: 2px;
}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #2F5376}

input.formButton {}

.item {
}
.itemHead {
    color: #FFFFFF;
    font-weight: bold;
    text-transform: capitalize;
    background-color: #650B03;
    height: 22px;
    line-height: 21px;
    padding-left: 7px;
}
.itemInfo {
    text-align: right;
    padding: 3px;
    background-color: #F4F4F4;
}
.itemTitle a {
    font-weight: bold;
    color: #FFFFFF;
}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {
    background-color: #FFFFFF;
    margin-top: 5px;
}
.itemText {
    line-height: 1.5em;
    text-align: justify;
    padding-right: 5px;
    padding-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.itemText:first-letter {font-size: 133%; font-weight: bold;}
.itemFoot {
    text-align: right;
    padding: 3px;
    background-color: #F4F4F4;
}
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}

th {
    background-color: #650B03;
    color: #FFFFFF;
    vertical-align : middle;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 21px;
    height: 22px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
}

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 {
    padding: 0px 3px;
    font-size: 12px;
    color: #000000;
    font-weight: bold;
    line-height: 21px;
    height: 22px;
    text-align: left;
    vertical-align: middle;
    padding-left: 10px;
    background-image:url(images/lewa.gif); 
    background-position: left; 
    background-repeat: repeat;
    color: #f7f7f7; 
    font-weight: bold; 
    height: 33px;
}
td#leftcolumn div.blockContent {
    padding: 3px;
    line-height: 120%;
    line-height: 120%;
}


td#centercolumn {
    padding: 5px;
}


td#centercolumn th {vertical-align: middle;}
td#centerCcolumn {padding: 0px;}
td#centerCcolumn .blockTitle {
    padding: 0px 3px;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    line-height: 15px;
    height: 16px;
    background-color: #650B03;
    padding: 0 0 0 30px; 
    background-image:url(images/srodek.gif); 
    background-position: left; 
    background-repeat: repeat; 
    color: #f7f7f7; 
    font-weight: bold; 
    height: 33px; 
vertical-align: middle;}
}
td#centerCcolumn .blockContent {
    padding: 3px;
    line-height: 120%;
    background-color: #FFFFFF;
    margin: 0px;

}

td#centerLcolumn {width: 50%; padding: 0px 5px 0px 0px;}
td#centerLcolumn .blockTitle {
    padding: 0px 3px;
    font-weight: bold;
    margin-top: 0px;
    line-height: 21px;
    height: 22px;
    background-color: #EAEAEA;
}
td#centerLcolumn .blockContent {
    padding: 3px;
    line-height: 120%;
    background-color: #EAEAEA;
    margin: 0px;

}

td#centerRcolumn {width: 50%; padding: 0px 0px 0px 5px;}
td#centerRcolumn .blockTitle {
    padding: 0px 3px;
    font-weight: bold;
    line-height: 21px;
    height: 22px;
    background-color: #EAEAEA;
}
td#centerRcolumn .blockContent {
    padding: 3px;
    line-height: 120%;
    background-color: #EAEAEA;
    margin: 0px;
    
}

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

td#rightcolumn {
    padding: 5px;
    width: 220px;
    background-color: #F9F9F9;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCCCCC;
}
td#rightcolumn th {vertical-align: middle;}
td#rightcolumn .blockTitle {
    padding: 0px 3px;
    font-size: 12px;
    color: #464646;
    font-weight: bold;
    line-height: 21px;
    height: 22px;
    text-align: left;
    padding: 0 0 0 30px; 
    background-image:url(images/prawa.gif); 
    background-position: left; 
    background-repeat: repeat; 
    color: #f7f7f7; 
    font-weight: bold; 
    height: 33px; 
    vertical-align: middle;}
}
td#rightcolumn .blockContent {
    padding: 3px;
    line-height: 120%;
}

#footerbar {
    text-align:center;
    padding: 3px;
    font-size: 10px;
    color: #650B03;
    height: 30px;
}

td#mainmenu a {
    display: block;
    margin: 0;
    padding: 4px;
    color: #ffffff;
    font-weight: normal;
    font-size: 12px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #999999;
}
td#mainmenu a:hover {
    text-decoration: none;
    color: #ffffff;
    background-color: #FFFFFF;
}
td#mainmenu a.menuTop {
    padding-left: 10px;
    color: #ffffff;
}
td#mainmenu a.menuMain {
    padding-left: 10px;
}
td#mainmenu a.menuSub {
    color: #ffffff;
    padding-left: 19px;
}

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 {
    padding: 5px;
    background-color: #F4F4F4;
}
.odd {padding: 5px;}
.foot {background-color: #F2F2F2; padding: 5px; font-weight: bold;}
tr.even td {
    padding: 5px;
    background-color: #F4F4F4;
}
tr.odd td {padding: 5px;}

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-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}
#leftcolumn {
    padding: 10px;
    width: 200px;
    background-color: #ffffff;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #CCCCCC;
}
#obFooter {
    font-size: 10px;
    line-height: 17px;
    height: 18px;
    text-align: left;
    padding: 5px;
    background-color: #222123;
    color: #FFFFFF;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #000000;
}
img {
    border: 0px;
}
#obBanner {
    text-align: center;
    padding: 5px;
}


.intextPodtrzeni {
    color: #AA0003;
    text-decoration: underline;
    font-weight: bold;
    border-bottom: 1px double # AA0003;
}


Best regards.
2
Mamba
Re: Problem with background

  • 2011/9/5 12:07

  • Mamba

  • Moderator

  • Posts: 11409

  • 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.11 | 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" http://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

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

406 user(s) are online (305 user(s) are browsing Support Forums)

Members: 0

Guests: 406

more...

Donat-O-Meter

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

Latest GitHub Commits