I’m working on the redevelopment of my page Thoughtforce.org and I like that it says “latest posts” on top of the main content, and I’m trying to replicate it on WordPress twentysixteen theme. It appears as though they’ve added a tag to do this, but I’m not sure, and I’ve searched for hours. Here is what the tag looks like.

<div id="main" class="site-main boxed group">
<div id="primary" class="content-area boxed">
                    <h3 class="section-title"><span>Latest Posts</span></h3>


    <div id="content" class="site-content group one-column" role="main"                 

<article id="post-455" class="boxed post-455 post type-post status-publish format-standard has-post-thumbnail hentry category-sociology">
            <a href="http://www.thoughtforce.org/de-facto-vs-de-jure/" title="De Facto vs. De Jure (And Their Relationship to Segregation)" class="home-thumb boxed">
        <img width="435" height="247" src="http://www.thoughtforce.org/wp-content/uploads/2017/03/waiting-room-435x247.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> 

Also, I believe the solution is somehow tied to the ‘s identification with the class “section-title”. Here’s where I think that code matters.

 .section-title, #reply-title{
    font-family:'Raleway', Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#fff;
    font-weight:bold;
    background-color:#dc2834;
    margin-left:-35px;
    padding-left:35px;
    padding:2px 0 1px 35px;
    margin-bottom:30px;
    position:relative;
}
    .section-title a{
    color:#fff;
}
    .section-title:before, #reply-title:before{
    content:"";
    display:block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #000;
    position:absolute;
    left:0;
    bottom:-5px;
}
    .section-title:after, #reply-title:after{
    content:"";
    position:absolute;
    display:block;
    width:5px;
    height:5px;
    background:#dc2834;
    bottom:0;
    left:0;
    z-index:1;

Lastly, the code for twentysixteen in that area looks like this:

    <div id="content" class="site-content">

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">




<article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
    <header class="entry-header">

And I’ve added the box. This was the code:

 #main {
    padding:30px;
    margin-left:0;
    margin-right:0;
    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .2);

}

Read more here: How to add a section title to boxed content on WordPress homepage


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: