Add information panel

Hello guys,

Today I will show you how to create information panel on your forum. It works on all forum versions: AwesomeBB, ModernBB, PunBB, Invision, phpBB3, phpBB2. 

Go to: CP > Display > Templates > index_body and find "CHATBOX_TOP" and add this code bellow it:

 <div id="information-panel">
        <div  id="ip1">
            <img src="https://i.ibb.co/S6ZnLPr/1111.jpg" alt="">
            <p><a href="#">Read more</a></p>
        </div>
        <div  id="ip2">
            <img src="https://i.ibb.co/S6ZnLPr/1111.jpg" alt="">
            <p><a href="#">Read more</a></p>
        </div>
        <div  id="ip3">
            <img src="https://i.ibb.co/S6ZnLPr/1111.jpg" alt="">
            <p><a href="#">Read more</a></p>
        </div>
        <div  id="ip4">
            <img src="https://i.ibb.co/S6ZnLPr/1111.jpg" alt="">
            <p><a href="#">Read more</a></p>
        </div>
    </div>

After this, go to CP > Display > Colors & CSS > CSS Stylesheet and paste this:

#information-panel {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding: 0;
    background-color: #F5F3F4;
    border:3px solid #fff;
    outline: 1px solid rgba(0,0,0,0.1);
  margin-bottom:10px;
}
.ip {
    width: 256px;
    margin: 10px;
    font-weight: normal;
    text-align: center;
    border:3px solid #fff;
    outline: 1px solid rgba(0,0,0,0.1);
    font-family: Open Sans,Arial,sans-serif;
}
.ip img {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.ip p {
    background-color: #fff;
    padding:20px;
    margin: 0;
}
.ip a { 
    color: #2f3237;
}

Image dimensions are:
Width:200px
Height: 300px

If you want to change an image, they all have unique ID (ip1, ip2, ip3, ip4). Depending on witch image you wish to change, you use different ID. For example, if you wish to change first image, you add in CSS:

#ip1 {
    content: url("SOME URL HERE");
}

Quite simple, right? 

NOTE: URL for "Read more" must be changed inside template itself. 

Final result: 

Cheers :)