Thinking Through Web Design

Friday, March 22nd, 2013

Responsive web design | WordPress With the recent launch of the SmallBiz responsive theme I have been spending time considering the functionality of the websites I design.  I am a trifecta Apple user, and I sincerely use all three devices to consume content.  I had it in my head that by using a responsive theme the sites that I am building would look and work exactly how I intended on my big giant desktop as they would in the palm of my hand.  After laying out a recently designed site for a local restaurant, I realized that some tweaks needed to be made because elements I liked on my big screen just didn’t look as I expected on the iPad or smart phone.  (more…)

Private Coaching | Teaching an Old Dog New Clicks

Thursday, March 14th, 2013

Baby Prints | Salt Marsh PotteryMy client coined the headline Teaching an Old Dog New Clicks, so I can’t claim credit for being clever.

Through the magic of chit chat and social media JP Powell, half owner of local icon Salt Marsh Pottery, and I were connected.  The Powells and their staff create hand made ceramic pottery that is made by pressing flowers from the south coast of MA into clay, hand cutting, shaping and drying the pieces, then ultimately hand painting, glazing and finishing them.  They also have a process for capturing baby feet and hands in clay.  The Powell’s are told repeatably that if the house was on file the baby prints are what (more…)

How to Upload a PDF if WordPress 3.5

Thursday, January 24th, 2013

Uploading a PDF works a little bit differently in WordPress 3.5 than it did in earlier versions.  I made a quick video to show you what to do.

Basic steps:

Add a Drop Shadow to an Image | WordPress

Friday, December 28th, 2012

Add a Drop Shadow to an Image | WordPressIf you would like to add a shadow around an individual image in a WordPress blog post or page, it is quite simple using your visual editor.

  • First, upload the image as you typically would any other image.
  • Second, hover over the image until you see the little photo icon on the top left corner.
  • Third, click on Advanced Settings
  • Fourth add: box-shadow: 10px 10px 10px #000000; to the Styles section (change 10px to whatever you want and #000000 to any hex color you want).
  • Click Save and viola, you have a nice shadow (more…)

How to Have a Link Open a New Tab on a Browser

Wednesday, December 26th, 2012

There are times when you want to have something on your main menu (navigation bar) that links onto another website and opens a new tab in your browser. An example of when you would want to use this could be if you are linking to Facebook or Twitter, or if you have a tab on your menu bar called Resources, which would direct a user away from your site. In the spirit of keeping your site on their radar, you would want the link to simply open a new tab, not just replace your site entirely. (more…)

How To Add a Vertical Bar in Your WordPress Navigation Menu with CSS

Tuesday, October 30th, 2012

In some cases you may not want the look of a clean single color menu bar, but rather one with vertical bars between tabs.

Verticle Bars on Menu | WordPress | SmallBiz Theme

1. Create an image that you want to use as vertical bar. I used PhotoShop Elements, which is a highly affordable version of PhotoShop.

(more…)

How to Align Text Around NextGen Slideshow

Wednesday, August 29th, 2012

For slideshows on WordPress websites I like to use the NextGen Gallery plugin.  It is simple to configure, has plenty of options, and most importantly, I have never had a conflict with other plugins when using it.

I have a site that is a work in progress, so I won’t give you the url right now, but I needed to align the text to the left of the slideshow and wanted to share with you how I edited the code in case you need to also do this.

(more…)

How to Change the Font Size in Just a Part of WordPress Copy

Thursday, August 16th, 2012

You may only want a part of your text in a WordPress blog post or page to be a different size than the rest of the font in the body of your text.  To do this:

Toggle from Visual mode to HMTL mode in your page or post editor and use the following bit of code <span style=”font-size: 8px;”>text</span>.

Examples:

<span style=”font-size: 8px;”>eileen lonergan</span>
eileen lonergan

<span style=”font-size: 24px;”>eileen lonergan</span>
eileen lonergan

<span style=”font-size: 48px;”>eileen lonergan</span>
eileen lonergan

 

You may find this article 11 WordPress Tips and Tricks helpful as well.

How to Add a Border to Images in WordPress

Friday, August 10th, 2012

I am lucky enough to have several wonderful friends and colleagues that live in Houston.  These women are all so smart, beautiful and awesome collaborators!   A couple of these girls are working with TicklePrint, a very interactive website for customizing stationary, invitations and journals.  As part of their assignment they created a blog TicklePrintBlog and asked me to jump in with some CSS styling.  They wanted all of their images to have a subtle dashed boarder around the edges.  To add a border to all of your images in WordPress: (more…)

WordPress Website Design

Wednesday, August 8th, 2012

For this website for MA Education Consultant Stephanie Meegan, I used the SmallBiz Theme by Expand2Web.  I used a few CSS customizations to give her WordPress website a very customized look:

Adjust the Header Height | WordPress

Friday, July 20th, 2012

To make the header area more narrow or deeper than your themes default size in WordPress add this to your CSS stylesheet:

#header {height:200px;}

Modify the 200 pixels to whatever suits your header.

I used this piece of code for my chiropractor client in Charlotte, NC. The theme for WordPress that I used for Dr. Lyon is the SmallBiz theme from Expand2Web. If you have any questions please feel free to let me know.

How to Add Short Code to a Widget

Tuesday, July 17th, 2012

No lie, I had to Google this myself; however, it totally worked, so I like to share.

To allow shortcodes in sidebar widgets in WordPress:

  • Navigate to the Dashboard of your WordPress Site
  • Under Appearance -> Editor -> Functions.php file add the following code:
add_filter(‘widget_text’, ‘do_shortcode’);

I recently figured this out when using the Royal Slider Plugin. One other thing to note when using the Royal Slider in a widget for WordPress, make sure the Preload Skin option is selected.

Let me know if I can help!

Cynthia Layout | SmallBiz Theme

Thursday, July 12th, 2012

One of my favorite layouts for the SmallBiz theme for WordPress is Cynthia. If I had a little more cache with the developers I would wish it were called the Eileen Layout! For the client Fourth Dimension Recovery we were going for a calm, clean look that was simple to navigate. To help with the symmetry of overall look I wanted the navigation menu to be spaced out a bit, not exactly aligned left.

To center the items in the navigation menu:

  • Login to your website
  • In the Dashboard look for Appearance
  • Editor
  • Place this code in the Style.CSS
  • #access li {padding-left: 70px;}
    • Note: adjust the 70 to best accommodate your navigation menu, it may need to be greater or less than what I used for 4D Recovery.

(more…)

Boston Food Truck Website

Thursday, June 28th, 2012

Mobile Websites | Food Truck | Small Biz WordPress ThemeThis is my blog, so I am using the venue to brag that not only do I have ONE Food Truck client that makes amazing cookies, but I now have TWO!  What more could a cookie lover like me ask for?

I am delighted to share with you a site that I built for Boston’s soon to be most favorite food truck, The Cookie Monstah!  The owner of the truck, Melissa, is a life long foodie and her passion is cookies.   Melissa liked the site I built for my first food tuck client, the adorable Flour Girls Baking Co. (who covers from Providence through the Cape) and asked if I would build her website as well.  Of course the answer was a joyful YES.

For both clients I used the SmallBiz theme from Expand2Web.  The Cookie Monstah’s site is built with the Cynthia Layout, which is one of my favorites.  We are still tweaking the look, but I love the name and the logo and wanted to share with all of you.

 

Food Truck Website | Boston | SmallBiz Theme

Oh, did I mention that I have a third client who also bakes custom cookies? I really am the luckiest WordPress web designer around.

I am now in the market for a personal trainer, if you are one, or know of one who needs a website will you have them give me a ring?

Sample Websites Built with the SmallBiz Theme | Classic Layout

Tuesday, June 26th, 2012
SmallBiz Theme | Websites with the SmallBiz Theme | Classic LayoutSmallBiz Theme | Classic Layout | WordPress Web Designs

Recently I shared sites built with the All in One Layout using the SmallBiz theme for WordPress from Expand2Web. Today I am going old school and showing two examples using the Classic Layout. Both of these sites are fairly old, but I continue to get calls from potential clients telling me how much they like the looks.

I also used the Classic Layout for the Elizabeth Taber Library website, which actually is probably what Don Campbell envisioned for the theme, a nice photo showing your business, text and a widgetized sidebar. The theme has added a boat load of new features since these sites were built: mobile layouts, Facebook integration, not to mention simple things like adding a custom header or 6 page templates with custom widget areas.

You can see in the site for Lori Watkins, I decided not to use the footer boxes.  This option is enabled or disabled with a one click.  For Missy McInnis’ site, I used images that I created, but those could easily be text, say with a map to your location, sign up box for your newsletter, social media links, etc.

By using simple graphics and easy navigation these sites have stayed relevant and not needed make-overs which is helpful as both have limited budgets. I really like a clean look, and I think that they exemplify the themes name, Classic.

If you have built a site with the SmallBiz Theme’s Classic Layout let me know, or if you need help on deciding which layout to choose feel free to send me a note.

Web Designs with the SmallBiz Theme | All in One Layout

Monday, June 18th, 2012

Shadow Border Around WordPress Page | WordPress Design CSSI have a pretty big portfolio of websites built with the SmallBiz theme for WordPress from Expand2Web.  I thought it would be fun to organize them by layout and share pieces of my portfolio in a series of blog posts.

