RESOLVED: Centering Logo

[gami]

How can I set logo to be on center of the forum?

[DawPi]

Hi,

go to:

ACP > LOOK & FEEL > ( choose skin ) > Edit Template HTML > All Global HTML >> global_board_header

Find:

	<div id="logostrip"><a href='{$this->ipsclass->base_url}'><!--ipb.logo.start--><img src='style_images/<#IMG_DIR#>/logo4.gif' style='vertical-align:top' alt='IPB' border='0' /><!--ipb.logo.end--></a></div>

Change to:

	<div id="logostrip"><a href='{$this->ipsclass->base_url}'><!--ipb.logo.start--><center><img src='style_images/<#IMG_DIR#>/logo4.gif' style='vertical-align:top' alt='IPB' border='0' /></center><!--ipb.logo.end--></a></div>

Save.

Done!

[gami]

Hmm .. Default logo is on center now .. but my uploaded isn't .. I try to rename it to logo4 .. still he's not on center .. what seems to be the problem ??

[DawPi]

Show me your global_board_header template bit and CSS related to this bit and i try a look on it.

[gami]

This is global header :

<!--ipb.javascript.start-->

<script type="text/javascript">

//<![CDATA[

var ipb_var_st = "{$this->ipsclass->input['st']}";

var ipb_lang_tpl_q1 = "{$this->ipsclass->lang['tpl_q1']}";

var ipb_var_s = "{$this->ipsclass->session_id}";

var ipb_var_phpext = "{$this->ipsclass->vars['php_ext']}";

var ipb_var_base_url = "{$this->ipsclass->js_base_url}";

var ipb_var_image_url = "{$this->ipsclass->vars['img_url']}";

var ipb_input_f = "{$this->ipsclass->input['f']}";

var ipb_input_t = "{$this->ipsclass->input['t']}";

var ipb_input_p = "{$this->ipsclass->input['p']}";

var ipb_var_cookieid = "{$this->ipsclass->vars['cookie_id']}";

var ipb_var_cookie_domain = "{$this->ipsclass->vars['cookie_domain']}";

var ipb_var_cookie_path = "{$this->ipsclass->vars['cookie_path']}";

var ipb_md5_check = "{$this->ipsclass->md5_check}";

var ipb_new_msgs = {$this->ipsclass->member['new_msg']};

var use_enhanced_js = {$this->ipsclass->can_use_fancy_js};

var use_charset = "{$this->ipsclass->vars['gb_char_set']}";

var ipb_myass_chars_lang = "{$this->ipsclass->lang['myass_chars']}";

var ajax_load_msg = "{$this->ipsclass->lang['ajax_loading_msg_new']}";

//]]>

</script>

<script type="text/javascript" src='jscripts/ips_ipsclass.js'></script>

<script type="text/javascript" src='jscripts/ipb_global.js'></script>

<script type="text/javascript" src='jscripts/ips_menu.js'></script>

<script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/ips_menu_html.js'></script>

<script type="text/javascript" src='cache/lang_cache/{$this->ipsclass->lang_id}/lang_javascript.js'></script>

<script type="text/javascript">

//<![CDATA[

var ipsclass = new ipsclass();

ipsclass.init();

ipsclass.settings['do_linked_resize'] = parseInt( "{$this->ipsclass->vars['resize_linked_img']}" );

ipsclass.settings['resize_percent'] = parseInt( "{$this->ipsclass->vars['resize_img_percent']}" );

//]]>

</script>

<!--ipb.javascript.end-->

<div class="borderwrap2">

<div id="logostrip"><a href='{$this->ipsclass->base_url}'><!--ipb.logo.start--><img src='style_images/subblack/logo4.gif' alt='IPB' style='vertical-align:top' border='0' /><!--ipb.logo.end--></a></div>

<div id="submenu">

<!--ipb.leftlinks.start-->

<if="$this->ipsclass->vars['home_url']">

<div class='ipb-top-left-link'><a href="{$this->ipsclass->vars['home_url']}">{$this->ipsclass->vars['home_name']}</a></div>

</if>

<if="$this->ipsclass->vars['csite_on']">

<div class='ipb-top-left-link'><a href="{$this->ipsclass->base_url}act=home">{$this->ipsclass->vars['csite_title']}</a></div>

</if>

<!--IBF.RULES-->

<!--ipb.leftlinks.end-->

<!--ipb.rightlinks.start-->

<div class='ipb-top-right-link'><a href="{$this->ipsclass->base_url}act=Help">{$this->ipsclass->lang['tb_help']}</a></div>

<div class='ipb-top-right-link' id="ipb-tl-search"><a href="{$this->ipsclass->base_url}act=Search&f={$this->ipsclass->input['f']}">{$this->ipsclass->lang['tb_search']}</a></div>

<div class='ipb-top-right-link'><a href="{$this->ipsclass->base_url}act=Members">{$this->ipsclass->lang['tb_mlist']}</a></div>

<div class='ipb-top-right-link'><a href="{$this->ipsclass->base_url}act=calendar">{$this->ipsclass->lang['tb_calendar']}</a></div>

<if="$component_links != """>

{$component_links}

</if>

<div class='popupmenu-new' id='ipb-tl-search_menu' style='display:none;width:210px'>

<form action="{$this->ipsclass->base_url}act=Search&CODE=01" method="post">

<input type='hidden' name='forums' id='gbl-search-forums' value='all' />

<input type="text" size="20" name="keywords" id='ipb-tl-search-box' />

<input class="button" type="image" style='border:0px' src="{$this->ipsclass->vars['img_url']}/login-button.gif" />

<if="($this->ipsclass->input['act'] == 'sf' OR $this->ipsclass->input['act'] == 'st') AND $this->ipsclass->input['f']">

<br /><input type='checkbox' id='gbl-search-checkbox' value='1' onclick='gbl_check_search_box()' checked='checked' /> {$this->ipsclass->lang['gbl_forum_search']}

</if>

</form>

<div style='padding:4px'>

<a href='{$this->ipsclass->base_url}act=Search'>{$this->ipsclass->lang['gbl_more_search']}</a>

</div>

</div>

<script type="text/javascript">

ipsmenu.register( "ipb-tl-search", 'document.getElementById("ipb-tl-search-box").focus();' );

gbl_check_search_box();

</script>

<!--ipb.rightlinks.end-->

</div>

</div>

<if="$this->ipsclass->can_use_fancy_js != 0">

<script type="text/javascript" src='jscripts/ips_xmlhttprequest.js'></script>

<script type="text/javascript" src='jscripts/ipb_global_xmlenhanced.js'></script>

<script type="text/javascript" src='jscripts/dom-drag.js'></script>

<div id='get-myassistant' style='display:none;width:400px;text-align:left;'>

<div class="borderwrap">

<div class='maintitle' id='myass-drag' title='{$this->ipsclass->lang['myass_drag']}'>

<div style='float:right'><a href='#' onclick='document.getElementById("get-myassistant").style.display="none"'>[X]</a></div>

<div>{$this->ipsclass->lang['myass_title']}</div>

</div>

<div id='myass-content' style='overflow-x:auto;'></div>

</div>

</div>

<!-- Loading Layer -->

<div id='loading-layer' style='display:none'>

<div id='loading-layer-shadow'>

<div id='loading-layer-inner'>

<img src='style_images/<#IMG_DIR#>/loading_anim.gif' border='0' alt='{$this->ipsclass->lang['ajax_loading_msg']}' />

<span style='font-weight:bold' id='loading-layer-text'>{$this->ipsclass->lang['ajax_loading_msg']}</span>

</div>

</div>

</div>

<!-- / Loading Layer -->

<!-- Msg Layer -->

<div id='ipd-msg-wrapper'>

<div id='ipd-msg-title'>

<a href='#' onclick='document.getElementById("ipd-msg-wrapper").style.display="none"; return false;'><img src='style_images/<#IMG_DIR#>/close.png' alt='X' title='Close Window' class='ipd' /></a>

Edytowane 22 Stycznia 2009 przez gami

[DawPi]

borderwrap2 and logostrip.

[gami]

.borderwrap2{

border: 1px solid #000;

padding: 0px;

margin: 0px;

#logostrip{

background: #000 url(<#IMG_DIR#>/tile_back.png);

border: 1px solid #000;

height: 200px;

margin: 0;

padding: 0;

}

I change this logostrip height to 200px to put bigger logo .. Maybe that's problem ??

[DawPi]

Hmm .. Default logo is on center now .. but my uploaded isn't .. I try to rename it to logo4 .. still he's not on center .. what seems to be the problem ??

Hym, could you show me screen on your board with action what do you want to do?

I don't really know what you're trying to do. ;/

[gami]

Some members of my forum are complaining that logo has some empty spot on the right side .. few inches maybe because of resolusion they are using I don't know ..

it looks like this ..

on the right side have some empty spot .. not fitting right

[DawPi]

Oh, there is one idea..

Change:

#logostrip{
background: #000 url(<#IMG_DIR#>/tile_back.png);

To:

#logostrip{
background: #000  url(<#IMG_DIR#>/tile_back.png) repeat-x top left;

Of course in CSS.

Try this and let me know if that fix your logo area..

[gami]

it's still same .. maybe is to big ?? 1,000 x 200 pixels

[DawPi]

Try change:

#logostrip{
background: #000 url(<#IMG_DIR#>/tile_back.png);
border: 1px solid #000;
height: 200px;
margin: 0;
padding: 0;
}

To:

#logostrip{
background: #000 url(<#IMG_DIR#>/tile_back.png);
border: 1px solid #000;
height: 200px;
width: 100%;
margin: 0;
padding: 0;
}

[gami]

Nothing Change

[DawPi]

Wtf? o.O

Try change this:

<!--ipb.logo.start--><img src='style_images/<#IMG_DIR#>/logo4.gif' style='vertical-align:top' alt='IPB' border='0' /><!--ipb.logo.end-->

To:

<!--ipb.logo.start--><img src='style_images/<#IMG_DIR#>/logo4.gif' style='vertical-align:top' alt='IPB' border='0' width='100%' /><!--ipb.logo.end-->

[DawPi]

Man!

You have wrong CSS!

You have:

#logostrip{
background: #000 url(<#IMG_DIR#>/tile_back.png);

But should have:

#logostrip{
background: #000 url(style_images/<#IMG_DIR#>/tile_back.png);

Change into it and try again. And check exist tile_back.png image in your skin directory on FTP.

[gami]

that's it .. 10x man .. this logo gives me a headache .. Now, it looks great. tnx again buddy .. cheers

[DawPi]

The issue this topic was opened for has now been resolved.