www.reflectingthedesigner.com

Tools of the Trade

As I was working on redesigning theStock411 Wordpress blog, I implemented two fantastic Wordpress plugins. One of these plugins is WP-Sticky. I’ve known about this plugin for a while, but had never used it. It’s a nice simple way to keep one post at the top of your blog at all times. Now, there are a couple of items to note if you are using this plugin after creating your theme in Artisteer: You must change a tiny bit of php if you want to hide the date. I found a couple of forums that had parts of the following information:

1. Go to your Main Index PHP and find the following code:
   <?php if (!is_page()): ?><?php ob_start(); ?><img src=”<?php bloginfo(‘template_url’); ?>/images/PostDateIcon.png” width=”17″ height=”18″ alt=”" />
   <?php the_time(__(‘F jS, Y’, ‘kubrick’)) ?><?php }?>
2. After <?php if (!is_page()): ?><?php ob_start(); ?>, add the following:
   <?php if (!is_announcement() ) { ?>
3. This is basically telling the theme not to show up the date if the post is a sticky post listed as an announcement specifically. This is important, because while you can choose “no date” in the WP-Sticky setting, the icon will still appear. I’m sure you could just hide the icon, and put this in front of it instead, then you would still get your little announcement banner underneath the heading without the other icon elements. However, I chose to just have a header with nothing underneath at all, so I used this method.
4. Just one more step. Because Artisteer lists the date as time, you’ll need to change that tiny part as well. This is what you’ll need to do. In that same bit of code you were just working with, change <?php the_time to <?php the_date and you are all set.

Another note on WP-Sticky. You must choose the announcement radio button on the dashboard of the post you want to be at the top of the page. If you just choose sticky, it will remain on the front page, but not necessarily the top.

The second plugin I’d like to highlight today is Custom Post Background. It allows you to add an image behind the text of your post, which is amazingly helpful. If you’ve been trying to do this by implementing a table into your post, you know how frustrating it is! This plugin solves the problem for you sooooo easily.

Below is an example of how I used this plugin to style the sticky post for theSTOCK411.

My client wanted this sticky post to stand out from the others so it looked more like a part of the main design rather than just a post. Of course, because of the information listed, he also needed to be able to edit it on a monthly basis, so just inserting an image into the post by itself was out of the question.

So, I created a background image in a png format that matched the design I created for the rest of the site. I then used the handy plugin to insert it into the post. I did have to do a little styling to the text in order to give the text inside of the image some padding rather than being pushed right up against the sides of the image. To do this, I simply added the following code in the html part of the post editor:

<p style=”text-align: center; padding-top: 20px; padding-right: 10px; padding-left: 10px;”><strong><span style=”color: #ffffff;”>my text was inserted here and then closed with</span></strong></p>

I also made sure to center the three images below the text and add necessary margin space to them so that the entire background image showed up correctly, and so that they were spaced evenly in the post. The nice part about this is that not only do Search Engines pick up all of the text in the post, but you can also easily edit the post as desired without having to create a whole new graphic.

One more thing to remember when using this plugin: You’ll need size your image appropriately in proportion to the amount of text you want to add. the image will only appear as far down as the text goes, so if you don’t have much text your image will look cut off abruptly.

SPECIAL NOTE: if you plan to copy and paste any code from this post, please make sure to do so using a text editor and change the direction of the quotation marks.

Hope this information was helpful, and please comment if you have any additional tips or questions.

Well, I’ve been very busy on some projects recently as well as other “life” stuff that have kept me from being able to post as much as I’d like to. I just completed a full Wordpress website for a company that I did a WP blog for several months ago. They wanted their whole site transformed and consolidated into one Wordpress Site. It was a huge process as I had to set up Wordpress in their current hosting location, transfer the old blog over to it, and completely design and add content to their site from top to bottom. A huge thanks to a couple of helpful posts from Digital Raindrops on how to successfully add more widget spaces going horizontally across the bottom of the page and still in keeping with the format of the other widgets as far as design. Widget Logic, a Wordpress Plugin, was also a huge part of this site so that almost every page displayed different widgets that were applicable to that page. I also used a separate page template for the home page, but honestly I had to dig around through multiple posts online and work out things myself before getting the desired effect so no kudos to anyone on that part, although Wordpress does have some helpful articles on the subject. The key to page templates is to properly link to new css that you create for that template. Contact me if you are interested in taking a look at that site.

Other projects I’ve been working on is the logo and branding for a local church (still working on that, and will post pictures once complete.) I also just finished doing the blog redesign for My Skin Concierge, Ava which I like to describe as a Victorian Pink Explosion. It’s the ultimate “girly-girl” site, but why not with a topic like skincare? I still need to do a couple of little things on that one, and Ava will be organizing and structuring her menu items how she wants them when she has time.

I told one of the visitors to this site that I’d work on a matching WP theme, Twitter, and YouTube Channel for them, but after that I’m going to be stopping for a little while so I can get caught up on the rest of life. Thanks for your patience!

There are several new prospects on the horizon for my husband and I that require my utmost attention right now, so I’ll be taking a break from any new design projects for a while. You can feel free to ask me questions, but I will not be able to take on any new customers until further notice. I have a couple of projects to finish up for some current customers, and I’ll keep you posted when I’m ready to start-up in full force again. I will still be writing the occasional blog post, and you can always feel free to comment on previous posts or ask a design question.

Take care!

Well, as you can see if you’ve visited my site before, I’ve just updated the theme again. I like to create new design themes for my own site both for variety as well as to demonstrate some nice Artisteer, Photoshop, and WP tweaking techniques. I’ll list a few of those techniques in this post.

Photoshop:
Designing your own site elements really helps to tie the whole site together completely. By creating your own glare image, buttons, header images, etc. you can give your site a completely customized look without much work. For example, I created the background pattern using Photoshop. All I did was grab a plaid image off of the web (make sure you always only use copyright free images or pay for stock images!) I then, added the green, semitransparent crisscross stripe on a 100px x 100px image of the pattern. I also made sure to define it as a pattern so that I could use it in other elements of the design.

Artisteer:
The beautiful part of Artisteer is that it allows you to easily add your own graphics as texture, backgrounds, glares, etc. I uploaded my 100px x 100px image of the plaid and chose a tile repeat. I also chose the Overlay setting for the blending option in Artisteer and gave it a tiny bit of transparency so that the gradient I chose for the background would still show through nicely.

Artisteer comes with its own texture and pattern designs as well, which are nice to use. The header, button header, and footer are all sporting one of the many built in Artisteer texture graphics.

A great tip for Artisteer is to choose a nice solid background image or texture as a canvas for buttons and a logo you add to the code later. Note: Always make sure to make your header text as small as possible, the same color as your background, and put it in an out of the way spot in your header. This way, search engines will still find the text, but you will also be able to add a graphic as your main title.

Wordpress Trick:
Because I had a relatively plain header to start with, I was able to add my own clickable logo button and social icons to make the header look complete and give it nice interactivity. To do this, simply follow these steps:

• Create your images and upload them to your theme’s image folder.
• Add appropriate div classes and links to your Header PHP. It should look something like this (added code in orange):
  <div class=”art-Header>
  <div class=”art-Header-logo-png”onclick=”location.href=’URL TO THE LINK YOU WANT’;” style=”cursor: pointer;” title=”Home”></div>
  You’ll need to copy and paste this same code for as many images that you want to add. Just make sure that you label them each based on what they represent, and of course change the display title url to match. You’ll need to use the exact name for the CSS.
  
• Add  code to your CSS to display your images in the way that you want. Go to your Style Sheet CSS and find this /* begin Header */ Here is an example of the CSS code you should add for the example above (note, make sure to keep the div order the same as it is in the Header PHP):
  div.art-Header-Logo-png
  {
  position: absolute;
  z-index:0;
  top: 13px;
  left: 5px;
  width: 503px;
  height: 206px;
  background-image: url(‘images/header.png’);
  }
  You’ll need to make the width and height appropriate to your image size, change the position as desired, and most importantly make sure that your img url is the name that you saved your image is into your themes image folder.

Always make sure to save the php file before doing any editing in case you make  a mistake. You’ll most likely need to tweak the CSS several times in order to position your graphics exactly where you want them.

Wordpress Pluggin:
I made good use of the Display Pluggin available through Wordpress. This pluggin allows you to decide which pages you want certain widgets to be displayed on. Very helpful, and you could really have a lot of fun displaying a different graphic button for each page if you wanted to. (The images I added to the sidebar of the About and Welcome page is just some html I added to a text widget.)

I hope you enjoy this new theme, and please let me know if you are interested in a customized Wordpress or Blogger theme with setup included.

So, as I was updating my QuickTime player today, I went ahead and installed the Safari web browser to my computer. (That’s what I’m using right now as I type this post, actually.) This is a super fast browser! It is way faster than IE which takes forever to load, and has so many little bugs, and it’s even faster than Firefox which is my default browser currently. I will probably keep Firefox as my default simply because I have Last Pass (my password management tool) installed which only works with Firefox.

I’ve just started using Safari, so still checking it out. I love the “Top Sites’ feature. It automatically keeps a record of the top sites you visit, or you can bookmark sites and add them. They are all displayed on the screen in a cool way so you can quickly click on the one you want.

The tools are easy to navigate and understand, as well, and the over all look is very appealing. It’s not a clunky looking site, and it just “makes sense.” You can open up a new tab or window by clicking the cute little page icon in the top right corner, and the gear icon has all of your settings. The simplicity of design and ease of use, is really nice. I LOVE the speed, and will keep you posted on other features I discover. I might just have to find a password manager for Safari instead, because I think I might be hooked!

Backgrounds and Glare

I purchased Artisteer back in the spring, and it has more than made up the money I invested into it by the ease at which it allows you to create templates for Wordpress, Blogger, Dot Net Nuke, Joomla, and Drupal. I use it all the time, and actually just used it again to give this site a little refresher. The beauty about Artisteer is that it allows you to implement your own designs into the template completely so that the design is all yours from the background images, textures, and glare all the way down to the individual icons. Now, while Artisteer is a great tool, I wouldn’t be able to accomplish an original and customized look without the use of design software like Photoshop. This post will explain just a few of the steps in creating a great, customized look using both of these tools.

The Background

You’ll notice that I have a great bead board background as well as a semitransparent sheet with a shadow and a yellow sidebar column with a pattern in it and shadow as well. You’ll also note that using Artisteer alone, it is impossible to get one sidebar background to look different from the other, and it is also impossible to get a drop shadow around the main sheet alone and not the header. In order to accomplish this, I needed to create a vertically tiled background that accomplished all of this for me. The first thing I did was to search online for bead board image. When I found the the style I wanted, I pulled it into Photoshop, and selected only about 1 pixel tall and as wide as the image was and Defined it as new a Pattern.

I then created a box and using the fx toolbar created a Pattern Overlay using my newly created bead board pattern. I could than re size that image however I wanted without losing my pattern. I used that layer as my background, then created the other elements on top of it. I created grid lines for my header height and sheet width, than created my semi transparent sheet with a shadow and my yellow column with a pattern overlay. (Hint: for the pattern in the column, I just copied and pasted the screen shot of Artisteer using one of their textures, than I created my own pattern out of it in Photoshop).

When my basic background was completed with the beaded background, the sheet, and the column, I again cropped the image in such a way that it would repeat seamlessly when stacked vertically. I went to Insert Image or Texture from file, centered it, and chose repeat vertically to complete the background. I then made sure that my sheet and footer in Artisteer were transparent so that my background “sheet” and “column” would show through as if they were the main sheet and side bars.

Using Glare

Now, even though I could make a header image using that same bead board pattern for the background, I still had a shadow on either side of the header because of my main background image I created. The easiest way to fix that, is to create a custom glare to cover up that shadow! The ribbon, and small squares of the bead board on either side of the header served as my glare and helped give the appearance that header blends in seamlessly to the background. Also, note that I chose a transparent background for the menu bar so that it looks like my ribbon is the menu bar. (Hint: You’ll need to make sure that you create a png for your glare, and that you size it to fit exactly to correct width and height of your header. Also, make sure to center it on your sheet in Aristeer. This can be a time consuming process to get it exact, but it is well worth it.)

I hope that this was helpful. Please leave a comment if you enjoyed this post, or if you have any questions or suggestions on creative ways of using Artisteer. Please email me if you are interested in an original and completely customized Wordpress or Blogger Theme design.

Based on a comment I received earlier today, I thought I should do this post. Many people think that Wordpress can only be used for blogs, or that you need to know some complicated code in order to turn your current WP blog into a full site. Both of these statements couldn’t be further from the truth. This site is a perfect example of that, and here are a few simple things you can do to turn your WP blog into a full blown site.

1. Create a static home page
   - This is so simple! Just create a page that you want to be your home page and publish it.
   - Next, create a blog that you want your regular posts to be located on and publish that page as well.
   - Thirdly, on click on the Reading button under Settings on your Dashboard and choose to make your home display a static page. Just choose the page you created for the static page and choose the page you created to display posts for well…your posts.
2. Label your blog something other than “blog” if you don’t necessarily want a typical blog as part of your site. Here are a few examples.
   - Resources or Products: if you offer services or items that you want to display based on category. You can create a page for each category as well, and your main Resources or Products page will display all of your posts.
   - News: use more like a blog to display your latest news. You can always choose to display only 1 or a few posts at a time, as well so that only the newest post is displayed like a regular page.
   - A specific theme. If you only update information on a very specific topic, than label your blog posts page that: movies, music, photos, etc.
3. Use the text widget to create a graphic image or images on one or both sidebars. All you need to do is upload the desired image to your site, than copy and paste some code into the text widget. Let me know if you have any questions on this.
4. Use the Display Widgets plugin from WP which allows you to hide and show widgets on only certain pages (note that this only works with the standard widgets as well as any text/image widgets you add).
5. Make links from your pages with the Page Links To plugin from WP. This does just what it says; it allows you to create a page and link it to any address desired. For example, if you want to make a page out of specific categories, simply click on that category and copy and paste the url into the page link you want that page name to be.
6. Other simple ideas include removing the words “Archive” from when displaying pages that are archives of posts, including a graphic signature to your home page. You can find out how to do these in previous posts of mine.
7. Add a small store through your PayPal account by adding buy now or add to cart buttons by products you post to your site. All transactions are done through PayPal which is super easy and convenient for you. The buttons can be created completely through PayPal and you’ll get the exact code to copy and paste onto your pages. You can also use the E-Commerce plugin, but I’d recommend using this only if you have a more extensive store as it takes more work to set up and takes more space up on your site.

There are a ton of other things you can do, but those are the quickest and easiest ways to turn your blog into a site! Please let me know if this was helpful or if you have any more questions on turning your Wordpress Blog into a regular website. also, contact me if you are interested in a completely original and customized Wordpress theme design with setup.

As you can tell if you’ve been following me, I’ve just updated my site. I love the convenience of having all of my main site elements on Wordpress, so I created a new theme design that has the look and feel of a regular website and through together a quick landing page in Sitegrinder. I love both of these programs, and am looking forward to improvements on both. Wordpress gives me an easy to use and customize CMS platform and Sitegrinder gives me the ability to quickly put out beautiful web pages or sites exactly how they were created in Photoshop. You might notice some more changes to the landing page over the next week. I put something simple out, because I just wanted to get something up that matched the design of my main site content, I’ll probably be making some changes in the near future to the landing page. However, I think it’s a good start and it gives me the refresh that I needed to tie my site together.

Note, if you managed to find your way here from the SiteGrinder test pages, please know that I did not change design due to any issues with SiteGrinder. I’m still a very contented Site Grinder user and am looking forward to future improvements, but have been recently learning the ins-and-outs to mastering Wordpress for a complete CMS ready website.

I hope you enjoy the new look, and please feel free to leave feedback or contact me if you are interested in any design work for yourself.

I found this site just today and downloaded one of their free icon sets. These are some very clean and professional looking icons that I’m going to start implementing. They have tons of icons that you can pay for, but the free ones are definitely must haves if you don’t want to take the time to always create your own generic ones. You should check them out.

This is a blog I designed and have been managing. The owner of the blog is very experienced as a teacher and story teller, but she has almost no experience with computers. She can add to, edit, and categorize her posts, but that’s about it. All of the design work, images, the plug-ins, the set ups, and the ads were done by me.

This blog was designed to showcase animals stories she has written for children, puppets she uses when telling stories, and fun facts about animals. These stories are also being recorded and available on podcast. That has been a new and fun experience for me to work with Audacity in order to put together music, sound effects, and the monologue for each story. If you have pre-school or elementary aged children, I would definitely recommend checking it out. I think they will enjoy these cute animal stories. If you do check it out, make sure to stay posted as more stories will continue to be added and recorded. Eventually, downladable coloring pages will also be available.

In designing this theme, I used real photos and edited them in Photoshop to give them the feel of a painting. These were very quick designs, and I plan on doing further edits on the images within posts, and of course, I’ll be adding more pics to some of the newer chapters which will be posted.

So, check out the Adventures of Sammy the Skunk!