Frank Schulte-Ladbeck

Archive for the ‘Themes’ Category

A theme for real estate professionals who want to blog.

When you work in real estate, and you are on the net for work, you find yourself encountering the same people in different places. Rich Danserau, over at Postive Real Estate Professionals, told me that I should check out the work of a lady named Rebecca Levinson. Since I trust Rich’s advice, I headed over to her ActiveRain blog. Needless to say, I was impressed. When we connected on Facebook, I did pay more attention to a program that she had developed to assist other real estate professionals become top bloggers called Blogging Tune Up. She works with only one real estate professional in a market with their blogging skills to help them succeed. She has many happy clients.
    I told Rebecca that I would love to create a Wordpress theme for her to give away to her clients, so she gave me a few specifications, and the Real Skillz theme was born. The theme is in blue tones. The header comes first with the blog title and slogan centered to make the first impact for your brand. After the header you have a menu bar. The categories are left in the sidebar of this theme. If you choose your categories and sub-categories carefully, you can make a greater impact by having them displayed here. Rebecca had suggested having an about me section in the sidebar (a place to write about yourself to help build your brand). Add the “About Me” widget to your sidebar, and I would have this as your first sidebar item.
    The theme has two columns: one area for the posts; and one for the sidebar. This allows your blog posts to command more attention. Since real estate professionals rely on many visuals to help their clients, the theme was designed with the idea of making images pop. The blue background helps images of the home stand out. There is also a black border around the images to help emphasize them. Most photographer sites use black backgrounds to help make the images stand out, but Rebecca’s choice of blue is clever. You can still write content that will be a focus and have the images noticed. To help make content important, a “related posts” feature is built into the theme (no plugin needed). To have the sidebar content be noticed, a lighter blue was used for the backgrounds there. Currently, the search feature is the top element in the sidebar. The next element is quite nice to encourage site exploration: a tag cloud. The post headers emphasize the title, while the post footers have the post meta data in a light blue bar. This is where your tags will be displayed.
    Lastly, most of my themes, I leave the RSS button down in the footer, so you can place the RSS where you would like. In this theme, the RSS button is located below the post title, where the other meta data like the name of the author is located. As with all of my themes geared towards businesses, I have a reminder to include a Terms of Service and a Privacy pages. If you do not need them, you can remove them.
    If you need help having your blogging career start off on the right foot, then you should head over to Ms. Levinson’s site. She may be able to help you.  Download the Real Skillz theme.

A theme inspired by some steampunk objects and a video. The theme contains dark tones with a more sci-fi feeling than Victorian.

    I like steampunk, and I have been working on a few object for around the house and garden. After seeing the video for “Sleep Isabella” by Abney Park on YouTube, I thought that creating a Wordpress theme may be fun. I did go looking for steampunk websites to see what they had done. I did like them, but many seemed to focus on the look of printed material, and I was thinking “what would a steampunk computer interface look like?”. Since seeing the other sites, I do want to create two more steampunk inspired themes. One theme will be closer to Victorian/Edwardian printed material, while the other will be a play on a Biedermeier desk.

    First, if you know me, then you know that I am concerned with eco-issues, and I like the idea of a dark theme to save energy via monitor usage. I focused on using different dark textures with bright highlights. The use of stripes was based on an outfit from one of the singers in the video. I am not the best when it comes to creating web graphics. I opened up Gimp, and started creating collages from some images that I had, so these could be better. I would love to create a better clock icon for the date. Still, I like the results.

   Fonts became an issue. For the next theme in this series, I will work with the @font-face in the stylesheet, and see if I can find more appropriate fonts. For this theme I chose a variety of fonts that are fairly common which I thought worked. Most steampunk sites work around the font situation by placing fonts in the images, but for a free theme, that would mean making a header image with a fixed slogan on it. I wanted users to have their own options. I think that I would add images to this theme.

    The menu bar has drop down submenus. I went with colors that I thought worked well for a dark theme but also reflected some common colors seen in steampunk objects. For visited links, I had the color go gray. For hovered links, I simply went to an itallic font. The brass bar that is seen in the index page is not used for pages or single posts; I thought that would be too much. That image is in a div element, so you can easily add it to those pages if you want.

    Overall, I think this theme works for deign sites or retailers who have a creative edge. I was thinking of developing a design site for objects that I collect after I had created this theme. The dark background does show of images. I saw some retailers who may like this type of theme. I might modify some icon elements to better fit with the specific business.

   Tell me what you think. Does it meet your vision of SteamPunk?

Download the theme.

A two columned theme that was inspired by my garden.

Read the rest of this entry »

A two columned theme with a dark background and red accents meant to be an energy efficient for monitors.

Read the rest of this entry »

A three columned theme in brown tones

With the Voyager series, I was experimenting with using variations of some basic colors: red, green, and blue. My own tastes tend towards earth tones. I find that when used in web design, earth tones produce more elegant looking themes. There are many websites with white backgrounds for small businesses, but as the web matures, I believe we may see more sites focusing on other tones, which will create more individuality. This theme begins a series where I want to explore earth tones in a site.

About the theme name, I am following my habit of naming the themes after songs. In this case, I was listening to Charles Mingus’ recordings on the Candid label. Great work if you like jazz. “melody of the Drums” was one of the pieces recorded by Mingus for that label.

I did not have a specific business in mind when working on this theme, but I did discover that a few Realtors who had sites in similar tones. I began to think that the theme could be good for a clothing shop. Images are framed in a lighter hue to make them stand out, so it may be nice if used in that field.

Features:

Header: I like the navigation on the top for this theme, because I imagined that an image could be placed on the black background of the header. I left the header large for that reason. A light colored logo would fit well over this subtly textured dark header. I am sticking with the multi-level navigational elements. With this theme, I think that this adds a cleaner, elegant feel.

Sidebars: I have two sidebars that are thin. My thoughts were that widgets could be added, and they would be seen quickly by a visitor. Having one sidebar will have widgets or other sidebar elements pushed down well below the fold. Not all users will scroll down your site, so I would have your important elements towards the top of the sidebars.

Article body: Again, the hues are meant to have elements subdued. The meta data under the post title is de-emphasized, while the meta-data in the footer is highlighted by a box. The images have a lighter colored border to help them standout. The fonts used are more typically used for blogs, but I felt that they made reading easier on the eye.

Footer: I put in links for pages that will be better for small businesses, so if you are using this theme for a personal blog, you will want to edit the Footer.php to remove those page names. I left the rss feed icon in the footer, but I would make a social media box in the sidebar above the search box. The footer is not the place for this element, so think about where you may feel works better.

Other features: the theme has a print stylesheet to make printing a post easier. Also, several languages were added to make the theme available useful in various countries.

Download Melody of the Drums.

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.