Reflecting the Designer

Holiday Slideshow Contest

Sarah — Tue, 27 Dec 2011 15:09:25 +0000

ProShow Producer is an excellent slideshow software. It’s easy to use, and it has a ton of built in transitions and effects. There are definitely some quirks with it as with any software, but for putting together an easy and professional looking presentation, it’s definitely the software I’d recommend.

Photodex (the maker of ProShow) sporadically feature slideshow contests so that people can show what they’ve done with the ProShow software. The most recent was a Holiday Slideshow contest that actually just ended today. I threw a quick video together in the few hours before the deadline for a chance at $200 and free upgrades for life. Not sure that my speedy work and lack of pictures will win anything, but it was fun to do and provided a good memory for my family. If I would have had more time, I would have done more editing to some of the photos and worked out some of the effects a little more (as well as gotten some better pictures to replace a few of the current ones with.) But, that’s life, and there’s always next year.

This is how the final product turned out.

As a note: If you ever enter a contest like this, make sure to post your video to YouTube rather than Facebook as the resolution is much better. I learned that the hard way this year.

Using Stock Photography

Sarah — Wed, 30 Nov 2011 07:55:38 +0000

As a designer, there are times when it’s best to create all of your own graphic elements, and there are times when it’s wisest to use and edit stock images. There is no need to reinvent the wheel, after all. However, not only is it against copyright to simply grab images from the web, but it’s also unnecessary. There are some great royalty free image sources that you don’t have to pay for such as Microsoft Clip Art. However, they are fairly limited in their selection, and the images are usually only for web resolution and not suitable for printing.

So where do I turn when I’m working on a project that needs a very, very specific look? I go to iStock to find just the right elements I’m looking for, even if it’s just a subtle pattern or background element that helps me to capture the exact message and feeling I want to convey. For example, the scroll work on this site as well as the pattern in the green banner are both highly edited stock images purchased from iStock. Even if I don’t end up purchasing an item, I like to just browse through the images and design for inspiration.

I’ve also used iStock fairly exclusively for audio files to use presentations. They have a tremendous selection of both sound effects, jingles, and themes that are great for use in commercials or presentations.

Not only does iStock provide a massive selection of vector graphics, photography, video, and audio files; but they also have very competitive pricing. They work on a credit system, and you can either buy credits individually or go with a plan if you know you are going to be needing to use a lot of files. I usually purchase a large quantity of credits at a time so I can get a discounted price.

Of course, if you are a designer or photographer, you can also submit your own work to be posted on the site and earn money from your talent! They are fairly strict in their guidelines, though (and thankfully so). They also have a wonderful referral program that allows you to earn credits when someone you refer purchases credit through iStock. So, if you haven’t done so already, check out iStock by clicking on the image above!

Publish Posts to Social Networks Automatically

Sarah — Thu, 03 Nov 2011 02:53:09 +0000

If you are still manually adding your posts to Facebook, Twitter, LinkedIn, Hellotxt, or Statusnet, it’s time to check out TwitterFeed! Twitter feed allows you to automatically pull as many feeds as you like to be published to all of the above mentioned social networks every time new content is added through those feeds. This is a great option for busy people who don’t have time to be posting to their social networks continually but who need fresh active content on those networks. If you got here through one of my social networks (i.e. facebook or twitter), then you are using TwitterFeed in action.

TwitterFeed is not a plugin and does not add anymore weight to your site at all. It couldn’t be more simple to use either. Here’s all you need to do.

Register an account with TwitterFeed. (It’s free and just uses an email address, name, and password.)
Choose a feed you want to use. (I pulled my feeds from my feedburner account.)
Choose the services you want your feed to be sent to. (You’ll need to authenticate these individually the first time, but it takes just a few seconds to do.)
Choose a campaign name as well as optional tags for your chosen service.

That’s all there is to it! You can repeat these steps with as many feeds as you would like to incorporate, and you can also use different social network accounts depending upon the feed. With Facebook, you also have the option of choosing from either pages or your personal profile. I also love the fact that TwitterFeed incorporates bit.ly (the popular link shortener) so that your links are nice and tidy.

It takes a little bit for everything to go through the first time, but once the feeds are successfully grabbed by these networks, they will start posting them within 30 minutes from the time new content is added through your feeds.

