Quem esta conectado e estatisticas em quadros

Qual é minha questão:
Pessoal eu queria colocar em quadros os QUEM ESTÁ CONECTADO, ESTATISTICAS e ANIVERSÁRIOS em quadros, mas só achei o tutoria pra Phpbb3 aqui no FDF, eu queria saber como colocar isso em fórum PUNBB.

Endereço do meu fórum:
http://pokemondemais.forumeiros.com

Versão do fórum:
PUNBB

Saudações!

Queira checar por gentileza:

[TUTORIAL] Modificar a zona "Quem está conectado"
Quem esta conectado

Um grande abraço,
Dokyo.

Você não entendeu, eu não quero modificar a parte QUEM ESTÁ CONECTADO em si.

Eu quero que meu fórum tenha divisão entre QUEM ESTÁ CONECTADO, ANIVERSÁRIOS e ESTATISTICAS.

E que dê pra colocar uma imagem pra cada um.

Como faço isso?

Nesse fórum tem o que eu quero: http://narutoreborn.ativoforum.com/forum

nejibyakugan escreveu:Você não entendeu, eu não quero modificar a parte QUEM ESTÁ CONECTADO em si.

Eu quero que meu fórum tenha divisão entre QUEM ESTÁ CONECTADO, ANIVERSÁRIOS e ESTATISTICAS.

E que dê pra colocar uma imagem pra cada um.

Como faço isso?

Perdoe-me! Neste caso, queira checar este tópico:

[Dúvida] Separar quem está online, estatísticas e aniversariantes na página principal

Veja as mensagens do Ajudeiro Hancki e terá o seu resultado!

Até mais!

Olá,

Veja se é isto que o senhor pretende obter como efeito, adicione em sua folha CSS:

Código:


#stats {
    border: 1px solid #000000;
    padding: 4px;
    border-radius: 5px;
}
.pun .main-content {
    border: medium none !important;
}
#onlinelist {
    border: 1px solid #000000;
    margin-top: 5px;
}
#onlinechat {
    border: 1px solid #000000;
    margin-top: 5px;
    border-radius: 5px;
}


Cordiais Saudações;
Alex!

Não, o que quero é o mesmo efeito que esse fórum:

http://narutoreborn.ativoforum.com/forum


Nele, a parte de QUEM ESTÁ CONECTADO, ANIVERSÁRIOS, ESTATISTICAS, estão separados e cada um tem sua própria imagem, eu queria colocar esse em meu fórum.

Bom dia!

PA > Viualização > Templates > index_body

Código:

<style>.leftStats{float:left;margin-left:-71px;vertical-align:middle;width:60px}
    .rightStats{min-height: 50px;border-left:2px solid #CFC9C9;padding-left:10px;width:858px;margin:5px 10px 5px 70px}
  .starsTitle{background-color:#BFBFBF;border:1px solid #989898;color:#F8FF04;font-family:Comic Sans MS;font-variant:small-caps;font-weight:700;text-shadow:1px 1px 1px #000;padding:5px}</style>
{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
  <ul>
        <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
        <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
  </ul>
  <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
  <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
  <!-- BEGIN message_admin_titre -->
  <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
  </div>
  <!-- END message_admin_titre -->

  <!-- BEGIN message_admin_txt -->
  <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
  </div>
  <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> 
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> 
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}


    <!-- BEGIN disable_viewonline -->
    <div id="pun-info" class="main">
      <div class="main-head">
          <div class="page-title">
            <h2>Sobre o fórum Shiftactif</h2>
          </div>
      </div>
      <div class="main-content">
          <div class="starsItem">
            <p class="starsTitle">
                <!-- BEGIN switch_viewonline_link -->
                <a href="{U_VIEWONLINE}" rel="nofollow">Conectados em Shiftactif fórum</a>
                <!-- END switch_viewonline_link -->
                <!-- BEGIN switch_viewonline_nolink -->
                <!-- END switch_viewonline_nolink -->
            </p>
            <div class="rightStats">
                <div class="leftStats">
                  <img src="http://i48.servimg.com/u/f48/16/58/89/73/user_s10.png" />
                </div>
                <p>{TOTAL_USERS_ONLINE}
                  <br />{LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS}</p>
            </div>
          </div>
          <div class="starsItem">
            <p class="starsTitle">Aniversariantes</p>
            <div class="rightStats">
                <div class="leftStats">
                  <img src="http://i48.servimg.com/u/f48/16/58/89/73/openso10.png" />
                </div>
                <p>{NEWEST_USER}</p>
                <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            </div>
          </div>
          <div class="starsItem">
            <p class="starsTitle">Estatísticas</p>
            <div class="rightStats">
                <div class="leftStats">
                  <img src="http://i48.servimg.com/u/f48/16/58/89/73/icon_s10.gif" />
                </div>
                <p>{RECORD_USERS}
                  <br />{TOTAL_POSTS}
                  <br />{TOTAL_USERS}</p>
            </div>
          </div>
          <!-- BEGIN switch_chatbox_activate -->
          <div class="starsItem">
            <!-- BEGIN switch_chatbox_popup -->
            <p id="chatbox_popup" class="starsTitle"></p>
            <script type="text/javascript">
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', 'Chatbox');
            </script>
            <!-- END switch_chatbox_popup -->
            <div class="rightStats">
                <div class="leftStats">
                  <img src="http://i48.servimg.com/u/f48/16/58/89/73/it_and10.png" />
                </div>
                <p>{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}</p>
            </div>
          </div>
          <!-- END switch_chatbox_activate -->
      </div>
    </div>
    <div class="main-box clearfix">
      <p align="center">{GROUP_LEGEND}</p>
    </div>
    <!-- END disable_viewonline -->

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> 
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> 
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
  <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /> {L_FORUM_LOCKED}
  </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
  appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
  oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Até mais!

@nejibyakugan
Olá amigo!

Já que a versão de seu fórum é PunBB, é mais provável de conseguir o mesmo efeito editando o template como nosso amigo @Shek postou acima, mas poderá tentar por CSS também, veja o resultado que consegui somente com CSS:


O código que utilizei foi:

Código:


.main-box.clearfix {
  background-image: url("http://i.imgur.com/2n0xe.jpg");
}
.pun .main-box.clearfix a:link {
  color: #000000 !important;
  font-weight: bold;
}
#pun-info #stats:before {
    color: #000000;
    content: "Estatísticas ";
    font-weight: bold;
}
#pun-info #stats {
    background-color: #73CFE6 !important;
    background-image: url("http://i.imgur.com/2n0xe.jpg") !important;
    background-repeat: no-repeat !important;
    position: relative;
}
#stats p.right:before {
    content: url("http://i10.servimg.com/u/f10/17/64/07/28/estati10.jpg");
    margin-left: -70px;
    position: absolute;
}
#stats p.right {
    padding-left: 70px;
    position: absolute;
}
#stats > p {
    padding-left: 70px;
    padding-top: 10px;
}
#stats p:nth-of-type(2) {
  padding-top: 32px;
}
.main-content #onlinelist {
  background-image: url("http://i.imgur.com/2n0xe.jpg") !important;
  background-repeat: no-repeat;
  border-radius: 0 0 0 0 !important;
  margin-top: 28px;
  position: relative;
}
#onlinelist p.right {
  color: #000000 !important;
  float: left;
  font-weight: bold;
  margin-left: -135px;
}
#onlinelist p:nth-of-type(2) {
  padding-top: 30px;
}
#onlinelist img {
  border-color: #D5D5D5;
  border-style: solid;
  border-width: 2px;
  float: left;
  height: 150px !important;
  max-height: 150px !important;
  max-width: 110px !important;
  padding-right: 10px !important;
  width: 110px !important;
  margin-left: -10px;
  margin-right: 10px;
  margin-top: 20px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 10px;  
}


Mas teste primeiro a edição do template do @Shek pois é bem mais flexível e o resultado pode ser bem melhor!

Abraços,

JS

Olá,

Painel de controle -> Usuários & Grupos -> Usuários -> Opções dos usuários. Terá de ativar a opção "Ativar a gestão dos aniversários".

Até mais.

@nejibyakugan
Olá amigo, eu não tinha reparado na área dos aniversariantes, verei o que posso fazer para separar como os outros ok?

Até mais,

JS

Ok, irei aguardar...

Dokyo escreveu:Perdoe-me! Neste caso, queira checar este tópico:

[Dúvida] Separar quem está online, estatísticas e aniversariantes na página principal

Veja as mensagens do Ajudeiro Hancki e terá o seu resultado!

Até mais!

Saudações meu caro!

O senhor ousou ler a minha mensagem e ver se o efeito criado pelo o nosso querido ajudante Hancki lhe agrada?

Cordiais saudações!

Dokyo escreveu:
Saudações meu caro!

O senhor ousou ler a minha mensagem e ver se o efeito criado pelo o nosso querido ajudante Hancki lhe agrada?

Cordiais saudações!

Olá amigo, vou lhe ajudar a entender o que o autor deseja, leia:

nejibyakugan escreveu:Não, o que quero é o mesmo efeito que esse fórum:

http://narutoreborn.ativoforum.com/forum


Nele, a parte de QUEM ESTÁ CONECTADO, ANIVERSÁRIOS, ESTATISTICAS, estão separados e cada um tem sua própria imagem, eu queria colocar esse em meu fórum.

O link dessa mensagem é: https://ajuda.forumeiros.com/t88868-quem-esta-conectado-e-estatisticas-em-quadros#602782

Abraços,

JS

@nejibyakugan

Olá amigo!

Já que a versão de seu fórum é Punbb, pra facilitar mais ainda as coisas, siga os passos da imagem abaixo:


Isso é no painel de controle, onde irá modificar o template index_body, basta clique onde eu marquei do lado direito e aparecerá um campo onde poderá procurar e substituir o que precisamos ok?

Procure por:

{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>

E substitua por:

<span id="l_whosbirthday">{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</span></p>

Quando fizer isso, salve e irá retornar para a página dos templates, veja que do lado direito ficará um botão para validar a mudança que foi feita, clique para validar e em seguida poste aqui nos informando que concluiu!

Em seguida nós daremos continuidade ok?

Até mais,

JS

nejibyakugan escreveu:Pronto, já fiz o que disse :3

Olá, eu verifiquei em seu fórum e não consta a mudança pois está faltando a tag <span id="l_whosbirthday"> antes da frase "Nenhum membro festeja...", veja:


JS

Eu fiz exatamente o que me disse pra fazer, substitui o código que tinha por aquele que me enviou, o que eu faço agora?



PS-essa é a unica maneira de fazer isso? Não tem como fazer via CSS como de costume ou coisa do tipo? É que nunca mexi nessa parte antes.

@nejibyakugan
Olá amigo!

Então, o CSS tem seus limites e não há como utilizar um seletor se ele não existir... E percebi que você ainda não editou o template, neste caso, siga os passos da imagem abaixo, copie e cole o conteúdo do arquivo e poste aqui para que possamos modificá-lo ok?

Spoiler:

Abraços,

JS

Aqui está:

Código:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
 </ul>
 <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
 <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
 <!-- BEGIN message_admin_titre -->
 <div class="main-head">
 <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
 </div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div id="pun-announcement">
 <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
 </div>
 <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label>  
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label>  
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
 <div class="main-content">
 <div id="stats">
 <p class="right">{TOTAL_POSTS}</p>
 <p>{TOTAL_USERS}</p>
 <p>{NEWEST_USER}</p>
 </div>
 <div id="onlinelist">
 <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
 <p class="right">
 <!-- BEGIN switch_viewonline_link -->
 <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
 <!-- END switch_viewonline_link -->
 <!-- BEGIN switch_viewonline_nolink -->
 {L_WHO_IS_ONLINE}
 <!-- END switch_viewonline_nolink -->
 </p>
 <p>{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}

 <br />
 {LOGGED_IN_USER_LIST}

 {L_ONLINE_USERS}
 {L_CONNECTED_MEMBERS}<br />
 <span id="l_whosbirthday">{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</span></p>
 <div class="clear"></div>

 <p>{LEGEND} : {GROUP_LEGEND}</p>

 </div>
 <!-- BEGIN switch_chatbox_activate -->
 <div id="onlinechat">
 <p class="page-bottom">
 {TOTAL_CHATTERS_ONLINE} : 
 {CHATTERS_LIST}<br />
 <!-- BEGIN switch_chatbox_popup -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 </script>
 <!-- END switch_chatbox_popup -->
 </p>
 </div>
 <!-- END switch_chatbox_activate -->
 </div>
</div>
<!-- END disable_viewonline -->

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label>  
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label>  
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
 <li>
 <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}
 <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}
 <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /> {L_FORUM_LOCKED}
 </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
  status: true,
  cookie: true,
  xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Se puder me enviar o código já com as alterações, agradeceria.


PS-Tem uma letra vermelha dizendo EM ESPERA, se isso ajudar.

@nejibyakugan
Olá!

Você já fez a mudança no template, veja:

Spoiler:

Só faltou publicá-lo:

Basta clicar no ícone circulado...

Aguardo o procedimento,

JS

nejibyakugan escreveu:Pronto, cliquei no botão.

Olá amigo!

Ainda continua sem a tag span que pedi para adicionar no template!
Façamos o seguinte: Substitua o conteúdo do seu template index_body pelo código abaixo:

index_body:

Spoiler:

Para realizar isso, siga os passos dessa imagem:

Spoiler:

Em seguida, publique a mudança seguindo a figura:

Basta clicar no ícone circulado...

Depois adicione este CSS:

Código:


#l_whosbirthday {
  position: relative;
}
#l_whosbirthday p {
  background-image: url("http://i.imgur.com/2n0xe.jpg") !important;
  background-repeat: no-repeat;
  border-radius: 0 0 0 0 !important;
  font-weight: bold;
  height: 20px;
  margin-left: -12px;
  margin-right: -12px;
  margin-top: -10px;
  padding: 7px;
}
.main-box.clearfix {
    background-image: url("http://i.imgur.com/2n0xe.jpg");
}
.pun .main-box.clearfix a:link {
    color: #000000 !important;
    font-weight: bold;
}
#pun-info #stats:before {
    color: #000000;
    content: "Estatísticas ";
    font-weight: bold;
}
#pun-info #stats {
    background-color: #73CFE6 !important;
    background-image: url("http://i.imgur.com/2n0xe.jpg") !important;
    background-repeat: no-repeat !important;
    position: relative;
}
#stats p.right:before {
    content: url("http://i10.servimg.com/u/f10/17/64/07/28/estati10.jpg");
    margin-left: -70px;
    position: absolute;
}
#stats p.right {
    padding-left: 70px;
    position: absolute;
}
#stats > p {
    padding-left: 70px;
    padding-top: 10px;
}
#stats p:nth-of-type(2) {
    padding-top: 32px;
}
.main-content #onlinelist {
    background-image: url("http://i.imgur.com/2n0xe.jpg") !important;
    background-repeat: no-repeat;
    border-radius: 0 0 0 0 !important;
    margin-top: 28px;
    position: relative;
}
#onlinelist p.right {
    color: #000000 !important;
    float: left;
    font-weight: bold;
    margin-left: -135px;
}
#onlinelist p:nth-of-type(2) {
    padding-top: 30px;
}
#onlinelist img {
    border-color: #D5D5D5;
    border-style: solid;
    border-width: 2px;
    float: left;
    height: 150px !important;
    max-height: 150px !important;
    max-width: 110px !important;
    padding-right: 10px !important;
    width: 110px !important;
    margin-left: -10px;
    margin-right: 10px;
    margin-top: 20px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;  
}


O resultado será:


Abraços,

JS

Olha o print de como ficou:

Spoiler:

Como devo proceder, se ajudar, a imagem que quero de fundo é essa: https://i.servimg.com/u/f55/17/45/31/00/fundo_13.jpg

Não essa: https://i.imgur.com/2n0xe.jpg


De resto tudo certo, exceto a parte de que no fundo de ESTATISTICAS tem um azul mais claro que o normal, escurece ele e deixa da mesma cor do fórum.


Tem algumas letras sobre palavras e códigos que parecem que foram inacabados, eu retirei o código por enquanto.

@nejibyakugan

Foi um erro na postagem do template, refaça os passos da postagem https://ajuda.forumeiros.com/t88868-quem-esta-conectado-e-estatisticas-em-quadros#606801 para o template!

Daremos continuidade,

JS

nejibyakugan escreveu:Certo, eu refiz mas o problema se mantém, tem certeza que não é algo errado no código? Parece que tem algo sem fechar.

Eu verifiquei e continua sem a modificação do template que eu postei, o que era para estar assim:

<span id="l_whosbirthday"><p>Aniversários</p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</span>

Está dessa forma:

<span id="l_whosbirthday"><p>Aniversários</p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK</span>

Faltando uma chave } para completar a variável da plataforma!

Talvez você tenha esquecido de aplicar a mudança do template, confira novamente ok?

JS

Aqui está todo o CSS de acordo com o que deseja incluindo a imagem:

Código:


#l_whosbirthday {
  position: relative;
}
#l_whosbirthday p {
  background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
  background-repeat: no-repeat;
  border-radius: 0 0 0 0 !important;
  font-weight: bold;
  margin-left: -12px;
  margin-top: 20px;
  padding: 7px;
}
.main-box.clearfix {
    background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg");
}
.pun .main-box.clearfix a:link {
    color: #000000 !important;
    font-weight: bold;
}
#pun-info #stats:before {
    color: #000000;
    content: "Estatísticas ";
    font-weight: bold;
}
#pun-info #stats {
    background-color: #73CFE6 !important;
    background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
    background-repeat: no-repeat !important;
    position: relative;
}
#stats p.right:before {
    content: url("http://i10.servimg.com/u/f10/17/64/07/28/estati10.jpg");
    margin-left: -70px;
    position: absolute;
}
#stats p.right {
    padding-left: 70px;
    position: absolute;
}
#stats > p {
    padding-left: 70px;
    padding-top: 10px;
}
#stats p:nth-of-type(2) {
    padding-top: 32px;
}
.main-content #onlinelist {
    background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
    background-repeat: no-repeat;
    border-radius: 0 0 0 0 !important;
    margin-top: 28px;
    position: relative;
}
#onlinelist p.right {
    color: #000000 !important;
    float: left;
    font-weight: bold;
    margin-left: -135px;
}
#onlinelist p:nth-of-type(2) {
    padding-top: 30px;
}
#onlinelist img {
  border-color: #D5D5D5;
  border-style: solid;
  border-width: 2px;
  float: left;
  height: 150px !important;
  margin-left: -10px;
  margin-right: 10px;
  margin-top: 30px;
  max-height: 150px !important;
  max-width: 110px !important;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px !important;
  padding-top: 10px;
  width: 110px !important;
}
.main-content #onlinelist {
  padding-right: 0 !important;
}


