Theme Designs

A clean gallery-style design theme.

A clean gallery-style design theme.

BaseLayer

This is the main theme from which all the other themes are built from. It’s a clean, gallery style theme that works well with any amount, size and shape of images. Menus fold down automatically, slideshows and galleries are built in.

All of the other themes use BaseLayers scripts to run, these are called Child Themes and it’s an easy way to create a variation in the way the site looks without losing any of the functionality.

In fact, you can easily create your own Child theme and point it to BaseLayer as well, giving you the opportunity to design exactly what you want.

BaseLayer demo site.


A black design that looks great with a background image and custom header image.

A black design that looks great with a background image and custom header image.

Black Coal

This black design is very flexible and works well with images of all sizes. The width of the design is 1024px, so if you want a slideshow to be centered, use the slideshow shortcode like this: [slideshow width="1024"].

As with any design, you can of course change the font and colors using the BaseLayer settings menu, located in your WordPress admin: Appearance>BaseLayer Settings.

The demo site is also using the height function of the slideshow to center the home page up and down: [slideshow width="1024" height="500"].

Black Coal demo site.


A Swiss inspired clean, contemporary design.

A Swiss inspired clean, contemporary design.

Edelweiss

Another flexible design, this one works really well as a blog too. Speaking of blogs, WordPress started as a blog.

Wordpress offers many ways to post images, mainly these designs use the Gallery functionality. All of these designs use the standard [gallery] feature built-in to WordPress, all we’ve done is make it look nice. If you ever switch to a new theme, even if it’s not ours, all of your image labels and descriptions will transfer to the new design.

The page you are reading is how BaseLayer displays the more standard ‘Insert into Post’ images. Typically these are when you are writing and posting images as part of the article, like in a typical blog.

Edelweiss demo site.


A black design that with a more standard gallery layout.

A black design that with a more standard gallery layout.

Midnight Ride

A black design that works well with a grid of images. The menu is on the left and is set to fold up and down dynamically.

This design is showing 4 columns of thumbnails in the gallery.

To set the number of columns in your designs, in your WordPress admin go to Appearance>BaseLayer Settings and change the vertical columns to whatever you want.

Midnight Ride demo site.


A black-based design that uses larger previews in the middle of the page.

A black-based design that uses larger previews in the middle of the page.

Midnight Ride Medium

This is essentially the same as above, but it works well if you set the gallery shortcode to display medium size images rather than the default thumbnails. [gallery size="medium"].

The slideshow function in all of the designs has the ability to set the size of the images that make up the slideshow: [slideshow size="large"].

In addition, you can set the width and height of the container : [slideshow size="large" width="900" height="500"].

Midnight Ride Medium demo site.


A tightly integrated center thumbnail display.

A tightly integrated center thumbnail display.

Narrow Gauge

Narrow Gauge is just as it sounds, a tight design that requires more care and planning than the other designs. It works best if you set your Settings>Media preferences to create thumbnails at 54 pixels square when you upload images. Then, try to have 20 images per portfolio page. The standard scrollbar appears if there are more images, but it really doesn’t look good with fewer images.

Next, you need to set your slideshow shortcode to display large images: [slideshow size="large"]. Finally, it really only works best if the images are larger than the display area and all the images are about the same orientation. If you have tall skinny images and long horizontal, the skinny images have a border because the slideshow is created at the width of your widest image. It takes some experimenting to get right.

Narrow Gauge demo site.


A dynamic side scrolling layout.

A dynamic side scrolling layout.

SideTrack

This design feels very Flash-like, but is pure css and javascript so unlike Flash it works on the iPad and iPhone. In fact, all of these artist portfolios are designed to work on the iPad and any mobile device that supports basic css and javascript.

You can control the number of thumbnails displayed horizontally in your BaseLayer settings. If your page has fewer images than you specified, the menu is re-sized automatically to the number of attachments in your post. This makes the design very flexible and clean.

Side Track demo site.


A simple design with thumbnails arranged at the bottom of the page.

A simple design with thumbnails arranged at the bottom of the page.

Woodwinds Lower Traverse

A simple horizontal thumbnail theme. There are no scrollbars built into this theme, your images are viewable at all times.

The demo site is using the width feature of the [slideshow] shortcode to keep the slideshow centered on the page. A width of 940 works well: [slideshow width="940"].

Also, you will need to write your short code with the slideshow first so that it is loaded on top: [slideshow width="940"] [gallery].

Woodwinds Lower Traverse demo site.


A theme with thumbnails in a simple block at the top of the page.

A theme with thumbnails in a simple block at the top of the page.

Woodwinds Upper Traverse

A simple horizontal thumbnail theme that works best with thumbnails at the top. There are no scrollbars built into this theme, your images are viewable at all times.

The demo site is using the width feature of the [slideshow] shortcode to keep the slideshow centered on the page. A width of 940 works well: [slideshow width="940"].

Also, you will need to write your short code with the gallery first so that it is loaded on top: [gallery] [slideshow width="940"].

Woodwinds Upper Traverse demo site.