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)
  • 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!

    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!

    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.