webadmin's picture

Drupal 7 add CSS files

Drupal

Ada 2 cara untuk menambahkan CSS ( Style ), di dalam theme, modules info atau menambahkan code drupal_add_css() dalam template.php atau modul custom yang Anda buat.

Menggunakan yourtheme.info ( setiap theme akan sama namanya misal menggunakan theme yang Anda buat )

Ini adalah cara yang paling gampang untuk mendeklarasi stylesheets dengan memanggil path theme atau modul Anda.
Tips dari saya 3 Tahun sebagai coder drupal, lebih baik membuat direktori baru dalam theme Anda, misal yourtheme/css/custom.css
Cara itu biar kita ga pusing jika kita punya banyak code tpl.php dalam theme kita.
Langsung aja deh liat sample code code nya yah.

stylesheets[all][] = all.css
stylesheets[screen][] = screen.css
stylesheets[print][] = print.css
stylesheets[all][] = custom.css

Cara seperti itu simple, tapi tidak baiknya cara itu kurang efesien ya jikalo css custom yang kita bikin ga selalu di pakai dalam semua halaman site kita.

drupal_add_css() dalam Modules dan Themes

drupal_add_css() Nah cara ini kata saya sangat efesien, karena penggunaan stylesheet tergantung kebutuhan. Tapi tentunya Anda harus seorang PHP coder juga loh, fungsi ini API ( Application Program Interface ) dari core nya si Drupal. Code ini juga berhubungan dengan API drupal_get_path() untuk memanggil path dari modul atau theme itu sendiri.

Ini dia sample code dalam module nya :

drupal_add_css(drupal_get_path('module', 'yourcustom_module') . '/custom-module.css', array('group' => CSS_DEFAULT, 'type' => 'file'));

Ini dia sample code dalam theme nya :
Disimpan dalam template.php

drupal_add_css(drupal_get_path('theme', 'yourcustom_theme') . '/custom-theme.css', array('group' => CSS_THEME, 'type' => 'file'));

Nah kalo cara ini jika Anda ingin cara inline CSS, misal ada suatu kondisi Function yang jika terpilih maka injek css inline ke dalam tag HTML menjadi style: ... bla bla bla..
Saya harap anda sudah mengetahui CSS inline itu apa ya.. :D

Jika belum ya saya jelaskan sikit, CSS itu bisa di load menggunakan file.css, nah jika inline itu code di injek langsung dalam body tag HTML nya, sample berikut adalah inline CSS

Code ini akan membuat perubahan dalam tag BODY HTML, so sample code untuk inline drupal css nya adalah

drupal_add_css('body {background: #000;}', array('group' => CSS_THEME, 'type' => 'inline'));

Ada lagi cara lain jika Kita ingin me load CSS dari external link, ini dia code nya

drupal_add_css('http://example.com/css/reset.css', array('group' => CSS_THEME, 'type' => 'external'));