March 4, 2013 - 10:50pm by micah

Day 1 of creating the Blogrimage website included sending Pradeepan a summarized project plan and starting the site build on my private development server. Pradeepan's vision for the site is to import feeds and other content from participating bloggers (blogrims?) to create a centralized showcase for the content being created during the Blogrimage.

We didn't plan ahead. We started communicating about this the night before the Blogrimage started, so now this will be as much a part of the Blogrimage as any other challenge.

Here's the overall plan:

  1. Register a domain.
  2. Get some hosting.
  3. Get a Drupal site installed.
  4. Start collecting links.
  5. Do some basic theming.
  6. Get aggregation working.
  7. Iterate, iterate, iterate.

This week, I hope to get enough of a theme in place that the site looks nice, but for starters we just want to get up and running. We can iterate on pretty once we're rolling.

We'll start by aggregating content from the submitted links, then figure out how to scrape other content like Twitter and Instagram hashtags. Full blogging engines are going to work best for this, but we'll do what we can for the rest.

Building the site

We don't have our domain name or hosting yet, but I was able to start building a site this evening. The initial roll-out contained Drupal Core 7.20 with the following contributed modules installed:

I used my own HFCCBase theme as the starter theme and created the start of a custom sub-theme, as well as a starter site module for custom site functionality.

I'm sharing all of the custom code for this site in a public git repository at https://bitbucket.org/micahw156/sites_blogrimage

CSS Injector

While I generally do all of my CSS work in my themes, I've found the following CSS Injector rules are really handy, since they work independently of the theme and can be applied to the site administration theme, too:

Print Stylesheets

#toolbar,
#header,
#block-workbench-block,
#triptych-wrapper,
#footer-wrapper,
#user-admin-account #edit-options,
.breadcrumb,
.tabs
{
  display: none;
}

Add on every page.

Media: Print

Tweaks to node edit form

div.description,
.form-item div.description {
  background: #e3eeff;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #aaa;
  color: #000;
  font-size: 0.95em;
  margin: 5px 0 10px;
  padding: 5px 10px 10px;
}

.form-item label {
  color: #008;
  font-size: 1.2em;
  padding: 0 0 0.625em;
}

.field-type-datestamp .fieldset-legend {
  color: #008;
  font-size: 1.2em;
  text-transform: none;
}

.field-type-datestamp .form-item label {
  font-size: 1em;
}

form.node-form textarea {
  font: 1em/1.625em Menlo, Consolas, 'DejaVu Sans Mono', Monaco, 'Bistream Vera Sans Mono', 'Courier New', Courier, monospace;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

Add on only these pages:

  • node/add/*
  • node/*/edit

#blogrimage

Topics: 
Drupal