iPBFree Community Forums: Issues with LOGO and forum width - iPBFree Community Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Issues with LOGO and forum width

#1   WilsonKaupert

  • iPBFree Newbie
  • Group: Members
  • Posts: 2
  • Joined: 22-January 09
  • Name: Gabriel

Posted 28 January 2010 - 12:16 PM

My forum is http://leaguebrasil.ipbfree.com/ ; I am having problems with the LOGO and forum width. Most of people complain that the logo does not fit (on my browser it fit) or that the forum is too much large.
The problem is with the browser, I mean, in FF is everything ok, but on IE or opera the forum does not shows the background image, IE and opera just expands the forum and hide the bg.

Here goes my wrappers and my css:
</head><body>
<div class="wrapper">
<table width="100%"  height="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="mainbg-2"> </td>
    <td valign="top" height="18" align="center" id='ipbwrapper' >
	<div>
	<div id='style_block'>
<table width="100%" height="18" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="bottom"><table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td valign="middle"><a href="javascript: ipbfree_changebgcolor('#323C53', 1, 'a');">
            <div class="color_selector" id="changebgcolor_323C53" style="background-color: #323C53;"></div>
            </a></td>
          <td valign="middle"><a href="javascript: ipbfree_changebgcolor('#3E475B', 1, 'b');">
            <div  class="color_selector" id="changebgcolor_3E475B" style="background-color: #3E475B;"></div>
            </a></td>
          <td valign="middle"><a href="javascript: ipbfree_changebgcolor('#636D84', 1, 'c');">
            <div class="color_selector" id="changebgcolor_636D84" style="background-color: #636D84;"></div>
            </a></td>
          <td valign="middle"><a href="javascript: ipbfree_changebgcolor('#000000', 1, 'd');">
            <div class="color_selector" id="changebgcolor_000000"  style="background-color: #000000;"></div>
            </a></td>
        </tr>
      </table></td>
    <td width="100" align="right" valign="middle"></td>
    <td width="100" align="right" valign="bottom"><table class="width_selector" border="0" cellspacing="0" cellpadding="0">
      </table></td>
  </tr>
</table>
</div>
	<% BOARD HEADER %>  
	<div id="content">
	<% NAVIGATION %>
<% BOARD %>
	  </div>
	  <% STATS %>
<% COPYRIGHT %>
</div>
    </td>
    <td id="mainbg-3"> </td>
  </tr>
</table>
</div


html { overflow-x: auto; }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 11px;margin: 0px;padding: 0px;text-align: center;background: url('http://i745.photobucket.com/albums/xx98/kaonicx/bg_scenery.png');color: #000; }
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 11px;color: #000; }
#ipbwrapper { text-align: left;width: 90%;margin-left: auto;margin-right: auto;padding: 10px;background: #F1F3F5; }
a:link, a:visited, a:active { text-decoration: none;color: #07629C; }
a:hover { text-decoration: underline;color: #07629C; }
fieldset.search { padding: 6px;line-height: 150%; }
label { cursor: pointer; }
form { display: inline; }
img { vertical-align: middle;border: 0px; }
img.attach { padding: 2px;border: 2px outset #EEF2F7; }
.googleroot { padding: 6px;line-height: 130%; }
.googlechild { padding: 6px;margin-left: 30px;line-height: 130%; }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size: 11px;color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size: 14px;font-weight: bold;color: #00D; }
.googlepagelinks { font-size: 1.1em;letter-spacing: 1px; }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size: 10px;color: #434951; }
li.helprow { padding: 0px;margin: 0px 0px 10px 0px; }
ul#help { padding: 0px 0px 0px 15px; }
option.cat { font-weight: bold; }
option.sub { font-weight: bold;color: #555; }
.caldate { text-align: right;font-weight: bold;font-size: 11px;padding: 4px;margin: 0px;color: #777;background-color: #FFF; }
.warngood { color: green; }
.warnbad { color: red; }
.startmain { background: url('http://img683.imageshack.us/img683/4628/startmain.gif');font-weight: bold;color: #FFF; }
.startmain a:active,
.startmain a:link,
.startmain a:visited { font-weight: bold;color: #FFF; }
.endrow { background: url('http://img109.imageshack.us/img109/6549/endmain.gif');height: 18;color: #000; }
#padandcenter { margin-left: auto;margin-right: auto;text-align: center;padding: 14px 0px 14px 0px; }
#profilename { font-size: 28px;font-weight: bold; }
#calendarname { font-size: 22px;font-weight: bold; }
#photowrap { padding: 6px; }
#phototitle { font-size: 24px;border-bottom: 1px solid black; }
#photoimg { text-align: center;margin-top: 15px; }
#ucpmenu { line-height: 150%;width: 22%;background-color: #fff;border: 1px solid #345487; }
#ucpmenu p { padding: 2px 5px 6px 9px;margin: 0px; }
#ucpcontent { line-height: 150%;width: auto;background-color: #FFF;border: 1px solid #345487; }
#ucpcontent p { padding: 10px;margin: 0px; }
#ipsbanner { position: absolute;top: 1px;right: 5%; }
#logostrip { padding: 0px;margin: 0px;background-color: #3860BB;border: 1px solid #345487;background-image: url(http://img707.imageshack.us/img707/6610/tileback.gif); }
#submenu { font-size: 10px;margin: 3px 0px 3px 0px;font-weight: bold;color: #3A4F6C;background-color: #FFF;border: 1px solid #246CA8; }
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight: bold;font-size: 10px;text-decoration: none;color: #3A4F6C; }
#userlinks { background-color: #FFF;border: 1px solid #246CA8; }
#navstrip { font-weight: bold;padding: 6px 0px 6px 0px; }
.activeuserstrip { padding: 6px;background-color: #EEEEEE; }
.pformstrip { font-weight: bold;padding: 6px;margin-top: 1px;background: url('http://img707.imageshack.us/img707/4738/strip.gif');color: #fff;background-color: #D1DCEB; }
.pformstrip a:link,
.pformstrip a:active,
.pformstrip a:visited { text-decoration: none;color: #FFF; }
.pformstrip a:hover { text-decoration: underline;color: #F3F3F3; }
.pformleft { padding: 6px;margin-top: 1px;width: 25%;border-top: 1px solid #C2CFDF;border-right: 1px solid #C2CFDF;background-color: #F1F1F1; }
.pformleftw { padding: 6px;margin-top: 1px;width: 40%;border-top: 1px solid #C2CFDF;border-right: 1px solid #C2CFDF;background-color: #f1f1f1; }
.pformright { padding: 6px;margin-top: 1px;border-top: 1px solid #C2CFDF;background-color: #f1f1f1; }
.signature { font-size: 10px;line-height: 150%;color: #339; }
.postdetails { font-size: 10px; }
.postcolor { font-size: 12px;line-height: 160%; }
.normalname { font-size: 12px;font-weight: bold;color: #003; }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px; }
.unreg { font-size: 11px;font-weight: bold;color: #900; }
.post1 { background-color: #FFF; }
.post2 { background-color: #FFF; }
.postlinksbar { padding: 7px;margin-top: 1px;font-size: 10px;background-color: #fff;background-image: url(http://img691.imageshack.us/img691/8531/tilesuba.gif); }
.row1 { background-color: #fff; }
.row2 { background-color: #FFF; }
.row3 { background-color: #F1F1F1; }
.row4 { background-color: #FFF; }
.darkrow1 { color: #4C77B6;background-color: #f1f1f1; }
.darkrow2 { padding: 3px;color: #3A4F6C;background-color: #E5E5E5; }
.darkrow3 { color: #3A4F6C;background-color: #f1f1f1; }
.hlight { background-color: #F3F3F3; }
.dlight { background-color: #F2F2F2; }
.titlemedium { font-weight: bold;padding: 9px;margin: 0px;color: #206BB6;background-image: url(http://img691.imageshack.us/img691/8531/tilesuba.gif); }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active { text-decoration: underline;color: #3A4F6C; }
.maintitle { vertical-align: middle;font-weight: bold;padding: 8px 0px 8px 5px;color: #FFF;background-image: url(http://img707.imageshack.us/img707/6610/tileback.gif); }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none;color: #FFF; }
.maintitle a:hover { text-decoration: underline; }
.plainborder { background-color: #FFF;border: 1px solid #345487; }
.tableborder { padding: 1px;background-color: #FFF;border: 1px solid #345487; }
.tablefill { padding: 6px;background-color: #FFF;border: 1px solid #345487; }
.tablepad { padding: 6px;background-color: #FFF; }
.tablebasic { width: 100%;padding: 0px 0px 0px 0px;margin: 0px;border: 0px; }
.wrapmini { float: left;line-height: 1.5em;width: 25%; }
.pagelinks { float: left;line-height: 1.2em;width: 35%; }
.desc { font-size: 10px;color: #434951; }
.edit { font-size: 9px; }
.searchlite { font-weight: bold;color: #F00;background-color: #FF0; }
#QUOTE { white-space: normal;font-family: Verdana, Arial;font-size: 11px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 2px;color: #465584;background-color: #F1F1F1;border: 1px solid #000; }
#CODE { white-space: normal;font-family: Courier, Courier New, Verdana, Arial;font-size: 11px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 2px;color: #465584;background-color: #F1F1F1;border: 1px solid #000; }
.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif;font-size: 9px;line-height: 12px; }
.codebuttons { font-size: 10px;font-family: verdana, helvetica, sans-serif;vertical-align: middle; }
.forminput, .textinput, .radiobutton, .checkbox { font-size: 11px;font-family: verdana, helvetica, sans-serif;vertical-align: middle; }
.thin { padding: 6px 0px 6px 0px;line-height: 140%;margin: 2px 0px 2px 0px;border-top: 1px solid #D6D6D6;border-bottom: 1px solid #B7B9BB; }
.purple { font-weight: bold;color: purple; }
.red { font-weight: bold;color: red; }
.green { font-weight: bold;color: green; }
.blue { font-weight: bold;color: blue; }
.orange { font-weight: bold;color: #F90; }


Thank you for the attention,

This post has been edited by WilsonKaupert: 28 January 2010 - 01:11 PM

0

#2   Connor

  • Mustache free since 1992
  • Group: Community Team
  • Posts: 1,138
  • Joined: 22-February 08
  • Name: Connor
  • Gender: Male
  • Country: 


Posted 28 January 2010 - 02:49 PM

You need to reduce the size of your logo image, just make it 900px and your forum should fall in to place.


Free iPods | Free iPhone | Free PS3 | Free xBox | Free PSP Go | Free PS3 Slim | Free Gifts


Tom's bribes are terrible, if you rep me I'll rep you and slap Tom with a fish, now who doesn't want to see that? V
0

#3   sman

  • iPBFree User
  • Group: Regulars
  • Posts: 282
  • Joined: 16-May 09
  • Name: Simon
  • Gender: Male
  • Country: 

Posted Yesterday, 12:43 PM

Connor, on 28 January 2010 - 07:49 PM, said:

You need to reduce the size of your logo image, just make it 900px and your forum should fall in to place.

To do that, go to ACP > Skins and Templates > Macros/Image > Edit your skin > ADD MACRO.
Then name that IPB_LOGO, and add
<img src="(LOGO URL)" width="900" title="Logo"/>

Click the
0

#4   Koniji

  • Ƹ̵̡Ӝ̵̨̄Ʒ
  • Group: Support Team
  • Posts: 1,111
  • Joined: 12-November 07
  • Name: Angie
  • Gender: Female
  • Country: 


Posted Yesterday, 05:17 PM

An option is through the CSS instead of resizing the image. It's why I moved this topic here from general support, but I haven't had a chance to answer this yet. Basically, you can just "hide" the rest of the banner if it's too large, because your skin isn't at a fixed width and it makes the width of the forum adjust to the banner's width instead at 1250px, while a "standard" screen size can be at 1024px by 768px.

Try replacing your wrappers first (those won't work well with the skin you have). Use these instead:

Header & Body
<body><div id='ipbwrapper'>
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>


Footer:
</div>


And in the CSS, find #logostrip and add this red part alongside the rest of its properties:

Quote

#logostrip { padding: 0px;margin: 0px;background-color: #3860BB;border: 1px solid #345487;background-image: url(http://img707.imageshack.us/img707/6610/tileback.gif); text-align:center; overflow-x:hidden; }

Posted Image
Feel free to look at the database items I've done through my profile under the About Me section. Gender:

Click the if this post was awesome.
0
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users