Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] Basic steps to get mysupport and iGame FA5 updated theme for 1.8.22 to play together
#1
Just like the objective of https://community.mybb.com/thread-227814.html here is just another quick tip guide for another theme just to further help folks that may want to tinker with such

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


1) Download igame FA5 updated theme for 1.8.22:

iGame FA5 theme for 1.8.22: https://github.com/vintagedaddyo/MyBB-Th...master/FA5

from github repository: https://github.com/vintagedaddyo/MyBB-Theme-iGame

download entire repo in .zip file: https://github.com/vintagedaddyo/MyBB-Th...master.zip

* note: extract the files from .zip file and only install the FA5 theme and respective files as these font awesome icon part of these instructions are not needed for the igame FA4 theme for 1.8.22 updated version as modcp and usercp menus still use images and not font awesome icons....

2) Install igame theme

3) Download the MySupport Plugin here:  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 igame folder ie: images/igame

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

6) in igame 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/igame/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: #EEF2F4; 
}

.usercp_nav_assigned_threads {
/*  background: url(images/igame/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: #EEF2F4; 
}

.modcp_nav_tech_threads {
/*  background: url(images/igame/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: #EEF2F4; 
}

.modcp_nav_deny_support {
/*  background: url(images/igame/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: #EEF2F4; 
}


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 igame folder and I will explain why, ok some of the plugin images are theme img directory specific and that means that since igames theme image directory is images/igame 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 igame 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/igame/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. Wink



That should get the basic of the plugin to play well with igame theme and then you can keep editing the respective mysupport.css stylesheet attached to igame and any further mysupport templates attached to igame 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!  Angel

Now you can since this theme is dark start simply editing  in acp priority colors by lets just for example sake invert the existing hex colors just for example sake:

Quote:Low: 523418
Normal: 291359
High: 000940
Urgent: 001b1d


and back in the attached mysupport.css for igame fa5 you can simply start tweaking various parts to start getting coloring more comfortable with theme


Example quick misc tab just for simple example sake:
.mysupport_tab_misc {
	background: #646464;
	border: 2px solid #34988A;
	color: #F1F4F6;
	font-weight: bold;
}

.mysupport_tab_misc:hover {
	background: #34988A;
	border: 2px solid #646464;
}

.mysupport_tab_misc a {
	color: #F1F4F6;
}

example simple quick change of best answer tab  for simple example sake:

.mysupport_tab_best_answer {
	background: #291359;
	border: 2px solid #34988A;
	color: #F1F4F6;
	font-weight: bold;
}

.mysupport_tab_best_answer:hover {
	background: #34988A;
	border: 2px solid #291359;
}

.mysupport_tab_best_answer a {
	color: #F1F4F6;
}

Simple example of inverted highlight color for staff and best answer:

.mysupport_bestanswer_highlight {
	background: #291359 !important;
}

.mysupport_staff_highlight {
	background: #191707 !important;
}
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#2
Thank you for your contribution Smile
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)