wpJakarta

Tutorial WordPress WooCommerce

  • Tips-trik
    • WordPress
    • WooCommerce
    • Non WordPress
  • Tutorial
    • HTML
    • CSS
    • Javascript
    • PHP
  • Guide
    • WP Hooks
    • Storefront
    • Pagespeed
    • SEO
  • Review
    • WP Themes
    • WP Plugins
  • Extras
    • Blog
    • Productivity
    • Utility
    • Commodity
    • Creativity
    • Hobby
    • Deals
  • Tips-trik
    • WordPress
    • WooCommerce
    • Non WordPress
  • Tutorial
    • HTML
    • CSS
    • Javascript
    • PHP
  • Guide
    • WP Hooks
    • Storefront
    • Pagespeed
    • SEO
  • Review
    • WP Themes
    • WP Plugins
  • Extras
    • Blog
    • Productivity
    • Utility
    • Commodity
    • Creativity
    • Hobby
    • Deals
Beranda / Blog / Ganti Warna Background, Form, Tombol Halaman Login WordPress
Posted on Januari 2, 2020Oktober 3, 2020 by wpJakarta.Com

Ganti Warna Background, Form, Tombol Halaman Login WordPress

Like & Share our articles :

Artikel kami mungkin minim gambar, tapi kami selalu berupaya memberikan ulasan yang jelas. Share ? Bantu kami untuk menshare artikel ini melalui media sosial. Bagi kami itu lebih berarti dari sekedar donasi yang kami terima. Komentar? Berikan komentar yang relevan, komentar spam tidak akan pernah di publikasikan. Promosi blog atau bisnis ? Akses guest posting editor melalui wpJakarta Write For All. / Our articles may lack images, but we always try to provide clear reviews. Share ? Help us to share this artikel throughout social media. it more than anything you can give. Comment? kindly always to provide relevant comment, spammy comment will never be published. Guest posting ? Access guest posts editor via wpJakarta Write For All.


FacebookTwitterLinkedInPinterestWhatsAppPagespeed

wpJakarta – Ganti Warna Background Form Halaman Login WordPress. Sebagai bagian dari artikel kami sebelumnya Tips Trik Kustom Halaman Login WordPress. Artikel ini adalah yang kedua yang mencover perubahan background, form dan tombol log in dihalaman login WordPress.

Navigasi lengkap tips trik kustom halaman login WordPress :

  1. Merubah logo “W” besar dengan logo sendiri dan link WordPress.org ke alamat website sendiri pada logo tersebut.
  2. Merubah background halaman, background form login dan efek timbul dan merubah warna tombol login plus menjadikannya sedikit nongol.
  3. Meredirect setelah login sesuai dengan role dan memberikan link dibagian bawah form.

Ganti Warna Background, Form Login Dan Tombol Halaman Login WordPress.

Jika pada artikel sebelumnya Rubah Logo Link Form Login WordPress anda berhasil merubah logo dan link URL dihalaman login. Maka untuk mengganti background, form dan tombol silahkan tambahkan kode berikut pada file function.php :

 /* ----------- Ganti Background ----------- */
 function wpj_custom_login_page() { ?>
 <style type="text/css"">
 
/* ---------- Background halaman ---------- */
 body.login {
   background-color: #1ABEFD;
   color:#ffffff;
 }
 body.login a {
   color:#ffffff;
 }
 
/* ---------- Background form ---------- */
 #loginform {
   background-color: #3F17D5;
   border-color:#3F17D5;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
   border-radius: 5px;
   margin-bottom:10px;
 }

 /* ---------- Warna label input ---------- */
 #loginform label {
   color: #ffffff;
}

 /* ---------- Warna tombol login ---------- */
 body.login div#login form#loginform p.submit input#wp-submit {
   background-color:#bf55ec;
   border-color:#bf55ec;
   box-shadow:inset 0 -0.6em 1em -0.35em rgba(154,18,179,1),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
 }
 </style>
 <?php }
 
 add_action('login_head', 'wpj_custom_login_page');

Optional anda dapat menghilangkan link “Daftar atau register”, “Lupa password” dan link “Kembali ke website” dengan menambahkan kode berikut sebelum tag </style> :

p#nav {display: none;}
p#backtoblog {display: none;}

Tapi jika anda memiliki sirkulasi pengguna yang aktif tentu saja jangan menghilangkan link navigasi tersebut. Karena menghilangkan link navigasi tersebut justru akan menyulitkan user anda.

  • Untuk warna background, warna form maupun tombol bisa disesuaikan sendiri. Akan lebih bagus jika disesuaikan dengan ambience tema website anda secara keseluruhan.
  • Ganti nama fungsi wpJakarta dengan nama fungsi anda sendiri.

Meredirect setelah login sesuai dengan role dan memberikan link dibagian bawah form

Pada artikel berikutnya sebagai seksi ketiga dari tips trik kustom halaman login WordPress. Kami akan memberikan kode pada file function.php untuk meredirect user yang login berdasarkan rolenya. Juga menambahkan kustom link dibagian bawah form login.

Category: Blog
Tags: Ganti Warna Background Halaman Login WordPress, Tips Trik WordPress, Wp Jakarta, Wpjakarta

Navigasi pos

Previous post: Tips Trik Kustom Halaman Login WordPress
Next post: Kustom Halaman Login WordPress (Redirect dan Footer Link)
Cari artikel
Topik
Latest tips-tricks
  • Mengembangkan Usaha Online Dengan WordPress
  • Apa Itu WordPress Hooks
  • Fitur Baru WordPress 5.6
  • Error 404 Favicon Ico Dan Cara Mengatasinya
  • Tutorial HTML wpJakarta
  • Mengatasi Masalah Core Web Vitals 2020
  • Kode CSS Membuat Animasi Mengetik WordPress
  • Kode Javascript Membuat Animasi Mengetik WordPress
  • 2 Cara Membuat Animasi Mengetik WordPress (Javascript dan CSS)
  • Cara Menghapus Akun Instagram Secara Permanen dan Sementara

WordPress Programming


  • WP Hooks
  • PHP
  • HTML
  • CSS
  • JS

WordPress Optimization


  • Pagespeed
  • SEO
  • Adsense

a Non Open BO Company!

© 2020 | Thank you for your time.