Frank Schulte-Ladbeck

Archive for the ‘Themes’ Category

Variations on the Voyager theme in red and blue

I mentioned in my post discussing the Voyager theme, that I was inspired by the idea of a red background that would fade to a lighter color. I created that theme in blue, because of looking at other factors, I thought that it might work well. However, I wanted to play with different colors to see how the theme’s feel would change.

I decided to experiment with a red toned background, and then a green toned background. For the most part, I am happy, but I do see one issue with these themes. Grading a color through its spectrum may produce lighter tones that you do not like. Red going to pink, and green fading to that light green tinged with yellow. Still, I felt that the themes worked, so I decided to release them. I think that I will set-up a site using one version of this theme for photographs taken around Houston.

To read about the features of this theme, you can read the original post, but I did fail to mention one feature. Most people do not make effective use of their 404 pages. For the Voyager themes, I have changed the page from the simple message of “Error- Page not Found” to something more useful to your visitor. Now they will encounter a page that guides them to search the site through a search box or through a tag cloud. If you are unfamiliar with tag clouds, think of a list of words that can be clicked to lead with posts and articles that have been tagged with that word or phrase. I might suggest that you take this editing further with a personal message or photo to create a unique page. On my yourhoustonhomeinspector.com site, I have a picture of a garage that collapsed with the message “how did you break that?”, then search options.

Download Voyager 2 (red toned).

Download Voyager 3 (green toned).

A blue toned two columned theme for a cooler small business website

Iliked the jellyfish theme, but it was a rather large file, and I did not think that it was the best option for all users. I still wanted a theme that could be used to display photographs/images well, but not be entirely black. I took a look at more photography sites, and I have to say that the black themes are better suited for showing off those works. White background themes were alright, but I focused more on the images when there was a black background. Still, I found the problem on every site, that there was writing that I could not read.

When jotting down ideas, I conceived of a site with a red background where the red was intense on the top of the page, but it slowly faded to a lighter red at the bottom of the page. Still thinking about businesses that need to display images, I decided to try my idea in blue. This brings me to the Voyager theme (the song Voyager from the Moody Blues as a title inspiration).

After completing the theme, I thought it might be good for any business wanting a different look to their site. Green toned themes are popular because of the interest in green marketing, and white toned themes are quite common; however, I thought this theme provides something different.

Features:

Header: the navigation menu is above the header with the title placed in the center and a slogan aligned below. The header is 175 pixels high by 800 pixels wide, in case you want an image in there. Navigation menus are multistaged, so that parent pages can have “children” listed under them to avoid crowding on the menu bar.

Columns: two. I am still looking at three columned themes, but I feel that two columns, one for the post, one for the sidebar, work better. The sidebar is to the right. The side bar is a bit larger. The theme was set for 800 pixels width to better fit on all monitors.

Footer: the footer is de-emphasized in this theme by having it blend into the background of the sheet. I am still leaving the RSS feed symbol there, for you to move. For people using this as a personal blog, remove the pages listed that have more to do with businesses, like “Terms of Use”.

Sidebars: a Web 2.0 feel with rounded edges, but they are moved closer together. The background is a blue-grey to contrast it from the theme background. The titles are not highlighted to put more focus on the content.

Additional: this is my first theme that incorporates a stylesheet for printing. The blog title, the post, and the comments will print.

Have fun with it. Download Voyager.

A two-columned theme meant to be an alternative for photographers with a color scheme of blue, black, and grey

I think that I should create a form to discuss the features of a theme, because I am focusing in on certain features that I believe are better for a small business site. This theme may be better suited for a personal blog than for my intended user: photography studios.

Do you go to look at the sites of different photographers? I do. I wish that I was better at taking snaps, but at least I can enjoy the work of others. One problem that I consistently face when viewing these sites is legibility. You see having a theme with a black background is great for presenting a picture. I like reading facts about the image, generally placed in the tags, but many sites begin to use font colors which are hard to see (for example, dark grey seems to be popular). On one site today, I found navigation elements so obscured that I missed them the first two times that I passed by them on the screen.

My solution was to look for a different feel to a photography site. Thinking about dark backgrounds with character caused me to think of a painting by Rothko. Can you see the movement and hint of color in such a theme? I would have to find font colors that would work though. I took my children to the Houston Zoo, where we went to the aquarium building. In front of the jellyfish tank, seeing my son and daughter outlined by those creatures under blacklight, I had a revelation. Maybe a background inspired by that scene would be good for displaying photos, so I present to you a theme based on that vision, “jellyfish”.

To keep the theme darker, while still ensuring that a user could navigate well, I chose to use grey tones in the theme as well. Buttons and section headers stand out by having a grey field for the writing. Black font in the body is still legible, and I thought this would help bring attention to the photo rather than the writing. The border around the pictures is white, again to draw the eye to this point.

I am thinking of testing this theme out. After completing it, I began to wonder if this would work for a studio or gallery. Maybe the Rothko idea with thought given to navigation and font colors can be better for this business. I am fond of how the feel of the theme developed; it just might not be for the intended business though.

Download jellyfish.

A two columned theme with a green tone

This theme is named after the song by The Church. The song was more lush than this theme would suggest. I just like going back to listen to the Remote Luxury album when I am working in the evening.

Everyone is going green. Green is the new black. Many small businesses are showing off their green credentials to attract clients, and I am painting my house a shade of grey-green this week, so maybe that is why I chose these colors. I think that a clean looking theme in this color may be popular.

The header is de-emphasized in this theme, being a mere 100 pixels in height. When examining a few company websites, I noticed that they wanted to focus the user attention on the navigation or on a header below the navigation. In this design, the firm name can be placed in the header with room for a slogan. To bring the eye to the navigation bar, I changed the separator for the pages to an icon. This may not be the icon you will want though. I played with the thought that the pages in the navigation bar could be divided by the company icon, which could also be the flavicon. That might be too much, but I liked the look of giving space to each page title. Note: in the screenshot above, I do not have the icon separator in place. I am sticking with the drop down menus on the navigation bar, because I feel that these are easier for navigation.

The layout is also clean in the field below the navigation. No rounded corners to the page elements or other special effects. With the white background, I meant for the content on the pages to be shown off. The content could be a post or article, but I had a slightly different vision for this theme: showing a product image. Envision if you will an image indicating lamps. This image takes you to a page of different lamps. Choose the exterior lamps image to go to a page with those products. Navigation can be achieved through the bar, but the images would stand out on the page of this design. (Along with painting the house, my wife wants to redo our outdoor lighting, so it was on my mind).

A product site was the inspiration; however, a site with written content would work too. The idea is to have the elements recede while the important item, your product or content, to be emphasized.

As always: if using this theme for a personal blog, remove the pages listed in the footer, as those are meant for a business site.

Download Contant in Opal theme.

A two columned, black toned theme with a white background and blue highlights

Maybe I should name all of my themes by the music that I was listening to when creating them. In this case, it was David Bowie’s “Heroes”. I wanted to get away from the textured pattern background for this theme. When I look at possible themes to use on a site, my eye is drawn to dark colored headers with white backgrounds for the content.

This theme was meant to be more general purpose for various small businesses. I noticed a few consultants using that basic idea for their sites, and with some header manipulation, this may be good for your business. Imagine adding a photograph to the right hand side to add a personal touch. If planning to use this as a CMS, I would remove the sidebar elements which suggest blog, like the blogroll and categories.

The sidebar is composed of individual blocks for widgets. The distance between each block is two pixels, to create a divide between each element. The headers are in blue with the buttons in a lighter shade of blue. I thought that the blue would go along with the black, and hopefully not take away from the company logo that could be inserted. The idea is to have these elements noticed, but not clamoring for attention. This color scheme was carried over into the link colors for the content.

I would move and change the RSS button, which is currently in the footer. I am leaving it in the footer in my themes, because I want you to make your own decision to its placement. I discovered with my current theme setup that the footer can be lost from view to many readers. Yet people still find it. I left it orange in this theme, because this is a visual cue to users (most sites have an orange RSS icon). I would change it to match the blue in the sidebar elements.

The navigation is below the header, and it includes a multi-stage menu. I am coming to the belief that this navigation effect is better for business sites. When you plan out your pages, you will find them in groups. A multi-stage menu allows you to maintain those groups, while keeping a clean look for the navigation. I also like the visual cue of having the opened page highlighted, with the others not having that tab outline around them. I went for below the header, because I feel that this would be a better position for the user to navigate from.

If using this theme for a personal site, you will want to remove the pages listed in the footer, like “Terms of Service”, which are meant for a business.

Download Heroes theme.

A three columned theme in grey tones with a paper texture background.

This is the theme that I created for this site. My idea was to have a straight forward theme that could be used by any consultant. I also wanted to begin experimenting with the structure of a theme with three columns. My love of reading physical books, magazines, and newspapers led me to using a paper texture for the backgound.

If you are looking at this site, then you will be seeing all you need to know. As I expressed before, having three columns can be convenient for a site, and the left hand sidebar will not be the most visited, but this setup allows for arrangements which can be cleaner looking as the blog grows. This was also the first time that I experimented with navigation on the top. I am finding that I like the look and feel of this position. When a user loads the page in his browser, that navigation is easy to see and comprehend. If they do not want to see a post, but they are heading to a specific page, this can be convenient for them.

The header was designed to have an element on the right side. As you can see above, I included my logo and my phone number. I think including something of this nature would be beneficial to any small business as a means of creating a brand. You can add your own to the header by editing it in a photo editor. The header is located in the images folder.

Of course, as I develop this site more, certain elements will change from the template of this theme. My concern is what will go into the sidebars. Most themes include the archives section, but I have not been interested in accessing posts in that fashion. I can see where it is helpful, so I am leaving it up for now. For older sites, the archives section can add the impression of stability. Users see consistent postings over a long period. For newer sites, this could be a detriment. Users may remember that they read a post last month, so the archives become handy to navigation. I have also become less of a fan of the blogroll for personal concerns. For the visitor though, these links can provide a wealth of information. If you decide to use this theme and WordPress as a CMS (content management system) for your webpages, I would loose the blogroll, because it really does encourage the belief in your site being a blog. You will see the changes that I make from this theme as we go along.

As always, the footer contains a list of pages that are meant for a small business, but this theme could be used for a personal site. Just remove those links.

Download the Consulting theme.

A two column, red toned theme with a paper background

While listening to Dexter Gordon’s song “Cheesecake”, I began working on this theme, probably also inspiring the colors. The theme uses a softer color palette with uses of red to catch the eye. This was another experiment in using a paper texture as a background. The two column theme has been the structure I have focused on the most when considering what to do for websites that I am working on. Here is my reasoning: The content is placed on the left where the eye naturally falls to begin reading. Posts or pages are the real drivers to bring people to (and bring them back to) your website, so they focus on the writing. As their eye moves to the end of the sentence, they might glimpse something of interest in the side column, so they go back to view it. If you advertise on your site, they may see the ad, and go back to it.

This reasoning led to the idea behind the layout. You cannot create the perfect site to be viewed they way you want in all browsers. You can attempt to address as much as you can, and hope that you did it well. My concern has been will a new user bother to scroll over to see what is in the sidebar if they cannot see it. This theme was designed to be 800 pixels wide. This is on the smaller end of what is available for most computer monitors. I believe then that any item placed in the sidebar will at least be seen by the user. To highlight the offerings in the sidebar, I used the red to embolden the section titles. All of this is meant to have them explore the site. Keeping them on the site will help develop the sale or the idea that they should subscribe to the blog.

