Docs

[dean44]

Hi,

I’m using the Church expanded demo theme for my site but I’d like to change how the blog posts look. It’s a dramatic change visually, but I think it’s fairly easy to code (I’m just not a great coder).

How would I accomplish the following edits?
Please see this graphic for a visual side by side, before and after: https://www.screencast.com/t/oU0eTfgxwYwY

Summarized:
1. Remove the top tan colored area with title and breadcrumbs
2. Move the featured image to replace the top tan area, and make it fullwidth, responsive
3. Move the post title to the bottom of the image, overlapping
4. Move the post meta to the top left of the post just below the image

[Rad]

Hi there,

Thanks for posting in.

I think they are possible, but since selector could be unique, would you mind providing your site’s URL and the sample site on your screenshot?

Thanks!

[dean44]

This reply has been marked as private.

[Rad]

Hi there,

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.single-post .x-header-landmark {
display: none;
}
.single-post .p-meta {
text-align: right;
}
.single-post .entry-title:before {
display: none;
}

.single-post .site > .entry-featured {
margin-top: 0px;
    border: 0px;
    padding: 0px;
}
.single-post .site > .entry-featured .entry-title {
    position: absolute;
    bottom: 6%;
    font-size: calc(14px + 1.8vw) !important;
    left: 15px;
    right: 15px;
    text-align: center;
    color: #fff;
}

Then please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function($) {

$('.single-post .has-post-thumbnail .entry-featured').insertBefore('.site > .x-container');
$('.single-post .has-post-thumbnail .entry-title').appendTo('.entry-featured');

} );

Hope this helps.

[dean44]

Excellent! That’s nearly it. I just want the title of the post to overlap the image now… like this (and it will need to be white with a shadow to stand out from the image):
https://www.screencast.com/t/i863hIjBc

Can you do that as well?

Thanks so much!

[Christopher]

Hi there,

Please add this code as well :

h1.entry-title {
    position: absolute;
    top: 50%;
    text-align: center !important;
    color: #fff;
    float: none;
    width: 100%;
    text-shadow: 1px 2px #000;
}
@media (min-width:680px){
h1.entry-title {
    font-size: 200%;

}
}

Hope it helps.

[dean44]

Perfect! That is so awesome. Thank you so much for your help!!

I edited the last bit of code, the @media type for a more smooth transition like this:

@media (min-width:680px) {
   h1.entry-title {
      font-size: 300%;
   }
}
@media (min-width:580px) and (max-width: 679px) {
   h1.entry-title {
      font-size: 250%;
   }
}
@media (min-width:480px) and (max-width: 579px) {
   h1.entry-title {
      font-size: 200%;
   }
}
@media (min-width:380px) and (max-width: 479px) {
   h1.entry-title {
      font-size: 150%;
   }
}
@media (min-width:280px) and (max-width: 379px) {
   h1.entry-title {
      font-size: 125%;
   }
}

Is that OK, or would you suggest something else?

Thanks!

[Thai]

Hi There,

Your CSS code looks fine.

Cheers!

[dean44]

Awesome thanks so much for your help. You guys are the best! X Theme rocks!

[Jade]

You’re most welcome! 🙂

[dean44]

Whoops! I just realized that the changes we made to the Title affected pages too. I only want it to change posts. Is there a better css selector to use?

For reference, here is my current css code (which works great for the blog posts):

/* blog post titles */
h1.entry-title {
   position: absolute;
   top: 45%;
   text-align: center !important;
   color: #fff;
   float: none;
   width: 100%;
   padding: 0% 5%;
   text-shadow: 1px 2px #000;
}
@media (min-width:680px) {
   h1.entry-title {
      font-size: 300%;
   }
}
@media (min-width:580px) and (max-width: 679px) {
   h1.entry-title {
      font-size: 250%;
   }
}
@media (min-width:480px) and (max-width: 579px) {
   h1.entry-title {
      font-size: 200%;
   }
}
@media (min-width:380px) and (max-width: 479px) {
   h1.entry-title {
      font-size: 150%;
   }
}
@media (min-width:280px) and (max-width: 379px) {
   h1.entry-title {
      font-size: 125%;
   }
}

[dean44]

I figured it out (I think). I added “.single-post” before all the “h1.entry-title” selectors. Like so:

/* blog post titles */
.single-post h1.entry-title {
   position: absolute;
   top: 45%;
   text-align: center !important;
   color: #fff;
   float: none;
   width: 100%;
   padding: 0% 5%;
   text-shadow: 1px 2px #000;
}
@media (min-width:680px) {
   .single-post h1.entry-title {
      font-size: 300%;
   }
}
@media (min-width:580px) and (max-width: 679px) {
   .single-post h1.entry-title {
      font-size: 250%;
   }
}
@media (min-width:480px) and (max-width: 579px) {
   .single-post h1.entry-title {
      font-size: 200%;
   }
}
@media (min-width:380px) and (max-width: 479px) {
   .single-post h1.entry-title {
      font-size: 150%;
   }
}
@media (min-width:280px) and (max-width: 379px) {
   .single-post h1.entry-title {
      font-size: 125%;
   }
}

Thanks!

[Christopher]

Glad to hear that you’ve already figured it out.

[Author]

Posts