Where is the ‘Where’s my stuff’ link on Amazon?

Share on FacebookTweet about this on TwitterShare on Google+

As much as I love amazon, it can sometimes be difficult to contact customer service about an order. It used to be really easy to find the ‘Where’s My Stuff?’ link that would allow you to send an email (or even live chat) to customer service….but now I find it much harder to find. Maybe it’s just me?

The support pages are pretty good at allowing you to ‘Track Packages’, ‘View Orders’, or ‘Return or Replace Items’, but it is a lot harder to immediately see a link to the ‘Where’s my stuff?’ link – this is the link that allows you to contact customer service if your order has not arrived (even if has been marked as being delivered).

Anyway, here is where you will find the form that allows you to find out where your stuff is, or allows you to contact customer service directly about any other issue you may have. It opens a simple form where you can pick your order and send an email directly to customer service.

How to contact Amazon Customer Service:

Work out new aspect ratio for images (aspect ratio calculator)

Share on FacebookTweet about this on TwitterShare on Google+

This is a short post that will show you a great, and free, online tool to help you work out how to re-size an image without breaking the aspect ratio. This is a useful tool for when you want to change the size of an image to make it fit a specific space on your blog or website and don’t want to distort the image, or the video.

I have a number of sites where I find that I need to use stock images or other freely available images on the internet to illustrate an article or a post. One of the common headaches that I have with this occurs when I want to resize an image. This isn’t usually an issue if you have some image editing software on your computer that allows you to resize while preserving the aspect ratio of the image….. but what if you don’t, or if you want to scale up the perfect video that you have to illustrate a post, or you only have one length (height or width) defined and you want to calculate the missing value for a particular aspect ratio?

This tool Aspect Ratio Calculator provides a simple solution to this issue.

It is a simple form where you can enter the width and height values for your original image, and then simply type in either the length or height that you want to convert the image or video to, and the form will give you the new values.

aspect ratio calculator

To break it down further, lets say that you have an image that is 1600 x 1200 pixels, and you want to decrease the size of the image to fit into a space that is only 600 pixels wide – simply go to the tool above and enter your original dimensions on the left hand side. Then you would type in 600 in the width section on the right hand side, and the form would then automatically calculate that you image would need to be 450 pixels in height, in order to preserve the aspect ratio of the image.

Adding bullet points and numbers to the WordPress Popular Posts widget

Adding bullet points
Share on FacebookTweet about this on TwitterShare on Google+

I am a big fan of the WordPress Popular Posts widget as it offers a simple way to surface your most engaging content and posts via widgets on your site or blog.

It is very simple to use, and the popularity of your posts can be displayed according to pages views, comments and more, over a time-period that you can define (e.g. most popular over 24 hours, 7 days etc…)

This means you can have multiple widgets on your blog exposing different content. For example, you could add a widget to your footer and call it ‘Most Popular of All Time‘ and display all time popular posts by page view. And, at the same time, you could have a widget in your sidebar called ‘Trending Topics’ and set it to display the most popular posts for the last 24 hours.

Both widgets would end up displaying different content, despite being generated from the same plugin, and would add more exposure for your content to your visitors.

I have use the WordPress Popular Posting this way across a number of websites that I am developing and it works like a dream.

When you activate the plugin and add the widget to your sidebar, you get the chance to add a title, but the default display of your links is a bit bland. This is what my sidebar widget for this blog looked like when I first put the widget in the sidebar:

Popular Posts with no formating

One thing that I quickly wanted to work out how to do was to add styling and formatting to this plugin. As you can see from the image above, it does the job well enough, but it looks unstructured and needs some formatting to help the readers eye see where one Post title ends and another begins.

Plus it would be nice to add bullets or numbering indicators.

The developers of the plugin have assembled a really simple guide to help you with the styling which you find here.

I used this guide to create the numbered ‘popular posts’ that you can see below:

Popular Posts with bullet points

Adding formatting to the WordPress popular Posts widget

I will share what I did below, which is not a huge departure from the instructions that can be found here, but I made some minor changes to the code so that it would be more suitable for my site (the original code has dark backgrounds on the numbered list and I wanted a plain white background). The instructions below are pretty much the same, but it took me a couple of attempts to customize it how I wanted as I didn’t want the colour schemes that are featured in the official guide – so I figured I may as well share it here for when I forget and need to come back and remind myself what I did, should I need to do it all again.

1. First we added the following code to our CSS stylesheet (Dashboard > Appearance > Editor > Style.css)

ol.wpp-list {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}

ol.wpp-list > li {
position:relative; /* Create a positioning context */
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
border-top:2px solid #666;
background:#fff;
}

ol.wpp-list > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}

2. Then add your widget to the sidebar and click on the checkbox for Use custom HTML Markup in the ‘HTML Markup settings‘ and add <ol class="wpp-list"> and </ol> in the ‘Before/after popular Posts’ section, and then add <li>{title}</li> to the ‘Post HTML Markup‘ input box.

You can see the screenshot from our widget below to see where to paste the updates.
WordPress Popular Posts

And that was how we turned it into a numbered list with a white background.

Using BR tags Vs P tags…..and (my) Common Mistakes

Share on FacebookTweet about this on TwitterShare on Google+

Newcomers to WordPress will probably default to writing their Posts and updates using the ‘visual editor’ tab in the Post page.

The Visual Editor is a godsend to newcomers as it handles all the markup and code for you and it provides easy to use buttons that allows you to format your text and your post with a simple click. Want to turn something bold, easy, just highlight the word and press the ‘B’ button. Want to align your text, easy, just click the buttons that allow you to align your text. Simple

WordPress Visual Editor:
visual editor in wordpress

The Visual Editor is not without its pain points however, and you will probably soon find yourself in a situation where you want to start writing your Posts directly in the ‘Text Editor’ tab in WordPress and start adding your own tags to control formatting.

When I first started doing this I got into very bad habits with regard to using P (Paragraph) tags and BR (Line Break) tags.

I used to add a ‘P’ tag between the paragraphs in the hope that it would control and create paragraphs, and I rarely used line breaks. My Post would usually look something like this:

I am using a P tag below to attempt to create a spacing between this line
<p>
and this line. What an idiot.

So how should I use BR tags and P tags in my WordPress posts?:

As a general rule the P tag is a block level element, and should have an open tag and a closed tag around the content, like this:

<p>This is a much better example of how to use a p tag</p>
<p>As you can see, the P tag is open and closed around the content that I want to turn into a paragraph and this paragraph is separated from the one above</p>

The BR tag can be used within a block element (like P tags) or on any line of a web page to force a line break. Using a BR tag will force the next piece of content or text to start on the next line. Example below:

This is a line of text to show a BR tag in use
<br>
And this text is on a new line because I used the BR tag

And here is an example of P tags and BR tags:

<p>This is a line of text to show a paragraph where I want to force a line-break in the middle of it, here comes the line-break now
<br>
And this text is on a new line because I used the BR tag above<p/>

Hopefully that helps someone out there. This is basically a name and shame post for myself, highlighting and sharing some of the dumb habits that I found myself doing as I was learning this stuff from scratch.

Reading & Watching – Volume 2

Share on FacebookTweet about this on TwitterShare on Google+

Reading & Watching – the things that have caught my attention this week.

Video

Benedict Evans, from VC firm Andreessen Horowitz (investors in Foursquare, AirBnB and lots more), gave a great talk at the Andreessen Horowitz 2014 Tech Summit recently on the explosion of mobile, and how it is now futile to divorce the future of technology from the future of mobile – as mobile is the future of technology…at least for the foreseeable future.

No matter what your websites are about, no matter how niche your micro-sites are, this is a timely reminder that you should be thinking about mobile and at the very least, making sure your websites and blogs are mobile responsive.

You will find the video slide show of the presentation below, as well as an embed of the raw slides from the event.

Slides: