StumbleUpon | mr-helpful's blog posts

http://mr-helpful.stumbleupon.com/review/7222667/

Sun, 10 Aug 2008 05:18:23 -0700

Please note: I am sorry, but I cannot reply to individual messages

This is what you can find on my pages:

Advanced layout tip - How can I box my text? NEW
Advanced layout tip - Borders and padding for images
How do I create an index for my archive pages?
How do I create links to one of my old posts?
Can I put my own images on my pages?
Can I have a sticky post on my pages?
Can I sandwich text in between images?
What colours can I use in my SU pages?
How do you center text (and images) in your reviews?
How do I line up several images of different sizes?
How do I line up several images of different sizes? (continued)
How do they do that? [Viewing source code]
How do you put text beside an image?
An example of several images with text aligned left and right of them
How do you indent text?
How do you link to a sound file in your blog?
How do you change the font typeface in your blog?
How do you create links to other stumblers in your comments?
How do I center my images?
How do you arrange your images vertically or horizontally? (part1)
How do you arrange your images vertically or horizontally? (part2)
How do you photoblog more than one image?
How do you add bold or italic emphasis to your text?
How do you make your blog comments use coloured text and in different sizes?

http://mr-helpful.stumbleupon.com/review/24239389/

Sun, 10 Aug 2008 05:18:03 -0700

How can I box my text?

This tip describes a method of "boxing" text, so that it looks like this:

Rough winds do shake the darling buds of May,

And summer's lease hath all too short a date:

The code for the above example looks like this:

Rough winds do shake the darling buds of May,

And summer's lease hath all too short a date:

By adjusting the various values in this code you can:

add a border to create a "box" around your text
control the size, color and appearance of the border
control the width of the "box"
control the location of the "box" (relative to the side of the blog)
align the text within the "box"

Here are some examples with the code for each below (changes from the first example shown in red):

#ffff00

50px

4px dotted #0000ff

125px

5px

right

225px

And often is his gold complexion dimm'd;

And every fair from fair some time declines,

#00ff00

55px

15px

525px

And often is his gold complexion dimm'd;

And every fair from fair some time declines,

Tips:

