Suporte » Temas » CSS bug, ajuda!!

  • ilonabittencourt

    (@ilonabittencourt)


    Olá! estou tentando desenvolver um tema, e uma prate do meu CSS não quer funcionar (a parte que diz respeito a formatação do post). Já chequei se poderia ser um erro na pasta functions.php, no HTML ou no próprio CSS, mas aparentemente está tudo em ordem.
    Então, era pro parágrafo dos posts (.postemsi) estar alinhado justificado, queria diminuir o espaçamento do heading do título dos posts (.titulodopost) e a cor da categoria(.categoriadopost) era pra ser outra mas, se eu tento alterar acaba desconfigurando a cor do título. Entre outras coisas que estão desconfiguradas….
    Esse é o código de CSS que eu gostaria que estivesse funcionando:

    .titulodopost, .categoriadopost, .datadopost {
        text-align: center;
    }
    
    /* título do post */
    .titulodopost a {
        color: #f7c4c1;
    	text-transform: uppercase;
        margin: 0 auto;
        padding: 0 auto;
    }
    
    /* categoria do post */
    ul.post-categories {
        text-align: center;
    	text-decoration: underline;
    	text-transform: uppercase;
    }
    
    .post-categories li {
        list-style: none;
        font-size: 12px;
    }
    
    .post-categories a {
        color: #b7a9a9;
    }
    
    .post-categories {
        padding: 0;
        margin: 0;
    }
    
    /* data do post */
    .datadopost {
        font-size: 11.8px;
    	text-transform: uppercase;
        margin-top: 5px;
        margin-bottom: 15px;
    }
    
    /* post em si */
    .postemsi {
    	text-align: justify;
    }
    
    .postemsi::first-letter {
        font: 300 17.3px 'Josefin Sans', sans-serif;
        font-size: 45px;
    }

    E esse é o código da página em HTML e PHP

    <!-- TAG QUE CHAMA O HEADER -->
    <?php get_header(); ?>
    
    <!-- FUNÇÃO QUE CHAMA OS POSTS: LOOP -->
    <?php if (have_posts()):
    while (have_posts()): the_post(); ?>
    
    <!-- TAG QUE CHAMA A CATEGORIA DO POST, NESSE CASO ELA VAI FICAR ACIMA DO TITULO DO POST -->
    <article class="post">         
    <p class="categoriadopost"><?php the_category(); ?></p>
    <!-- TAG QUE CHAMA O TÍTULO DO POST E O SINGLE POST -->
    <h2 class="titulodopost"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <!-- TAG QUE CHAMA A DATA DO POST, A DATA ESTÁ NO MODELO: DIA X DE MÊS X DE ANO x -->
    <p class="datadopost"><?php the_time('j \d\e F \d\e Y'); ?></p>
    <!-- E, POR FIM, A TAG QUE CHAMA O CONTEÚDO DO POST -->
    <p class="postemsi"><?php the_content(); ?></p>
    </article>
    
    <!-- FIM DO LOOP:  -->
    <?php endwhile;
    else: echo '<p>Desculpe, nada pra ver aqui...</p>';
    endif; ?>
    
    <!-- TAG QUE CHAMA A SIDEBAR -->
    <?php get_sidebar('sidebar-1'); ?>
    <?php get_sidebar('footer-sidebar-1'); ?>
    <!-- TAG QUE CHAMA O FOOTER -->
    <?php get_footer(); ?>

    Não sei mais o que fazer, alguém ajuda??

Visualizando 10 respostas - 1 até 10 (de um total de 10)
  • ilonabittencourt

    (@ilonabittencourt)

    desculpem pelo texto todo desconfigurado, nao sabia que nao podia colocar acentos e etc…
    Aqui esta a traducao pra quem nao entendeu:
    ola! estou tentando desenvolver um tema, e uma prate do meu CSS nao quer funcionar (a parte que diz respeito a formatacao do post). Ja chequei se poderia ser um erro na pasta functions.php, no HTML ou no proprio CSS, mas aparentemente esta tudo em ordem.
    Entao: era pro paragrafo dos posts (.postemsi) estar alinhado justificado, queria diminuir o espacamento do heading do ti­tulo dos posts (.titulodopost) e a cor da categoria(.categoriadopost) era pra ser outra mas, se eu tento alterar acaba desconfigurando a cor do ti­tulo. Entre outras coisas que estao desconfiguradas….
    Esse era o codigo de CSS que eu gostaria que estivesse funcionando:
    codigo 1
    E esse eh o codigo da pagina em html e php

    Muito obrigada pela compeencao 😉

    ilonabittencourt

    (@ilonabittencourt)

    Estado atual do layout

    italoxz

    (@italoxz)

    Olá @ilonabittencourt

    Você já tentou aplicar o css aos elementos dessa maneira?

    h2.titulodopost, p.categoriadopost, p.datadopost {
        text-align: center;
    }
    
    /* título do post */
    h2.titulodopost a {
        color: #f7c4c1;
    	text-transform: uppercase;
        margin: 0 auto;
        padding: 0 auto;
    }
    
    /* post em si */
    p.postemsi {
    	text-align: justify;
    }
    
    p.postemsi::first-letter {
        font: 300 17.3px 'Josefin Sans', sans-serif;
        font-size: 45px;
    }

    Provavelmente deve haver um conflito de hierarquia no CSS e as propriedades que você definiu não são substituídas.

    Recomendo que veja sobre:

    Seletores CSS: Aqui 😀

    Herança e especificidade CSS: E aqui 😀

    • Esta resposta foi modificada 4 anos atrás por italoxz.
    • Esta resposta foi modificada 4 anos atrás por italoxz.
    ilonabittencourt

    (@ilonabittencourt)

    ainda nao funciona 🙁

    ilonabittencourt

    (@ilonabittencourt)

    Mas obrigada!
    😀

    italoxz

    (@italoxz)

    A página em questão está puxando o arquivo .css correto?

    Você pode especificar mais o estilo com por exemplo: “article.post p .categoriadopost”

    As propriedades não são aplicadas mesmo que você utilize a função !important do CSS?

    Possui um link online para vermos este erro?

    ilonabittencourt

    (@ilonabittencourt)

    eh eu estou tentando desenvolver o tema num localhost antes de passar pro blog, entao nao tenho link, 🙁

    italoxz

    (@italoxz)

    Aaaa entendo :/

    As propriedades não são aplicadas mesmo que você utilize a função !important do CSS?

    ilonabittencourt

    (@ilonabittencourt)

    nao

    italoxz

    (@italoxz)

    Você pode utilizar o inspetor de elementos do navegador e ir desabilitando as classes para ver se existe algum conflito entre elas, pode também no inspetor de elementos analisar ao console e ver se os arquivos estão com algum erro ou alerta.

Visualizando 10 respostas - 1 até 10 (de um total de 10)
  • O tópico ‘CSS bug, ajuda!!’ está fechado para novas respostas.