Please vote and give your opinion about Today's Topic at Talk:Topics!

User info boxes

From WWR

Jump to: navigation, search

Contents

How to put an userbox on a page

  1. Copy the "template tag" (bolded text, including the curly brackets) from the "how to use it" column below. You do not need to go into edit mode, just swipe over the text in the column and copy it.
  2. Go to the page to which you want to add the info box.
  3. Click the "Edit" link, and a page opens that has a big edit box.
  4. Paste what you copied into the big edit box. If the tag has a pipe (|) in it, you need to personalize the text that follows the pipe.
  5. Click "Save page".

Align to right side of page

The userboxes are configured to align to the left side of the page. To align them to the right side of the page, copy this code and put the userbox code on the middle line.

<div style="float: right; margin: 0 0 0 1.5em; ">
{{Userbox name}}{{Userbox name}}
</div>

User page info boxes

Usage How to use it
(You can use these on any page or in chats)
What you see
If you play something, put this on your user page. {{Musician}} Template:Musician
If you've visited WWR in Talkeetna put, this on your user page. {{Been to WWR}} Template:Been to WWR
Add to your user page if you have pooped in the Whole Wheat Radio outhouse in Talkeetna. {{Pooped in the WWR outhouse}} Template:Pooped in the WWR outhouse
If you're planning to attend Wheatstalk 2008, put this on your user page. {{Going to Wheatstalk 2008}} Template:Going to Wheatstalk 2008
If you have a crush on Mr. Monkey, put this on your user page. {{Mr. Monkey crush}} Template:Mr. Monkey crush
If you fly something, put this on your user page. {{Pilot}} Template:Pilot
Add to your user page if you garden. Adds your page to the gardeners category. {{I garden}} Template:I garden
Add to your user page if... you love cats. {{Cats}} Template:Cats
Add to your user page if... you brew beer. {{Brewer}} Template:Brewer
Add to your user page if you blog. Adds your page to the bloggers category and has a link to your blog. {{I blog|http://www.yourdomain.com}}
Use your full URL after the pipe.
Mac lovers put it on their user page. {{Love Mac}} Template:Love Mac
Add to your user page if... well you know if it works for you or not. No category. {{Peacenik}} Template:Peacenik

Personal info boxes

Usage How to use it
(You can use these on any page or in chats)
What you see
Jimbob uses this to indicate his double-favorite songs. Jimbob's. See Template:Doublefav to make one like it.
Double Favorite This song is one of
Jimbob's Double Favorites.

Customizable info boxes

Usage How to use it
What you see
What you're currently doing. {{I am|whatever you're doing}}

e.g.: {{I am|listening}} or {{I am|at work}}
Image:Yell.gif
{{I am|xyz}}
I am currently listening.
Anything you want to say. {{Chatbox|whatever you want to say|optional image URL or wiki Image:Xyz.jpg|optional background color i.e. red, blue, green, etc}}

