Posts Tagged ‘blog design’
Free Christmas WordPress Theme!
December 3, 2009
Yes, I’ve finally gotten another theme up! I’ve been too busy working on other projects to put more out, but here’s a cute, traditional Christmas theme to put you in the holiday spirit!
This is a widget ready, 3 column design with a top menu, footer, and built in rss image in the footer.
Click here to download this free theme!
As always, feel free to contact me if you are interested in a completely personalized and customized WordPress or Blogger theme.
Posted in Free Downloads | 
Tags: blog design, Design, Free Downloads, quick designs, web design, Wordpress Themes | 
1 Comment »
Esthers Cakes and Cards
November 24, 2009
I just finished designing a blog for my sister-in-law who makes the most amazing and creative cakes! She also makes adorable handmade cards, and both are done inexpensively and simply (which is a key when you have a family of 6!) You can check out her blog by clicking on the picture below. Please note that this blog is just getting started, so it doesn’t have a ton of content yet and still needs some tweaks.
This blog was a fun design to make. I first created the polka dot pattern in Photoshop, I then created the ribbon pattern, sidebar sheet and main sheet, cropped them all into one horizontal layer and used that for the blog’s background. Using the ribbon image, I created a texture for the block headers as well as the main menu background. I decided to go with original title button designs for the left side of the blog for items that I know won’t change and are of the same category, while I used the template headers I created for the right side of the blog for items that can be more easily edited and changed. You’ll also notice my original post dividers, signature graphics, scrolling twitter, rss, facebook, and back to top button, as well as other little details. You can find out how to do all of those yourself by visiting my Bloggers Scrapbook blog.
Posted in Recent Projects, Tips and Tricks | Tags: blog design, Blogger, blogger tricks, Photshop | No Comments »
How to Add a “Back to Top” Button to WordPress
November 17, 2009
Adding a scrolling “Back to Top” button is a very nice feature for your blog so that people don’t have to keep scrolling to get back to the top of the page. I have already posted on how to do this for your BlogSpot blogs, and you can view that post on Blogger Scrapbook by clicking here.
Adding this button to WordPress takes a few more steps, but is still relatively easy. Now, I got the basic information from a site called instantShift, but they don’t have all of the information you need to actually add a button yourself. But, not to fear, I have been working and tweaking until I figured out exactly what you need to do in the simplest way! So, here goes!
- First of all, create and upload an image you want to use to your WordPress ftp, and save the url to it’s location.
- Secondly, log into your dashboard and click on Editor, then Header.php.
- Look for the following code: </head> <body>
- If the body element already has an id, copy that id name, but if it does not, give it an id by changing it to the following and save your template: <body id=”top”>
- Now, go to your Footer.php and find the following code <p> class=”art-page-footer”></p> </div>
- Directly after that code, add this code: <div> <a style=”display:scroll;position:fixed;bottom:10px;right:10px;” href=”#top“><img src=”THE URL TO YOUR IMAGE HERE”/></a> </div>
- Change the URL to your actual image url, and you can change the position on the screen by changing the red elements above.
- Make sure, that if your Header.php already had an id associated with the body, that you replace “#top” to that id instead making sure to keep the # and quotation marks.
- Save your template, and you are all done!
- If you also want to add a text link to the bottom of your posts, all you need to do is add the code below to the bottom of each post that you write (just make sure that you are in HTML mode and not Visual): <a href=”#top”>Back to Top</a>
I just did this for my own site, and it works great in IE, Firefox, and Safari. Hint: You can use this same trick to add buttons to your footer that link to your RSS feed, or other items. Simply change the “#top” to the http address where you want the image to link to, and of course, you’ll need to add the correct image and image url as well.
Please leave a comment if this was helpful or if you have any questions, and feel free to contact me if you are interested in any customized graphics or buttons. I do have some free pre-made and hosted back to top buttons available on my Blogger Scrapbook site.
//
Posted in Wordpress Tips and Tricks | Tags: blog design, blogger tricks, Design, quick designs, Wordpress Tweaks | 6 Comments »
Making the Most Use from Photoshop and Artisteer Part 1
November 16, 2009
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.
Posted in Recent Projects, Tips and Tricks, Tools of the Trade | Tags: blog design, Blogger, Design, Photshop, software, web design | 4 Comments »
Brand New Blogger Scrapbook!
November 12, 2009
No, I’m not posting about an actual scrapbook, but about my updated blogger blog called Blogger Scrapbook. Click on the image to check out this blog. After finishing my recent design project, I finally had the brainstorm I needed on how to use my recently created blogspot blogs. I gave this one a fresh, scrabook feel and it is designed to give information on how to personalize and customize your own blog. It already has a lot of great tips, and I will continue to add more on a regular basis. It will also feature free blogger themes and graphics.
Some of the tips you’ll find on this blog are the following:
- How to add a favicon to your blog
- How to add a signature to your blog (to all posts past and future)
- How to add post dividers to your blog
- How to get rid of unwanted text like “Showing all posts from…”
- How to customize your Profile Widget or make a brand new one
- How to add more widgets to every part of your blog
- How to create and manipulate scrolling and fixed buttons on your blog
And those are just the starters. So, please stay posted to Blogger Scrapbook if you use Blogspot, and make sure to leave comments or your own tips, too!
Posted in Impressive Sites, Recent Projects | Tags: blog design, Blogger, blogger tricks, Design, Free Downloads | No Comments »
Beauty 4 Moms Blog Design
November 11, 2009
Well, I just finished one of my favorite design projects of all time! Ashley was so much fun to work with and our sense of style really are almost identical. I completely redesigned Ashley’s blog and web presence from head-to-toe. I designed and customized each element of this blog to carry through the complete theme. In fact the only parts that are not original to me is the vector girl at the top, and even that I edited and customized. Also, the background pattern is available through Artisteer, but the colors I tweaked. So what did Ashely get when she asked me to help her design and streamline her blog and make a Twitter page for her?
- Color scheme and layout to fit her individual needs
- Original and unique Header Image
- Original and unique Logo Design
- Original and unique Block Header Images and Icons
- Original and unique Post Divider Image
- Original and unique Signature Graphic
- Original and unique Customized Web Button (I have one on my site, too)
- Original and unique Widget for Under the Menu
- Original and unique Back-to-Top Button
- Horizontal Menu
- Help with Organization and Streamlining the look and information flow on the blog
- Complete Theme Set-Up (including widgets and making extra widgets accessible)
- Original and unique Twitter Background Graphic Images to use for other applications such as Facebook, etc.
- A complete uniform and professional look for every aspect of her web presence
- A design that not only looks nice but validates in multiple browsers
- A turn around time of just a few short days
- And the entire package for an unbeatable price!
Click on the image to visit Beauty 4 Moms.
So, are you looking for a site Blogger or WordPress refresher? Feel free to contact me to discuss options and prices. I had so much fun doing site, I feel the need to redesign my own site and blogs which have been sadly lacking due to time constraints. Let’s face it, I’d rather be designing for you!
Posted in Impressive Sites, Recent Projects | Tags: blog design, Blogger, Design, Twitter Background, web design | No Comments »
Using WordPress for a full CMS Website
November 5, 2009
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.
- 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.
- 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.
- 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.
- 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).
- 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.
- 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.
- 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.
//
Posted in Tools of the Trade, Wordpress Tips and Tricks | Tags: blog design, web design, Wordpress Tweaks | No Comments »
Customized Blogger Theme
November 1, 2009
I just created a completely customized blogger theme for someone blogging about money saving tips. You can view this Money Matters blog by clicking here. My design was based around a vector image of a woman shopping that I purchased from istock. (As a note, your designs should always be based around one theme or element that ties the design together and sets your design apart from others). The rest of the graphics and design are my own including the signature dollar sign circle graphic.
Other edits and changes I did to this blog are the following:
- Created and added a favicon to match the site
- Created and added post dividers
- Created and added a customized About Me Widget which includes an original graphic that links back to the home page of the site.
- Edited the footer copyright text so that it includes all of my desired links as well as a Contact button that links to an email address.
- Added a couple of advertisement graphics and text to the side bar.
- Added Google AdSense to the bottom of the site (I’m still waiting for it to show up. I might end up having to remove or tweak that part slightly).
- Added pages according to labels
- Removed the Date Header from the posts so that the date only appears with my other meta data icons below the header instead of below and above the header.
This blog was also uploaded manually for those of you using Artisteer and still a little nervous about doing this. Grant it, it is a little tedious, but all I did was the following:
- Exported my design as a folder
- Opened the XML file in Notepad
- Saved all of the images to Picasa
- Edited the XML by changing the image urls to match the actual image locations. (All you need to do is open up the correct images in your web album, right click on an image, and copy and paste the image location to your xml doc.)
- Deleted the current template HTML in blogger (I first saved it just in case).
- Pasted the new edited XML file with the correct image urls into blogger. (Make sure that you select Expand Widget Templates first).
- Saved my new template, and there you go!
A couple of notes on this: Make sure to click on each image individually in your Web Album. If you right click on the thumbnail for the image location, you’ll be getting that smaller sized image instead of the full size that you’ll need. Also, note that you will need to replace the url for each image in two separate places each.
Let me know if you are interested in your own customized Blogger or WordPress theme, and I’d be happy to discuss options and pricing with you.
Posted in Recent Projects, Tips and Tricks | Tags: blog design, blogger tricks, Design, stock images, web design | No Comments »
Free Tropical WordPress Theme
October 5, 2009
Hafa adai from Guam! This tropical paradise WordPress theme was inspired from my time here on the beautiful island of Guam. This is a simple two column theme that makes the most out of Artisteer’s built in textures, as well as the ability Artisteer gives you to add your own background and header glare images in order to create a seamless blend of header and background.
So, enjoy this new theme, and Contact me if you are interested in a completely customized and personalized WordPress or Blogger theme. Click here to download this theme.
Removing the Words “Archive of…” from Category Pages
September 21, 2009
Ok, so I’ve been googling this question for a while and getting absolutely no where. Finally, I just figured out how to do it myself, and I was shocked at how easy it was and that I couldn’t get an answer anywhere online. So, here’s all you need to do.
- Go to the Editor and locate the Archive php toward the top of the right hand column.
- Go inside, and look for the following code <h2 class=”pagetitle”><?php printf(__(Archive for the ‘‘%s’ Category’, ‘kubrick’), single_cat_title(”, false)); ?></h2>
- If you want no text at all to appear, simply delete that line of code and Voila! You have removed it.
- If you want only the title of the category to appear, as I have my site set to, simply delete only the part that begins with the underscore up to single_cat_title. Keep that part and change the (“,false)); to (“,true)); so, your code should now look like the following: <h2 class=”pagetitle”><?php printf(single_cat_title(”,true)); ?></h2>
- Note: you can also change the size of the title by changing the heading tags surrounding the code <h2> and </h2> to a different number.
I’m learning tons about the backend editing of WordPress and hope to be able to design some awesome complete websites using WordPress alone. I’m actually working on a site right now for a church, and all of the changes should be finished soon. They’ll have to put in the content, of course, but the theme and layout will be ready for them.
Stay tuned for other great tips!
Posted in Tips and Tricks, Wordpress Tips and Tricks | Tags: blog design, Wordpress Tweaks | No Comments »
