How to Setup this Plug-in

[Popedia]

Forum URL: popedia.boards.net/

Hi,

If possible, I would really like to install this plug-in onto my forum;

www.revolvermaps.com/?target=setupminigl

I understand that I need to copy and paste the code, however I don't know where I should copy the code. Ideally, I would like the "Earth" to be located within the forum statistics bar. Here is a photo of the area I would preferably like the "Earth" to be. 




Thanks.

[Ulises]

Hi, Popedia .

In your admin area, navigate to Admin Home > Themes > Layout Templates > Home.

Look for the following section you see in my screenshot:

And replace the highlighted line above with this code (replacing the text in green with the actual code from the website):

<td>
<table>
<tr>
<td class="info">
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/5.js?i=5r38ltgdmst&m=0&c=ff0000&cr1=ffffff" async="async"></script>
</td>
</tr>
</table>
</td>

You might need some CSS to make it fit the box, however.

[Popedia]

Oct 7, 2017 8:43:13 GMT -8 Ulises said:

Hi, Popedia .

In your admin area, navigate to Admin Home > Themes > Layout Templates > Home.

Look for the following section you see in my screenshot:

And replace the highlighted line above with this code (replacing the text in green with the actual code from the website):

<td>
<table>
<tr>
<td class="info">
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/5.js?i=5r38ltgdmst&m=0&c=ff0000&cr1=ffffff" async="async"></script>
</td>
</tr>
</table>
</td>

You might need some CSS to make it fit the box, however.

Thanks for your help.

How would I add CSS to make it fit in the box?

[Popedia]

Ideally, I would like the globe to be to the left of the statistics (as per the photo in my original post).

[Popedia]

Does anyone know how I could move it to the left of the text? Thanks.

[Ulises]

Popedia It seems to have been copy/pasted incorrectly and not have properly closing </tr> and </td> tags which is why it is looking like that. I tested it with that theme from the library and it looks like how you want it. If you haven't made any other modifications to the page you can simply replace that entire template with this:

SPOILER: Click to show

$[news]
{foreach $[category]}
$[category.anchor]
<div class="container boards category-$[category.id]">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}
{if $[legend]}
<div class="container legend">
<div class="title-bar"><h2>Legend</h2></div>
<div class="content">
<table>
<tr>
{foreach $[legend]}
<td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}
</tr>
</table>
</div>
</div>
{/if}

{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2><center><font style="padding: 0px;">
<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a>
<a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a>
<a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a>
<a href="#" class="group4legend" title="Group 4"><div id="squareGroup4"></div></a>
<a href="#" class="group5legend" title="Group 5"><div id="squareGroup5"></div></a>
<a href="#" class="group6legend" title="Group 6"><div id="squareGroup6"></div></a>
<a href="#" class="group7legend" title="Group 7"><div id="squareGroup7"></div></a>
<a href="#" class="group8legend" title="Group 8"><div id="squareGroup8"></div></a>
<a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>
</font></center></h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td class="info">
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/5.js?i=5r38ltgdmst&m=0&c=ff0000&cr1=ffffff" async="async"></script>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="info">
<table>
<tbody style="text-align:right;">
<tr><td>Our <strong>$[total_members]</strong> member{if $[total_members] != 1}s{/if} have contributed <strong>$[total_posts]</strong> post{if $[total_posts] != 1}s{/if} in <strong>$[total_threads]</strong> thread{if $[total_threads] != 1}s{/if}.</td></tr>
{if $[last_updated_thread]}<tr><td>$[last_updated_thread.last_post.created_by] updated '$[last_updated_thread.recent_link]' ($[last_updated_thread.last_post.created_on])</td></tr>{/if}
<tr>
<td class="board_stats">
<strong><script>$(".board_stats").html($(".board").length);</script></strong> boards in <strong>$[category.length]</strong> categories & a hello to $[newest_user]
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="info">
<table>
<tbody style="text-align:left;">
<tr><td><strong>$[total_online] User{if $[total_online] != 1}s{/if} Currently Online</strong></td></tr>
<tr><td>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_online_not_shown]}
, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
{/if}
</td></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td>
<table>
<tr>
<td class="info">
<table>
<tbody style="text-align:right;">
<tr><td>Why not check out our most $[recent_posts_link] or $[recent_threads_link].</td></tr>
<tr><td>Or maybe visit our $[rss_feed_link] </td></tr>
<tr><td>$[birthdays_today_link]{if $[mark_boards_read_link]} or simply $[mark_boards_read_link]{/if}.</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="info">
<table>
<tbody style="text-align:left;">
<tr><td><strong>$[total_online_24] User{if $[total_online_24] != 1}s{/if} Have Visited Today</strong></td></tr>
<tr><td>
{foreach $[online_user_24]}
$[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]
{/foreach}
{if $[total_online_not_shown_24]}
, and <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>
{/if}
<tr><td>$[total_staff_online_24] Staff, <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}.</td></tr>
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}
<br />
{if $[shoutbox]}$[shoutbox]{/if}

