MyBB Community Forums

Full Version: How to center the header image?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
Admin CP -> Templates and Style -> Templates -> Theme of your Choice -> Header Templates -> Header

Place the content you want centered within the <div style="text-align: center;"></div> tags.

That should be it.
Try adding a <p> tag around the header, and add the attribute align="center"

So, <p align="center">HEADER STUFF</p>

Text-align in CSS only centers text, not images.
Thanks guys! Going to try it now!!
Didn't work. Here's my code:

Quote:<div id="container"> <a name="top" id="top"></a>
<div id="header"><p align="center"
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></p></div>
<div class="menu"> <ul> <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li> <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li> <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li> <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li> </ul> </div> <hr class="hidden" />
<div id="panel"> {$welcomeblock} </div> </div> <hr class="hidden" /> <br class="clear" /> <div id="content"> {$pm_notice} {$bannedwarning} {$bbclosedwarning} {$unreadreports} {$pending_joinrequests} <navigation> <br />
Quote:<div id="header"><p align="center"
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></p></div>

Here is your Problem: Try closing this tag:

Quote:<p align="center"

The tag should look like <p align="center">

Just changed that...didn't work. Still off to the right. Damn! Just when I thought I had it.

You can see it here:

http://theripetomato.ca/forums/
No need to edit templates.

Just go to Themes & Styles > Themes > Your Theme > global.css > Edit stylesheet: Advance mode and add below property:

.logo {
text-align: center;
}
Anywhere in particular?

