How can I add an image to a forum description?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • twobob
    Member
    • Apr 2006
    • 54

    How can I add an image to a forum description?

    Hi Guys

    While there are one or two category (forum) mods out there, I couldn't find anything that would let me insert a specific image for a specific forum category.

    Check out ... http://www.patientenfragen.net/ .... see how they've got different images to the right of the forum descriptions (just to the left of the Last Post column) .... I'd really like to be able to do this on my forum.

    I'd be grateful for anyone's help!

    Many thanks ... twobob
    Last edited by twobob; Sat 27 Jan '07, 2:51pm.
  • vivamexico55
    Senior Member
    • Mar 2005
    • 1018
    • 3.0.7

    #2
    Wow, I'd be interested in that too, it looks kinda cool.

    Comment

    • akulion
      Member
      • Jan 2007
      • 37

      #3
      That looks awesome! Anyone have an answer yet?
      If so please do share
      aku

      Comment

      • Floris
        Senior Member
        • Dec 2001
        • 37767

        #4
        They probably took the original code from the template and put it in 2 divs, one aligning to the right.

        Comment

        • PayBas
          New Member
          • Dec 2006
          • 21

          #5
          The easiest way is to add the following code to the desired place in the following templates:
          forumhome_forumbit_level1_nopost
          forumhome_forumbit_level1_post
          forumhome_forumbit_level2_nopost
          forumhome_forumbit_level2_post

          Code:
          <img src="images/special_forumbullets/$forum[forumid].gif" alt="" border="0" />
          Now all you need to do is create a folder named special_forumbullets in your images directory, and then place the images you want there and rename them all to match the forumid's.

          So if you have a forumsection with ID 8, it will load "images/special_forumbullets/8.gif"

          Good luck.

          Comment

          • akulion
            Member
            • Jan 2007
            • 37

            #6
            Aha..even though Im a newbie but I totally understood that

            Thanks for the detailed explanation

            Comment

            • M.Scheel
              Senior Member
              • Sep 2001
              • 482
              • 5.7.0

              #7
              That is how I did it.

              In " forumhome_forumbit_level2_post"

              search:
              Code:
              <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
              replace with
              Code:
              <if condition="$show['forumdescription']">
                       <div class="smallfont">
                        <img src="./images/statusicon/$forumid.png" alt="" class="sectionImages" />
                        $forum[description]
                       </div>
                      </if>
              in your style settings add the following to "additional css":
              Code:
              /* Bilder der Foren auf der Index */
              .sectionImages {
              float: right; 
              margin-right: 4px; 
              margin-top: 2px; 
              }
              Name your images ForumID.png and upload them into /images/statusicon/

              That's it
              Michael Scheel
              Facharzt für Kinder- und Jugendmedizin

              Web: www.Kinderarzt-Cuxland.de
              Facebook: Kinderarzt.Cuxland
              Instagram: Kinderarzt.Cuxland

              Comment

              • twobob
                Member
                • Apr 2006
                • 54

                #8
                Hurrah - I've done it! That was really pretty easy ... thank you StarBug and PayBas!

                Based on your posts, I've put the following together so other relative newbies like myself can follow along ....

                1) Admin Control Panel > Styles & Templates > Search in Templates .... drop the following code into the Search for Text box:

                Code:
                 <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
                Click Find

                2) Four Templates should appear in your search results:

                forumhome_forumbit_level1_nopost
                forumhome_forumbit_level1_post
                forumhome_forumbit_level2_nopost
                forumhome_forumbit_level2_post

                Double-click on the last one (forumhome_forumbit_level2_post). This will open up a Customize Template screen.

                3) Next to the Search in Template box near the bottom, click Find. The code from step 1 above will then be highlighted. If it's not, then copy the code from above into the Search In Template box.

                4) REPLACE the highlighted code with

                Code:
                <!-- special forums icon code - code deleted: starts -->
                <!-- <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if> -->
                <!-- special forums icon code - code deleted: ends -->
                <!-- special forums icon code - new code inserted: starts -->
                <if condition="$show['forumdescription']">
                         <div class="smallfont">
                          <img src="./images/statusicon/special_forum_icons/$forumid.gif" alt="" class="sectionImages" />
                          $forum[description]
                         </div>
                         </if>
                <!-- special forums icon code - new code inserted: ends -->
                and click Save (down the bottom). After clicking Save, you will be taken back to the Style Manager search results. If you want to, you can now change the other three templates (not always necessary, depending on how often you want the icons to appear).

                (If you want to reverse / revert this change, go to ACP > Styles & Templates > Style Manager, click on the expand button [<< >>] to the right of the Go button ... in the Controls box on the right click on the expand button [<< >>] to the left of "All Template Groups", and then scroll down to "Footer" and you should see the file you altered in red. Click on it and the Controls box to the right will expand, then click the Revert button. This will change the template back to its original code - helpful for newbies like me that want to start over again!)

                5) ACP > Styles & Templates > Style Manager ... then click "Go" next to All Style Options at the right of the page.

                Scroll down to Additional CSS Definitions (very near the bottom of the page), and in the second box paste in this:

                Code:
                /* ***** special forums icon code - additional css definitions ***** */
                .sectionImages {
                float: right; 
                margin-right: 4px; 
                margin-top: 2px; 
                }
                and click the Save button at the bottom of the page.

                6) Create a folder on your hard drive called special_forum_icons and save all your special forum icons into this folder. Makes sure all the images are saved using the same extension (I saved mine as gif - if you want to use a different extension, be sure to change the code in step 4 above to $forumid.jpg or $forumid.png etc).

                You will then need to rename the images to correspond with the specific forum id. For example, you'd need to name an image "8" to appear for forum 8 (ie the image file would be 8.gif). Make sure that the files are saved in lower case gif instead of upper case GIF, otherwise it won't work.

                To find out what forum id has been given to different forums, go to:

                ACP > Forums & Moderators > Forum Manager and click on a forum name. This will take you to the forum settings page for that forum. At the top, in the title, you will see a forum id number that has been allocated to that specific forum. That's the number you need to know to match up your images with your forums.

                7) Upload the folder to /images/statusicon. You should then have your forum icons in here: /images/statusicon/special_forum_icons/8.gif

                Hopefully that will work for you!

                This is my first attempt at setting out instructions on how to do a mod (it'll help me down the track), so please use at your own risk! I can't support this thread as I really AM a newbie! Thanks again to StarBug and PayBas for their very helpful codes!

                Cheers and beers ... twobob
                Last edited by twobob; Sun 28 Jan '07, 5:26pm. Reason: Correct typos

                Comment

                • jessej
                  Member
                  • Feb 2006
                  • 84

                  #9
                  welp it took a few hours for me to do this. I added this for doing the same thing as mentioned above, but I made it a live link, and ites workin great. thanks for the idea, and the sample to get me rollin.

                  Code:
                   
                  <!-- --- S T A R T  O F  Forum Title ICONs Mod - code: STARTS --- -->
                  <!-- <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if> -->
                  <!-- special forums icon code - code deleted: ends -->
                  <!-- special forums icon code - new code inserted: starts -->
                  <if condition="$show['forumdescription']">
                           <div class="smallfont">
                  <!-- ============================================================= -->
                  <!-- Change ForumID Parm Below ~ 1st Forum = forumId 1, 2nd Forum = 2 -->
                  <if condition="$forum[forumid] == 2">
                  <!-- ============================================================= -->
                  <!-- ============================================================= -->
                  <!-- Change gif FileName Below~1st Forum = FileName 1.gif, 2.gif -->
                  <a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">
                            <img src="../testzone53/images/forum_header_icons/2.gif" alt="Click to Enter" class="sectionImages" border=0 />
                  </a>
                  </if>
                  <!-- ============================================================= -->
                            $forum[description]
                           </div>
                           </if>
                  <!-- ----- E N D  O F  Forum Title ICONs Mod - code: ENDS ----- -->

                  Comment

                  widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                  Working...