Basic steps to get mysupport and Emerald theme to play together

Here is a real simple short and sweet start to getting the mysupport plugin working with the Emerald theme just in case anyone was in need of such:


1) Download Emerald theme:

https://community.mybb.com/mods.php?acti...w&pid=1037

2) Install Emerald theme

3) Download https://github.com/vintagedaddyo/MySuppo...p?raw=true

4) Install mysupport plugin......

Quote:To Install:

Upload ./inc/plugins/mysupport.php to ./inc/plugins/
Upload ./admin/modules/config/mysupport.php to ./admin/modules/config/
Upload ./inc/languages/english/mysupport.lang.php to ./inc/languages/english/
Upload ./inc/languages/english/admin/mysupport.lang.php to ./inc/languages/english/admin/

Upload ./images to ./images **


** If that is confusing then simply think of the Upload folder as your forum root directory and the the contentd with the Upload folder are already in correct structure so just follow that and simply upload the contents inside the upload folder to your forum root directory Ie: /upload/ = /forumroot/


Go to ACP > Plugins > Install and Activate
Go to ACP > Configuration > MySupport Settings > Configure Settings.
Go to ACP > Configuration > MySupport (left menu) > setup where MySupport can be used and who can use it.

5) then in the downloaded mysupport plugin package find the images folder and copy the image contents inside of it into the Emerald folder ie: images/emerald


after you setup the plugin let us begin to tweak it for Emerald:

6) in Emerald theme theme settings find mysupport.css stylesheet and find:

.usercp_nav_support_threads {
	background: url(images/usercp/mysupport_support.png) no-repeat left center;
}

.usercp_nav_assigned_threads {
	background: url(images/usercp/mysupport_assigned.png) no-repeat left center; 
}

.modcp_nav_tech_threads {
	background: url(images/modcp/mysupport_technical.png) no-repeat left center;
}

.modcp_nav_deny_support {
	background: url(images/mysupport_no_support.gif) no-repeat left center;
}

Replace that with:

.usercp_nav_support_threads {
/*	background: url(images/emerald/usercp/mysupport_support.png) no-repeat left center;*/
}

.usercp_nav_support_threads:before {
    content: "\f059";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #2ECC71;	
}

.usercp_nav_assigned_threads {
/*	background: url(images/emerald/usercp/mysupport_assigned.png) no-repeat left center; */
}

.usercp_nav_assigned_threads:before {
    content: "\f573";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #2ECC71;	
}

.modcp_nav_tech_threads {
/*	background: url(images/emerald/modcp/mysupport_technical.png) no-repeat left center;*/
}

.modcp_nav_tech_threads:before {
    content: "\f059";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #2ECC71;	
}

.modcp_nav_deny_support {
/*	background: url(images/emerald/mysupport_no_support.gif) no-repeat left center;*/
}

.modcp_nav_deny_support:before {
    content: "\f503";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #2ECC71;	
}

one last thing, now even though we commented out some images and added font awesome 5 icons for usercp and modcp mysupport icons, there are still plugin images and while yes some are currently pathed to the images directory and will work that way since you uploaded the plugin and its images by default go there, we want to factor in that we also just uploaded a copy of the plugin images to the emerald folder and I will explain why, ok some of the plugin images are theme img directory specific and that means that since emeralds theme image directory is images/emerald we need to factor that on this setup and we did this by uploading those plugin image files like suggested previously.. ok the only ones we need to factor now are the ones not defined in the the templates by theme image directory and those would be any in the mysupport.css styelesheet attached to the Emerald theme in theme settings....

lets just use one for an example so you get an idea of the quick modifications needed:

so something found like so for example:

url(images/mysupport_no_support.gif)

You would simply change image path like so:

url(images/emerald/mysupport_no_support.gif)

Hopefully that simple concept makes sense... and yeah I already did this for you above, but just figured I would mention it as a reminder just in case you did not follow the steps or for whatever reason you left the image paths default in attached mysupport.css stylesheet.


Now go into Emerald templates and look for the mysupport template group....

7) replace Emerald theme  mysupport_threadlist template with:

<html>
  <head>
      <title>{$mybb->settings['bbname']} - {$thread_list_title}</title>
      {$headerinclude}
  </head>
  <body>
      {$header}
      <div id="nav_width" style="width:24%;float:left;">{$navigation}</div>
      <div id="content_width" style="width:74%;float:right;">
        <table width="100%" border="0" align="center">
            <tr>
              <td valign="top">
                  {$stats}
                  {$threads_list}
              </td>
            </tr>
        </table>
      </div>
      {$footer}
  </body>
</html>

8) replace Emerald theme mysupport_deny_support template with:

<html>
<head>
<title>{$lang->support_denial}</title>
{$headerinclude}
</head>
<body>
	{$header}
            <div id="nav_width" style="width:24%;float:left;">{$modcp_nav}</div>
             <div id="content_width" style="width:74%;float:right;">
                <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                 <tr>	                	
				<td valign="top">
				{$deny_support}
				{$multipage}
			</tr>	 
			</td>
	</table>
	</div>
	{$footer}
</body>
</html>

That should get the basic of the plugin to play well with emerald theme and then you can keep editing the respective mysupport.css stylesheet attached to emerald and any further mysupport templates attached to emerald to suit your needs further. Sorry, but I tried to keep this short and sweet unlike many of my old lengthly tutorials and that is due to my limited free time as of late. Anyhoo, since I don't really do tutorials and all that jazz I may have used to do much anymore, I figured why not throw this simple tutorial out there this morn as I recently completed these steps myself prior to saying hey write it down and share, lol, take care. Best of luck! 

Some basic previews: