Imagem nas postagens para raks especificos / AJUDA

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP em 03/09/14, 09:30 pm

Estava vendo um tutorial (http://ajuda.forumeiros.com/t61132-tutorial-imagem-nas-postagens) que fiz passo-a-passo, tudo correto. Porém tem um bug , a img do efeito (http://i.imgur.com/QjXRX7M.png) ficou no lugar errado , ou seja, no lado direito, sendo que os avatares do meu fórum fica na esquerdo. Veja o bug: http://i.imgur.com/tB9CgT9.png 
Creio que deu esse bug pq o JS que ele fornece servi pra ficar do lado direito , porém como disse posteriormente o meu fica do esquerdo e quero que continue no esquerdo. Mas também quero colocar o efeito. Alguém pode mi ajudar?

Aguardando... Muito feliz


Última edição por Winners_CAP em 06/09/14, 08:04 pm, editado 1 vez(es) (Razão : ...)
avatar

Winners_CAP
Nível 6

Masculino
Inscrito dia : 23/08/2014
Mensagens : 69
Pontos Ativos : 89

Ver perfil do usuário http://brasilhappyplay.forumbrasil.net/forum

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por viniliff em 03/09/14, 09:52 pm

Olá.

Basta você usar uma imagem em degrade partindo do lado oposto.

Até.
avatar

viniliff
Membro do Fórum

Masculino
Inscrito dia : 04/06/2014
Mensagens : 1710
Pontos Ativos : 2079

Ver perfil do usuário http://publieiros.forumeiros.com https://twitter.com/ViniliffOficial

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Alex Habilidade em 03/09/14, 10:25 pm

Olá,

Poderia deixar o código ativo por favor?
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP em 03/09/14, 10:41 pm

@viniliff fix isso já. Porém sem resultados
@Alex O código é este :
JS:
Código:
jQuery(document).ready(function(){
jQuery(".post:has('.Administrador')").css('background','url(http://i.imgur.com/QjXRX7M.png) repeat-y top right')});

Código pra colocar no titulo do rank:
Código:
<span class="Administrador">Administrador</span>
avatar

Winners_CAP
Nível 6

Masculino
Inscrito dia : 23/08/2014
Mensagens : 69
Pontos Ativos : 89

Ver perfil do usuário http://brasilhappyplay.forumbrasil.net/forum

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Alex Habilidade em 03/09/14, 10:54 pm

Amigo deixe o código ativo em seu fórum por favor
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP em 03/09/14, 11:00 pm

Ele ta ativo
avatar

Winners_CAP
Nível 6

Masculino
Inscrito dia : 23/08/2014
Mensagens : 69
Pontos Ativos : 89

Ver perfil do usuário http://brasilhappyplay.forumbrasil.net/forum

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Alex Habilidade em 03/09/14, 11:08 pm

Olá,

Troque o jQuery por este:
Código:

jQuery(document).ready(function(){
jQuery(".post:has('.Administrador')").css('background','url(http://i.imgur.com/QjXRX7M.png) repeat-y top left')});
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP em 03/09/14, 11:16 pm

Quase deu certo amigo , porém n ficou no jeito que eu quero.

Como ficou:
http://i.imgur.com/vnOEwRi.png

Como eu quero:
http://i.imgur.com/xDcCSGT.png
avatar

Winners_CAP
Nível 6

Masculino
Inscrito dia : 23/08/2014
Mensagens : 69
Pontos Ativos : 89

Ver perfil do usuário http://brasilhappyplay.forumbrasil.net/forum

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por waghcwb em 04/09/14, 01:53 pm

Olá,

Vamos lá,

Primeiramente no nome do rank você deve inserir uma classe (identificador) para o seu rank, veja
Código:
<span class="identificador">NOME DO RANK</span>

Por exemplo, se for o rank de administrador
Código:
<span class="admin">Administrador</span>

Guarde este nome "admin" que colocou no identificador.

Agora crie um Javascript com o seguinte
Código:
$(function(){
   $(".post:has('.identificador')").addClass('admin-background');
});

Note onde está escrito "identificador" o senhor deve trocar pelo nome que falei para guardar, no nosso exemplo é "admin"
Código:
$(function(){
   $(".post:has('.admin')").addClass('admin-background');
});


E agora o CSS

Primeiro precisamos remover o fundo da postagem, adicione o seguinte:
Código:
.pun .postmain{
     background: none!important;
}

E agora as cores novas para o fundo

Código:
.admin-background{
   background-image: linear-gradient(left, #D420BF, transparent);
   background-image: -moz-linear-gradient(left, #D420BF, transparent);
   background-image: -webkit-linear-gradient(left, #D420BF, transparent);
}

O senhor pode personalizar as cores como desejar, qualquer dúvida deixe no tópico

Até mais
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP em 04/09/14, 07:15 pm

Deu certo, porém o efeito do degradê ficou muito extenso, gostaria de diminuir para que ficasse até a metade do tópico (ou perto disso).
Outra coisa q gostaria de fazer também: Era mudar a forma do Título dos tópico criados. Eles ficam com o fundo cinza e no caso iria atrapalhar o efeito do Degradê. Queria tirar esse fundo cinza, deixa-los mais grandes e com uma cor diferente quando criados.

http://i.imgur.com/p52w9Ep.png
avatar

Winners_CAP
Nível 6

Masculino
Inscrito dia : 23/08/2014
Mensagens : 69
Pontos Ativos : 89

Ver perfil do usuário http://brasilhappyplay.forumbrasil.net/forum

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por viniliff em 04/09/14, 08:05 pm

Olá.

O tamanho da cor do degradê relaciona-se diretamente com a imagem utilizada como fundo. Para obter um fundo mais personalizado às suas preferências, utilize nossa seção gráfica:
http://ajuda.forumeiros.com/f17-

Até.
avatar

viniliff
Membro do Fórum

Masculino
Inscrito dia : 04/06/2014
Mensagens : 1710
Pontos Ativos : 2079

Ver perfil do usuário http://publieiros.forumeiros.com https://twitter.com/ViniliffOficial

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP em 04/09/14, 09:31 pm

Só mi fale onde coloco a img no código que eu mesmo crio e edito. Positivo
avatar

Winners_CAP
Nível 6

Masculino
Inscrito dia : 23/08/2014
Mensagens : 69
Pontos Ativos : 89

Ver perfil do usuário http://brasilhappyplay.forumbrasil.net/forum

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por viniliff em 04/09/14, 09:40 pm

Olá.

Crie um nova JavaScript com investimento em todas as páginas:

jQuery(document).ready(function(){
jQuery(".post:has('.nomedorank')").css('background','url(URL_DA_IMAGEM) repeat-y top right')});

Substitua os textos em negritos por, respectivamente:

- O título do rank utilizado anteriormente;
- A URL da imagem;

Até.
avatar

viniliff
Membro do Fórum

Masculino
Inscrito dia : 04/06/2014
Mensagens : 1710
Pontos Ativos : 2079

Ver perfil do usuário http://publieiros.forumeiros.com https://twitter.com/ViniliffOficial

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por waghcwb em 04/09/14, 10:20 pm

Olá,

Não é necessário o uso de imagens, eu fiz o código com puro CSS, sendo assim ele vai se ajustar automaticamente...

Para diminuir a largura como o senhor deseja, modifique esta área do código
Código:
(left, #D420BF, transparent);

Adicionando a porcentagem desejada, assim:
Código:
(left, #D420BF 0%, transparent 40%);

Note que a cor vai começar em 0% e vai até 40%, se o senhor não gostar pode aumentar ou diminuir como desejar.

Não esqueça de trocar em todos os prefixos para que funcione bem em todos os navegadores.
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP em 06/09/14, 08:03 pm

Resolvido pode fechar o tópico.
avatar

Winners_CAP
Nível 6

Masculino
Inscrito dia : 23/08/2014
Mensagens : 69
Pontos Ativos : 89

Ver perfil do usuário http://brasilhappyplay.forumbrasil.net/forum

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum