Suporte » Temas » Alinhamento de galeria monoslideshow e nextGEN

  • Resolvido lucascorato

    (@lucascorato)


    Bom dia a todos!

    Imagino que seja dúvida de novato, então me perdoem se for realmente estúpida, mas não estou conseguindo alinhar as diversas páginas e categorias do meu site.

    Dêem uma olhada em http://fot.lucascorato.com e vejam como a margem superior está perfitamente alinhada, no post onde estou usando o plugin nextGEN con monoslideshow.

    Entrem depois em outra categoria ou página, como http://fot.lucascorato.com/category/360/ onde o alinhamento superior vai pro brejo.

    Não entendo o que acontece, pois parece que o monoslideshow joga o post onde está um pouco para cima. Nas outras categorias, são todos posts iguais, sem título sem nada, só muda a categoria. E nas páginas, onde há somente texto e o formulário, acontece o mesmo.

    Uma solução temporária que achei foi criar um novo h4 no style.css com font-size: 1em; e usar, no começo do post do monoslideshow E antes da imagem do custom menu à esquerda, um <h4> </h4><br/> que até que funciona perfeitamente, mas não creio que seja a solução mais correta, e além disso me aumenta a margem superior da página em geral.

    O style.css está aqui: http://www.lucascorato.com/fotografia/wp-content/themes/white-as-milk/style.css

    Ah, outra solução que achei e não gostei foi de adicionar, ao redor da linha 116, no #content .entry, #content .entry, um padding-top negativo de -1.2em, mas isso me cortava um pouco as em cima imagens no monoslideshow

    Já quebrei a cabeça e não consegui resolver o problema de um modo melhor. Agradeço qualquer opinião!

Visualizando 15 respostas - 1 até 15 (de um total de 15)
  • Myst1010

    (@myst1010)

    lucascorato vc está tendo este erro em que navegador porque entrei no site nos links que vc passou e não vi nenhum espaçamento como vc descreveu.

    Ou vc já corrigiu o erro ou ele se apresenta pra vc e não pra mim.

    Pra vc usar um padding de -1.2em deveria ser algo gritante e não vejo nada disso.

    Se possível tire uma scrrenshot pra vermos o que acontece exatamente.

    Criador do tópico lucascorato

    (@lucascorato)

    Myst,

    Obrigado pela resposta!

    Sim, tem razão, esqueci de falar: estou usando Firefox e IE8.

    Este é o screenshot da página principal (e também categoria portfolio):
    http://www.lucascorato.com/arquivo/01.png

    Este é de uma outra categoria:
    http://www.lucascorato.com/arquivo/02.png

    E aqui os coloquei lado a lado para ver melhor o que acontece; é o salto indicado pelao seta vermelha (o da direita está espelhado e foram cortados na metade, para acentuar a diferença):
    http://www.lucascorato.com/arquivo/03.png

    Veja que o da esquerda está perfeitamente alinhado com o logo da sidebar, o da direita está abaixo.

    A coisa estranha é que se antes da tag do monoslideshow adicionada no post eu coloco qualquer texto, tudo desce também e ficam iguais, porém desalinhados em relação ao logo.

    Obrigado novamente!

    Myst1010

    (@myst1010)

    Não sei se estou correto, mas existe uma diferença entre as duas telas provavelmente gerada pelo código.

    Em um delas existe um <p> que envolve o conteúdo e em outra não, possívelmente este p é que está gerando o problema.

    Veja nas imagens
    imagem 1

    e
    imagem 2

    Verifique se é este o problema e tente eliminar a tag <p> gerada para ver se resolve o problema.

    Criador do tópico lucascorato

    (@lucascorato)

    Myst,

    boa, imagino sim que seja isso, porém não consigo entender por que em uma página esse <p> aparece e em outra não, porque tem somente o plugin de slideshow sem texto. Basta porém adicionar um ponto que tudo desce.

    Tentei dar uma limpada em diversos arquivos: page.php, index.php, sidebar.php e style.css, inclusive apagando diversas linhas comentadas e não achei nada que indicasse o problema, e não sei mais onde olhar.

    Te agradeço novamente pelo tempo que tem usado para me ajudar!

    Myst1010

    (@myst1010)

    bom o the_content() gera esses p mesmo e o plugin pode também estar gerando eles, verifique os códigos dos plugin e de sua página para ver se acha quem está gerando o código que é inserido no post.

    sabendo quem está gerando tem alguns comandos para limpar os html das strings e vc pode estar usando um deles para ver.

    Se quiser me passa o link dos plugin para eu dar uma olhada pra vê se consigo descobrir o que é.

    Não adianta me passar nomes, me passa o link que ai não tem erro deu pegar outro plugin pensando que é o que vc usa ok.

    Criador do tópico lucascorato

    (@lucascorato)

    O plugin é esse: http://wordpress.org/extend/plugins/nextgen-monoslideshow/

    Que é um add-on desse:http://wordpress.org/extend/plugins/nextgen-gallery/

    Estranho que o slideshow também está dentro do content. Estranho na verdade é que no post que uso o plugin dá tudo certo. O problema é o post normal, só texto.

    Abraço!

    Lucas, vi que vc fez alterações em sua página.
    Ou resolveu o problema ou desistiu de usar.
    Espero que tenha resolvido, mas de qualquer forma dei uma olhada nos plugins.

    Olhei aqui os plugins e não encontrei uma forma deles me gerarem esse p que é possivelmente o causador do problema, testei algumas formas e nada.

    Obs: Não consegui colocar um vídeo pelo monoslideshow, mas olhando o código fonte não identifiquei nenhum acréscimo de p em lugar algum.

    É claro que existem várias configurações em ambos os plugins e não tem como eu testar todas e quem sabe é uma delas habilitada que está fazendo isso, mas acredito que não.

    De qualquer forma teste uns códigos pra vê se resolve o problema.

    Adicione no seu function os códigos.

    remove_filter('the_content', 'wptexturize');

    Isso dá uma filtrada em códigos nos posts

    outra opção

    //Correção para shortcodes seguidos
    function correction_shortcode_successive($content)
    {
    	$content = preg_replace('/\]\[/im', "]\n[", $content);
    	return $content;
    }
    add_filter('the_content', 'correction_shortcode_successive');

    isso corrige shortcodes seguidos, não acho que vá ajudar, mas tentar não custa nada.

    se os códigos não resolverem remova-os para não gerar problemas futuros ok.

    Sinto não poder ajudar mais.

    Criador do tópico lucascorato

    (@lucascorato)

    Caro Myst,

    Não resolvi o problema não, na verdade só mudei aquela página, tirei os posts com texto e coloquei só o plugin. Em outras págins ele persiste.

    Tentei o que você sugeriu e nada, infelizmente.

    Vou acabar usando aquela solução “quebra-galho” que encontrei, de adicionar uma linha antes, e pelo menos fica em ordem. Só espero que não desalinhe em outros browsers, mas isso é o de menos e dá pra testar.

    Agradeço novamente pelo teu tempo e atenção!

    Abraço,

    LUCAS

    Criador do tópico lucascorato

    (@lucascorato)

    Cazzo, maravilha! Agora nem aquilo funciona mais, vai tudo lá pra baixo…!

    Porém… veja só:

    http://www.lucascorato.com/arquivo/04.png

    O p começa a aparecer aqui também, sobreposto à linha h4 que inseri.

    Veja lá, se tua paciência ainda não estiver esgotada, com o firebug:

    http://fot.lucascorato.com/

    Será que baguncei o tema e acabei sobrepondo alguma coisa e isso está dando essa diferença?

    Mistérios…

    Bom aqui continuou na mesma, em uma tela aparece e outra não.
    Sem contar com um erro que o plugin mostrou aqui

    Se a idéia foi adicionar a tag <h4></h4> para tentar corrigir alguma coisa acho que não adiante, até porque se torna um XHTML inválido.

    Tente uma coisa, se vc estiver adicionando o código do plugin pelo botão que ele criou em seu editor, copie o código e delete ele do edito visual, vá até o editor html e insira o código por lá tentando evitar qualquer espaço ou enter.

    Outra opção com modo (gambiarra = ON)

    Se o plugin gera só uma div com todo o código dentro aplique o css da seguinte forma.

    .entry{
      position:relative;
    } 
    
    .monoslideshow{
      position:absolute;
      top;0px;
      left:0px;
    }

    Se várias div’s são geradas com a mesma class isso não vai adiantar, pelo contrário, vai acabar de estragar tudo.

    Mas tenta e me diz o que rolou.

    Criador do tópico lucascorato

    (@lucascorato)

    Myst! Achei!!!

    Pelo que entendi o <p> estava herdando de não-sei-quem uma margem superior, que o abaixava em relação ao narrowcolumn!

    O css estava assim:

    #content .entry p {
    font-size: 1.05em;
    }

    E eu adicionei

    margin-top: -4px

    Coloquei -4px pra compensar o line-height que é de 1.4em e sobrava ainda um pouco de margem em cima.

    E agora parece que está tudo em ordem, no mais perfeito alinhamento!

    Veja lá e diga por favor se aí está tudo certo também:

    http://fot.lucascorato.com/category/portfolio
    http://fot.lucascorato.com/category/360
    http://fot.lucascorato.com/contact

    A idéia é que tudo – com ou sem slideshow – fique em cima alinhado ao logo da sidebar.

    Agora basta, pelo menos aproveito o fim de semana e faço uma caminhada na montanha antes que eu enlouqueça!

    Muitíssimo obrigado pela ajuda!

    Grande abraço,

    LUCAS

    Parabéns lucas ficou certinho agora com e sem texto.

    Fui um pouco mais abusado e testei ele em todos os navegadores

    Firefox, safari, chrome, opera estão todos certinhos alinhados da mesma forma.

    Ai fui testar naquele programa !%¨@*%*& de IE.

    No IE 6 ficou mais pra cima a imagem em relação ao menu.
    A mesma coisa com o IE7 (Esses dois andam de mãos juntas, pena que não morrem de mãos juntas também).

    IE8 ficou certinho também igual aos navegadores de verdade rsrsrsrs.

    Bom se quiser corrigir para o IE6 e IE7 é só fazer um comentário condicional e resolver o problema molinho.

    Mas pra ficar legal mesmo vc tem que corrigir uns errinhos bobos que ficou no HTML e validar o tema.

    Desculpe a intromissão ai nessa verificação toda, mas é que sou chato por parte de pai e boa caminhada em seu final de semana.

    E não esqueça de colocar o post como resolvido ok.

    Abraços

    Criador do tópico lucascorato

    (@lucascorato)

    Grande Myst,

    Obrigado, imagine, não é intromissão de modo algum, agradeço pelos testes.

    Vou dar uma pesquisada em como arrumar esses detalhes no IE6 e IE7 pois não sei ainda como fazer. E também não tenho idéia de que erros ficaram no HTML e como devo validar o tema. Se puder dar uma luz, agradeceria imensamente.

    Obrigado mais uma vez e até a próxima!

    Abraço,

    LUCAS

    Fala ai lucas.

    Vamos em partes, para testar seu tema em vários IE’s vc precisa de um programa porque o windows não permite ter vários IE’s na mesma maquina.

    Eu uso o IETester mais novo e é bom sempre estar atualizando.

    Existem outros, mas como eu fiz uns testes neste programa e em IE’s verdadeiros e ficou aparentemente 100% defeituoso rsrsrsrsr nem quis olhar os outros programas deste tipo.

    ==========================================

    Para criar o css para os navegadores IE vc tem que fazer um comentário condicional.

    coloque em seu header.php logo abaixo do carregamento normal do seu style.css um ou vários comentários condicionais.

    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/css_ie7.css" media="all" />
    <![endif]-->

    Este que coloquei aqui é específico para o IE7, mas existem outros, veja a lista completa.

    <!--[if IE]>
    este código é para  Internet Explorer (todos)<br />
    <![endif]-->
    
    <!--[if IE 5]>
    este código é para  Internet Explorer 5<br />
    <![endif]-->
    
    <!--[if IE 5.5]>
    este código é para  Internet Explorer 5.5<br />
    <![endif]-->
    
    <!--[if IE 6]>
    este código é para  Internet Explorer 6<br />
    <![endif]-->
    
    <!--[if IE 7]>
    este código é para  Internet Explorer 7<br />
    <![endif]-->
    
    <!--[if gte IE 5]>
    este código é para  Internet Explorer 5 e mais novos<br />
    <![endif]-->
    
    <!--[if lt IE 6]>
    este código é para  Internet Explorer mais antigo que 6<br />
    <![endif]-->
    
    <!--[if lte IE 5.5]>
    este código é para  Internet Explorer mais antigo ou igual a 5.5<br />
    <![endif]-->
    
    <!--[if gt IE 6]>
    este código é para  Internet Explorer mais novo que 6<br />
    <![endif]-->

    Agora para validar o HTML eu uso dois plugins do firefox.

    Um é o Web Developer que tem uma opção para testar o THML local, mas como seu site já está publicado você pode ir direto no site w3c.

    Validar o XHTML http://validator.w3.org/
    Validar o CSS http://jigsaw.w3.org/css-validator/

    O outro que uso é o plugin HTML validator
    http://users.skynet.be/mgueury/mozilla/

    ainda está em versão beta, mas é bem bonzinho e ele pode usar ou não a mesma engine que o validador do W3C além de ser mais rigoroso.

    Com ele vc vai vendo o que deixou passar e vai corrigindo até que fique 100% e de quebra vai aprendendo muito a não cometer os mesmo erros.

    ===================================

    Considerações finais:

    Algumas pessoas acham que não precisa ser tão rigoroso com validar seu tema, mas eu discordo imensamente.

    Vou dar um exemplo de porque é bom validar.

    Perdi três meses fazendo meu primeiro tema para WP testando várias coisas, códigos que nunca tinha visto e nem sabia pra que serviam.

    fiquei super contente, finalmente terminei meu primeiro tema que ficou super … ruim, é ficou ruim, mas eu até que gostei principalmente sendo o meu primeiro.

    Mas vieram mais duas versões do firefox depois disso, hoje meu tema parece um gato atropelado quando abro em uma versão mais nova.

    O que funcionou perfeitamente no firefox anterior já não funciona mais neste, fui ver e está cheio de erros que cometi por falta de experiência.

    Resultado: tenho que corrigir ele todo se quiser usar e a preguiça e desanimo não deixam, porque prefiro fazer um novo a corrigir todos os erros que deixei passar.

    Criador do tópico lucascorato

    (@lucascorato)

    Maravilha Myst! Obrigado de novo (já estou ficando repetitivo…!)

    Infelizmente vou te que dar uma pausa com o site por causa do trabalho, mas espero logo voltar e colocar em uso essas tuas explicações.

    Abraço e até mais,

    LUCAS

Visualizando 15 respostas - 1 até 15 (de um total de 15)
  • O tópico ‘Alinhamento de galeria monoslideshow e nextGEN’ está fechado para novas respostas.