1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Add an image to node titles on the forum home page

Smexy!

  1. Brogan

    Brogan XenForo Moderator Staff Member

    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...
     
    Mermaid likes this.
  2. Mutt

    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

    Brogan XenForo Moderator Staff Member

    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

    Brogan XenForo Moderator Staff Member

    Mutt likes this.
  5. Precision

    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

    Brogan XenForo Moderator Staff Member

    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

    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

    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

    Brogan XenForo Moderator Staff Member

    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

    Morgain Well-Known Member

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

    jackrouse Member

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

    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

    Brogan XenForo Moderator Staff Member

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

    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

    Brogan XenForo Moderator Staff Member

  16. jackrouse

    jackrouse Member

  17. Brogan

    Brogan XenForo Moderator Staff Member

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

    jackrouse Member

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

    Brogan XenForo Moderator Staff Member

  20. jackrouse

    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