Resultado:

Spoiler:

Abraços,

JS

Mas repare uma coisa, em ESTATISTICAS o fundo meio troca de cor, desse azul mais suave, a um claro mas forte, eu quero que o fundo das estatisticas fique igual o fundo do QUEM ESTÁ CONECTADO, todo de uma cor só(esse azul suave)


Tem algo estranho, as imagens que coloco ficam desproporcionais, vou manter elas por enquanto para que você possa ver.

Eu queria que ficasse tudo da mesma largura, tipo esse fórum http://www.pokeshiny.com/
Teria como?

As imagens que você deseja são diferentes em altura e largura das que eu estava editando o CSS, portanto o código depende da imagem que vai utilizar, ficando específico para tal!

Sobre a cor também já está resolvido, troque todo o CSS anterior por este:

Código:


    #pun-info #stats:before {
        color: #000000;
        content: "Estatísticas ";
        font-weight: 700;
    }
    #pun-info #stats {
        background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
        background-repeat: no-repeat !important;
        position: relative;
    }
    #stats {
        background-color: #97C5E8;
        line-height: 150%;
        padding: 0.6em 1em;
    }
    #stats p.right:before {
        content: url("http://i55.servimg.com/u/f55/17/45/31/00/estati11.jpg");
        margin-left: -140px;
        position: absolute;
    }
    #stats p.right {
        padding-left: 140px;
        position: absolute;
    }
    #stats > p {
        padding-left: 140px;
        padding-top: 10px;
    }
    #stats p:nth-of-type(2) {
      padding-top: 32px;
    }
#onlinelist p:nth-of-type(2) {
  min-height: 165px;
  padding-top: 30px;
}
    .main-content #onlinelist {
      background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
      background-repeat: no-repeat;
      border-radius: 0 0 0 0 !important;
      margin-top: 48px;
      padding-right: 0 !important;
      position: relative;
    }
    #onlinelist img {
      border-color: #D5D5D5;
      border-style: solid;
      border-width: 2px;
      float: left;
      height: 150px !important;
      margin-left: -10px;
      margin-right: 10px;
      margin-top: 30px;
      max-height: 150px !important;
      max-width: 110px !important;
      padding: 10px !important;
      width: 110px !important;
    }
    #onlinelist p.right {
      color: #000000 !important;
      float: left;
      font-weight: 700;
      margin-left: -135px;
    }
    #l_whosbirthday p {
      background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
      background-repeat: no-repeat;
      border-radius: 0 0 0 0 !important;
      font-weight: 700;
      margin-left: -12px;
      margin-top: 20px;
      padding: 7px;
    }


Resultado:

Spoiler:

Abraços,

JS

Mas não tem um jeito de eu colocar imagem de qualquer tamanho? Ou sempre vai ter que ser um especifico?


Alterei o código para o que você disse mas tem uma coisa estranha, as palavras tão entrando dentro da categoria, tipo QUEM ESTÁ CONECTADOhá 24 pessoas online etc...

Assim tudo junto, dá uma olhada.

Editei o tópico com essa correção: https://ajuda.forumeiros.com/t88868p30-quem-esta-conectado-e-estatisticas-em-quadros#607224

E sim, o CSS foi baseado no tamanho atual das imagens!

JS

Editei o tópico novamente com mais essa correção: https://ajuda.forumeiros.com/t88868p30-quem-esta-conectado-e-estatisticas-em-quadros#607224

Desta vez eu determinei um valor mínimo para a distância entre eles ok?

JS

Olá!

Nos teste que eu fiz funcionou normalmente, mas se desejar retornar ao que estava, basta remover o CSS que lhe passei!

JS

Hum... obrigado pela sua atenção.