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 7 years, 11 months ago by thomasvangurp.
• This reply was modified 7 years, 11 months ago by thomasvangurp.

Hi Thomas, thank you for your explanation …

I’ve searched earlier and found this indeed…. I don’t want to remove it but want to put there another image if possible…

is it possible and if so how do i need to proceed?

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!

Hi Chad

Thank you for helping and advising the custom css, which I always use.
I never create a childtheme because I don’t use a theme that long, as soon as it bores me I change it ??

The explanation you gave worked perfectly, thank you!!

Yay! Glad it helped ??

Hi Melody,

I mis-interpreted your question. The suggestions chad gave are a much better idea than what I suggested, we all learn in the end!

Good luck with your site.
Kind regards,
Thomas

Helemaal goed ??

Indeed we do ??