WordPress Problemas ao deixar imagem sobre o titulo (Wordpress)

Lerub · 5 de janeiro de 2018

Eu estou tentando fazer isso há dois dias. E eu ando enfrentando problemas. Eu nem fiz as alterações para ficar "mobile friendly" - o post já é - por que ainda não terminei isso. Eu vou postar os trechos de códigos aqui, más, por via das duvidas, eu irei deixar um link do "Pastebin", com todo o CSS.

E de preferência, eu sei que da para fazer isso sem AJAX. Então. para um website mais léve, só CSS.

https://pastebin.com/x2ZuD0Q0

O código "padrão" do titulo dos post's é esse:


.entry-title {
    font-family: Georgia, "Bitstream Charter", serif;
    font-size: 433%;    
        position: absolute;
  bottom:6%;

}

O "content single" é esse:

.single
.entry-title {
    margin-bottom:36%;
    position:relative;
    font-family: Georgia, "Bitstream Charter", serif;
    font-size: 313%;    
    z-index:1;

Eu insiro a imgem junto ao titulo e uso o elemento HTML figure.

<figure><img src="https://media.domain.com/thumbs/Thumb....png"></figure>

Da cérto, más, eu estou tendo alguns problemas. Eu executo o test com dois posts em meu site para testes. Cada um com uma imagem na resolução de 1920x1080. Talvez pelo fato de eu ter tido que ajustar uma delas para télas retanguláres - é de 2007, se eu não me engano - esse bug acontéce. A distancia de cada imagem do post e do topo é diferente.

Eu tentei deixar o título acima do post, já que, onde fica o post, fica uma parte sobrando, no topo. E eu tentei usar "position:fixed;", para dar aquele efeito na rolagem. Deu cérto, más, ao reposicionar os elementos, tudo que está acima desaparéce.

Esse screenshot foi o máximo que eu consegui fazer.

https://lh3.googleusercontent.com/sGoOJmaCSIac7ZVwDsbtQtcPf_3jBh1NSsWP6v44zWrTsxo0KB0mbkF7ltvVu97MRs-ARw[/img]

Eu usei a ferramenta do "Mozilla Firefox" para tirar esse screenshot. Eu borrei o conteúdo para não correr o risco da moderação pensar que eu estou infringindo uma régra e divulgando o meu conteúdo.

agora, eu irei mostrar os códigos do "header.php", "content-single.php" e "index.php".

content-single.php

https://pastebin.com/AEy3bKWQ

header.php

https://pastebin.com/K55i8n2X

index.php

https://pastebin.com/PPT8TzCm

Eu já tentei tudo o que eu sei.

Lerub · 8 de janeiro de 2018

Eu fiz algomas correções na CSS. Eu esqueci de adicionar img em


      }

.single,
.entry-title figure [b]img[/b]{
width:100%;
}

para ajustar as dimensões da imagem. Em seguida, eu fiz isso:



.single,
.entry-title figure {
        position:absolute;

    bottom:181.4%;
    height:0;
    z-index:-1;

        }

.single,
.entry-title figure img{
width:100%;
}

No título, eu eu fiz isso:


.single
.entry-title {
    bottom:36%;
    position:fixed;
    font-family: Georgia, "Bitstream Charter", serif;
    font-size: 313%;    
    z-index:-1;
    width:96%;
    
  }

Eu deixei o cabeçalho e o conteúdo com o fundo da mesma cor que o body.

.single
#masthead {
    
    width:100%;
background:gray;
margin-bottom:44%;
display:table;
}

 

#page #content {
    background:gray;
    margin-bottom:-4%;
}

E eu fiz isso em body:


body {
    background: gray;
    position:absolute;
top:5%;
    width:99%;
}

agora, só falta a pagina inicial.

Edit:

Eu estou tendo problemas com a página inicial. Seja em porcentágem, pixels e outras medias... no desktop, a imagem do titulo fica sobrando espaço "vazio" embaixo e no tablet sóbra acima.

Lerub · 9 de janeiro de 2018