Quote:body { background: #efefef; color: #000; font-family: Verdana, Arial, Sans-Serif; font-size: 13px; text-align: center; /* IE 5 fix */ line-height: 1.4;}a:link { color: #026CB1; text-decoration: none;}a:visited { color: #026CB1; text-decoration: none;}a:hover, a:active { color: #000; text-decoration: underline;}#container { background: #BDB9BA; border: 1px solid #e4e4e4; margin: auto auto; padding: 20px; text-align: left; color: #000000; width: 900px;}#content { /* FIX: Make internet explorer wrap correctly */ width: auto !important;}.menu ul { color: #000000; font-weight: bold; text-align: right; padding: 4px;}.menu ul a:link { color: #000000; text-decoration: none;}.menu ul a:visited { color: #000000; text-decoration: none;}.menu ul a:hover, .menu ul a:active { color: #4874a3; text-decoration: none;}#panel { background: #efefef; color: #000000; font-size: 11px; border: 1px solid #D4D4D4; padding: 8px;}#panel .remember_me input { vertical-align: middle; margin-top: -1px;}table { color: #000000; font-family: Verdana, Arial, Sans-Serif; font-size: 13px;}.tborder { background: #00000; width: 100%; margin: auto auto; border: 1px solid #00000;}.thead { background: #790000; color: #ffffff;}.thead a:link { color: #ffffff; text-decoration: none;}.thead a:visited { color: #ffffff; text-decoration: none;}.thead a:hover, .thead a:active { color: #ffffff; text-decoration: underline;}.tcat { background: #146501; color: #ffffff; font-size: 12px;}.tcat a:link { color: #000000;}.tcat a:visited { color: #000000;}.tcat a:hover, .tcat a:active { color: #000000;}.trow1 { background: #e8dfc3;}.trow2 { background: #e8dfc3;}.trow_shaded { background: #ffdde0;}.trow_selected td { background: #FFFBD9;}.trow_sep { background: #e5e5e5; color: #000; font-size: 12px; font-weight: bold;}.tfoot { background: #538A3F ; color: #ffffff;}.tfoot a:link { color: #ffffff; text-decoration: none;}.tfoot a:visited { color: #ffffff; text-decoration: none;}.tfoot a:hover, .tfoot a:active { color: #ffffff; text-decoration: underline;}.bottommenu { background: #efefef; color: #000000; border: 4px solid #00000; padding: 10px;}.navigation { color: #000000; font-size: 13px; font-weight: bold;}.navigation a:link { text-decoration: none;}.navigation a:visited { text-decoration: none;}.navigation a:hover, .navigation a:active { text-decoration: none;}.navigation .active { color: #000000; font-size: 13px; font-weight: bold;}.smalltext { font-size: 11px;}.largetext { font-size: 16px; font-weight: bold;}input.textbox { background: #ffffff; color: #000000; border: 1px solid #0f5c8e; padding: 1px;}textarea { background: #ffffff; color: #000000; border: 1px solid #0f5c8e; padding: 2px; font-family: Verdana, Arial, Sans-Serif; line-height: 1.4; font-size: 13px;}select { background: #ffffff; border: 1px solid #0f5c8e;}.editor { background: #f1f1f1; border: 1px solid #ccc;}.editor_control_bar { background: #fff; border: 1px solid #0f5c8e;}.autocomplete { background: #fff; border: 1px solid #000; color: black;}.autocomplete_selected { background: #adcee7; color: #000;}.popup_menu { background: #ccc; border: 1px solid #000;}.popup_menu .popup_item { background: #fff; color: #000;}.popup_menu .popup_item:hover { background: #C7DBEE; color: #000;}.trow_reputation_positive { background: #ccffcc;}.trow_reputation_negative { background: #ffcccc;}.reputation_positive { color: green;}.reputation_neutral { color: #444;}.reputation_negative { color: red;}.invalid_field { border: 1px solid #f30; color: #f30;}.valid_field { border: 1px solid #0c0;}.validation_error { background: url(images/invalid.gif) no-repeat center left; color: #f30; margin: 5px 0; padding: 5px; font-weight: bold; font-size: 11px; padding-left: 22px;}.validation_success { background: url(images/valid.gif) no-repeat center left; color: #00b200; margin: 5px 0; padding: 5px; font-weight: bold; font-size: 11px; padding-left: 22px;}.validation_loading { background: url(images/spinner.gif) no-repeat center left; color: #555; margin: 5px 0; padding: 5px; font-weight: bold; font-size: 11px; padding-left: 22px;}/* Additional CSS (Master) */img { border: none;}.clear { clear: both;}.hidden { display: none; float: none; width: 1%;}.hiddenrow { display: none;}.selectall { background-color: #FFFBD9; font-weight: bold; text-align: center;}.float_left { float: left;}.float_right { float: right;}.menu ul { list-style: none; margin: 0;}.menu li { display: inline; padding-left: 5px;}.menu img { padding-right: 5px; vertical-align: top;}#panel .links { margin: 0; float: right;}.expcolimage { float: right; width: auto; vertical-align: middle; margin-top: 3px;}img.attachment { border: 1px solid #E9E5D7; padding: 2px;}hr { background-color: #000000; color: #000000; height: 1px; border: 0px;}#copyright { font: 11px Verdana, Arial, Sans-Serif; margin: 0; padding: 10px 0 0 0;}#debug { float: right; text-align: right; margin-top: 0;}blockquote { background: #c6c2b4; border: 2px solid #ccc; margin: 0; padding: 4px; font-style: italic;}blockquote cite { font-weight: bold; border-bottom: 1px solid #ccc; font-style: normal; display: block; margin: 4px 0;}blockquote cite span { float: right; font-weight: normal;}blockquote cite span.highlight { float: none; font-weight: bold; padding-bottom: 0;}.codeblock { background: #fff; border: 1px solid #ccc; padding: 4px;}.codeblock .title { border-bottom: 1px solid #ccc; font-weight: bold; margin: 4px 0;}.codeblock code { overflow: auto; height: auto; max-height: 200px; display: block; font-family: Monaco, Consolas, Courier, monospace; font-size: 13px;}.subforumicon { border: 0; vertical-align: middle;}.separator { margin: 5px; padding: 0; height: 0px; font-size: 1px; list-style-type: none;}form { margin: 0; padding: 0;}.popup_menu .popup_item_container { margin: 1px; text-align: left;}.popup_menu .popup_item { display: block; padding: 3px; text-decoration: none; white-space: nowrap;}.popup_menu a.popup_item:hover { text-decoration: none;}.autocomplete { text-align: left;}.subject_new { font-weight: bold;}.highlight { background: #FFFFCC; padding-top: 3px; padding-bottom: 3px;}.pm_alert { background: #FFF6BF; border: 1px solid #FFD324; text-align: center; padding: 5px 20px; margin-bottom: 15px; font-size: 11px;}.red_alert { background: #FBE3E4; border: 1px solid #A5161A; color: #A5161A; text-align: center; padding: 5px 20px; margin-bottom: 15px; font-size: 11px;}.high_warning { color: #CC0000;}.moderate_warning { color: #F3611B;}.low_warning { color: #AE5700;}div.error { padding: 5px 10px; border-top: 2px solid #FFD324; border-bottom: 2px solid #FFD324; background: #FFF6BF; font-size: 12px;}div.error p { margin: 0; color: #000; font-weight: normal;}div.error p em { font-style: normal; font-weight: bold; padding-left: 24px; display: block; color: #C00; background: url('images/error.gif') no-repeat 0;}div.error.ul { margin-left: 24px;}.online { color: #15A018;}.offline { color: #C7C7C7;}.pagination { font-size: 11px; padding-top: 10px; margin-bottom: 5px;}.tfoot .pagination, .tcat .pagination { padding-top: 0;}.pagination .pages { font-weight: bold;}.pagination .pagination_current, .pagination a { padding: 2px 6px; margin-bottom: 3px;}.pagination a { border: 1px solid #81A2C4;}.pagination .pagination_current { background: #F5F5F5; border: 1px solid #81A2C4; font-weight: bold; color: #000;}.pagination a:hover { background: #F5F5F5; text-decoration: none;}.thread_legend, .thread_legend dd { margin: 0; padding: 0;}.thread_legend dd { padding-bottom: 4px; margin-right: 15px;}.thread_legend img { margin-right: 4px; vertical-align: bottom;}.forum_legend, .forum_legend dt, .forum_legend dd { margin: 0; padding: 0;}.forum_legend dd { float: left; margin-right: 10px;}.forum_legend dt { margin-right: 10px; float: left;}.success_message { color: #00b200; font-weight: bold; font-size: 10px; margin-bottom: 10px;}.error_message { color: #C00; font-weight: bold; font-size: 10px; margin-bottom: 10px;}.post_body { padding: 5px;}.post_content { padding: 5px 10px;}.quick_jump { background: url('images/jump.gif') no-repeat 0; width: 13px; height: 13px; padding-left: 13px; /* amount of padding needed for image to fully show */ vertical-align: middle; border: none;}.repbox { font-size:16px; font-weight: bold; padding:5px 7px 5px 7px;}._neutral { background-color:#FAFAFA; color: #999999; border:1px solid #CCCCCC;}._minus { background-color: #FDD2D1; color: #CB0200; border:1px solid #980201;}._plus { background-color:#E8FCDC; color: #008800; border:1px solid #008800;}.pagination_breadcrumb { background-color: #f5f5f5; border: 1px solid #fff; outline: 1px solid #ccc; padding: 5px; margin-top: 5px; font-weight: normal;}.pagination_breadcrumb_link { vertical-align: middle; cursor: pointer;}
you can put it above of #container ; like below

.logo {
text-align: center;
}

#container {
background: #BDB9BA;
border: 1px solid #e4e4e4;
margin: auto auto;
padding: 20px;
text-align: left;
color: #000000;
width: 900px;
}
Yes you can put anywhere.
Thanks guys...you rock!
Works PERFECT guys! One more quick question, probably easy for you....how do I make that image a clickable link to take me back to my home page?
Pages: 1 2 3