Amanda Rodriguez

Orange: A Drupal theme using Skinr

amandar — Fri, 06 Aug 2010 16:22:26 +0000

Ok so you might know that I designed and built the Orange theme, and yes this is a shameless plug BUT I think the new version of Orange (which utilizes Skinr) is a great intro to Skinr and also a great theme for beginners who want options without having to open a CSS file. In this post I'll go through all the design changes from v1 to v2, and all the different customization options available.

Design changes
The overall design hasn't changed a whole lot, the regions that existed before are still there. There is an additional region above the footer below the content and the search bar and primary links are no longer added by default. The main design difference is with nodes. I changed the way the node date, author, tags, links and comments are displayed. Previously nodes looked like this:

Now they look like this:

Skinr: How do I use this thing?

amandar — Fri, 30 Apr 2010 17:23:50 +0000

Intro
So you've installed Skinr and its required modules, now what?! The most common misconception about Skinr is that it contains CSS. Skinr doesn't come with any styles! Another common misconception is that Fusion and Skinr are the same thing, this is not so. Fusion is a theme that takes full advantage of the features of Skinr and thats it. Skinr is a tool that you need to take several steps in order to use.

Printing the $variables
The first place you should start is getting the variables to print. You can go straight to your template files and print the variable in the first div. However, I prefer to declare the Skinr variable in my preprocess functions. The way I do it is:

// Printing the Skinr variable
if($vars['skinr']) {
  $vars['block_attributes']['class'][] = $vars['skinr'];
}
// Combine attributes into a single string to be added to the block container.
$vars['attributes'] = theme('render_attributes', $vars['block_attributes']);

Skinr: The ultimate module for themers?

amandar — Tue, 27 Apr 2010 02:17:05 +0000

Introduction
There has been a big buzz surrounding Skinr these days especially at Drupalcon SF 2010. There is also a lot of confusion about what it actually is and does. Being that the module was developed by my fellow employee Bala Bosh and the brain child of my sister Jacine Rodriguez, I have a unique view of Skinr. I'm not too involved to the point where I can't explain the basics and how its useful for every themer.

For those of you who don't know about Skinr, in a nutshell it is a module that allows the themer to preset specific styles for content that can be applied through the UI. You can control anything with skinr that has a preprocess function - the entire page, nodes, blocks, comments, views, panels. The kinds of things you can do are limited only by your imagination.

Since its conception, Skinr has grown into a robust powerful module that every themer should know about and use.

OK, so why should I use it?

Gravitek Labs logo with CSS

amandar — Thu, 25 Mar 2010 18:26:16 +0000

Inspired by a tweet I saw this morning that led me to David Desandro's CSS Opera logo - I decided to give these techniques a try. The following is the logo for the company I work for Gravitek Labs made purely with CSS. This was really fun and quick to do, and if you have not played with it before I recommend you do!

New Site Design

amandar — Sat, 13 Feb 2010 18:03:14 +0000

If you've been to my website before you'll notice that I have recently implemented a new design. In a week and a half I will be starting my new job with Gravitek Labs and to coincide with this new venture I decided to redesign my website. I spent more time designing the site in Photoshop than actually building it out, which is one of the reasons I LOVE Drupal!

There were several aspects of this site that would have been a challenge for me a year ago, that now that I know a lot about Drupal were a breeze. One is the logo. I'm not using the typical Drupal logo where you have logo.png in the theme's root or even on the theme settings page where you upload a logo. I am using my preprocess_page function to determine which logo appears. So when you are on the blog, design, or resume you will see the logo with the mouse. If you are on tattoos you see the logo with the tattoo machine, and if you're on drawing and contact you'll see the logo with a pencil. This was all done in the preprocess with a conditional that checks to see what arg(0) is and from there giving my logo a value that is printed in my page.tpl.php.

nav.jpg

The Drupal 7 User Experience

amandar — Fri, 18 Dec 2009 16:09:08 +0000

The Bad
I'm sure my comments will be really late in the game but I just updated my local Drupal 7 installation to start converting my themes to D7 and what at first was excitement quickly turned into disappointment. At first glance the modal admin UI was interesting, refreshing even, but then doing simple tasks like creating content became a source of frustration because I had no idea where to find it!

The block admin page is a mess and extremely difficult to use, I actually prefer the D6 block admin. I feel this page should not be a modal, I like being able to see what region is where as I'm assigning content to it. Also I am not seeing where to create a new block, I dunno if I am brain dead or something but I cant find it...?? This is really upsetting to me because the D7 team has supposedly been working really hard to improve the UI. The block admin just totally falls short.

d7-blockedit.jpg

d7-inputfilter.jpg

d7-contenttype.jpg

Drupal 7 theming basics

amandar — Thu, 17 Dec 2009 20:38:54 +0000

I am no expert on Drupal theming, but I recently attempted to convert one of my Drupal themes to Drupal 7 and it was pretty stressful at times! I'm gonna try and outline some of my changes here. The theme I am attempting to update is http://www.drupal.org/project/orange/

.info files

.info files have changed. The content variable has been removed for Drupal 7, so you need to declare the region in your .info file or you wont even be allowed to enable the theme. Also because of problems with sub-theming style.css is no longer added by default. You will need to also declare this in your .info file.
Like Drupal 6 if you want custom regions and js files you declare them here as usual.

<?php
regions[content] = Content
stylesheets[all][] = css/style.css
?>

page.tpl.php

Page.tpl.php has some changes, for one you no longer have to have html head or body tags. This data is contained in a the page variable. Regions are also in the page variable. At the top of your page.tpl.php you'll see:

<?php print render($page['header']); ?>

At the bottom you'll see: