Mar 15, 6:10am

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

This is what you can find on my pages:


Advanced layout tip - borders & padding NEW
How do I create an index for my archive pages? UPDATED
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 I put borders around 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?

Oct 7, 2007 9:08am

  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:

<img 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;"

1. border - this controls the color, style and thickness of the border that is added to the image
   
2. 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
   
3. 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
   
4. 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:

<img style="border: solid 1px red; float: right; margin-left: 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.

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

<img style="border: double 1px gold; float: right; margin-left: 1em margin-right: 5em; 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. This example adds some padding to the right of the image - between the image and the sidebar

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

Jul 28, 2007 4:53am

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: stumbleupon.com/help.html [stumbleupon.com/help.html]

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!

Jan 1, 2007 3:30am

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:

<center><a href="http://mr-helpful.stumbleupon.com/archive/10/">10</a>  <a href="http://mr-helpful.stumbleupon.com/archive/20/">20</a>  <a href="http://mr-helpful.stumbleupon.com/archive/30/">30</a></center>

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! - use this handy SU Archive Links Creator, developed by one of our members, to create your archives link code quickly, easily, and automatically.

Dec 13, 2006 8:24am

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:
mr-helpful.stumbleupon.com/review/4543534/ [mr-helpful.stumbleupon.com/review/4543534/]


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

Or make it a <a href="http://mr-helpful.stumbleupon.com/review/407712/">fancier link</a>

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!

Jun 20, 2006 2:58am

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!

May 10, 2006 1:42am

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!

Apr 19, 2006 6:32am

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:

<font size="2"><center><img src="http://www.stumbleupon.com/images/theme0in.png" />
<font color="red">This text is centred and sandwiched!</font>
<img src="http://www.stumbleupon.com/images/theme0in.png" /></center>

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

and the horizontal example:

<font size="2"><img src="http://www.stumbleupon.com/images/theme0in.png" align="left" /><img src="http://www.stumbleupon.com/images/theme0in.png" align="right" /><font size=3 color=red>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet .....</font>

(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!

Jan 27, 2006 7:01am

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:

<font color=yellow> this yellow</font> or <font color=#FFFF00> this yellow</font>

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     <font color="aqua">aqua</font>
black     <font color="black">black</font>
blue     <font color="blue">blue</font>
fuschia     <font color="fuschia">fuschia</font>
gray     <font color="gray">gray</font>
green     <font color="green">green</font>
maroon     <font color="maroon">maroon</font>
navy *     <font color="navy">navy</font>
olive     <font color="olive">olive</font>
purple     <font color="purple">purple</font>
red     <font color="red">red</font>
silver     <font color="silver">silver</font>
teal     <font color="teal">teal</font>
white     <font color="white">white</font>
yellow     <font color="yellow">yellow</font>

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)

Mar 11, 2005 5:52am

How do you center text (and images) in your reviews?

A lot of people want to know how to center (centre!) the text in their review comments - some have created clever work-rounds using 'spacer images' and so forth, but these can be a little time consuming.

Mr-Helpful has petitioned the Devs on your behalf and is pleased to announce that a new feature has been released that will allow you to center text:

<center>This text will be centered</center>

Produces this result:

This text is centred
Use it to center (centre!) images too:

This code:

<center><a href="http://www.stumbleupon.com/community.html"><img border=0 width=100 height=100
src="http://www.stumbleupon.com/images/logo.png"></a></center>

Produces this result: