Three horizontal forums Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    Three horizontal forums

    Ramdaman
    Ramdaman
    Active Poster


    Male Posts : 1615
    Reputation : 99
    Language : English, Albanian, Macedonian, Russian | HTML, CSS
    Location : New York City

    Tutorial Three horizontal forums

    Post by Ramdaman Sat 3 Jan 2015 - 4:08

    Three Horizontal Forums
    In this tutorial, you'll be able to create 3 forums in one horizontal row. Each of these forums have the ability to have their own forum icon and description. You'll have to put your url, your icons, your forum description if you want to modify it to the fullest of capabilities.

    Three horizontal forums 09615110 Preview:
    Three horizontal forums Pppfl

    Installation:

    Go to your Administration Panel => General => Forums => Categories and forums => Choose the forum by clicking on Edit and put this code:
    Code:
    <span style="float: left; margin: 15px 0px 0px 20px; width: 75%;"><table align="center" width="95%"><tr><td rowspan="2" width="36px">

    <!-- Forum #1 Image -->
    <img src="https://icons.iconarchive.com/icons/designcontest/vintage/48/Sketch-Book-icon.png"></td><td align="left" width="28%">

    <!-- Forum #1 Link and Name -->
    <a href="FORUM-URL"><b>Forum 1</b></a>

    </td><td rowspan="2" width="36px">

    <!-- Forum #2 Link and Name -->
    <img src="https://icons.iconarchive.com/icons/custom-icon-design/mini-4/48/gift-icon.png"></td><td align="left" width="28%">
    <a href="FORUM-URL"><b>Forum 2</b></a></td>

    <td rowspan="2" width="36px">

    <!-- Forum #3 Link and Name -->
    <img src="https://icons.iconarchive.com/icons/mayosoft/azullustre/48/medal-icon.png"></td><td align="left" width="28%">
    <a href="FORUM-URL"><b>Forum 3</b></a></td></tr>

    <!-- Forum Descriptions -->
    <tr><td align="left">
    FORUM #1 DESCRIPTION</td>
    <td align="left">
    FORUM #2 DESCRIPTION</td><td align="left">
    FORUM #3 DESCRIPTION</td></tr></table></span>
    <div style="float: right; margin-right: 10px">

    <!-- Icon which appears at the right of the forums -->
    <img src="https://icons.iconarchive.com/icons/iconshock/super-vista-business/72/trophy-icon.png" border="0" alt="" /></div><span style="float: left; margin: 25px 0px 0px 10px; width: 75%;">

    <!-- Text under all three forums -->
    Text which will appear under the forums.</span>


    If you want to have only a description with an image to the right, use this code:
    Code:
    <div style="float: right; margin-right: 10px">

    <!-- Forum Image -->
    <img src="http://YOURIMAGE.png" border="0" alt="" />
    </div>

    <!-- Forum Description Text -->
    <span style="float: left; margin: 25px 0px 0px 10px; width: 75%;">
    This is the section where you will find the rules and regulations of the forum, the various FAQ, rules and regulations of the chatbox, and a guide on becoming the perfect user.</span>

    Three horizontal forums 09615110 Preview:
    Three horizontal forums Efmphv

    Elements to be modified: (First code)

    Under <!-- Forum # Image -->
    <img src= This is where you replace the existing image with the one you would like.

    Under <!-- Forum # Link and Name -->
    <a href="FORUM-URL"> Replace "FORUM-URL" with the URL of the forum.
    <b>Forum (#)</b> Replace "Forum (number)" with the name which you would like for the forum.

    Under <!-- Forum Descriptions -->
    <td align="left">FORUM # DESCRIPTION</td> Replace "FORUM (number) DESCRIPTION" with the description you'd like to have.

    Under <!-- Icon which appears at the right of the forums -->
    <img src= Replace the existing image with the image you'd like to have.

    Under <!-- Text under all three forums -->
    Text - Replace the text with whichever text you'd like to have under all three forums.

    Elements to be modified: (Second code)

    Under <!-- Forum Image -->
    <img src= Replace the existing image with one that you desire.
    Text - Replace the text to what ever you'd like.





    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15167
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    Tutorial Re: Three horizontal forums

    Post by skouliki Tue 11 Feb 2020 - 10:18

    This code was updated to fit in with the new HTTPS address

    updated 11.02.2020 by skouliki