Menggunakan Themes Bootstrap dari bootswatch.com

Caranya:

1. Pastikan anda sudah menggunakan bootstrap dan sudah mengimplementasikannya dengan baik.
2. Pilih themes yang anda sukai.
3. Download bootstrap.css dan/atau bootstrap.min.css dan replace bootstrap.css dan bootstrap.min.css default bawaan bootstrap (tergantung anda menggunakan versi compiled/minified atau development).
4. Download variables.less dan bootswatch.less. Kemudian edit file variables.less dengan text editor, copy semua isinya, kemudian paste (pada bootswatch.less) isi variables.less di atas sebelum isi asli file bootswatch.less.
5. Download file less.js dari http://lesscss.org/.
6. edit file html yang sudah menggunakan bootstrap. Pada bagian header tambahkan baris:

<link rel=”stylesheet/less” type=”text/css” href=”less/bootswatch.less” />
<link rel=”stylesheet/less” type=”text/css” href=”less/variables.less” />

Pada akhir skrip jalankan file javascript:

<script src=”dist/js/less.min.js” type=”text/javascript”></script>

Monggo dicoba. Kalau bingung tinggal baca dokumentasi di getbootstrap.com, bootswatch.com dan lesscss.org.

Berikut beberapa screenshot dengan themes amelia:

Responsive image di bootstrap

Ada dua cara, berbasis javascript dan css. Yang paling elegan adalah berbasis css dengan media query nya. Jika membaca dokumentasi di http://getbootstrap.com/css/#overview-responsive-images, terdapat keterangan: “Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.”. Artinya kira-kira:

• Responsive image pada Bootstrap 3 dilakukan dengan menerapkan max-width 100% dan height auto.
• Image yang mau dibuat responsive diberikan class img-responsive.
• Penyesuaian image mengikuti elemen diatasnya (biasanya elemen div).
• Yang disesuaikan pada media query bukan ukuran image nya tetapi ukuran elemen diatasnya. Sedangkan gambar akan otomatis menyesuaikan pada lebar dan tinggi yang didefinisikan pada media query.

Oke ini contohnya, pada dokumen HTML tambahkan kelas img-responsive:

<div class=”col-md-4 blog-front”>
<h2>Blog</h2>
<p><div class=”blog-front-img”><img class=”img-responsive” src=”images/icon/1.png” /></div><div>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </div></p>
<p><a class=”btn btn-default” href=”#” role=”button”>View details &raquo;</a></p>
</div>

Pada file custom CSS-nya:

.blog-front .blog-front-img {
float: left;
margin-right: 10px;
margin-bottom: 3px;
width: 75px;
height: 75px;
}

@media screen and (max-width: 640px) {
.blog-front .blog-front-img {
width: 65px;
height: 65px;
}
}

@media screen and (max-width: 360px) {
.blog-front .blog-front-img {
width: 55px;
height: 55px;
}
}

Selamat mencoba!

Responsive text di bootstrap

Ada dua cara, berbasis javascript dan css. Yang paling elegan adalah berbasis css dengan media query nya. Kalau berbasis javascript memang cantik tapi kemungkinan bentrok dengan css lain besar. Contohnya ya dengan bootstrap yang saya gunakan. Dengan css, buat file custom.css dan include di html. Kemudian buat media query seperti berikut:

@media screen and (max-width: 640px) {
.jumbotron p {
font-size:15px;
}
}

@media screen and (max-width: 360px) {
.jumbotron h1 {
font-size:30px;
}
.jumbotron p {
font-size:14px;
}
}

“@media screen and (max-width: 640px)” artinya: settingan berikut di-apply jika width screen nya dibawah 640px. Lebih detail baca disini: http://www.mrgeek.me/technology/tutorials/web-design/how-to-make-text-responsive-in-bootstrap/

Selamat mencoba 🙂

Belajar Drupal 7 Database API (1)

Oke, saya mau nyicil belajar koneksi database via API di Drupal. Dokumentasinya bisa dibaca di https://drupal.org/developing/api/database. Saya akan coba mengakses database di Drupal via Dynamic queries (https://drupal.org/node/310075) karena tampaknya ini yang relatif tidak terlalu kriting untuk dipelajari meskipun sintaksnya agak membingungkan buat pemula seperti saya.

Yang pertama saya lakukan adalah mengubah sedikit content type Article dan menambahkan kolom sinopsis (lihat gambar). 

Nah saya ingin mengeluarkan informasi node id, judul dan sinopsis nya. Begini yang saya lakukan:

• bikin file latihan6.php yang diletakkan di root directory drupal.
• Isi file tersebut dengan:

<?php
define (‘DRUPAL_ROOT’, ‘/var/www/latihan_drupal7′); #import drupal environment
require_once ‘./includes/bootstrap.inc’; #import drupal environment
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL); #import drupal environment

$query = db_select(‘node’, ‘n’);
$query->join(‘field_data_field_sinopsis’, ‘s’, ‘n.nid = s.entity_id’);
$query
  ->fields(‘n’, array(‘nid’, ‘title’))
  ->fields(‘s’, array(‘field_sinopsis_value’)) 
  ->condition(‘n.type’, ‘article’)
  ->condition(‘n.status’, ’1′)
  ->orderBy(‘n.created’, ‘DESC’);
  $result = $query->execute();

echo ‘<pre>’;
  while ($record = $result->fetchAssoc()) { 
  print_r ($record); 
}
echo ‘</pre>’;

?>

Output nya kira-kira seperti ini.

Anda bisa modif lagi dengan kreasi sendiri. Bahkan bisa pakai framework lain untuk mengelola outputnya. Isnt that lovely?