choose border colors that are complimentary to your blog theme
it is best to define your border color as a hex code (e.g. #ff0000 rather than red) because not all of the color "words" are honored by all browsers.
you can do more with this code than shown in the few examples above - experiment a little, and remember that you can always delete the entry if you don't like the results!
once you have the code just the way you like it, keep a copy in a text file so that you can quickly re-use it.

http://mr-helpful.stumbleupon.com/review/13247182/

Sun, 07 Oct 2007 09:08:03 -0700

��Here is an advanced layout tip - it allows you to align text to the right (or left) of an image, add some spacing between text and image, and add a border to the image - all in one go.

This tip comes with a disclaimer: the code used here is not formally approved by SU and thus not supported. It may be affected by future page layout changes.

This is the vital bit of code:

style="border: solid 1px white; float: left; margin-right: 1em; padding: 0 0 0 0;"

You add it to the code for an image post, like this:

style="border: solid 1px black; float: left; margin-right: 4em; padding: 0 0 0 0;" src="http://www.stumbleupon.com/mediumpics/189774.jpg" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam

and this is the result:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

There are four elements to the code:

style="border: solid 1px black; float: left; margin-right: 2em; padding: 0 0 0 0;"

border - this controls the color, style and thickness of the border that is added to the image
float - this controls whether the image is aligned to the left or right of the associated text (note that the "associated text" comes after the image code
margin - controls the padding space between the image and the text - margin-right if the image is to the left of the text, margin-left if to the right of the text
padding - this overrides a vital bit of the standard layout code (which is needed if you *don't* do employ this fancy layout trick :)

You can vary the code to get different results:

style="border: solid 1px red; float: right; margin-left: 4em; padding: 0 0 0 0;"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

style="border: double 1px gold; float: right; margin-left: 1em margin-right: 5em; padding: 0 0 0 0;"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. This example adds some padding to the right of the image - between the image and the sidebar

http://mr-helpful.stumbleupon.com/review/11412427/

Sat, 28 Jul 2007 04:53:27 -0700

A guide to the new pages layout

StumbleUpon is launching a set of new layout pages - you'll see a link to the "New (beta) version" on your Pages page.

You can find a guide to the new pages, here: http://www.stumbleupon.com/help.html#test

The team will add to these FAQ's as they observe which questions really are the most frequently asked and/or hardest to work out for yourself!

http://mr-helpful.stumbleupon.com/review/7222455/

Mon, 01 Jan 2007 03:30:12 -0800

How do I create an index for my archive pages?

Many people create an index for their archive pages, so that others can move around them more directly than is possible with the & buttons.

The method for creating an archive index is very similar to that for linking to one of your own old posts (or someone else's). Every page of your archive pages has a unique identifying address in the SU databases, like this: http;//mr-helpful.stumbleupon.com/archive/10/ - and they increment in 10's. So, the next (oldest) archive page is http;//mr-helpful.stumbleupon.com/archive/20/

Your latest (newest) page can also be reached via http;//mr-helpful.stumbleupon.com/archive/0/

To create an index for your archives, you will need to create a series of these links (one for each page of archives) and put those links either into your "About Me" (which can only contain a limited amount of information), or create a "Sticky Post" for them, like this:

10 20 30
Here's the code for the above example:

10��20��30

You should put your own name in the code, of course, not mine!

Tips:

Use special characters or symbols as separators: ∞ 10 ∞ , ∴ 20 ∴ , Ξ 30 Ξ , ◊ 40 ◊

How to find your oldest post.

Now that you know the format for the address of your archive pages, just enter the address http;//yourname.stumbleupon.com/archive/100/ (and add 100, if necessary) until you go "past the end" of your pages. When you do, either use the button to page back until you hit your oldest post, or reduce the /100/ to /50/ and so on, again until you find your oldest post. If you go "too far", you'll also see a clue about how many pages you have here:

In this case, 148 is the oldest post, so http;//yourname.stumbleupon.com/archive/150/ should put you very close to your "oldest page".

Remember to update your archive index regularly, because your oldest page moves further back as you add new pages to the front.

Keep a copy of the code you use in a .txt file - I can promise that you will be glad you did, one day!

A shortcut!

SU Archive Links Creator

one of our members

http://mr-helpful.stumbleupon.com/review/6946919/

Wed, 13 Dec 2006 08:24:02 -0800

How do I create links to one of my old posts?

Many people want to create a link to one of their old posts, perhaps so that they can link a continuing story or show something else of related interest.

Every post you make has a unique identifying address in the SU databases, which you can see by clicking on the date and time for that entry. Try it: the date and time is a link to that post - the unique url for it is displayed in the browser address bar. For example, the post shown here:

has an unique url of:

http://mr-helpful.stumbleupon.com/review/4543534/

To create a link to this post, you can either paste the url straight into a new post and have SU convert it into a link for you, like this:
http://mr-helpful.stumbleupon.com/review/4543534/

Or make it a fancier link (like this), by using this code:

Or make it a fancier link

All of the "index links" in my first post were created using this method - and, of course, you can link to another Stumbler's post in exactly the same way!

http://mr-helpful.stumbleupon.com/review/4543534/

Tue, 20 Jun 2006 02:58:47 -0700

Can I put my own images on my pages?

"Can I upload my own photos? Can I put my personal pics on my Stumbleupon blog? How do I post pictures that are on my PC?"

The answer to all these questions is Yes! In short, the pictures *must* be on the web (not on your PC) if you wish to include them in your Stumbleupon pages. Once they are on the web, you can simply include them as you would any other image (i.e. by using the SU Photoblog facility).

To upload your images to the web:

Use one of the many free image hosting services available. They vary slightly in facility and limitations and you will need to choose which one suits you best, but many stumblers happily use Flickr, Photobucket, or ImageShack for just this purpose. Whichever one you choose, make sure that it allows you to hot-link to your images. I have used Photobucket as an example, but the choice is yours.

You will need to register to use these services (most of them ask only for an email address, and for you to specify a username and password) - but once you have done so, and uploaded your images, you simply need to browse your own images online and photoblog them, as for any other web-based image!

Note: You can host other files on the web in a similar fashion (sound files, for instance), and provide a link to them, but only images can actually appear on your SU pages.

Some things to watch out for:

Make sure that the service you choose allows for images to be hot-linked - certainly Photobucket, ImageShack and Flickr do, but others may not
When you make a post containing your own images, you might want to clear your browser cache and check that it really is showing on your SU pages - or ask a friend to confirm that they can see the images
Be aware that when you use photoblog facility, you will need to rate and categorise your images - please do take the trouble to do this, it makes for better stumbles for us all!
Check that the hosting service you choose will not expire your images, or you will have images missing from your SU pages, and be aware that some of them will delete images they consider inappropriate!
Think carefully about the size of the images you upload and include on your SU pages - too many huge images might actually deter visitors from your pages!

These daisies were photographed by Mr. Helpful!

They were then uploaded to Photobucket
and displayed on this page by using
the Stumbleupon Photoblog facility!

http://mr-helpful.stumbleupon.com/review/4122497/

Wed, 10 May 2006 01:42:26 -0700

Can I have a sticky post on my pages?

A "sticky post" is one that naturally stays at the top of a page (or is always the "latest" post in a forum). Look at This is what you can find on my pages: - this is an example of a "sticky post", *always* the first post on these pages.

There is currently no official SU facility for making or managing "sticky posts" but, as is often the case, by taking advantage of the facilities that *are* available, we can achieve the same end.

The facility that we can exploit here is the "don't change the date" option that appears beside the Save Changes button when you make (or edit) a post, see below:

Quite simply, having made your "sticky post", you will need to update it every time you add another post, in order to make sure that your "sticky" is once again the first post on your pages ... update it, but do change the date.

Do this by editing your "sticky post": you do not, unless you wish to, need to make any changes to the entry at all. Just make sure that you un-check (un-tick) the "don't change the date" option before you press the Save Changes button - then the date for your "sticky post" is changed to today's date, and it becomes the first post again! Easy, eh?!

Tip: if your "sticky post" contains any fancy formatting, you may find that the code in it is altered when you Save Changes (this is caused by the "automatics" in SU's HTML validation [actually, XHTML]). In order to avoid this, Mr-Helpful recommends that you keep a copy of your "sticky post" in a plain-text (.txt) file, so that you can quickly do a cut & paste rescue should your "sticky post" become messed up. (Mr-Helpful has to do exactly this with his "sticky post" :o)

As always, try it. If you don't like it, you can always delete the post!

http://mr-helpful.stumbleupon.com/review/3937462/

Wed, 19 Apr 2006 06:32:59 -0700

Can I sandwich text in between images?

SU currently allows for the use of only a limited amount of code within your posts. This can make it a little challenging to lay out the images and text exactly how you want, but quite a lot is possible within the constraints.

You can position text in between two images, either vertically, like this:

This text is centred and sandwiched!

or with text and images arranged horizontally, like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Note that, in both cases, there isn't a great deal of scope left over for doing any fancy padding with your text, but perhaps someone will experiment and come up with some nice tips on that front :o) Note also that the maximum total width of your images mus not exceed 715 pixels, and you will need some space left between them for the text!

The code for the vertical example:

This text is centred and sandwiched!

(note that the code for each image and the text starts on a new line)

and the horizontal example:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet .....

(note here that the code is *not* on separate lines, but all in one block)

Don't be afraid to play with different combinations of the align=left/right and center tags, and with different layouts. If it doesn't look good, simply delete it. And if you come up with something that looks good and is simple to use, then please share it!

http://mr-helpful.stumbleupon.com/review/3146254/

Fri, 27 Jan 2006 07:01:13 -0800

What colours can I use in my SU pages?

This article shows you how to colour (or size) your text, but many people have asked which colours you can use. The answer, potentially, is: hundreds! But only some of these will look good on the Profile Theme that you have chosen in your Prefs > Settings.

To colour your text you may use either: Hex Colour Codes, or "named colours" to control the colour of your text. For example, this yellow can be coded as:

this yellow or this yellow

Some sources advise that 140 (or more) colours can be named, others that certain standards restrict you to only 16. Whatever the rules, SU currently allows you to use more than 16 colours, but in practise, you might do well to pick, and settle on, your own tried and tested colour-set.

Of the standard colours, this is how they are coded and appear on my pages:

aqua��aqua
black��black
blue��blue
fuschia��fuschia
gray��gray
green��green
maroon��maroon
navy *��navy
olive��olive
purple��purple
red��red
silver��silver
teal��teal
white��white
yellow��yellow

You might like to pick and choose some colours from the bigger lists mentioned above, but don't be surprised if some don't work in SU!

Some things to watch out for:

Pick a colour(s) that will complement other themes you might choose in future - or perhaps choose a theme and stick with it. If you choose navy text for instance, and then later choose a blue theme, then that text will be nearly invisible. (see here *)
Some people hate rainbow coloured pages and animated gif's. It is your choice, but consider whether your colourful page will encourage or discourage visitors!
In HTML-speak, colour is spelled color ;o)