Hi @marcelooliveira
Are you referring to cover templates inside of TwentyTwenty? https://ww.wp.xz.cn/support/article/twenty-twenty/#cover-template
If so, this is not something that we currently have built into the theme and it’s not something that we have on the roadmap, but it’s a great idea.
You can create a child theme of Go (https://developer.ww.wp.xz.cn/themes/advanced-topics/child-themes/#how-to-create-a-child-theme) and create a custom page template that would achieve just this. It would take a little but of custom coding, but it’s entirely doable. If you are looking for help with creating a child theme or custom page templates, I would recommend posting over in the Advanced WordPress support forum and one of the volunteers there can help walk you through it.
Thanks for the answer Evan Herman (@eherman24).
This, I am referring to the cover templates inside of TwentyTwenty.
About creating the child theme, I already do that.
But my need is basically for the posts. I believe that if the effects could be implemented in the prominent figures defined for the posts, the menu in the title would be clearer.
Better understand my need by watching a link on my blog:
https://baudosamba.com.br/albuns/thelma-canta-nelson-cavaquinho/
On the creation of custom page templates, I need it for posts, I think it’s possible, and my biggest challenge: find out where, in the source code of the posts, the display of the highlighted images is defined so that I can implement the gradient effect. If you can point me out, I’m very grateful.
Strong hug, Marcelo
@marcelooliveira You’ll need to create a single.php template in your child theme and set the post to use that as its template.
The following ww.wp.xz.cn documentation should help out:
https://developer.ww.wp.xz.cn/themes/template-files-section/page-template-files/#creating-custom-page-templates-for-global-use
@eherman24 I thank you for the answer. I was able to implement what I want by adding the code below to the css panel.
.post__thumbnail {
margin: 0;
max-height: 10em;
overflow: hidden;
padding-bottom: 52.5%;
padding-bottom: calc(var(–theme-featured-img–height, 35%)*1.5);
position: relative;
z-index: -1;
}
.post__thumbnail:after {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, .2)), color-stop(40%, transparent));
background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 40%);
content: “”;
height: 100%;
}
.post__thumbnail:after, .post__thumbnail img {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
background: #000;
transition: opacity 1200ms ease-in-out;
opacity: 0.6;
z-index: 5;
}
I adjusted the display size of the featured images in the posts as well as inserting transparency and opacity in them.
Links with example:
https://baudosamba.com.br/albuns/caymmi-e-seu-violao/
https://baudosamba.com.br/albuns/cartola-verde-que-te-quero-rosa/
https://baudosamba.com.br/albuns/aracy-de-almeida-apresenta-sambas-de-noel-rosa/
