MyBB Community Forums

Backup your Default Template Set
I may have excluded some menu items, i am 95% sure i didn't, just re-check.

This tutorial is for forums who want a professional confluenced header underneath the logo. The rounded CSS corners do not use any images. Also good for heavy traffic forums who don't want a lot of attention to the header.

The result:



- AdminCP > Templates & Style > Themes > Add stylesheet
- Name it rounded.css and click "Write my own content" - leave window open.
- Go to http://www.spiffycorners.com/ and set a foreground and background color (i prefer white background)
- Click 3px, 5px, or 9px to generate CSS code
- Copy CSS code only (ignore HTML) to "Write my own content" area with no style tags.

or copy mine:

.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#def0f4}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #f0f8fa;
  border-right:1px solid #f0f8fa;
  background:#e6f3f6}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #fbfdfd;
  border-right:1px solid #fbfdfd;
  background:#e4f2f6}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #e4f2f6;
  border-right:1px solid #e4f2f6;}
.spiffy4{
  border-left:1px solid #f0f8fa;
  border-right:1px solid #f0f8fa}
.spiffy5{
  border-left:1px solid #e6f3f6;
  border-right:1px solid #e6f3f6}
.spiffyfg{
  background:#def0f4}

- Go to global.css theme and replace the following classes with these values:

#panel {
	color: #000000;
	padding: 5px;	
	font-size: 11px;
}

.logo {
	margin-bottom:10px;
}

#panel .links {
	margin: 0;
	float: left;
}


.menu ul {
	color: #000000;
	text-align: right;
	padding: 0px;	
	font-family: Tahoma;
	font-size: 11px;
	font-weight: bold;
}

.menu ul a:link {
	color: #4874a3;
	text-decoration: none;
}

.menu ul a:visited {
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	color: #000000;
	text-decoration: underline;
}


.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

- Go to templates, your template > Header Templates > header
- Replace All with:

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
&nbsp;<hr class="hidden" />
<div>
  <b class="spiffy">
  <b class="spiffy1"><b></b></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy3"></b>
  <b class="spiffy4"></b>
  <b class="spiffy5"></b></b>

  <div class="spiffyfg">
			<div id="panel">
				{$welcomeblock}
			<div class="menu">
				<ul>
					<li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a>&nbsp;|</li>
					<li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a>&nbsp;|</li>
					<li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a>&nbsp;|</li>
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
				</ul>
			</div>
			</div>
  </div>

  <b class="spiffy">
  <b class="spiffy5"></b>
  <b class="spiffy4"></b>
  <b class="spiffy3"></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy1"><b></b></b></b>
</div>


		</div>
		<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			<navigation>
			<br />

- Open header_welcomeblock_member and replace all with:

<span class="float_right">{$lang->welcome_current_time}&nbsp;|&nbsp;<a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a></span>
		{$lang->welcome_back} &mdash; <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a><br />
<span class="float_right"><a href="{$mybb->settings['bburl']}/usercp.php"><strong>{$lang->welcome_usercp}</strong></a>{$modcplink}{$admincplink}</span>
				<a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}
				<span class="links"><a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a> | <a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a></span>

Thats it, if i missed something or it didn't turn out like the picture above let me know.

Moved, good tutorial

thanks a bunch for this tutorial

Welcome :0

I use the CSS3 border-radius property, since it's much more simpler, and you don't have to add in all those empty tags.

Safari and Firefox are the only ones to use it right now, but all browsers should be using CSS3 within 2 years.

(2009-02-18, 12:52 AM)RenegadeFan Wrote: [ -> ]I use the CSS3 border-radius property, since it's much more simpler, and you don't have to add in all those empty tags.

Safari and Firefox are the only ones to use it right now, but all browsers should be using CSS3 within 2 years.

Hmm.... I wonder which browser will be last to update to CSS3...

*points to IE* Lol.

very good tutorial

I need some help, well its a good tut, but I want it FLUID like befor, this one is like STRETCHED all to the sides... Can someone help me..