WordPress.org

Forums

Customizr
Change default image (notebook looking thing) (24 posts)

  1. saveongolf
    Member
    Posted 1 year ago #

    Is there a way for me to change the default logo on interior pages. I don't know what it's called but it looks like a notebook page, and on this page it is right before the page title of "Compare Prices". http://saveongolf.net/store
    I want to make it a dollar sign or something like that.

    Thanks!
    ken

  2. chappie
    Member
    Posted 1 year ago #

    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?

  3. tomaja
    Member
    Posted 1 year ago #

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

    @chappie for better and filtered search results use this snippet

  4. acub
    Member
    Posted 1 year ago #

    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: http://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";
    }
  5. tomaja
    Member
    Posted 1 year ago #

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

  6. chappie
    Member
    Posted 1 year ago #

    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?

  7. chappie
    Member
    Posted 1 year ago #

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

  8. acub
    Member
    Posted 1 year ago #

    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.

  9. chappie
    Member
    Posted 1 year ago #

    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?

  10. acub
    Member
    Posted 1 year ago #

    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.

  11. chappie
    Member
    Posted 1 year ago #

    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.

  12. acub
    Member
    Posted 1 year ago #

    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.

  13. chappie
    Member
    Posted 1 year ago #

    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.

  14. chappie
    Member
    Posted 1 year ago #

    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:

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

  15. chappie
    Member
    Posted 1 year ago #

    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:

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

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

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

  16. acub
    Member
    Posted 1 year ago #

    Have you considered using the background-repeat property?

    background-repeat: none;

    More cool background props here.

  17. chappie
    Member
    Posted 1 year ago #

    I think you may not be surprised to hear that the answer is 'No'.

    For some reason, I couldn't get your suggestion to do anything but when I looked at the W3 page you pointed me to, I found and tried:

    background-repeat:no-repeat;

    ...which may or may not be the same thing but it did stop the repeat when I changed the code to reflect the 40x40px dimensions of the image. However, the image is displayed exactly the same whether I use 30x40px or 40x40px in the code. But since it is small, it's impossible to tell whether it is distorted or not.

    So, count me as another very happy bunny.

    Worthy of a Snippet imho -- and even for consideration as an option in a future build of the theme since the default Page Icon is not a thing of great beauty in my eyes.

  18. acub
    Member
    Posted 1 year ago #

    Oops. My bad.
    But I'm glad I was in the wrong here, as it proves a good point: no one knows all of CSS by heart and no one needs to. One just needs to look it up. :)

    Besides, there's always the validation phase, where you spot typos and other minor mistakes.

  19. chappie
    Member
    Posted 1 year ago #

    Besides, there's always the validation phase, where you spot typos and other minor mistakes.

    Yes indeedy....Er, where would I find one of them? Do you mean the W3 validation website? Can it check my site on my localhost so that I can fix it up before publishing it?

  20. chappie
    Member
    Posted 1 year ago #

    Having now started working with posts, I see that my custom page icon/image is now attached to every post as a format icon - meaning that the default format icons are hidden and all formats are tagged with the same icon/image:

    http://s1008.photobucket.com/user/3785/media/public/posticons.png.html

    Is there a way for me to remove my custom page image on posts only so that the defaults icons show there instead?

    TIA.

  21. acub
    Member
    Posted 1 year ago #

    If you want to narrow down the cases on which .format-icon applies, just declare them more specific. For example, if you only want them on homepage add body.home in front of .format-icon:

    body.home .format-icon { /*set of rules here*/ }

    WP applies classes to the body element and enables you to customize the look of about anything (pages, posts, search results, custom post types, categories, author pages, archives and more...).

  22. chappie
    Member
    Posted 1 year ago #

    Thanks acub but I fear this is a bit rich for me. In my custom CSS I have the following and when I try changing "#main-wrapper " to "body.home " it doesn't seem to differentiate between pages and posts so I haven't yet found a way to have my custom icon on all pages except my home page and my blog/post pages. Does my custom image code make it more complicated?

    #main-wrapper .format-icon {
    position: relative;
    padding-left: 50px;
    }
    #main-wrapper .format-icon:before {
    content: " ";
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    display: block;
    background-image: url("http://localhost:8888/sitename/wp-content/uploads/2013/11/bslogo40x40_on_grey.png");
    background-repeat:no-repeat;
    }
  23. acub
    Member
    Posted 1 year ago #

    The only problem I had was not understanding where you want the custom image and where not. If you say you want the icons on all pages except homepage and article pages, here's what you need to replace the above code with:

    body.page:not(.home) #main-wrapper .format-icon {
    position: relative;
    padding-left: 50px;
    }
    body.page:not(.home) #main-wrapper .format-icon:before {
    content: " ";
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    display: block;
    background-image: url("http://localhost:8888/sitename/wp-content/uploads/2013/11/bslogo40x40_on_grey.png");
    background-repeat:no-repeat;
    }
  24. chappie
    Member
    Posted 1 year ago #

    acub, you're a star. That hits it right on the head! It's _exactly_ what I wanted - and I think it looks great. Why am I the only person on this thread when it's such a spiffing mod? You have given me joy - and a decent night's sleep tonight.

    Thank you, thank you, thank you.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic