Tutorial Custom CSS dan Footer OJS 3.0

[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

[adminrji]

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

[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.

[thohafirdaus]

terimakasih,, ijin yaa,, saya terapkan di ojs kami

[estesa]

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?

[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.

[mrcuniko]

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.

pakai tema oldgregg
kemudian edit file /plugins/themes/oldGregg/templates/frontend/components/footer.tpl

[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;
}
_______________________________________