Another feature of this theme is the multi-stage drop down menu for the pages in the navigation bar. Free themes use a technique to create the navigation bar by listing all of the pages on that bar. This really defeats the purpose of creating a structure to your page content, when you have many pages. On one site, I have over twenty pages, which would place twenty navigation tabs on the site. Crowded navigation is of no use to the user. By designating a page as a “parent” and other pages as belonging to this parent, you will have a cleaner look in your navigation with this theme. Only the parent page will be listed in a tab, while its children will be there in a drop down form.

The header is basic, and my intention was for it to be easily replaced. You would need to upload an image the size 766 width by 125 height to the images folder to replace the header. The image has to be a jpeg file with the name “Header.jpeg”. With the red lettering, a lighter image would be suitable. If you have a darker image, the lettering should be changed to a lighter color.

Finally, as with all of my themes, the footer contains pages common to a small business. I thought that this would be a good general theme for any business. It may be nice for a personal site too. If using it as a personal site, you will want to remove references to those pages.

Download the Cheesecake theme .

A three columned green toned theme with a modern design feel

I had the time to do my touch ups on this one, so I decided to release it today as well. As a reminder, all of the themes that will be listed on this site will be geared towards small businesses, but with minor changes you could use them for a personal site.

Modern Green is another three column theme, but here I place the sidebars on each side of the content. To be honest, I have always chosen the content to be on the extreme left when I was looking for themes, but I wanted to try having certain navigation elements on the left. This was the theme that I was planning to use for this site (the original header was different). Some of my favorite blogs to read have this structure. After focusing on content, as a user my eye drifts to the right first, so items that I might click on would be there. Advertising on the right side of the screen does better than on the left or bottom when the site is geared to a user reading a Western language. More site navigational items go into a left sidebar. A user will look for the archives or maybe even a blogroll, so placing them on the left will be fine for a user who wants to discover those links.

The header comes before the menu navigation in this theme. My idea was to have a logo in the left hand corner with the title and slogan on the right. The logo would have contained contact information. With that setup, a new user would know where they are, who I am, and how to contact me upon first viewing. You can arrange this yourself by manipulating the header in a graphics editor, like GIMP, which I will write about soon.

My inspiration for this theme was the stately brochure or resume. Bright white backgrounds can be nice; dark black backgrounds are energy friendly for your monitor; however, I wanted the feel of the not so bright paper. (With the current theme of this site, I did go for a paper pattern in the background). I thought that this would be a good basic theme for a consultant.

I think that I might repeat this next statement for each theme, but the footer contains a setup for pages that a business may want. If you are using this for a personal blog, you will not need a “Terms of Service” page. Have fun with it.

Download Modern Green.

A three-columned theme with a grunge background

One of my passions has always been the art of design. I will claim no mastery, but working on my own theme inspired me to create new themes of my own. Part of the reason for this site’s makeover was to share those themes, because I hoped that they might prove useful. My plan is to release a theme each week. I do have a few more that I might release early next week, just to have a few themes to choose from.

The inspiration for this theme came from following two independent coffee houses on Twitter. Each was using a different technique to pull in clients. When I thought about it, I felt that they could also use the blog format to help expand on their tweets. My idea was that this theme would fit any small business catering to the creative class.

The menu bar is at the top of the page, so if you have a products page and a user does not want to read a blog post, they can go to it immediately. The content (posts) will be placed on the left side of the screen, which is where the eye of a reader of a Western language will fall. I have two sidebars on the left. Parts of the site which may be accessed more often are on the left sidebar, while remaining items are in the right sidebar. Part of the idea is that if you add other pieces to these sidebars, like advertising, you will not have one crowded long sidebar where the user cannot find what he is looking for.

Since I had a business in mind, I did place in some links for pages in the footer that a business might want to include on their site, like a “terms of use” page. Also, I have the RSS feed placed there. These can be deleted. Look over the theme to see if you need such pages listed or not.

If you are downloading this theme for personal use, I think the only true elements that bespeak business are in the footer. Otherwise the theme would work for personal use. Have fun with it.

Download the zip file for the Building Swirl theme.