Untuk membuat tampilan Editorial Board dalam video diatas kita memerlukan 2 buah file yang pertama adalah HTML kode yang akan kita pastekan di halaman setting jurnal OJS, yang kedua adalah code CSS yang harus kita tambahkan untuk untuk memformat style kode html supaya tampilannya seperti pada video diatas.

Kode HTML 

<div id="groups">
    <div class="group">
        <h4 style="font-size: 22px; border-bottom: 1px solid #E7E7E7; padding: 5px 0px;">Editor in Chief</h4>
        <div class="editorial-list">
            <ul class="list-unstyled">
                <li>
                    <div class="img-profile">
                        <div class="imgthumb"><img src="/public/site/images/admin/Rahadian_Zainul.jpg"
                                alt="Profile Image" width="123" height="150" /></div>
                    </div>
                    <div class="team-content"><strong> <img class="ico-label"
                                src="/public/site/images/admin/author1.png" />Dr. Rahadian Zainul, M.Si </strong>
                        <div class="team-aff">
                            <ul class="list-unstyled">
                                <li><img class="ico-label" src="/public/site/images/admin/scopus1.jpg" />Scopus ID : <a
                                        title="Scopus ID"
                                        href="https://www.scopus.com/authid/detail.uri?authorId=56737195700"
                                        target="_blank" rel="noopener" data-toggle="tooltip">56737195700</a></li>
                                <li><img class="ico-label" src="/public/site/images/admin/orcid1.jpg" /><a title="ORCID"
                                        href="https://orcid.org/0000-0002-3740-3597" target="_blank" rel="noopener"
                                        data-toggle="tooltip">https://orcid.org/0000-0002-3740-3597</a></li>
                                <li><img class="ico-label" src="/public/site/images/admin/institusi.jpg" /> Universitas
                                    Negeri Padang,Indonesia</li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="group">
        <h4 style="font-size: 22px; border-bottom: 1px solid #E7E7E7; padding: 5px 0px;">Journal Manager</h4>
        <div class="editorial-list">
            <ul class="list-unstyled">
                <li>
                    <div class="img-profile">
                        <div class="imgthumb"><img src="/public/site/images/admin/ade.jpg" alt="Profile Image"
                                width="123" height="150" /></div>
                    </div>
                    <div class="team-content"><strong> <img class="ico-label"
                                src="/public/site/images/admin/author1.png" />Ade Cahya, S.Kom</strong>
                        <div class="team-aff">
                            <ul class="list-unstyled">
                                <li><img class="ico-label" src="/public/site/images/admin/scopus1.jpg" />Scopus ID : <a
                                        title="Scopus ID">-</a></li>
                                <li><img class="ico-label" src="/public/site/images/admin/orcid1.jpg" /><a title="ORCID"
                                        href="https://orcid.org/0000-0002-0141-3267" target="_blank" rel="noopener"
                                        data-toggle="tooltip">https://orcid.org/0000-0002-0141-3267</a></li>
                                <li><img class="ico-label" src="/public/site/images/admin/institusi.jpg" /> Universitas
                                    Negeri Padang,Indonesia</li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Kode CSS

Untuk mempercantik tampilan editorial boar perlu dibuat kode CSS yang bisa ditambahkan dengan kode css yang telah ada pada jurnal OJS kita. caranya buka file css jurnal di menu setting/website klik nama css yang ada untuk melihat kode css yang telah ada klik save page as untuk meyimpan kode css. kemudian edit kembali file tadi dan tambahkan kode berikut di bawah baris terakhir file css tadi.

.editorial-list{
    position: relative; 
}
.editorial-list li{
    margin-bottom: 1.125rem;
}
.editorial-list .img-profile{
    position: absolute;
    width: 95px;
    height: 105px;
    border: 1px solid #ddd;
    padding: .5rem;
}
.editorial-list .img-profile .imgthumb{ 
    width: 80px;
    height: 90px;
    overflow: hidden;
    margin: 0 auto; 
	object-fit: fill;
}
.editorial-list .img-profile img{
    width: 100%;
	height:100%;
}
.team-content{
    margin-left: 100px;
    min-height: 130px;
}
.team-content .ico-label{
    width: 18px;
    height: 18px;
    margin-right: .5rem;
}	
.team-aff ul li{
    margin-bottom: 0;
}
.team-aff ul li .tm_label{
    display: inline-block;
    width: 80px;
}

.team-aff ul li .ico-label{
    width: 18px;
    height: 18px;
    margin-right: .5rem;
}