e.g.: {{Chatbox|Well now I've seen everything|http://www.wholewheatradio.org/wiki/images/e/ea/Anon.gif|red}}'
Anon.gif Well now I've seen everything
Post something you're pondering — just like the EJs! {{Just thinking|whatever you are thinking}}
I was just thinking about this...
your thought.
Image:I_think.gif


Music-related user info boxes

Usage How to use it
(You can use these on any page or in chats)
What you see
To indicate you'd like to hear more of an artist. {{Hear more|Your user name}}

Further details: Template talk:Hear more
More!
Image:Thumbsup.gif

username wants to
hear more of this artist.
Usage: {{Hear more|your username}}
To indicate you want a particular album. Put it on an album's page. {{Wish list|Your user name}}

Further details: Template talk:Wish list
Image:Star-45px.gif This is on
Username's wish list.
To indicate you have a particular album. Put it on an album's page. {{Have album|Your user name}}

Further details: Template talk:Have album

How to create new info boxes

You don't have to know about coding to make info boxes. You can create info boxes just by copying others and changing the colors, text and images.

When you want to learn more about the coding part see Editing cheat sheet, How to for information about wiki code. W3Schools has easy tutorials and information about CSS.

  1. Open the page for an existing info box that you like. For example, click on Template:Been to WWR
  2. Click the "Edit" link. Another page opens with a big edit box filled with code.
  3. Swipe over all the code in the edit box and copy it into your clipboard.
  4. Think of a name you'd like to call your new info box. Make it something easy and self-explanatory so people can easily put it on their user page. To create the page, put Template:Whatever you want to call it in the Search box on the left hand side of the screen and hit the "Go" button. A page comes up saying your page does not currently exist but you can create it. Click the link to create it.
  5. A page opens with a big empty edit box. Paste the code from your clipboard into the edit box.
  6. Modify the image and/or text that displays for the box. Don't modify any of the other formatting if you don't know what it does. See the Example below.
  7. Save your page.
  8. Anyone can now include your info box on a page by using the format: {{Whatever you want to call it}}

Example

Template:Been to WWR This example uses the Template:Been to WWR to show some things you can do with info box templates.

Line 1 - Opening CSS tag/Border weight and color

<div style="float:left; clear:left; margin:0 1.5em .25em 0; border-style:solid; border-width:1px; border-color:#6B594F;">
  1. Set "border-color" value to either a color name or color number. When using color numbers the number sign is required.

See colors or handy chart of recognized color names for examples.

Line 2 - Opening HTML tag/Background color of the entire info box

<table cellspacing="0" style="width:238px; background:wheat;">
  1. Set "background" value to either a color name or color number.

Line 3 - Background color of left section of box

<tr><td style="width:45px; height:45px; text-align:center; background:#F1F1F1;">
  1. Set "background" value to either a color name or color number.

Line 4 - Image and/or text in the left section of box

[[Image:Jwalkwwrlogo10.gif|30px]]</td>
  1. Type an image location, and image's size if necessary. This example uses an image that has been uploaded to the WWR wiki. To change the size use this format: [[Image:imagename.jpg|45px]]. The pixel (px) value determines the width that the image will display.

You can also link to non-wiki images by putting a URL directly to an image file on the WWR site, however you cannot resize these. (e.g.: http://www.wholewheatradio.org/wwimages/3%20BLIND%20MICE.JPG.)

Emoticons can be added by using the emoticon tag. e.g.: <emoticon>smile</emoticon>

Some examples have text rather than a picture in this section. See Line 5 for ideas on setting the text.

Line 5 - Text weight, style and color of right section

<td style="padding:4px; line-height:1.25em; text-align:center; font-weight:bold; color:#6B594F;">
  1. Set text color for the right section of the box by changing the "color" value.
  2. Set other text parameters by changing "font-style" or "font-weight". "Font-family" can be added, but not all computers have the same fonts.

Line 6 - Right section content and wiki category link

I [[:Category:Been to WWR|have been]] to<br>Whole Wheat Radio<br>in [[Talkeetna]].
  1. Enter the text or links to an image or emoticon for the right-hand box.
  2. If you want to link to a category, use the format above. Notice the colon before the word "Category" without it the category name will not show in your content. It also requires that you add a pipe (|) followed by an alternate name (can actually be the same name as the category).

If your info box includes a category (not required), use a category name that makes sense for your box. When users click on your category link, they will go to a page that shows everyone who has included that box on their user page.

Line 7 - All the closing tags for the template/Category

</td></tr></table></div><noinclude>[[Category:User page templates]]</noinclude><includeonly>[[Category:Been to WWR]]</includeonly>
Include a category in your info box: If you want all the pages that use your info box to be included in a category, the category code needs to be entered on this line between the "include only" tags and without the colon before the word "Category". (With the colon, only a link to the category is created. Without the colon the page is actually added to the category.)
Don't include a category: Delete everything from <includeonly> through </noinclude> so the line looks like this:
</td></tr></table></div><includeonly>[[Category:Been to WWR]]</includeonly>

Don't mess with the "Category:User info boxes" part. This adds your template to a category of info boxes.

Some example info boxes to give you formatting ideas

What you see Code is at
I am a member of the
very elite WWR
transgendered club
Template:Infobox Example 1
Image:Sparkitchaticon-small.gif Sparkit has ranked this box
extremely boring
Template:Infobox Example 2

See also

Personal tools
2.59 secs to build