full-width cover template

  • Resolved eoik

    (@eoik)


    4 years, 11 months ago

    Hi,

    Discovering twentytwenty.

    Was wondering if there would be an easy way to have a full-width page with the cover template???
    I suppose not…
    I tried to create a new template, mixing the two, but that’s to hard for me.

    I suppose I’ll havec to choose. At least, if I could find a way to have the title upon the header image (and not above) with the full-width-page template, that would already be better for me.

    Well, anyway, thanks for allthe work,

    veronique

Viewing 4 replies - 1 through 4 (of 4 total)

  • It would depend on the page that you’re wanting to have the full template on. If it is across the entire site, then most likely not recommended because of how left/right aligned elements are placed in the content area.

    That said, the following CSS applies a full width to a cover template

    .post-template-template-cover #site-content .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 100%;
}

    You could target a specific post by finding the post ID and adding it onto the end of the .post-template-template-cover class

    .post-template-template-cover.postid-1785 #site-content .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 100%;
}
    Thread Starter eoik

    (@eoik)

    Hi Jarret,
    This is really cool, I really appreciate.
    Could it be that simple… I can’t believe it.
    I’ll try as soon I can and I’ll let you know …
    (I think the idea of a class for a specific page will save me).

    (I need to check how the “left/right aligned elements are placed in the content area.”) (I am very new to Gutemberg by the way, this is my first experience with blocks, and I’m acually missing some documentation.)

    Thread Starter eoik

    (@eoik)

    Actually, I had to do it this way :
    `.page-template-template-cover .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 90%;
    width: calc(100% – 4rem);
    }
    .page-template-template-cover [class*=”__inner-container”] > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 90%;
    width: 100%;
    }’

    Glad you were able to get it working! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘full-width cover template’ is closed to new replies.