Image above entry-title

Hi Melody62,

Sure, this is possible. You have to edit the stylesheet to accomplish this.
Go to the dashboard and select appearance > Editor. Now select Stylesheet (style.css). We need to go to section 7.1 (use CTRL+F or CMD+F to find this section).

You should look for a code block that defines .entry-header:before.

/* Post format icons */
.post .entry-header:before,
.entry-footer:before,
.single .title-block:before,
.page .entry-header:before{
  background: #faf9f5;
  border: 1px solid #d9d6d0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #faf9f5;
  color: #a09a92;
  content: "p";
  display: inline-block;
  font-family: libretto-icons;
  font-size: 21px;
  line-height: 21px;
  margin: 1rem auto 2rem;
  padding: 10px;
  text-shadow: none;
}

to disable this content, simply change this code to

/* Post format icons */
.post .entry-header:before,
.entry-footer:before,
.single .title-block:before,
.page .entry-header:before {} /*{
  background: #faf9f5;
  border: 1px solid #d9d6d0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #faf9f5;
  color: #a09a92;
  content: "p";
  display: inline-block;
  font-family: libretto-icons;
  font-size: 21px;
  line-height: 21px;
  margin: 1rem auto 2rem;
  padding: 10px;
  text-shadow: none;
}*/

The {} used here is an empty entry. anything /*’inside’*/ /* … */ is interpreted as a comment, and not code, thus disabling it.

Let me know if this was helpful.

Kind regards,
Thomas

• This reply was modified 9 years, 3 months ago by thomasvangurp.
• This reply was modified 9 years, 3 months ago by thomasvangurp.

Hi @melody62!

You can place a custom image there, yes – it will take a bit of reconfiguring the CSS.

First – I’d definitely recommend against editing your theme’s stylesheet directly. If you do that, your changes will get overwritten the next time the theme is updated.

Instead, use the Addition CSS panel in the Customizer (assuming you’re running at least WordPress 4.7) or with something like the Jetpack Plugin using the Custom CSS Module.

As for the actual CSS, the current image is actually an icon that’s put in place by a special font. You can replace that with an image like using these two styles:

.post .entry-header:before {
    content: "";
    border: none;
    border-radius: 0;
    background: url('https://example.com/image.jpg');
    width: 100px;
    height: 100px;
}

.libretto-long-form .entry-header::before {
	box-shadow: none;
}

You will need to customize it a little. Replace https://example.com/image.jpg with the url of the image you want to use.

You’ll also want to change the width and height values to match the size of your image 🙂

Let us know how it goes!

Yay! Glad it helped 🙂