Change default image (notebook looking thing)

Me too. It’s an ugly thing and I would like to replace it with an image of a flower if possible. Failing that, I’ll just get rid as per the existing Snippet.

PS. Dumb question from a newbie: How do I restrict a forum search to just this theme?

@saveongolf, @chappie it is possible, please check this thread for solution

@chappie for better and filtered search results use this snippet

Actually, that’s a bit misleading, as it offers a solution to change the site logo on different pages. But the issue is to hide the title icons. For that you only need this code added to custom CSS:

#main-wrapper .format-icon:before {
content: none;
}

@chappie: if you don’t want to hide it, but change it, first you have to choose an entypo character from here: https://www.entypo.com/characters/

After you find the desired icon, take the U+##### code, replace U+ with / and set it as content in the code above. For the leaf (U+1F342), the code should look like:

#main-wrapper .format-icon:before {
content: "/1F342";
}

@acub you are probably right, I was mislead with “default logo”

Thanks (again), acub. I will choose something easier on my eye – unless there’s a way to replace the icon with a thumbnail photograph. If not a photograph, I wonder if I could create my own icon and link to it?

@tomaja – thanks for the Search tip. Not such a dumb question after all then.

Well, you could change it to a picture, I’ll explain the principle. The titles are now using the

[some-selector]:before {
content: "some_stuff";
}

to put “some_stuff” in front of every instance of [some-selector]. It’s a very neat feature of CSS3, which allows you to insert text in front of page elements, based on their class or id.
However, you could change the content to &+nbsp; (an empty space ***) and add some CSS rules to make that empty space act like a div. From DOM’s point of view, [some-element]:before is just a child of [some-element]. Because I want to position :before absolute, I need to set the parent’s position to relative. Also, I prefer to load the picture as a background. In my example the picture is 30px x 30px but you could change it to suit your needs, just adjust the left-padding of the parent accordingly. This would be the way to do it:

#main-wrapper .format-icon {
position: relative;
padding-left: 30px;
}
#main-wrapper .format-icon:before {
content: "&+nbsp;";
position: absolute;
left: 0;
width: 30px;
height: 30px;
display: block;
background-image: url('PUT_YOUR_RELATIVE_OR_ABSOLUTE_PATH_TO_YOUR_IMAGE_FILE_HERE');
}

***: Because WP forum automatically changes the html entitiy codes in their meanings, I had to add a + sign in &+nbsp; so it wouldn’t be converted in an empty space. You have to delete that plus sign if you don’t want to see &+nbsp; written over your image.

Wow, thanks – that looks like a thing of beauty! Will try it out tonight. I’ve previously used a Snippet to hide the Page Icon so will this still work, or do I need to delete that Snippet?

It depends on the snippet. ??
Most probably it sets display to none for .format-icon:before. Since we’re modifying .format-icon:before to look the way we want, I suppose it would be a good idea to also display it.

OK, I have tried with the Page Icon hidden code active and with that Snippet deleted and get the same result both ways.

It’s very close to working for me. I’m seeing two issues…

Firstly, the new image isn’t aligned with the page text title – it is approx 50% shifted down, ie the top of the image aligns with the middle of the text and the bottom of the image is 50% below the bottom of the text – in fact lower than the bottom of the original Page Icon.

Secondly, the image seems to be inheriting transparency from somewhere because it’s very faint. The Snippet I used to hide the hide the Page Icon did rely on opacity (see below) but I deleted and saved before trying your code without it.

.format-icon:before {
	speak: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  padding-right: 10px;
  opacity: 0.2;
  position: relative;
  top: 8px;
  display: none;
  font: normal normal 1.2em/1 'entypo';

Nothing else in my custom CSS includes opacity.

The code you posted is hilarious. You’re setting a lot of random visual props for the element than set it to display:none (which basically hides the entire element).

You should just delete that code. Try mine (all of it). If you want to reposition the image, change the top: and left: values (negative values are admited).

If opacity is not 1 (when inspecting the element), you should set it to 1.
So add

opacity: 1;

to the list of props for #main-wrapper .format-icon:before in my code.

Thanks acub – I’ll try again. The member who posted that code did say it was a bit of a tortuous workaround. But it seemed to work.

We’re very close now, acub. My image is no longer faint. And I can move it (too far) upwards by adding top: 0; which still doesn’t align it with the text but it looks better above than below.

I tried different values for “top” but they don’t alter the position.

Here (including the code) is a screen grab of the only two positions I have managed to get:

https://s1008.photobucket.com/user/3785/media/public/pageiconposition.png.html

I’ve been playing with this and I think my problem was mainly due to using a landscape format image (41x31px). When I extended the image background so that the format was square (40x40px) I was able to tweak the CSS so that it displays nicely aligned. But I had to distort it a little in the CSS (to 30x40px) to fix a duplication problem:

https://s1008.photobucket.com/user/3785/media/public/PageIconimage.png.html

If I leave the dimensions at 40×40 in the code, the image starts repeating itself:

https://s1008.photobucket.com/user/3785/media/public/PageIconimagerepeat.png.html

Have you considered using the background-repeat property?

background-repeat: none;

More cool background props here.