Widget: Recent topics of a specific sub-forum Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return 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.
The forum of the forums
2 posters

    Widget: Recent topics of a specific sub-forum

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

    Tutorial Widget: Recent topics of a specific sub-forum

    Post by Ange Tuteur December 17th 2013, 11:15 am

    Widget: Recent topics of a specific sub-forum


    This tutorial will allow you to create a widget that will display recent topics of a specific sub-forum.

    Here is an example that will be more meaningful Smile

    I want to make a widget which displays all of the recent topics in my sub forum "The health of your cat"

    Widget: Recent topics of a specific sub-forum Tuto19

    1 - Create a Widget and add the following content

    Administration Panel > Modules > Portal & Widgets > Forum widgets management > Create a widget

    Code:
    <div id="newsareal1" class="newsareal"> </div>

    Example :
    Widget: Recent topics of a specific sub-forum Tuto210

    Save your widget and put it in your column.

    2 - Create a new Javascript and add the following code depending on the version of your forum

    Administration Panel > Modules > HTML & JAVASCRIPT > Javascript codes management > create a new script

    PhpBB2 :
    Code:
    jQuery(document).ready(function(){
    jQuery("#newsareal1").load("/f1-the-health-of-your-cat div.topictitle:lt(11)");
    });

    PhpBB3 :
    Code:
    jQuery(document).ready(function(){
    jQuery("#newsareal1").load("/f1-the-health-of-your-cat div.topic-title-container:lt(11)");
    });

    PunnBB & Invision :
    Code:
    jQuery(document).ready(function(){
    jQuery("#newsareal1").load("/f1-the-health-of-your-cat a.topictitle:lt(11)");
    });

    Example :
    Widget: Recent topics of a specific sub-forum Tuto311

    Remember to place your Javascript "in all the pages".

    It will also be good to check that the areas highlighted in the example correspond to your forum.

    "newsreal1" must appear in your widget.

    Replace "f1-the-health-of-your-cat" with what is in the url of your sub forum.

    Widget: Recent topics of a specific sub-forum Tuto410

    If you wish to change the amount of recent topics that display, just change the 11 in your Javascript.

    Widget: Recent topics of a specific sub-forum Tuto510

    When finished save your Javascript.

    3 - Add the following CSS code which corresponds to the version of your forum

    Administration panel > Display > Pictures and colors > Colors > CSS stylesheet

    PhpBB2 :
    Code:
    .newsareal div.topictitle {
    display: block !important;
    margin: 2px 1px 0;
    padding: 2px 5px 5px 30px;
    border: 1px solid #B1BFC0;
    border-radius: 5px;
    background: #F3F9F9 url('https://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
    }
    .newsareal div.topictitle:hover {
    background-color: #D8DEDE;
    }
    .newsareal div.topictitle a {
    color: #708090 !important;
    text-decoration: none !important;
    text-shadow: #fff 1px 1px 0px
    }

    PhpBB3 :
    Code:
    .newsareal div.topic-title-container {
    display: block !important;
    margin: 2px 1px 0;
    padding: 2px 5px 5px 30px;
    border: 1px solid #B1BFC0;
    border-radius: 5px;
    background: #F3F9F9 url('https://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
    }
    .newsareal div.topic-title-container:hover {
    background-color: #D8DEDE;
    }
    .newsareal div.topic-title-container a {
    color: #708090 !important;
    text-decoration: none !important;
    text-shadow: #fff 1px 1px 0px
    }

    PunBB & Invision :
    Code:
    .newsareal a.topictitle {
    display: block !important;
    margin: 2px 1px 0;
    padding: 2px 5px 5px 30px;
    border: 1px solid #B1BFC0;
    border-radius: 5px;
    background: #F3F9F9 url('https://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
    text-decoration: none !important;
    }
    .newsareal a.topictitle:hover {
    background-color: #D8DEDE;
    color: #708090 !important;
    text-shadow: #fff 1px 1px 0px
    }

    Example :
    Widget: Recent topics of a specific sub-forum Tuto610

    Then just save your CSS and you're done ! :wouhou:

    This tutorial is based on the one by Dana Domirani and Zen.
    It has been translated to English by Ange Tuteur.

    No possible reproduction without our agreement, pursuant to article L122-1 of the intellectual property code.

    TonnyKamper likes this post

    • Back to top
    skouliki
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15167
    Reputation : 1696
    Language : English,Greek
    Location : Greece
    • Post n°2

    Tutorial Re: Widget: Recent topics of a specific sub-forum

    Post by skouliki February 11th 2020, 6:16 pm

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

    updated 11.02.2020 by skouliki

    TonnyKamper likes this post

    • Back to top