statistic, legend and staff button style like this?

Code:

a:hover
{
background: url(image url) no-repeat right;
padding:10px 30px 10px 10px;
}

Shek wrote:Hello   !

That depends, you could let me know the version or url of your forum  

Regars,
Shek

Michael_vx wrote:I wander if this could help you
this code will add image when hover on link

Code:

a:hover
{
background: url(image url) no-repeat right;
padding:10px 30px 10px 10px;
}

better do not add big image

Shek wrote:If you have the same question, tell me yours too. This code is IPBoard and is available for PhpBB3 and PunBB at the moment. But I need to know the version to pass the correct code.

Code:

<div class="main-content">
      <div id="stats">
        <p class="right">{TOTAL_POSTS}</p>
        <p>{TOTAL_USERS}</p>
        <p>{NEWEST_USER}</p>
      </div>

Code:

<tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
  </tr>

Code:

<div id="stats">
                  <br />
                  <ul class="statsPers">
                    <li class="statHide rdtOn">Teste1: {RECORD_USERS}</li>
                    <li class="statHide lastUser">Teste2: {NEWEST_USER}</li>
                    <li class="statHide totalUser">Teste3: {TOTAL_USERS}</li>
                    <li class="statHide totalPost">Teste4: {TOTAL_POSTS}</li>
                  </ul>
              <br />
       
          </div>

Code:

$(document).ready(function(){
var rdtOn = $('.rdtOn strong').html();
var lastUser = $('.lastUser strong').html();
var totalUser = $('.totalUser strong').html();
var totalPost = $('.totalPost strong').html();


$('ul.statsPers').prepend('
<li><span>'+totalPost+'</span> Total de posts</li>
<li><span>'+totalUser+'</span> Total de membros</li>
<li><span>'+lastUser+'</span> Membro mais novo</li>
<li><span>'+rdtOn+'</span> Recorde de usuários online</li>
');


});

Code:

#stats {
margin: 0 auto !important;
text-align: center !important;
display: table;
background: none;
}
.statHide{display:none !important;}
.statsPers li span a {
text-decoration: none !important;
}
.statsPers li > span {
padding: 5px 8px;
background: #E1E1E1;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-moz-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-o-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
border: 1px solid #E1E1E1;
margin-bottom: 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
text-shadow: 1px 1px 0 white;
color: #111;
font-weight: 700;
}
.statsPers li {
float: left;
color:#666;
margin: 2px 10px;
}
.statsPers {
list-style: none;
display: block;
margin: 0px auto;
width: 100%;
}

Shek wrote:Hello!

To Phpbb2 and punbb, modify the index_body. ;)Open your index_body and between lines 57 and 68 templante should have this code in PunBB:

Code:

<div class="main-content">
      <div id="stats">
         <p class="right">{TOTAL_POSTS}</p>
         <p>{TOTAL_USERS}</p>
         <p>{NEWEST_USER}</p>
      </div>

Or, in PhpBB2:

Code:

<tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
   </tr>

Replace the code for this code:

Code:

<div id="stats">
                  <br />
                  <ul class="statsPers">
                    <li class="statHide rdtOn">Teste1: {RECORD_USERS}</li>
                    <li class="statHide lastUser">Teste2: {NEWEST_USER}</li>
                    <li class="statHide totalUser">Teste3: {TOTAL_USERS}</li>
                    <li class="statHide totalPost">Teste4: {TOTAL_POSTS}</li>
                  </ul>
              <br />
        
         </div>

Save your template

In JavaScript, add all pages:

Code:

$(document).ready(function(){
var rdtOn = $('.rdtOn strong').html();
var lastUser = $('.lastUser strong').html();
var totalUser = $('.totalUser strong').html();
var totalPost = $('.totalPost strong').html();


$('ul.statsPers').prepend('
<li><span>'+totalPost+'</span> Total de posts</li>
<li><span>'+totalUser+'</span> Total de membros</li>
<li><span>'+lastUser+'</span> Membro mais novo</li>
<li><span>'+rdtOn+'</span> Recorde de usuários online</li>
');


});

Save the code, and acess Display > Image and colors > Color > CSS > and add the CSS code:

Code:

#stats {
margin: 0 auto !important;
text-align: center !important;
display: table;
background: none;
}
.statHide{display:none !important;}
.statsPers li span a {
text-decoration: none !important;
}
.statsPers li > span {
padding: 5px 8px;
background: #E1E1E1;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-moz-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-o-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
border: 1px solid #E1E1E1;
margin-bottom: 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
text-shadow: 1px 1px 0 white;
color: #111;
font-weight: 700;
}
.statsPers li {
float: left;
color:#666;
margin: 2px 10px;
}
.statsPers {
list-style: none;
display: block;
margin: 0px auto;
width: 100%;
}

Save, and see the result in forum.

Michael_vx wrote:I wander if this could help you
this code will add image when hover on link

Code:

a:hover
{
background: url(image url) no-repeat right;
padding:10px 30px 10px 10px;
}

better do not add big image

Shek wrote:Hello   !

That depends, you could let me know the version or url of your forum  

Regars,
Shek

Shek wrote:Sorry, but the bar footer of your site was amende d. The conditions of use that is not allowed! Your forum is illegal.

kumotta wrote:

Shek wrote:Sorry, but the bar footer of your site was amende d. The conditions of use that is not allowed! Your forum is illegal.

it is just a forum for the test  

btw, I include links therein forumotion right?

Shek wrote:

kumotta wrote:

Shek wrote:Sorry, but the bar footer of your site was amende d. The conditions of use that is not allowed! Your forum is illegal.

it is just a forum for the test  

btw, I include links therein forumotion right?

Yeah! Just add the links Forumotion standard, and we will be happy!

You got to test the code the message I posted a bit earlier  ?

Code:

    a:link
    {
    background: url(http://micsoft.xp3.biz/legend10.png);
    }

    a:visited
    {
    background: url(http://micsoft.xp3.biz/legend10.png);
    }

    a:active
    {
    background: url(http://micsoft.xp3.biz/legend10.png);
    }

    a:hover
    {
    background: url(http://micsoft.xp3.biz/legend10.png);
    }

kumotla wrote:what the code is already included overall I mean?

Shek wrote:

kumotla wrote:what the code is already included overall I mean?  

Yeah! The indications in the link >> https://help.forumotion.com/t131785-statistic-legend-and-staff-button-style-like-this#884049

Thanks by info the your situation of application!