New posts

Is there a way we can use HTML or anything else to redirect a button to only new posts of a certain category?

Code:

<a href="/search?search_id=newposts">View New Content</a>

Create a html page with the following code in HTML pages management

Code:

<style>

  .ptp img, .ptrss img {
    width: 350px;
    height: auto;
}
 
p.ptp i-frame {
    height: 140px;
    width: 328px;
}
.pttime {
    color: #555;
    font-size: 0.8em;
    margin-top: 3px;
}
.pttime  span {
    background: #036 none repeat scroll 0 0;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    margin: 3px;
    padding: 3px;
}
.pttime  a {
    background-color: #0076c4;
    border-radius: 3px;
    color: #fff !important;
    float: right;
    font-weight: bold;
    margin: 2px;
    padding: 3px;
}
.pttime  a:hover {
    background-color: red;
}
.ptper {
    background: #FFF none repeat scroll 0 0;
    border: 1px solid #07F;
    display: inline-block;
    height: 230px;
    margin: 5px;
    width: 340px;
    box-shadow: 0px 0px 6px 0px #2196f3;
    border: solid #000 0px;
}
.ptinfo {
    margin: 5px 3px;
}

p.ptp {
    color: #555;
    font-size: 11px;
    height: 130px;
    line-height: 1.2;
    margin-bottom: 5px;
    overflow: hidden;
    padding-block-end: 5px;

}
.pttitle {
    line-height: 1.2;
}
.pttitle h2 {
    background-color: #07F;
    color: #fff;
    display: block;
    font-size: 14px;
    overflow: hidden;
    padding: 3px 0 3px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 99%;
}
.pttitle h2::before {
    content: " ";
        color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: FontAwesome;

}
</style>  <script>
//<![CDATA[
$(function() {
  $.get("/feed/").done(function(a) {
    a = $(a);
    for (pt = 0; pt < a.find("item").length; pt++) {
      var b = a.find("item:eq(" + pt + ") guid").text(),
        c = a.find("item:eq(" + pt + ") title").text(),
        d = a.find("item:eq(" + pt + ") description").text(),
        e = a.find("item:eq(" + pt + ") category").text(),
        f = a.find("item:eq(" + pt + ") pubDate").text();
  $(".ptrss").append('<div class="ptper" id="id' + pt + '"><a href="' + b + '" title="' + c + '"><div class="pttitle"><h2 class="post-title">' + c + '</h2></div></a><div class="ptinfo"><p class="ptp">' +
d + '</p><p class="pttime"><a href="' + b + '" title="' + c + '"> Read More →</a><span><i class="fa fa-folder-open"></i><strong>' + e + "</strong></span></p></div></div>");
}
  })
}); //]]>
</script>
<div class="ptrss">
</div>

Example page:
https://www.eegarai.net/h19-feed

Does this work for any version? Phpbb3 or punBB best prefrences.


Edit:: BTW your code does nothing for either mentioned version.

Sir Chivas wrote:Does this work for any version? Phpbb3 or punBB best prefrences.


Edit:: BTW your code does nothing for either mentioned version.

Coucou,

Can you try this code?

CSS stylesheet

Code:

<style>
    .ptp img, .ptrss img {
        width: 350px;
        height: 150px;
    }

    p.ptp i-frame {
        height: 140px;
        width: 328px;
    }

    .pttime {
        color: #555;
        font-size: 0.8em;
        margin-top: 3px;
    }

    .pttime span {
        background: #f1f1f1 none repeat scroll 0 0;
        border-radius: 3px;
        color: #555;
        display: inline-block;
        margin: 3px;
        padding: 3px;
    }

    .pttime a {
        background-color: #0076c4;
        border-radius: 3px;
        color: #fff !important;
        float: right;
        font-weight: bold;
        margin: 2px;
        padding: 3px;
    }

    .pttime a:hover {
        background-color: #333;
    }

    .ptper {
        background: #fff none repeat scroll 0 0;
        border: 1px solid #ddd;
        display: inline-block;
        height: 230px;
        margin: 5px;
        width: 340px;
    }

    .ptinfo {
        margin: 5px 3px;
    }

    p.ptp {
        color: #555;
        font-size: 14px;
        height: 130px;
        line-height: 1.2;
        margin-bottom: 5px;
        overflow: hidden;
        padding-block-end: 5px; }

    .pttitle {
        line-height: 1.2;
    }

    .pttitle h2 {
        background-color: #e5e5e5;
        color: #333;
        display: block;
        font-size: 18px;
        overflow: hidden;
        padding: 3px 0 3px 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 99%;
    }
</style>
<script>
    //<![CDATA[
    $(function() {
        $.get("/feed/").done(function(a) {
            a = $(a);
            for (pt = 0; pt < a.find("item").length; pt++) {
                var b = a.find("item:eq(" + pt + ") guid").text()
                  , c = a.find("item:eq(" + pt + ") title").text()
                  , d = a.find("item:eq(" + pt + ") description").text()
                  , e = a.find("item:eq(" + pt + ") category").text()
                  , f = a.find("item:eq(" + pt + ") pubDate").text();
                $(".ptrss").append('<div class="ptper" id="id' + pt + '"><a href="' + b + '" title="' + c + '"><div class="pttitle"><h2 class="post-title">' + c + '</h2></div></a><div class="ptinfo"><p class="ptp">' + d + '</p><p class="pttime"><a href="' + b + '" title="' + c + '"> Διαβάστε ολόκληρο το άρθρο →</a><span><i class="fa fa-folder-open"></i><strong>' + e + '</strong></span><span><i class="fa fa-clock-o"></i> ' + f + "</span></p></div></div>");
            }
        })
    });
    //]]>
</script>

For the content itself, you need to create an HTML page with your stuff... and include that css above up ^ also...

An example page: https://www.thegreeksenergy.com/h2-page

Best regards.

We can mark this as solved, Yoshi.