1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. In order to post messages and view attached files in this forum, you must be a licensed XenForo customer.
    If you can't post, enter your forum username in the Associated Forum Users form in your customer area.
Brogan

Add an image to node titles on the forum home page

Smexy!

  1. Brogan XenForo Moderator

    Brogan submitted a new resource:

    Add an image to node titles on the forum home page (version 1.0) - Smexy!

    Read more about this resource...
  2. Mutt Well-Known Member

    could a version of this be used to add images in other locations like the tabs across the top of the page?
  3. Brogan XenForo Moderator

    I can get the image to display for each tab individually, but it pushes the text down.
    Still trying to resolve it.

    This for example is the class for the Forums tab .navTabs .publicTabs .navTab.forums:before

    Annoyingly it works fine using after.
  4. Brogan XenForo Moderator

    Mutt likes this.
  5. Precision Member

    I followed the tutorial, and it didn't seem to work for me. I added a pic called 'turntable.png' to my path at "/images/node-pics/turntable.png", applied the code, changed the ID of the forum to the one specified, and it didn't change anything :(. Here's the code I entered in Extra.css:

    .nodeList .node_102 .nodeTitle:before {
    content: url('@images/node-pic/turntable.png');
    display: inline;
    vertical-align: middle;
    padding-right: 4px;
    }

    When I hover over the "Music" section of my forums it says www.worldofdiscussions.com/forums/music.102/ .

    What did I do wrong :p?
  6. Brogan XenForo Moderator

    I just inspected the code on your site and I don't see the CSS.
    Either you didn't apply it properly or it's to do with your custom style.
  7. Precision Member

    Yeah sorry, I accidentally deleted it, when I realized it didn't work. I'll put it back in Extra.css , is the code right though?
  8. Morgain Well-Known Member

    Brogan I don't understand what this does. In the scr you give everything looks normal to me.
    There's no image on the category bar, and a category is a node.
    The forum icons are normal - green for new content grey for nothing new?
    The only item that seems different is one forum at the top has a black icon. Is that it? If so wouldn't that be about the sprite?
    The other thing is the small picture showing on Teams and Drivers ... that's it?

    Also out of curiosity why is a London lad like you displaying y Ddraig Goch as your avatar?
  9. Brogan XenForo Moderator

    That's it.
    It allows you to set an individual graphic per node, in addition to the read and unread icons.

    I'm not a Londoner ;)
  10. Morgain Well-Known Member

    I know you said that before once but I didn't think you were Welsh?
  11. jackrouse Member

    How do I find the node ID, and is it possible to add the image AFTER the description ?
  12. bambua Well-Known Member

    You can find the id by hovering over the node in the acp under display node tree. In the link for that there will be a number. That is the node id.
  13. Brogan XenForo Moderator

    Try: .nodeList .node_32 .nodeTitle:after
  14. jackrouse Member

    Thanks for all the help so far, I've got this far, but no image displays using "before" or "after"

    .nodeList .node_4 .nodeTitle:after {
    content: url('@imagepath/images/node-pic/soccer-referee-icon.png');
    display: inline;
    vertical-align: middle;
    padding-right: 4px;
    }
  15. Brogan XenForo Moderator

  16. jackrouse Member

  17. Brogan XenForo Moderator

    The image path is incorrect, it's showing as a broken image.
  18. jackrouse Member

    If the image is in a sub folder of my images folder, what should the image path be ?
  19. Brogan XenForo Moderator

  20. jackrouse Member

    I'm having a real problem with this, I've tried adding the lines of code to the EXTRA.css file for the default, Aurora and the child theme, none of which have worked.

Share This Page