OK so this is the tut on integrating Mybb with Get simple:
Requirements:
Mybb (i did this with mybb 1.6.9)
Get Simple (I did this with 3.1.2)
Basic HTML and CSS knowledge
Recommendations:
Finish setting up your website as you will also be copying your websites navigation raw HTML code and you will have to manually edit your MyBB header if you make a change to your main website menu.
Start:
MyBB:
Navigate to your forum community admin panel and login. Then go to
Templates & Style -> Templates ->Your forum style (the one you want integrated)
Then open "Header Templates" -> "Header"
GS:
Login to your Get Simple admin panel and activate the style you want to be integrated with the forum. (If you dont then you will be integrating whatever theme is activated already with the forum)
Browser:
This is where your web browser comes in more. Go to your website that has Get Simple installed on. Then view the source code.
To do this: Right click your website page and click "View Page Source"
In IE: Page -> View source
It should be more or less the same on most browsers. If you cant find it then simply do the keystroke commands "ctrl + u" at the same time to load the source.
__________________________________
Now that you have opened everything above you need to take the following code from your website source code.
Code:
<head>
<meta name="description" content="SilabQuest was created on a 317 client base. SilabQuest is available on a webclient and is soon to be released for desktop so you can play from the de" />
<meta name="keywords" content="getsimple, easy, content management system" />
<meta name="generator" content="GetSimple" />
<link rel="canonical" href="http://silabquest.tk/" />
<link href="http://silabquest.tk/rss.rss" rel="alternate" type="application/rss+xml" title="">
<meta name="robots" content="index, follow" />
<meta name="Generator" content="GetSimple" />
<meta name="Keywords" content="GetSimple" />
<meta name="Description" content="GetSimple - fresh oranges theme" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" href="http://silabquest.tk/theme/silabquest/style.css" media="all" />
<link rel="shortcut icon" href="http://silabquest.tk/theme/silabquest/favicon.ico">
<title>
Welcome to SilabQuest :: SilabQuest </title>
</head>
<body id="index" >
<div class="container">
<div id="logo"><!-- logo - If U want, change logo.png in images folder -->
<a href="http://silabquest.tk/" title="SilabQuest"><img src="http://silabquest.tk/theme/silabquest/images/logo.png" alt="SilabQuest" title="SilabQuest" /></a> </div>
<div id="menu">
<ul><li class="current index"><a href="http://silabquest.tk/" title="Welcome to SilabQuest">Home</a></li>
<li class="play"><a href="http://silabquest.tk/index.php?id=play" title="Play">Play</a></li>
<li class="news"><a href="http://silabquest.tk/index.php?id=news" title="Site News">Site News</a></li>
<li class="server-blog"><a href="http://silabquest.tk/index.php?id=server-blog" title="Server Blog">Server Blog</a></li>
<li class="forums"><a href="/community/" title="Forums">Forums</a></li></ul>
<div class="clear"></div>
OK once you have that code you need to remove some stuff.
Remove everything except these two lines in the tags <head></head>
Keep these two lines
Code:
<link rel="stylesheet" type="text/css" href="http://silabquest.tk/theme/silabquest/style.css" media="all" />
<link rel="shortcut icon" href="http://silabquest.tk/theme/silabquest/favicon.ico">
Everything else you remove.
So your new code should look like this.
Code:
<head>
<link rel="stylesheet" type="text/css" href="http://silabquest.tk/theme/silabquest/style.css" media="all" />
<link rel="shortcut icon" href="http://silabquest.tk/theme/silabquest/favicon.ico">
</head>
<body id="index" >
<div class="container">
<div id="logo"><!-- logo - If U want, change logo.png in images folder -->
<a href="http://silabquest.tk/" title="SilabQuest"><img src="http://silabquest.tk/theme/silabquest/images/logo.png" alt="SilabQuest" title="SilabQuest" /></a> </div>
<div id="menu">
<ul><li class="index"><a href="http://silabquest.tk/" title="Welcome to SilabQuest">Home</a></li>
<li class="play"><a href="http://silabquest.tk/index.php?id=play" title="Play">Play</a></li>
<li class="news"><a href="http://silabquest.tk/index.php?id=news" title="News">Site News</a></li>
<li class="server blog"><a href="http://silabquest.tk/index.php?id=server-blog">Server Blog</a></li>
<li class="current forums"><a href="http://silabquest.tk/community/" title="Forums">Forums</a></li>
</ul>
</div>
<div class="clear"></div>
Go into
MyBB where you opened your header template and insert this in the top of the code. So your header code for mybb could look like this.
Now you also need to remove the following code from the MyBB header template.
Remove:
Code:
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
That top part is located under this div id
Now your header code should look like this.
Code:
<head>
<link rel="stylesheet" type="text/css" href="http://silabquest.tk/theme/silabquest/style.css" media="all" />
<link rel="shortcut icon" href="http://silabquest.tk/theme/silabquest/favicon.ico">
</head>
<body id="index" >
<div class="container">
<div id="logo"><!-- logo - If U want, change logo.png in images folder -->
<a href="http://silabquest.tk/" title="SilabQuest"><img src="http://silabquest.tk/theme/silabquest/images/logo.png" alt="SilabQuest" title="SilabQuest" /></a> </div>
<div id="menu">
<ul><li class="index"><a href="http://silabquest.tk/" title="Welcome to SilabQuest">Home</a></li>
<li class="play"><a href="http://silabquest.tk/index.php?id=play" title="Play">Play</a></li>
<li class="news"><a href="http://silabquest.tk/index.php?id=news" title="News">Site News</a></li>
<li class="server blog"><a href="http://silabquest.tk/index.php?id=server-blog">Server Blog</a></li>
<li class="current forums"><a href="http://silabquest.tk/community/" title="Forums">Forums</a></li>
</ul>
</div>
<div class="clear"></div>
<body id="contain">
<a name="top" id="top"></a>
<div id="header">
<div class="menu2">
<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="content2">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>
<br />
Now we are done with the header. You can attempt to load your website forum. You may notice that it could be a little messed up on the forum. This is where CSS comes in.
But lets not worry about the css just yet. REMEMBER TO SAVE YOUR TEMPLATE FILE!
Go into the next
Mybb template file.
Footer Templates -> Footer.
Browser:
Now locate the following in your website source.
Code:
<div class="clear"></div>
</div>
<div class="contentfooter" ></div>
<div id="footers">
<div class="footerleft">
<ul><li class="current index"><a href="http://silabquest.tk/" title="Welcome to SilabQuest">Home</a></li>
<li class="play"><a href="http://silabquest.tk/index.php?id=play" title="Play">Play</a></li>
<li class="news"><a href="http://silabquest.tk/index.php?id=news" title="Site News">Site News</a></li>
<li class="server-blog"><a href="http://silabquest.tk/index.php?id=server-blog" title="Server Blog">Server Blog</a></li>
</ul>
</div>
<div class="footerright">
2013<a href="http://silabquest.tk/" >
SilabQuest</a> :: <a href="http://get-simple.info/" target="_blank" >Powered by GetSimple</a> <p>This website and its contents are copyright © 2013 SilabQuest</p>
<p>SilabQuest is a non-profit organization for educational and entertainment purposes.
RuneScape is owned by JaGeX Ltd. If you would like to play RuneScape, you can do so by clicking <a href="http://runescape.com/game.ws">here</a>.</p>
<br>
</div>
This is located at the end of your website source code.
MyBB
So now go back to your Footer template in mybb.
Locate this piece of code near the end of the file.
Code:
<!-- End powered by -->
Now paste in your websites footer directory after the End powered by thingy.
You are now done with the file. Save it.
CSS:
OK so if your website was all messed up in the forum heres what you have to do.
Determin where the issue is this may have to be done through Trial and error.
But to make this simple you can do what i did.
MyBB:
Navigate to templates & style. This time click on your default theme that you are integrating. Then click on "Global.css" click "Advanced"
Do the following keystrokes "ctrl + f" and search for "container" change the name of container to "contain", Then search for "content" then rename it to "content2", Then search for "menu" and rename that to "menu2" remember that for every result on "menu" you need to change from "menu" to "menu2" so the results would also show names such as
Code:
.menu ul {
color: #000000;
font-weight: bold;
text-align: right;
padding: 4px;
}
You would change this result to
Code:
.menu2 ul {
color: #000000;
font-weight: bold;
text-align: right;
padding: 4px;
}
Save your CSS. Now that you have edited all these attributes you need to go into your header template again.
So load up the "Header Templates -> Header" and then start renaming certain attributes.
So all the header code we just inserted into the template ignore it. You are searching for this div
Code:
<a name="top" id="top"></a>
below that is a header attribute and below that is a menu attribute.
So rename "<div class="menu">" To "<div class="menu2">" under
" <a name="top" id="top"></a>
<div id="header">"
And then Right above the class top there is this "<body id="container">" rename this attribute to "<body id="contain">".
That should be all you have to do. Save the template.
IMPORTANT: PLEASE MAKE SURE THAT YOU SAVED ALL YOUR TEMPLATES AND CSS FILES THAT WERE BEING EDITED DURING THIS TUTORIAL OR IT WONT WORK!!
Major notice:
If you have any issues with this tutorial then download and install the following XML. I forgot how i did it exactly. This is how i did it but i cant remember what i did completely to the CSS to finish this. I am having a blond moment (even though im a brown haired male).
So just download the XML and install it if you have any issues. if you do it the XML way then edit the footer and the header to your own header and footer HTML and change the favicon, CSS links to your site favicon and css links.
You will also need to edit the global.css file. Change all the image paths from /images/silabquest/blabla.png or /images/silabquest/blablabla.gif to your images that you uploaded for any theme. Just change /silabquest/ to /yourthemeimagedirectory/ to solve the image issues.
link to XML:
http://www.mediafire.com/?havs8tma7178zmv
If it ever has any issues at that link download the attatchment. Its the same file. The XML is in a zip file since the XML file itself isnt allowed to be uploaded in its XML format.
I discovered this issue when i was trying to make a video to go with this tutorial.
Download
