BaseLayer Three

A WordPress theme for artists

This is the theme that I am using to run my site now and I am distributing it free to any artist/designer wants to use it. Please don’t resell the theme and don’t delete any of the credits in the code, including credits to other open-source projects that I based this off of, including the WordPress Twenty Ten theme, Colorbox and the 960 grid system. I’d love to see what you do with it, so drop me a link to your install and I will share it with others.

You can download version 3.28 of BaseLayer Three here: baselayerthree version 3.28

The new features of BaseLayer Three include:

  • Built on a tight grid system using
  • Based on the default TwentyTen theme, so it includes Header, Background and color pickers for overall site design
  • Multiple Gallery styles (including ColorBox popup galleries) and improved slideshows
  • Documentation shortcode system that flows blog entries onto a curriculum vitae and artist resume
  • Print stylesheet to allow professional printing of all pages including resume pages
  • Cascading menus that include sub-pages
  • Extensive Typography tools in the WordPress Dashboard
  • Can specify Google Web Fonts!
  • Use of standard WordPress features such as [gallery] shortcode
  • Can set your own Header Image Height and works with the WP Header Upload image and cropping system.

Colorbox galleries

Documentation and the standalone code has been moved to my Colorbox for WordPress page.

Child Pages Code

I have made a plugin that can find all of the child pages and if there is an image, it will load a thumbnail. If no images, it makes a block and puts the title of the page in it.  Download and instructions on the Child Pages plugin page.

Using Google Fonts

Screen shot 2011-04-30 at 8.50.10 AM
There is an option in Font Options that allow you to use Google Web Fonts. These are fonts that Google are streamed from Google’s server and are freely available to use on web sites. The way it works is that you check the box to indicate you want to use Google Fonts and after updating you will see where you can enter the name of the font you want to use. Type it in the top as indicated on Google’s web font page (usually includes a ‘+’ sign if there is a space in the font name). Then, declare which part of your site you where you want to use that font. Here is a screen shot of how that might look for a site with two fonts, News Cycle and Arvo.

Note, those text boxes can contain valid CSS font stacks, so if you still want to use Helvetica, just type in Helvetica as you would in the CSS code. That way you could have some areas with a Google font and other areas that use standard fonts found on people’s computers. It should be noted that these Google fonts do need to be download by the visitor, so even though they are probably 26K or less I would not recommend using more than a couple of Google fonts. The standard CSS fonts reside on the users machines already, so they will be faster.

Header and Navigation Menu

Screen shot 2011-04-30 at 8.51.15 AM
I have included controls that allow you to specify the height of your Header image in the Font Options page. To use that, type in the height you want your header to be BEFORE you upload a header. With the new height, go to Appearance > Header and upload the new Header image. If it is too big, you will be prompted to crop it to size.

The Header controls include margins as well. This helps if you have a long list of navigation links, or if your site name is really long. You can make either stretch the entire width of your page by changing the style to “grid_16”, or any variation of that. If you want the Title and Navigation links to stay on the same line, the two style options need to add up to 16 or less.

You will probably notice that alignment issues crop up once you start making changes in this area. That’s why I have included an option for margins. The margins must have valid CSS code in it, and try to remember that the order you specify them spells “TROUBLE”. Top, Right, Bottom, Left (TRBL). You can specify negative margins also. For example, if you specify -20px 0px 10px 0px for the navigation menu that will move the navigation menu up by 20 pixels. This is great for getting perfect alignment with whatever kind of header you design.