Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 21, 2018 at 5:59 am #1048047
    ctlarsen

    Hi –
    I just installed Enfold for a new site and it’s working well, However, I have a key design requirement that I can’t figure out how to implement: For the single post page, I want the title of the post (along with author and date) to appear in white across the middle of the post’s featured image, with the featured image displayed full-width in the title container (i.e., below the header and across/above both the main post content and the right sidebar). I could not find any way to do this via Enfold configuration, so I guess it probably requires custom php and css. I have scoured the forum and have not seen anything that addresses this particular challenge.

    Before I start to struggle with the php and css (if necessary), do you have a recommendation for the best way to do the design I described above?

    Thanks for your help, and for such a great theme!

    Chris

    December 23, 2018 at 9:56 pm #1048915
    Victoria

    Hey ctlarsen,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    December 24, 2018 at 3:29 am #1048949
    ctlarsen

    Hi, Victoria –

    A live example from a site I’m trying to emulate a bit appears here:

    https://www.firstthings.com/web-exclusives/2018/12/chinas-future-in-the-balance

    The post title appears in white over the center of the featured image, along with some metadata (author name, publish date). The featured image is full-width over both the main column and the right sidebar.

    Hope this clarifies. I appreciate your help!

    Chris

    December 29, 2018 at 11:49 pm #1049208
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
/* CSS - */

.single-post .av-heading-wrapper * {
    color: #FFF !important;
    background: rgba(0,0,0,.15);    
}
.single-post .av-heading-wrapper {
    position: absolute;
    z-index: 9999;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

    It is possible to align the title center only if the featured images are all of the same size.

    If the image is of different size the vertical alignment may differ.

    Please feel free to adjust the top value in the code to suit your design.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.