How do I alter the blog template?

Hi,

I haven’t used your theme before, so I’m a bit unfamiliar with how things are set up.

On this page, https://www.ellenrobinson.com/blog/, how would I go about adding an image across the top of the content area, running the full width of the page? If it’s PHP that’s needed, that’s not a problem, I just need to know where to work on this.

The site owner used to have this feature on the blog page, but says that some kind of update, either plugins or WP, caused it to disappear. I’ve deactivated each plugin but that didn’t make a difference.

I don’t see a blog template, per se.

Thanks a million,
Lisa

Hello Lisa,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if( $('body').hasClass('blog') ) {
        $('<div class="header-image"></div>').insertAfter('.header-clone');
      }

    })(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS to specify the header image.
    .blog .header-image {
      background-image: url('http://yoursite.com/path/to/your/image.jpg');
    }

Regards,
Kharis

Hi Kharis,

Thank you. That works, but it isn’t exactly what I want. Instead of a header image, I want an image that spans the top of the left column, the content area.

Can you help me with that?

all the best,
Lisa

Hello there,

On my test site, the new header image spans to the edge left and right side of the screen. It fills the entire screen horizontally. Please share a link to your blog page and ensure the code remains there. Maybe there’s something I can fix.

Regards,
Kharis

Hi. Thanks so much for sticking with me!

I’m not looking for a way to add a “header” image, but an image above the left column of content. I created a mockup for you: the light blue square is where I want to be able to add an image or other content.

Thanks, Lisa

Hello there,

Thank you for clarifying. Please try this code and supply a valid URL to your image file in the img_url variable line.

    (function($){

      if( $('body').hasClass('blog') ) {
        var img_url = 'http://yoursite.com/path/to/your/image.jpg';
        $('<img src="'+img_url+'" alt="My blog heading image" style="margin-bottom: 30px;" />').prependTo('.content-area');
      }

    })(jQuery); 

Regards,
Kharis

Thank you, thank you.

Your support is AWESOME!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis