WordPress Themes: Underscores AKA _S

Selection_003_0Here we go again.  I’m feeling comfortable with creating child themes for WordPress’ TwentyTwelve theme, using it on several sites* including my own WordPress site.  Last night, at the Northside WordPress MeetupBecky Davis reminded me of a few of the problems with the TwentyTwelve approach and suggested — for the second time — that I try the Underscores theme.

So…  You’re either on the bus or off the bus.  My WordPress site may be an interesting place over the next few days on its way to brilliance or disaster.

* Recent TwentyTwelve based sites are http://threemorewishesjazz.com, http://ellenblumbarish.com, http://slneighbors.org, and a couple in development.

Responsive Theme, New Design

The time came to bite the bullet, to ford the stream, to jump the shark, to mangle the metaphor.  The time came to make my website look like something you’d expect from a professionally designed website.  I’d been puttting that off for a long time, but now it’s done.

The site’s theme is based on a free, fully responsive Drupal theme, Professional Theme.  The base theme was very close to my target. I made a few changes to the typography, substituting Open Sans for Droid Sans, modified some of the colors, and not much more.   This is an example of the efficiency that comes from leveraging the Drupal community.

What do you think? Seriously, I’d like to know.  Is the message clear? Is ithe site easy to read and navigate?  Do you sense any call to action?  Please use the comments feature to give me the good and bad.

 

Dynamic Sidebar Height for WordPress and the Thesis Theme

One of the things web designers like are brightly colored, drop-shadow sidebars that match the content height on evey web page.  Because content height depends on the content and sidebar height depends on the number and size of the widgets in the sidebar, it takes a bit of dynamic thinking.  You need to know two things:  (1) How high is the content and (2) what’s the current size of the sidebar?  Given that, the forehead slapping moment comes from finding that one can reset the CSS for an element on the fly using JavaScript.

The sidebar in question is in a DIV with the ID sidebar_1, floated to the left side of the page.  The content is in a DIV with the ID content, floated to the right  

If you find yourself with a similar problem, add a text widget to the sidebar and paste in the following JavaScript:

<script type="text/javascript">
<!--
var divh = document.getElementById('content').clientHeight;
var sb1 = document.getElementById('sidebar_1').clientHeight;
document.write(" ");
if (sb1 < divh) { 
 document.getElementById('sidebar_1').style.height=divh+"px";
}
//-->
</script>

Upgrade: Welcome to Drupal 7

Welcome to Drupal  Version 7.  The ugprade was a little choppy, mainly due to figuring out what modules don’t exist for D7 or just don’t yet work here, but the site is upgraded.  The theme still needs a bit of work.

Anyhow, it was a good learning experience and a fun Sunday spent in total nerd mode.

The theme is now Pixture Reloaded, an adaptive theme.  Adaptive means that it adapts to the size of the browser. If you’re viewing this on a tablet or phone, try rotating your device.  You may find the sidebars move from the side to bottom, or vice versa.