agora, em dispositivos móveis, sóbra abaixo, na página inicial. Eu já tentei corrigir com "@meida, más, não deu cérto.

.dublagemhentry h1  figure {
        position:absolute;
        bottom:49%;
        z-index:-1;
    height:100%;        
    }
   
.dublagemhentry h1  figure img {width:100%; transition:ease 0.6s;}

.dublagemhentry .hentry h1 a {
color:#ff6363;
}

.dublagemhentry h1:hover figure img {
    transition:ease 0.6s;
width:111%;
    
}

Lerub · 29 de junho de 2018

Será que eu ainda tenho chances de ressuscitar esse tópico? Estou tendo outro problema. Eu não consigo deixar o elemento 2 no topo da págilna. So embaixo e ao lado. Eu vou passar os códigos.

HTML:

https://pastebin.com/dh6M4j3E

CSS:

https://pastebin.com/reKP9b0X

DiF · 29 de junho de 2018

@Lerub Olá, Poderia postar alguns prints do problema? Além disso, postar os códigos pelo pastebin não é uma boa ideia. Pois muita gente não pode acessar se estiver em lugares com bloqueio.

Por isso sugiro que poste aqui os códigos usando o botão CODE <>.

2 horas atrás, Lerub disse:

Será que eu ainda tenho chances de ressuscitar esse tópico? Estou tendo outro problema.

se este outro problema for relacionado ao mesmo site, sim. Se for outro aí deve ser feito um novo tópico.

Lerub · 29 de junho de 2018

HTML:


<?php

/**

* The main template file.

*

* This is the most generic template file in a WordPress theme

* and one of the two required files for a theme (the other being style.css).

* It is used to display a page when nothing more specific matches a query.

* E.g., it puts together the home page when no home.php file exists.

* Learn more: http://codex.wordpress.org/Template_Hierarchy

*

* @bpackage Reddle

* @since Reddle 1.0

*/

 

get_header(); ?>

 

        <div id="primary">

            <div id="content" role="main">

 

            <?php if ( have_posts() ) : ?>

 

               

               

   

                <?php reddle_content_nav( 'nav-above' ); ?>

 

                <?php /* Start the Loop */ ?>

                           

                <?php while ( have_posts() ) : the_post(); ?>

 

               

                    <?php

                        /* Include the Post-Format-specific template for the content.

                         * If you want to overload this in a child theme then include a file

                         * called content-___.php (where ___ is the Post Format name) and that will be used instead.

                         */

                        get_template_part( 'content', get_post_format() );

                    ?>

 

                <?php endwhile; ?>

 

                <?php reddle_content_nav( 'nav-below' ); ?>

 

            <?php else : ?>

 

                <article id="post-0" class="post no-results not-found">

                    <header class="entry-header">

                        <h1 class="entry-title"><?php _e( 'Nothing Found', 'reddle' ); ?></h1>

                    </header><!-- .entry-header -->

 

                    <div class="entry-content">

                        <p><?php _e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'reddle' ); ?></p>

                        <?php get_search_form(); ?>

                    </div><!-- .entry-content -->

                </article><!-- #post-0 -->

 

            <?php endif; ?>

               

<div class="element1"><?php

/**

* A ... Category Template

*/

 

?>

 

<section id="primary" class="site-content">

<div id="content" role="main">

<?php

// Check if there are any posts to display

if ( have_posts() ) : ?>

 

 

<?php

 

// The Loop

 

global $query_string;

query_posts("{$query_string}cat=629&posts_per_page=3");

 

 

while ( have_posts() ) : the_post(); ?>

 

<div class="hentry music">

 

 

 

<h1 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

<?php the_post_thumbnail(); ?>

<?php the_excerpt(); ?>

 

 <p class="postmetadata"><?php

 comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments closed');

?></p>

</div>

 

<?php endwhile;

 

else: ?>

<p>Sorry, no posts matched your criteria.</p>

 

 

<?php endif; ?>

</div>

</section>

 

   

   

 

 

                    </div>

 

<div class="element2"><?php

/**

* A ... Category Template

*/

 

?>

 

<section id="primary" class="site-content">

<div id="content" role="main">

<?php

// Check if there are any posts to display

if ( have_posts() ) : ?>

 

 

 

<?php

 

// The Loop

 

global $query_string;

query_posts("{$query_string}cat=623&posts_per_page=3");

 

 

while ( have_posts() ) : the_post(); ?>

 

<div class="hentry music">

 

 

 

<h1 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

<?php the_post_thumbnail(); ?>

<?php the_excerpt(); ?>

 

 <p class="postmetadata"><?php

 comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments closed');

?></p>

</div>

 

<?php endwhile;

 

else: ?>

<p>Sorry, no posts matched your criteria.</p>

 

 

<?php endif; ?>

</div>

</section>

                    </div>

                   

            </div>

 

           

            </div>

 

 

 

 

 

 

 

            <!-- #content -->

        <!-- #primary -->

 

 

 

<?php get_sidebar(); ?>

<?php get_footer(); ?>

CSS:


.element1 .hentry {

background:white;

width:43%;

font-size:124%;

clear:left;

 

   

   

}

 

.element1.hentry h1 {

font-size:143%;

   

   

}

 

.element1 .hentry h1 a {

color:green;

    background:rgba(0,0,0,0);

    transition:ease 0.6s;

}

 

.element1 .hentry h1 a:hover {

text-decoration:none;

    transition:ease 0.6s;

    opacity:.96;

}

 

 

 

 

 

.element2 .hentry  {

background:white;

width:43%;

font-size:124%;

clear:right;

    display:flex;

    position:relative;

    left:47%;

}

 

.element2 .hentry h1 {

font-size:143%;

   

  bottom:8%;

   

}

 

.element2 .hentry h1 a {

color:#836fff;

    transition:ease 0.6s;

}

 

.element2 .hentry h1 a:hover {

text-decoration:none;

    transition:ease 0.6s;

    opacity:.96;

}

Screenshot:

https://screenshots.firefox.com/ClcoiQyPZG74MGCU/beta.suitedosnerds.com

DiF · 30 de junho de 2018

@Lerub Então, estava vendo o código e o print... mas ainda fico sem entender, qual seu objetivo.

O "elemento 2" pelo que eu vi no código, usa ids iguais ao do elemento1. Lembre-se de que ID não pode ser repetido. Somente class.

Por gentileza, poderia explicar com mais detalhes o que você quer fazer ali?

No aguardo.

Att,

Moderador DiF

Lerub · 30 de junho de 2018

ID's?! Onde viu isso? No PHP com HTML?

O que eu pretendo fazer é posicionar o elemento com 3 - ou mais - post's de uma categoria mais para cima e ao lado do elemento 1. Eu já tentei com float:right e clear:right e até colocar o elemento 2 acima do 1. E eu pretendo fazer de maneira que o torne responsivo.

Edit

Eu vou dar uma arriscada e ver o que o w3c validator faz com o código.

Result:

No errors.

DiF · 30 de junho de 2018

@Lerub Desculpe, mas meio que ainda ficou uma incógnita o que você queria fazer.

Falando em elementos.... e etc... o ideal é que você expresse tudo de forma mais clara possível. Estes elementos que você fala é onde contem os posts?

Se for isso, você pode usar o inline-block para fazer eles ficarem lado a lado. Pode usar o Flex...

Enfim... se conseguiu resolver, por gentileza poderia postar a sua solução? Assim você ajudaria os demais!

Lerub · 30 de junho de 2018

Ao topo, tem os ultimos posts. Abaixo, uma categoria com três posts e eu pretendo posicionar outra categoria ao lado.

Edit

Well... eu posicionei em relativo e me dei conta que o mesmo não aceita "%". Como eu inseri aquéla tag do Viewport, eu vou ver como irá ficar no smartphone e no vélho tablet de 2013.

Andamento:

Para se ajustar bem em portrait eu fiz isso:



@media only screen and (orientation: portrait) {
    /* For mobile phones: */
        .hentry p {
        font-size:183%;
        
    }
     .hentry {margin-top:-3.6%; }

.suitehentry .hentry {
background:white;
width:93%;
position:relative;
top:2.3em;
left:2em;
        display:inline-block;
}


.suitenewshentry .hentry {
background:white;
width:93%;
        display:inline-block;
}

    
    #colophon {margin-top:93%;}
}

Lerub · 1 de julho de 2018

No tablet - em landscape - a posição de uma das categorias é um pouco mais baixa. Enfim... isso não atrapalha em nada.

Lerub · 2 de julho de 2018

Eu estou tendo problemas com submenus. Se eu aumento demais o tamanho da fonte, os carácteres são cortados.

Relevem o texto. É um campo de testes.

O CSS padrão é esse:


.theblogmenu {
position:relative;
left:16%;
width:63%;
}

.theblogmenu ul {
    list-style:none;
    margin:0;
    padding:0;
}

.theblogmenu ul:before,.theblogmenu ul:after {
    content:"";
    display:table;
}
.theblogmenu ul:after {
    clear:both;
}
.theblogmenu ul > li {
    float:left;
    position:relative;
}
.theblogmenu a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    text-decoration:none;
font-weight:bold;
color:     #ffbc69;

font-size:233%;
}
.theblogmenu a:hover {
    text-decoration:none;
    background:#595959;
}
.theblogmenu li ul {
    background:rgba(130,130,130,0.86);
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
}
.theblogmenu li ul li {
    width:200px;
 overflow:hidden;
    height:0;
    transition:all 200ms ease-in;
}
.theblogmenu li ul a {
    border:none;
}
.theblogmenu li ul a:hover {
    background:rgba(255,181,197,0.2);
}

.theblogmenu ul > li:hover ul li {
    height:56px;
font-size:63%;
}

O Portrait é esse:


@media only screen and (orientation: portrait) {
    /* For mobile phones: */  

 	

	.theblogmenu {
	position:relative;
	left:16%;	

}

.theblogmenu ul li a {

    
font-size:633%;
}
.theblogmenu li ul  {
    background:rgba(130,130,130,0.86);
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
display:block;
    width:160%;

}


.theblogmenu ul > li:hover ul li  {


font-size:163%;
    
}


    
}

Lerub · 3 de julho de 2018

Já fazem hóras que eu resolvi o problema do menu. Em bréve eu mando a CSS.

[b[Result:[/b[

No CSS padrão, eu defini um valor auto em width.


.theblogmenu {
position:relative;
left:16%;
width:63%;
}

.theblogmenu ul {
    list-style:none;
    margin:0;
    padding:0;
}

.theblogmenu ul:before,.theblogmenu ul:after {
    content:"";
    display:table;
}
.theblogmenu ul:after {
    clear:both;
}
.theblogmenu ul > li {
    float:left;
    position:relative;
}
.theblogmenu a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    text-decoration:none;
font-weight:bold;
color:     #ffbc69;

font-size:233%;
}
.theblogmenu a:hover {
    text-decoration:none;
    background:#595959;
}
.theblogmenu li ul {
    background:rgba(130,130,130,0.86);
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
}
.theblogmenu li ul li {
    width:auto;
 overflow:hidden;
    height:0;

}
.theblogmenu li ul a {
    border:none;
}
.theblogmenu li ul a:hover {
    background:rgba(255,181,197,0.2);
}

.theblogmenu ul > li:hover ul li {
    height:auto;
font-size:63%;
}

Para mobile, fiz isso:

@media only screen and (orientation: portrait) {
    /* For mobile phones: */
            .hentry p {
        font-size:293%;
        
    }
 
.theblogmenu {
position:relative;
left:16%;

}


    


.theblogmenu ul li   {

    
font-size:233%;
}

.theblogmenu li ul li  a {

    position:relative;
font-size:263%;
    margin-top:1em;
}


}