<script type="text/javascript">
$(document).ready(function(){
if(proboards.data('route').name == "home")
$('.container.stats').insertAfter('#wrapper');
});
</script>

<style type="text/css">
/**************************************************************************
* Member Legend - Info Center *
**************************************************************************/
/* Coloured Squares */
#squareAdm { width: 10px; height: 10px; background: #e67a75; margin-right: 1px; display: inline-block; }
#squareGMod { width: 10px; height: 10px; background: #14ada7; margin-right: 1px; display: inline-block; }
#squareMod { width: 10px; height: 10px; background: #adc92f; margin-right: 1px; display: inline-block; }
#squareGroup4 { width: 10px; height: 10px; background: #f4b52a; margin-right: 1px; display: inline-block; }
#squareGroup5 { width: 10px; height: 10px; background: #e06e22; margin-right: 1px; display: inline-block; }
#squareGroup6 { width: 10px; height: 10px; background: #f2d200; margin-right: 1px; display: inline-block; }
#squareGroup7 { width: 10px; height: 10px; background: #7f76e6; margin-right: 1px; display: inline-block; }
#squareGroup8 { width: 10px; height: 10px; background: #e676bb; margin-right: 1px; display: inline-block; }
#squareMem { width: 10px; height: 10px; background: #75c8e6; display: inline-block; }


/* Administrator */
a.admlegend {
position: relative;
text-decoration: none;
}
a.admlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -15px;
background: rgba(230,122,117,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.admlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(230,122,117,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: 0px;
left: -2px;
}

/* Global Moderator */
a.gmodlegend {
position: relative;
text-decoration: none;
}
a.gmodlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -42px;
background: rgba(20,173,167,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.gmodlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(20,173,167,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: 0px;
left:-2px;
}

/* Moderator */
a.modlegend {
position: relative;
text-decoration: none;
}
a.modlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(173,201,47,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.modlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(173,201,47,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: 0px;
left: -2px;
}

/* Group 4 */
a.group4legend {
position: relative;
text-decoration: none;
}
a.group4legend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(244,181,42,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.group4legend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(244,181,42,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: 0px;
left: -2px;
}

/* Group 5 */
a.group5legend {
position: relative;
text-decoration: none;
}
a.group5legend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(224,110,34,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.group5legend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(224,110,34,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: 0px;
left: -2px;
}

/* Group 6 */
a.group6legend {
position: relative;
text-decoration: none;
}
a.group6legend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(242,210,0,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.group6legend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(242,210,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: 0px;
left: -2px;
}

/* Group 7 */
a.group7legend {
position: relative;
text-decoration: none;
}
a.group7legend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(127,118,230,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.group7legend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(127,118,230,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: 0px;
left: -2px;
}

/* Group 8 */
a.group8legend {
position: relative;
text-decoration: none;
}
a.group8legend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(230,118,187,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.group8legend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(230,118,187,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: 0px;
left: -2px;
}

/* Member */
a.memlegend {
position: relative;
text-decoration: none;
}
a.memlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(117,200,230,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.memlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(117,200,230,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: 0px;
left: -2px;
}
</style>

Replace the green text with the actual code you get, of course.


You might need this CSS if the box is taking up a lot of room:

.stats .content>table>tbody>tr>td:first-child {
    width: 50%;
}

Adjust the percentage accordingly.