Bryan Leister

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 960.gs
• 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 shortcode called ‘gallery_children’ which 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. Check out my about page and the motion main page to see it in action.

Screen shot of BaseLayer three as used on my home page

First, let’s take a look at what I typed into the Page area for my Projects page:
<div class="grid_16" >
[gallery_childpages   background="#000" style="grid_3" height="160"   size="medium" margin="-100px" pagetitle="true"]
</div>

You actually don’t need the <div> tags in there, I did that to get a nice alignment using the built-in 960 grid. The main thing is the shortcode, I can specify a height, a style, image size and offset so that we can customize our thumbnail a bit.  I also don’t need the pagetitle, but for this page I wanted it for navigation.

Below I have the code for my home page. Just like the galleries and slideshows, I can pass an ID number to fetch the page from someplace else. The above Projects page doesn’t have an ID, so it finds child pages that are children of Projects.

I know this is a lot of code to type into WordPress as a Page or Post, but if you want custom design you have to do a little bit of HTML/CSS to get things positioned in an unusual way. The important line of this is the shortcode for auto-generating child pages for your home page. If you look closely, the first DIV is just a complicated way to position my name at the lower left, and I have a shortcode to grab a WordPress built-in widget to display my recent posts. After that, all we are doing is repeating the Projects style code to position the chosen parent pages that I want on my home page.

Using the positioning, sizes and other aspects of the gallery_children, you could make a really nice graphically intense website. Have fun!

Home page example code

Motion page Example Shortcode

Here is the Child Pages shortcode that I am using to create my motion page:

About page Example Shortcode

Here is the Child Pages shortcode that I am using to create my about page. Note, I have changed the “style” option to 'gallery-item', this is so the grid will match the default gallery styling built into the theme. In other words, it will align as if it was a regular gallery thumbnail, unlike the code above which is using the 960 grid style 'grid_3'. I guess you need to know a little about what CSS styles do, or just copy the two styles to see the difference in alignment.

All options

Here is the Child Pages shortcode using every option available. Note the color refers to the font color, style is for any CSS style, I’m using the 960 grid system that’s built into the theme. 'orderby' refers to the sort order of the child pages, options are ID, menu_order, title. You can use include or exclude with an ID separated by commas. Include would only list the pages identified.

NOTE: if you copy this code, you’ll probably get an error because you may not have a page with id 1313. To get the ID of your pages, hover over the ‘Edit’ link in your wordpress admin and look at your browser’s lower left status bar to see the id. It will look something like ” …post.php?post=1313″ . Or, when you are editing the page, look at the url, it will be something similar.

Using Google Fonts

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

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.