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

XF 1.3 Images in front of Nodes

Discussion in 'Styling and Customization Questions' started by Blue chummer, Apr 7, 2014.

  1. Blue chummer

    Blue chummer Active Member

    Hi , Lets say I have a Forum Topic:

    Shimano Reels

    How do I put the "Shimano logo" in front of that forum topic?

  2. Tracy Perry

    Tracy Perry Well-Known Member

    Example of code is here.
  3. Blue chummer

    Blue chummer Active Member

  4. Tracy Perry

    Tracy Perry Well-Known Member

    It's done via the EXTRA.css template. Also, I would recommend redoing the images as actual png's and then make a directory under your root called images and then in there place one called nodes, resulting in /images/nodes to keep them in. It makes it easier to separate them out from other images. Eventually you will want to place them all into a sprite sheet and use that (that's where the background-position: 0px 0px comes in. You would replace the zero's with the sprite image location for that image you want to use.
  5. Blue chummer

    Blue chummer Active Member

    thanks Tracy, I should of started this thread saying "Newbie" But I figured what the hell :)

    I am very new to xen foro. Less than a week. But am on a quick steep learning curve.

    - I know where the extra.css files are- so that s good
    -I know how to convert the images to png's- that's easy
    -making the directory under root - which root , there are a lot of them.?
    -Sprite sheet- never heard of this, I have heard of the Drink. I will research it- I understand the principle. It will make it easier in the future. I am going to have probably over 200 separate images needed in front of the brand names. Was figuring I could do this quick but now -maybe not so quick as I thought.

    thanks for the heads up. Looks like this endeavor is going to make me somewhat of a programmer.
  6. Tracy Perry

    Tracy Perry Well-Known Member

    This will depend on whether you are on a shared hosting account or VPS/dedicated server... and then to add on top of that what HTTP server you use.
    For me my old root for my Linux site was in /var/www/servinglinux but now it's the OpenLiteSpeed structure in another area.
    If you are on a shared hosting, it's normally under the /public_html location
    All a sprite sheet is in a nutshell is one large image with other images placed in it at known positions (like 154px 35px) that you can reference via CSS. There are some online utilities that you can use to upload all your images to and it will compile them into a singular sprite sheet and then provide you with the positions of the images in it. http://spritegen.website-performance.org/ is one I use often - you just need to adjust the offsets so they are a little closer together. You archive all your images into a ZIP archive and upload it and then it does the rest and then gives you another file to download.
    The benefit of spritesheets is for speed basically. Instead of making 200 http requests it only makes one for the main sprite sheet. You will find that pagespeed recommends it when you have lots of icons like that.
  7. Blue chummer

    Blue chummer Active Member

    thank you Tracy that helps. I don't have the hosting yet. I am developing the site on my computer using Xaamp .

    Great info on the Sprite sheets. I think that is way I will be heading with this. Don't want to have to do 200 plus separate http requests. thanks

Share This Page