Today I am going to share examples of the All in One layout.  I like this layout because I think videos are a terrific on a website.  On my site I have a quick video of some of my WordPress website designs.  On Dr. Greg Alston’s and C.O.R.E. Sacramento both clients used a video to explain their sites and my total favorite is a video of testimonials written by Dr. Matt Lyon’s clients.  I like the flexibility of the tree boxes at the bottom of the homepage.  You can customize these boxes with text, images, call to action fields, or links to social media.  With a little CSS knowledge you can adjust the size of the boxes to accommodate your needs.

Of course each layout comes with all of the terrific features from the SmallBiz theme.  See more WordPress websites designed with the SmallBiz theme or visit my portfolio to see a full gallery of work WordPress websites. Here are samples of the SmallBiz theme Classic Layout.

C.O.R.E. Sacramento | WordPress Websites | ChiropractorSamples of SmallBiz Themed Websites | All in One Layout

 

Feel free to be in touch if you need help building your business website or if you need help customizing the SmallBiz theme to suit your needs.

How to Get a Shadow Around the Edge of Your WordPress Web Page | SmallBiz Theme

Saturday, June 9th, 2012

Shadow Border Around WordPress Page | WordPress Design CSSTo achieve the slight shaded effect behind the page of your WordPress website you need a simple piece of CSS and follow these steps:

  • Navigate to your Dashboard and look for Appearance
  • Click on Editor
  • Look for the line /* You can add your own styles below this line. */
  • Insert:
  • #header {
    box-shadow: 0px 4px 4px 4px #706459;
    -webkit-box-shadow: 0px 10px 10px 10px #706459;
    -moz-box-shadow: 0px 10px 10px 10px #706459;
    }

    #page {
    box-shadow: 0px 10px 10px 10px #706459;
    -webkit-box-shadow: 0px 10px 10px 10px #706459;
    -moz-box-shadow: 0px 10px 10px 10px #706459;
    }

    Note: you may adjust the pixels size to be greater or less than what I have here.  Also, the hex number can be modified to suit your color scheme.  I use my eyedropper tool on my mac to get the hex code of the background color, then go a few (or more) shades darker on the color grid.  I used this code for the SmallBiz Theme from Expand2Web, it may vary slightly for other themes.

    Shadow behind WordPress Web Page | SmallBiz theme CSS

    Please be in touch if you have questions or need help.

Integrating Pinterest to WordPress

Tuesday, May 29th, 2012

Pinterest Badge | Adding Pinterest to Your WordPress WebsiteI am a guest blogger with Search Engine People, and I wanted to share with you my latest post: 5 Ways to Add Pinterest to WordPress, (click the link for the full article).

My favorite tip is actually in the form of a plugin the Pinterest Badge. This plugin allows you to enter the width of your widget and customize the background color and boarder color. It displays your recent pins and integrates
seamlessly into your sidebar widget.

I know I have spoken of Pinterest a lot, but I find it so enjoyable. I especially love searching for recipes (and apparently cocktails, as displayed by the images on the left)! Are you using Pinterest? What do you like about it?

The Winner of the Small Business Week Giveaway

Friday, May 25th, 2012

A very big thank you to everyone for so many comments, Likes, Tweets and +1′s!  This was a lot of fun for us.  Many said that they had already tried the Small Business theme and loved it, thank you!  Some of you were looking for advice on design, please always feel free to email any one of for help.  For those of you who are considering buying the theme, we encourage you!

A huge Congrats and Happy Birthday to our winner

 

Sirrah!

 

National Small Business Week Contest

Monday, May 21st, 2012

SMALLBIZ WEEK GIVEAWAY | WordPress Theme Contest

In honor of National Small Business Week I have partnered with my friends at Expand2Web, creators of the SmallBiz Theme for WordPress, and the Divas Mobile Solutions to bring you the opportunity to win a Small Business Digital Package!

The guys at SmallBiz will send you a copy of their WordPress theme, which is designed for the Small Business owner! It is a proven winner with search engine optimization, has 11 different layout options and has built in Apps for creating a customized integrated Facebook mini website and a mobile version of your website.

The Divas will give you a consultation (via Skype) to teach you about their favorite business Apps and offer advice for your digital presence.

I will give you two one hour Skype sessions on customizing the SmallBiz theme!

We are all passionate about small businesses and are here to help you make your digital presence as terrific as you are,  here are the details:

  • In order to be eligible for the gift package we ask that you leave a comment on any one of our blogs (Expand2Web or DivasMobileSolutions or right here on mine)
  • We would love for you to Like, Tweet or Plus One this blog post, but it isn’t a requirement :)
  • Winner will be randomly selected from those who comment.
  • Winner will be selected on Friday afternoon, May 25th, 2012.
  • A copy of the SmallBiz theme will be mailed to you.
  • Eileen Lonergan will contact you to schedule your (2) one hour Skype sessions on how to customize the theme.
  • Laura Heuer will contact you to schedule your (1) one hour Skype session on Business Consultation | Business Tools.
  • Note: Hosting is not included, we recommend BlueHost.