Page 1 of 1
Tutorial Custom CSS dan Footer OJS 3.0
Posted: 07 Mar 2017, 08:14
by acahya
Assalamualaykum
Kali ini saya bagikan sedikti tentang OJS 3 yaitu membuat agar Abstrak yang muncul pada artikel yang sudah terbit agar rata kanan jadi kelihatan sedikti rapi, dan mengatur ulang tampilan logo footer pkp menjadi sebelah kanan dan content footer ada dikiri, karena jika tidak kita atur maka yang terjadi adalah content footer diatas dan pkp logo product ada dibawh jadikurang rapi.
jadi pada tutorial ini lengkapnya ada di channel youtube saya hehe monggo
https://youtu.be/Sr9vkiovkBs
berikut adalah sample css yang saya gunakan:
Code: Select all
.pkp_structure_head {
background: #595959;
}
body {
font-family: tahoma,geneva,sans-serif;
}
.obj_article_details .abstract {
text-align: justify;
}
.pkp_footer_content {
float: left;
width: 50%; padding-top: 10px;
padding-bottom:10px;
}
.pkp_brand_footer {
float: right;
width: 30%;
padding-bottom:10px;
padding-top: 50px;
}
.pkp_structure_footer_wrapper {
background: #e8ebef;
border-bottom:@double solid;
border-bottom-color:#595959;
}
.pkp_site_name .is_img img {
display: inline-block;
max-height: 100px;
max-width: 100%;
width: auto;
height: auto;
}
Terimakasih semoga bermanfaat, Wassalam
Re: Tutorial Custom CSS dan Footer OJS 3.0
Posted: 07 Mar 2017, 08:59
by adminrji
acahya wrote:Assalamualaykum
Kali ini saya bagikan sedikti tentang OJS 3 yaitu membuat agar Abstrak yang muncul pada artikel yang sudah terbit agar rata kanan jadi kelihatan sedikti rapi, dan mengatur ulang tampilan logo footer pkp menjadi sebelah kanan dan content footer ada dikiri, karena jika tidak kita atur maka yang terjadi adalah content footer diatas dan pkp logo product ada dibawh jadikurang rapi.
jadi pada tutorial ini lengkapnya ada di channel youtube saya hehe monggo
https://youtu.be/Sr9vkiovkBs
berikut adalah sample css yang saya gunakan:
Code: Select all
.pkp_structure_head {
background: #595959;
}
body {
font-family: tahoma,geneva,sans-serif;
}
.obj_article_details .abstract {
text-align: justify;
}
.pkp_footer_content {
float: left;
width: 50%; padding-top: 10px;
padding-bottom:10px;
}
.pkp_brand_footer {
float: right;
width: 30%;
padding-bottom:10px;
padding-top: 50px;
}
.pkp_structure_footer_wrapper {
background: #e8ebef;
border-bottom:@double solid;
border-bottom-color:#595959;
}
.pkp_site_name .is_img img {
display: inline-block;
max-height: 100px;
max-width: 100%;
width: auto;
height: auto;
}
Terimakasih semoga bermanfaat, Wassalam
Terima kasih ilmunya mas, btw codenya yg diatas.. disematkan di file apa ya? tks
Re: Tutorial Custom CSS dan Footer OJS 3.0
Posted: 07 Mar 2017, 14:35
by acahya
Aih saya lupa masukin kalau caranya ada diyoutube saya tadi.
Nah file css tadi simpan dengan nama xxx.css sesuaikan aja, terus login ke dashboard setting website/appearance pilih browse pada bagian journal style sheet.
simpan lihat perubahan.
Re: Tutorial Custom CSS dan Footer OJS 3.0
Posted: 27 Dec 2017, 15:13
by thohafirdaus
terimakasih,, ijin yaa,, saya terapkan di ojs kami
Re: Tutorial Custom CSS dan Footer OJS 3.0
Posted: 03 Feb 2018, 15:39
by estesa
acahya wrote:Aih saya lupa masukin kalau caranya ada diyoutube saya tadi.
Nah file css tadi simpan dengan nama xxx.css sesuaikan aja, terus login ke dashboard setting website/appearance pilih browse pada bagian journal style sheet.
simpan lihat perubahan.
Sy coba ko masih belum berhasil ya..kira-kira masalahnya dimana?
Re: Tutorial Custom CSS dan Footer OJS 3.0
Posted: 12 Mar 2019, 18:04
by vertykey
Salam kenal Semua
Kepada Yth Teman-teman forum ada yang bisa bantu bikin footer seperti yang pada Jurnal berikut ga:
http://journal.staincurup.ac.id/index.php/alfalah
Saya mau terapin ke Jurnal OJS 3 Kami
http://ejournal.stebisigm.ac.id/index.php/isbank
Trims semoga teman-teman bisa berbagi ilmu.

Re: Tutorial Custom CSS dan Footer OJS 3.0
Posted: 26 Jul 2019, 08:56
by mrcuniko
pakai tema oldgregg
kemudian edit file /plugins/themes/oldGregg/templates/frontend/components/footer.tpl
Re: Tutorial Custom CSS dan Footer OJS 3.0
Posted: 02 Jun 2020, 21:17
by faujinurdin
Mantap .. Terima Kasih Ilmu nya :
saya coba kombinasikan file css nya dengan membuat Menu Navigasi dan hasilnya bagus
(Buka Note pad / Sublimetext paste kan kode di bawah save dengan nama Contoh : NAVFOOT.css)
Berikut Koding nya :
_______________________________________________________________
.vertical-menu {
width: 100%; /* lebar dari menu, saran saya tidak perlu di ubah */
}
.vertical-menu a {
background-color: #d9ffe9; /* Warna pada bagian body menu */
color: black; /* Warna tulisan */
display: block;
padding: 12px;
text-decoration: none;
font-family: arial; /*Jenis font*/
}
.vertical-menu a:hover {
background-color: #CF32FF; /* Warna efek yang keluar ketika di arahkan mouse */
}
.vertical-menu a.active {
background-color: #2ac2f5; /* Warna pada header menu */
color: white; /*Warna font*/
font-family: arial; /*Jenis font*/
}
.pkp_structure_head {
background:#3e53b5;
}
body {
font-family: tahoma,geneva,sans-serif;
}
.obj_article_details .abstract {
text-align: justify;
}
.pkp_footer_content {
float: left;
width: 50%; padding-top: 10px;
padding-bottom:10px;
}
.pkp_brand_footer {
float: right;
width: 30%;
padding-bottom:10px;
padding-top: 50px;
}
.pkp_structure_footer_wrapper {
background: #e8ebef;
border-bottom:@double solid;
border-bottom-color:#595959;
}
.pkp_site_name .is_img img {
display: inline-block;
max-height: 100px;
max-width: 100%;
width: auto;
height: auto;
}
_______________________________________