Imagem nas postagens para raks especificos / AJUDA

4 participantes

Ir para baixo

Tópico resolvido Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP 04.09.14 1:30

Estava vendo um tutorial (https://ajuda.forumeiros.com/t61132-tutorial-imagem-nas-postagens) que fiz passo-a-passo, tudo correto. Porém tem um bug , a img do efeito (https://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: https://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 07.09.14 0:04, editado 1 vez(es) (Motivo da edição : ...)
Winners_CAP
Winners_CAP
**

Membro desde : 24/08/2014
Mensagens : 69
Pontos : 89

http://brasilhappyplay.forumbrasil.net/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por viniliff 04.09.14 1:52

Olá.

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

Até.
viniliff
viniliff
Super Membro

Membro desde : 04/06/2014
Mensagens : 1711
Pontos : 2076

http://publieiros.forumeiros.com https://twitter.com/ViniliffOficial

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Alex Habilidade 04.09.14 2:25

Olá,

Poderia deixar o código ativo por favor?
Alex Habilidade
Alex Habilidade
Hiper Membro

Membro desde : 10/01/2011
Mensagens : 2795
Pontos : 3774

http://www.gzhabilidade.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP 04.09.14 2:41

@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>
Winners_CAP
Winners_CAP
**

Membro desde : 24/08/2014
Mensagens : 69
Pontos : 89

http://brasilhappyplay.forumbrasil.net/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Alex Habilidade 04.09.14 2:54

Amigo deixe o código ativo em seu fórum por favor
Alex Habilidade
Alex Habilidade
Hiper Membro

Membro desde : 10/01/2011
Mensagens : 2795
Pontos : 3774

http://www.gzhabilidade.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP 04.09.14 3:00

Ele ta ativo
Winners_CAP
Winners_CAP
**

Membro desde : 24/08/2014
Mensagens : 69
Pontos : 89

http://brasilhappyplay.forumbrasil.net/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Alex Habilidade 04.09.14 3:08

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')});
Alex Habilidade
Alex Habilidade
Hiper Membro

Membro desde : 10/01/2011
Mensagens : 2795
Pontos : 3774

http://www.gzhabilidade.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP 04.09.14 3:16

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

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

Como eu quero:
https://i.imgur.com/xDcCSGT.png
Winners_CAP
Winners_CAP
**

Membro desde : 24/08/2014
Mensagens : 69
Pontos : 89

http://brasilhappyplay.forumbrasil.net/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por waghcwb 04.09.14 17:53

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
waghcwb
waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP 04.09.14 23:15

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.

https://i.imgur.com/p52w9Ep.png
Winners_CAP
Winners_CAP
**

Membro desde : 24/08/2014
Mensagens : 69
Pontos : 89

http://brasilhappyplay.forumbrasil.net/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por viniliff 05.09.14 0:05

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:
https://ajuda.forumeiros.com/f17-

Até.
viniliff
viniliff
Super Membro

Membro desde : 04/06/2014
Mensagens : 1711
Pontos : 2076

http://publieiros.forumeiros.com https://twitter.com/ViniliffOficial

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP 05.09.14 1:31

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

Membro desde : 24/08/2014
Mensagens : 69
Pontos : 89

http://brasilhappyplay.forumbrasil.net/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por viniliff 05.09.14 1:40

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é.
viniliff
viniliff
Super Membro

Membro desde : 04/06/2014
Mensagens : 1711
Pontos : 2076

http://publieiros.forumeiros.com https://twitter.com/ViniliffOficial

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por waghcwb 05.09.14 2:20

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.
waghcwb
waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem nas postagens para raks especificos / AJUDA

Mensagem por Winners_CAP 07.09.14 0:03

Resolvido pode fechar o tópico.
Winners_CAP
Winners_CAP
**

Membro desde : 24/08/2014
Mensagens : 69
Pontos : 89

http://brasilhappyplay.forumbrasil.net/forum

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos