User talk:Jayant412/Userbox design kit

From Wikipedia, the free encyclopedia

Contents

[edit] How to make userboxes

User:AlMac|(talk) figured out how to do this, with help from User:Ali K and others, in a couple days, then in turn User:Jayant412 had successfully created several a few days later, so whether or not these instructions are optimal, this is not rocket science, most anyone can figure it out, although we can have some hassles trying to modify them to our tastes, such as changing color combinations and using different pictures, so you may wish to ask other people who have them for additional guidance, checking links from Wikipedia:Userboxes to locate other Userbox enthusiasts who might be able to give you some tips.

This how to is aimed at helping someone, who is new to userboxes, getting something that works in minimum effort, then after you have something you like, you can further explore what is involved in designing your own, if that interests you.

[edit] Getting Started

  1. This works best if you have two windows open with your browser.
    1. window-1 is at your user page where you will be inserting user boxes for you
    2. window-2 is at the user page of someone else who already has some user boxes that you would like to copy
    3. if you wish, you could also have some text editor open, like with e-mail or word pad, for convenience of cut & paste
  2. with window-1 find where on your User Page you want to put this stuff ... like I have a section called Userboxes on mine.
    1. to create a section, if you want that kind of structure, just put two equal signs == then text for the section header then two more equal signs == and that's for a main section. Use three === equal signs around the text title for a sub-section within main, or ==== four for next level, and so forth. After saving the section or sub-section where you plan to put the user boxes, it is now easy to edit only that section.
    2. you could just cut & paste the following text to use as your section head. You can always change the text later to something more to your liking
      1. === user boxes defining who I am ===
  3. with window-2 get to where I have my Userboxes & pick out those that you wish to copy, if any
    1. let's suppose you want to copy the fourth one (well fourth now, it might not be for long) which says that I am from Planet Earth, using an ancient Greek Symbol, and a picture of our planet. This is an in-joke by people who love the Science Fiction TV series known as Stargate.
      1. It is no longer # 4 so here is what I'm referring to
This user is from the planet Earth.
    1. what we are going to do is open on my page the userbox section for editing BUT NOT ACTUALLY CHANGE ANYTHING ... instead, with it open cut & paste (copy) the code used to make one of those user boxes, and plunk that down into one of the other windows that you have open, and close my page, such as using the back button on the browser, without changing anything on my page
      1. incidentally I forgot how to do something, while crafting these instructions, so I went to http://en.wikipedia.org/wiki/Help:Variable to get the answers ... you too might find this link useful and interesting like "If you use ~~~~ it will automatically sign & date your posts with your account name" how do you "say that" without it signing and dating the name of the person saying that.
    2. Do you see the following text inside my userbox section?
      1. {{userbox-2|silver|white|[[Image:Stargate-earth-glyph.svg|36px]]|This user is from the planet [[Earth]].|[[Image:The_Earth_seen_from_Apollo_17.jpg|40px]]|#6666ff|black}}
      2. Alternatively you could cut and paste this from here talk & stick it where you want on YOUR home page
      3. While this is easy as pie to copy, after I figured it out for you, I also telling you how to extract from another edit because you might come across other people boxes that you would like to also have, so I showing you more than one way to get at this stuff.
        1. Notice in the above "code" there are some colors specified. You could substitute other color combinations to try them out to see what you like. But what colors work well, and what names can you use for the colors? Well you may want to visit this place which has combination of the words and what the colors look like. http://www.htmlgoodies.com/tutorials/colors/article.php/3478961
    3. Without making any changes to my stuff, use your mouse, or keyboard, to highlight that chunk of text, then do the command to copy what you have highlighted, then get to your other window and paste the copy into your place.
      1. Do you know how to do that?
        1. I have Microsoft Exploder and can tell you how to do it with that, but other Browsers such as Netscrape etc. may have other standards.
  2. Let's look at the text I gave you to cut & paste by example (the user box that I am from planet Earth) or you can do this with many other examples.
  3. Notice the square bracket symbols
    1. [[ open square brackets and
    2. ]] close square brackets
    3. These are used to surround some type of link in WIKI
    4. If you going to design your own, you have to find words and pictures you can use, such as the links on this page Wikipedia:Userboxes
  4. Notice the squiggly bracket symbols
    1. {{ at very beginning
    2. }} at very end
    3. I deduce these belong on the outer edges of a userbox definition, and also other kindsof WIKI templates
  5. Notice vertical line | used various places to separate different kinds of stuff
  6. Notice Image that you can use is in the format Image:WgateverName.something in which the format is well defined, such as colon right after Image then no space before whatever the name is

I am going to key some info, then save, then key some more ... I am far from done here. Plus I managed to mess up when cutting and pasting from MY window-3, so I may have to do over some of this input.

I have to telecommute to work for a few hours, so I will get back to this fun later.

Nice..i didnt think it would be so easy...Thanks a lot..i'll put up more user boxes later.. Jayant, 17 Years, India (Talk) 11:38, 23 December 2005 (UTC)

User:AlMac|(talk) 23:27, 21 December 2005 (UTC)

[edit] Sorting or arranging Userboxes

The way to sort userboxes out is fairly simple, according to Ali K: just put {| to start the table, and from then on put | before each userbox. The |- indicate next line. Finish with |}. User:AlMac|(talk) 08:13, 25 December 2005 (UTC)

[edit] Useful Templates

  • Add this to user page {{participant|Project name}} and get a standard illustration plus link to whatever project we helping out with.
  • Template:WP:UBS

[edit] Designing Your Own

So far, what I have done is tried to copy what works, then edit it to change the image used, the text used, the colors used, etc.

[edit] Userbox Enthusiasts

While learning how to do this, some people have been extremely helpful, and appear to enthusiastically wish to help other individuals create their first userboxes, and to improve our state of art.

  1. Select any userbox.
  2. Click on the image of the associated icon.
  3. Click on (toolbox) what links to that icon.
    1. You get list of other Wiki users who are using it.

This is what I sometimes do when I want to plagarize a particular picture, but the person I want to copy it from has a more complicated system of user boxes than I can figure out, so I plagarize from someone else instead.

You might mant to check out some of these people user pages for examples of user boxes, and also their relevant contributions.

So if you reading this, and you trying to get started with Userboxes, here are some people you might want to ask for help if you get stuck. User:AlMac|(talk) 00:43, 24 December 2005 (UTC)

[edit] Looking Good

In Getting Started, there was a rhetorical question: "What colors work well, and what names can you use for the colors?" directing the student to this place with what some colors look like, in combination with the words to get those appearances.

There are other attributes of web design where we can learn, by bad examples, from the mistakes and misjudgements of others, to not do that ourselves. User:AlMac|(talk) 00:08, 24 December 2005 (UTC)

[edit] Languages you speak

If you want to add a Babel box to show what languages you speak, just follow the instructions at Wikipedia:Babel. User:AlMac|(talk) 00:26, 24 December 2005 (UTC)

[edit] Useability

Arrangement of stuff on screen is very much browser dependent. See Cernen on Userbox arrangements.

It might be worth while reviewing Wikipedia:WikiProject Usability and Wikipedia talk:WikiProject Usability and its archives, such as Wikipedia talk:WikiProject Usability/archive1, to see all of the areas where past Wiki articles have fallen short of some standards that you might desire to include in your work. User:AlMac|(talk) 00:13, 24 December 2005 (UTC)

  • Accessibility - Choosing language and style that will make Wikipedia accessible to everyone, especially the disabled, the seeing-impaired, elderly, persons with only a basic understanding of a language, and those with slow internet connections.
  • Architecture - Organisation of information.
  • Design - Visual appearance of Wikipedia; making it 'easy on the eyes', and standardized (all things of a certain type should appear in the same form).
  • Compatibility - Cross-browser support; ease of use for everyone on any device and any browser
  • W3C compliance - Using HTML and CSS in a manner that promotes the above.

[edit] WP:NPOV

You might also want to review the kind of standards found in Wikipedia:WikiProject Countering systemic bias. It is pretty wonderful that Wikipedia accomodates contributors from every nation and religion on the planet, where cultures and national interests can clash off-line. User:AlMac|(talk) 00:24, 24 December 2005 (UTC)