Leave a comment if you use and love TwitterFeed or if you are using a different solution for automatically posting blog content to your social networks!

Conditional Code to Display Login and Logout Links

Sarah — Wed, 02 Nov 2011 10:31:26 +0000

Conditional Code is a wonderful way to set parameters around parts of your site. Basically, it does just what the name implies. It allows you to set the conditions by which parts of your site will be displayed or interacted with. I’d recommend familiarizing yourself with the basic conditional tags from the WordPress Codex. Make sure to bookmark this page for easy reference. I use conditional code all of the time with the handy and easy to use plugin called Widget Logic. If you already use that plugin, the following information will hopefully help you to see other ways you can make use of it.

Every WordPress theme should already have some conditional code built right into it. For example, your Archive.php page is filled with it. It tells WordPress to pull certain items into a list if specific qualifications are met. For example, if you click on a tag, WordPress is told to pull all of the posts related to that tag and display them in the way that your theme is formatted to show them. That’s just one tiny example. The question is, how can you add your own conditional code into a site, and why would you want to do this? Here are just a few reasons for you to become familiar with conditional code:

Display a header image or text differently depending upon the page, post, category, or viewer
Display a widget on only certain posts, categories, pages, or to only specific viewers
Display menus or menu items on only certain posts, categories, pages, or to only specific viewers

The images below show a membership site that I’ve just created for a client (using an Artisteer generated theme with the code tweaks that I show you how to do on this site). I made use of conditional code for both the login feature as well as the advertisement button in the header. Notice the differences between these two images, and make sure click on the image to view them in full scale.

I’m going to demonstrate who you can easily create the same type of login and logout text that appears or is hidden depending upon whether the current viewer is logged in or out.

1.) Let’s get started. First of all, go into your header.php file, and add your text with the links that you’d like to create. Below is an example of a simple div wrapper I created with the linked text to both login and register.


Login | Register

Note: Make sure to see my post on how to add social icons with a hover effect for more details on adding and styling divs within your header. I did not include the code used for the search bar in this example because I’m only illustrating the conditional code aspect.

2.) The above code works fine, but the problem is that it will always say login or register even after the viewer has logged in, which may cause some confusion. Let’s add the conditional code to it so we fix that problem.


	
	Logout
	
	
	Login | Register

Notice above that we added the condition if a user is logged in they will see the word “Logout” which links to the WordPress logout permalink. Below that code which ends with

you’ll see that the next condition is set for people who are not logged in yet. It’s the same exact conditional code with just the addition of a little exclamation point right before “is_user_logged_in.” Adding the exclamation point before any conditional code is like adding the word “not” to the condition. Of course, the other changes are that you have both the text with links for Login and for Register.

3.) Now, go into your style.css file and style how you want your text to appear. The following is what I did for mine. Remember that I called my div class for the login “header-login” so I need to match that same class in the style.css file for the styling to appear. This code demonstrates how I added a background for the text with a shaddow and some padding. Again, this does not include the code I used for the search bar styling, to avoid confusion.

.header-login
{
  position: absolute;
  z-index: 2;
  display: block;
  padding: 15px 15px 0 15px;
  margin: 0px;
  width: 330px;
  height: 35px;
  top: 0;
  right: 0;
  background-color: #000;
  -moz-box-shadow: 0px 0px 10px #000;
  -webkit-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px 10px #000;
}

.header-login a,
.header-login a:link,
.header-login a:visited,
.header-login a.visited,
.header-login a:hover,
.header-login a.hovered
{
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  color: #7d7d7d;
  display:inline;
}

.header-login a:hover,
.header-login a.hovered
{
  color: #006e04;
}

So, that’s all there is to it. You can now add this same type of feature to your own site, and I hope you see how many other possibilities are opened up through this. I’ll do another post to demonstrate how I used conditional code to display the two different image links pictured above dependent upon the logged in user’s membership role.

Make sure to comment if you have some other great tips on using conditional code throughout your site.

WordPress Membership Plugins

Sarah — Fri, 28 Oct 2011 04:02:25 +0000

I’m currently finishing up the design and setup for a Membership Site. It’s a fairly intensive site offering separate forums, live chat, articles, live training, and separate newsletters based on the membership level purchased. There are a ton of membership plugins available and the pricing options vary from free to very expensive. Of course, the features and integration levels also vary extensively. This post explores two options that are not good, in my opinion followed by a really terrific membership site solution.

It’s been a while since I’ve done a membership site, and because of the nature of this site we originally thought we would need to purchase a premium plugin. We first went with Magic Members because of the good reviews I heard, but that was definitely a mistake! Both my client and myself attempted purchasing the initial single license package three separate times using different information, and we had the following problems.

The page we were taken to after purchase is completely messed up in its display (which definitely does not give you confidence after just putting down $97!)
We were told that you can download the product from a link on that page, however there is no plugin link available.
We also received multiple duplicate emails from Magic Members with the exact same information page, however at the top it said that we wouldn’t receive our files until after the fraud check was complete.
Both of us failed the fraud check and weren’t notified until almost two days later! This was after attempting to use a perfectly good credit card and a perfectly good PayPal account, both of which are used on a regular basis. It’s humiliating and angering to fail a fraud check when you are the actual OWNER of the payment method being used!

So, I can’t actually review their product because I never was able to test it out. On a good note about this plugin. It looked like my final attempt actually did go through (although the process was too long and I’d already given up on this company). They also did give me a full refund to my PayPal account as well. I’m actually quite thankful it didn’t work out with Magic Members, because it led me into a different direction that was much simpler and more cost-effective.

The second option we attempted was also a failure. This was with MemberWing X. They allow a trial version so you can test drive the product. Looking good so far! It’s got a ton of great features such as multi-level memberships, the ability to purchase content, a very nice protection system for content, and with this plugin it allows you to actually have “teaser” content at the beginning of hidden pages or posts. However, there were some deal breakers for me on this one.

The actual product is very expensive. (The client would have been tempted to fork over the dough had it met their needs)
It doesn’t allow you to actually redirect someone from a page or hide the page or post itself. It only hides a portion of the page. This would be fine, except that with a live chat installation, the chat always still appears on the page and it knocks the teaser below it. Defeats the purpose of the membership aspect.
This plugin also has a totally separate login system from WordPress, so WordPress users are not necessarily associated with the MemberWing users. This is a huge problem when integrating a forum and chat that need to have membership capabilities all integrated in. The purpose of being logged in as a member is to have immediate access to all of your content, forums, articles, newsletters, and chat associated with that membership.
There are a lot of steps for integration and the set up and control panel are not user friendly at all.

Because of those issues, our hunt brought us back to a little plugin called s2Member from Primo Themes that I’d actually installed for a client a couple of years ago. As they say, “The third times a charm!” and so it was for me. s2Members has improved greatly since my last interaction with them, and I Fully recommend this plugin! I have it up and running on my clients site right now, and these are the features I LOVE!

It integrates seamlessly with WordPress users and adds the new membership levels you create into the WordPress user roles. So, this means whenever someone registers, they are automatically assigned an s2Member role.
Because of it’s integration with WordPress, it also works beautifully with forums and chat. I installed Simple:Press Forum and AddonChat (A very fast Java based chat platform) to my client’s site because they both pull WordPress user roles and will automatically log users in (depending upon their membership) to the forums and/or chat available to them.
It allows you to easily hide content from pages, posts, categories, or downloads very, very easily through the Membership Dashboard or directly on the post, page, or category editor.
It allows for multiple membership levels including a free membership level.
It integrates perfectly with PayPal allowing you to create subscription buttons, modification buttons, cancellation buttons, and payment buttons all from the WordPress Dashboard. You are also able to offer introductory prices for subscriptions as well.
It also integrates perfectly with popular mailer programs such as MailChimp and Aweber. All you need is your API Key, and the mailing list IDs and s2Membership takes care of the rest!
The control panel is extremely user friendly and intuitive.
It’s completely customizable and open source.
The best part…It’s completely free! They have a Pro Version as well (which I might end up with eventually), but the free version is doing a terrific job for now.

A couple of things to note. If you are tied to being able to talk to support or customer service, you might be a little frustrated. There is a lot of support through documentation and forums, but not a direct link to get support personally. However, I’ve found all of my questions answered through the forums or supporting documents and videos. You can find that support on the s2Member Plugin forum and the actual plugin site itself. I’m going to share a great treat I just found today having to do with the s2Member role ids…but that’s for another post.

Creating a New WordPress Page Template

Sarah — Tue, 25 Oct 2011 02:25:02 +0000

Artisteer themes, by default give you a one-column page template as well as a template with your sidebar(s) if you choose to create a theme with a sidebar. In your page editor in WordPress, you’ll see in the right hand column just below the “Publish” button, there is a drop-down menu that gives you your page template options. So, on any page, you can choose either the one-column or default page template.

What if you want a unique page styling or design for a specific page on your blog other than just one or two column options? You would simply need to create a new page template. With a new page template, you could have a completely different header styling, call to a separate menu, create a splash page with a separate widget area for sliders, and the list could go on and on.

I’m going to give you an example of how I used this technique to create a unique home page for a recent design project. You’ll notice in the example images below, the home page has a large banner area with a slider to one side and some text to the right, but no regular sidebar. The second image is the default page template with the regular sidebar and no extra banner area in the top.

First, I’ll show you how to create the new page template, then I’ll show you how to modify and style it.

1.) Make a New Page Template: Open a copy of your page.php or your onecolumn-page.php file in a text editor like Notepad (In my case, I opened up the onecolumn-page.php file because I didn’t want the regular sidebar to appear on this page.) Add the following code to the top of the file and be sure to give your template name something that defines what type of page you are making:

2.) Save Your New Template: Hit Save As, and rename this page as something different (matching the template name you gave it). Just make sure that you include the -page.php part at the end. In my case, I entitled my page splash-page.php.

3.) Edit Your New Template: What you add or take away from the template is completely up to you. In my case, I wanted to have a different header for the page. The only change I made to this new page template, though, was to call to a new header file. To do this, I just adjusted the following code from this:

to this

Notice that in the first line, there is nothing within the parenthesis. this just tells WordPress to find the first header.php file it finds. In the second version, I’ve added 2 in quotation marks because I want WordPress to find the header-2.php file that I created.

3.) Create a New Header File: Open up your header.php file, and save it as header-2.php. Now, add the changes that you want within that new header. In my case, I added some extra sidebars to the header. See my tutorial on how to add a widgetized sidebar into your header.

The following is what I added to the end of my new header file because I wanted my sidebars to rest directly on top of the page content.

This is what the bottom of the original header file looked like after the final div of the menu code:

This is how the code looked after I added my banner to the new header file:

Note: This is a great way to add a secondary menu that can only be found on certain pages (for example, if you want different menu items shown on a certain page.) Use my post on how to create a secondary menu to see how you can do this. All you have to do is register a new menu, then replace the primary menu from the new header file with your new secondary menu, and if you want it to look the same as your other menu, you don’t have to adjust anything else.

4.) Style Your New Header: This would apply only if you are adding something that you want to look completely different (rather than just a different menu). In my case, I just needed to add style to the new sidebar area and the wrappers that surrounded it. This is what my code looked like that I added to my css file:

/* begin Banner */
div.banner
{
  position: relative;
  width: 100%;
  height: 285px;
  background-image: url('images/banner.jpg');
  background-repeat: repeat-x;
  overflow: hidden;
}

div.banner-center
{
  position: relative;
  width: 900px;
  height: 285px;
  margin: 0 auto;
}

div.banner-left-wrapper
{
  position: absolute;
  display: block;
  width: 555px;
  height: 265px;
  top: 10px;
  left: 10px;
  border: 1px dashed #965b4c;
}

div.banner-right-wrapper
{
  position: absolute;
  display: block;
  width: 300px;
  height: 285px;
  top: 5px;
  right: 10px;
}
/* end Banner */

That’s all there is to it. The possibilities for styling or editing the code are endless. Remember, that you can also call to a new footer in the new page template that you create, modify the way that the loop is displayed, or call to different sidebars.

Other Suggestions:

If you want to adjust how categories appear, simply create a new archive.php, modify, and save it as category-(insert ID here with no parenthesis).php file.
This would also apply to styling a single post, etc.

Recognized by WebHostingSearch.com

Sarah — Wed, 19 Oct 2011 15:11:10 +0000

WebHostingSearch.com is your number one source for quality reviews on the best web hosting available. They’ve done (and continue to do) all of the field research necessary in order to provide the most up-to-date and comprehensive listing of available web hosting including detailed information and reviews about each one. They are also a great source for web design and blogging articles and resources. I’ve bookmarked a couple myself to keep on hand for future reference.

When they contacted me recently to let me know they wanted to include Reflecting the Designer in their listing of preferred web designers, I was thrilled! The following is what they had to say:

“Reflecting the Designer web design service is focused on the success of your website. With it’s touch of outstanding and competitive art of design, this award was given by Webhostingsearch.com to recognize it’s incomparable
web designing capabilities.”

Handling Multiple Blog Authors

Sarah — Tue, 18 Oct 2011 05:30:56 +0000

There are a lot of reasons for including more than one author or editor for a site. The bigger your site or business is, the better it is to have more voices who can give credibility and authority to different subject matters (credibility being the key). This post will discuss how you can manage and display multiple users within your blog.

Adding More Users

WordPress makes it simple to have several different users for a site, and you can limit their accessibility to other parts of your site quite easily. To set up a new user, simply go to the User Panel in your dashboard, and click on “Add New User.” You’ll need to have their email address to do this, and you’ll just need to create a simple username for them as well as choose what type of user you’d like them to be (Admin, Editor, Author, Contributor, Subscriber). Admin, of course have complete access to the entire site, so you need to be careful who you grant administrative rights to. Most people would either fit into the author or contributor user type (Those who will just be posting occasionally.) If you are a professional business or organization, I STRONGLY recommend getting a proofreader/editor who can ensure that the grammar, spelling, and wording choices are correct (Something I need for this site). That user should, obviously, have the user type of editor.

Once you have added a user, they will receive an email giving them a link to your dashboard and their temporary login information. They will then be able to update all of their profile information on your site, add a picture, etc. Even though they are able to log in to the dashboard, they only will be able to access the parts of the site that you’ve given them permission to. For example, an author can add a new post, however, they are unable to edit any existing posts (other than their own) and they also have no ability to add to or edit widgets, menu items, the theme, or other site features.

Displaying Authors

If you already have a site using multiple authors, you may want to consider giving viewers more information about the different authors/contributors on your site. I recommend having one page dedicated to giving basics about these individuals. Make sure to have a clearly visible link to that page either within your menu or sidebar. (See example image taken from a Christian resource site in development.) On your Contributors page, you can list as much or as little information as desired keeping in mind privacy of your contributors as well as what viewers would be interested in knowing. Basics would include first name, experience, and their post contribution topics. Viewers don’t need or want to know too much personal info. (besides the fact that it’s unwise to share online). They probably don’t care to know that a contributor has a dog and two cats unless they are writing posts about animal care. Make sure that what is written clearly and concisely states why this person has the authority to be posting on the subject manner that they share their posts on. I also like to include a little thumbnail of the author, but that’s completely optional. Again, keep in mind the privacy of your authors and make sure that they are in full agreement with whatever you decide upon displaying.

Accessing Posts by a Particular Author

Viewers also will probably want to easily access all posts by a specific author. WordPress makes this very simple as it’s already included in the codex for archives. The basic url structure for all posts by author is simply http://yoursite.com/author/author-username. Remember, if you want to list all posts by the admin, you’ll need to use /author/admin as the last part of that url rather than your display name. So, how do you make use of this? I recommend adding this link beneath each contributor’s name or info using the text “Read all posts by (insert author name here.)” Again, the example image above pictures how this will appear. Posts will be displayed as any other archive list is displayed for categories or post tags. The additional elements would include the author’s gravatar if provided along with the author’s display name.

Up for a Challenge?

If you only want a single page that lists all of the authors and includes a listing of their posts on that single page, I’d recommend checking out Scott Bressler’s post on how to create a special author archive template for your site. He’s actually already provided all of the code necessary in a template page. All that you’ll need to do is to adjust the styling of that content. Note: This does work with Artisteer generated sites, however, you’ll need to use some of the styling for posts, headings, sidebars, etc. found in your style sheet to incorporate in the given style. Also, you’ll need to add your specific sidebar php to the file as well (simply use your current archive.php file as a reference for how to go about this.)

If you are not interested in digging into the code that much, I’d recommend simply sticking with the easy steps as listed above. As always, feel free to leave a comment with your questions or suggestions!

Display, Prayer Letters, Prayer Cards, and Business Cards

Sarah — Tue, 11 Oct 2011 12:07:26 +0000

I’ve been doing several print design projects recently which is always a nice change. It started with some design edits for a regular client’s business card. I had done her original card design, and she recently decided that she wanted to remove the Facebook info and icon. She also wanted a matching postcard design, too. While I was editing, I decided to spruce up her look a little with a slightly different repeating background and a matching fancy scroll going down the left hand side of the card. Love doing the girly design!

The second project was to design a missionary prayer card for a dear friend of mine. She had a couple of really wonderful pictures to work with, and I was able to find another shot from above of the main city she’ll be going to. I wanted to give the card a little bit of a rough, African feel with the textures and the brown undertones, but I also needed to incorporate some blue tones because of what she was wearing in the picture as well as the logo for her mission board. To do this, I added blue text, but so it would match the style of the entire card, I added a color burn blending option so it would pull in a little bit of the texture from the background.

The only tricky part of this design was to create the map of Africa that highlighted the Democratic Republic of Congo. I was able to finally find a low resolution map image that depicted Africa with the countries outlined. I upsized the image considerably, added the “smart-sharpen” filter to smooth out the edges, and also adding a blended layer above it to give some texture. I then was able to find a picture of the actual country which I overlaid onto the map and added the larger version beside the image of Africa. There were of course a lot of other steps in the process, but those were the basics.

The design work I just finished up was a missionary display along with matching letterhead for this families prayer letters. This was a fun one to do because they are going to Italy. I enjoyed playing with a lot of classic Italian textures, patterns, and colors.

I used Photoshop for each of these projects because of the need for extensive photo editing in each as well as the need for multiple layers of textures and blending options. If you are in need of some print design, make sure to contact me so we can discuss your ideas. I’d love to hear from you.

BlueHost Offers Excellent, Affordable Hosting Service

Sarah — Mon, 10 Oct 2011 12:49:07 +0000

I’ve worked with several different hosts while helping clients set up their websites. There are a few I really don’t enjoy working with (Fat Cow and GoDaddy are two of my least favorites). There are a few that I really enjoy working with (Host Monster, Host Gator, and Blue Host) because of their user friendliness and great support. I have a personal site that I’m working on, and I purchased the domain through GoDaddy because of a discount for being a current customer. However, I knew right from the start that I wanted to get hosting through someone else. GoDaddy’s site is beyond confusing, and they often overload their servers so that my website will be down at random times completely unexpectedly.

I’ve been looking at BlueHost for a while and I decided to take the plunge. I was thrilled with how fast and simple it was to transfer my domain over to BlueHost. They had such easy to follow instructions, and they even had step-by-step instructions for changing the domain on the GoDaddy site. (Something I have struggles with on GoDaddy as their site has so many strange options.) The BlueHost control panel is very intuitive, and I was literally done creating an account, transferring my domain, setting up WordPress, and importing my Blogger content over to the new WP install within 30 minutes from start to finish! I have never encountered anything like it!

BlueHost has a few other things going for it, as well.

Longevity: BlueHost has been in business for a long time (since ’96 I believe) which is probably why they are so streamlined and efficient by now. They have a very large client base that they’ve kept happy for a long period of time.
Inexpensive: They keep their prices very affordable. Hosting begins around $6 a month, and you can set up a new domain for free with that hosting package.
No Pushy Salesmanship: Even though they offer you additional items, you don’t feel bombarded with them or confused by what you should or should not be adding like you do with GoDaddy for example.

I haven’t had to contact their support yet, so I’m not sure how they are. Everything was so easy and clearly explained that I didn’t need any help, and that kind of support is the best there is, in my opinion.

So, if you are in need of a good hosting platform, check out BlueHost and I promise you won’t regret it.

**Note: If you are currently using WordPress.com for hosting, you should definitely consider making the switch to self hosting through a company such as BlueHost. You are limited in so many ways when your hosting is just through WordPress by not being able to add or edit custom themes (like mine, for example), not being able to add any widget with java-script, not being able to add plugins, etc. It’s definitely worth your while to get a domain and make the switch!