विकिपीडिया:स्टाईल

Style is page layout, baby! Or in another word: formatting. Here we deal with format elements like content structuring, borders, page color, etc. Well, there's a little more to style than that, and the rest is covered here too....

Skins

• Gallery of user styles

Layout themes

Article format

The default format for user pages is the article format, using standard headings, paragraphs, bulleted lists, etc. But an article-styled user page need not look drab and is more than adequate for presenting information about yourself. Since it is so easy, it's a perfect place to start. See the following user pages as examples of well-developed user pages in article format:

• Antandrus' user page
• Schuminweb's user page

Menu format

• User:Darkfalls

Table formats

• Main Page format
• Custom Portal format
• Custom table format
  • With menu
  • Without menu

Format elements

Alternate page title header

Note: This method is a hack which does not work with all Wikipedia skins. For example, users of the Classic skin will have the links at the top of the page covered up by the title.

Title headers are headers that cover up the default header at the top of a page. The default title header has the name of the page in big bold letters. If you don't like the default, follow the instructions below

1. First, create a user subpage (described in this section) titled "User:Example User/Header"
2. Then, copy the following code into the subpage and change the parts that you can change (for example, the part that says "HEADER TEXT YOU WANT")
3. Transclude the header onto your userpage (transcluding was described in the making subpages section)
4. Follow this link to see an example of the header. It will be at the top-left side of the page.

Example code:

{| style="position:absolute; top:0; width:100%; background:#F8FCFF; color:#888;" valign="middle"
|-
|[[Image:OPTIONAL IMAGE.jpg|38px]]
<h1 style="margin:0; border-bottom:0; color:COLOR OF TEXT;">
HEADER TEXT YOU WANT
|}

Borders

Borders look nice. Borders add spice. And they're the right price.

The examples below include closing codes, which may make it difficult to utilize them on talk pages. To have borders and backgrounds extend to the end of the page regardless of what is added, simply leave off the closing codes (</div>, </tr>, </td>, |}) at the end of the border markup examples.

Some example borders:

Welcome! User Page · Talk page · Archive · Awards · Contributions · Edit count · Sandbox
Sample text Sample text Note that this frame will only extend as far as your text, so you have to have at least one complete line of text. Sample text Sample text Sample text. The body of your user page would go in here (that is, text, pics, etc.).

---

साचा:POTD

The above design is best used for short pages, as it mimicks a picture frame. It would work well for images, awards, etc.

How's this for a border?

Place your navbar here Hi there     TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT To customize, change the border colors. TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT What's up?     TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

Round corners

As of November 2008, round corners will only display in Mozilla Firefox, Apple Safari and Google Chrome.
To add round corners to a box or frame, include the {{Round corners}}; template (just as shown, including semi-colon) as a style parameter. Note that the element to be rounded must have a border in the first place. Here's a markup example:

<div style="border:1px solid #5599FF; {{Round corners}}; margin: 5px;">
sample text sample text sample text sample text
</div>

To see the specific code for creating round corners, see Template:Round corners.

For a cool example of the use of round corners, see Zeerus' user page

Color

Change page color with CSS

To change the color of your user page, simply age the following code, replacing the Capatilized text with the desired web colors:

{| | style="background:BACKGROUND COLOR; color:TEXT COLOR" |

So, you wantto use fancy colors, eh? THe following is a range of Web-Safe colors (nondithering) translucated from User:Resident Mario/Tablet

Contents

To suppress the automatic table of contents box from appearing on your userpage, place the following line somewhere on your userpage:

__NOTOC__

To have the table of contents box float to the right, place the following line where you want the toc to appear:

{{TOCright}}

Scroll boxes

To create a scrollbox, use the "overflow:auto" style code. Be sure to also specify a "height: nnpx", where nn is the height you want. Here's an example of one 150px tall:

• What is the meaning of life? And what does that question mean?
• Where is the line between life and non-life?
• Where does choice come from?
• Why is life proactive, as opposed to nonlife, which simply obeys the laws of physics, without using energy to—say—defy gravity?
• Can emotion be programmed?
• Where do we feel?
• Why does art move us?
• What makes us want to be better, to have purpose?
• Who are you and what do you want?
  • That is, who are you, really? The true you, deep inside.
  • And what do you really want (but for whatever reason haven't committed to getting)?

The possible functions are overflow:"scroll" (puts two scroll bars), overflow:"auto" (puts scrollbars only when necessary), oveflow:"hidden" (hides overflow), and overflow:"visible" (auto; overflow simply flows out of the border).

Show/Hide sections

Here's an example of collapsed/expandable sections:

About me

Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.

Subpages

• Sandbox
• My favorite contributions
• User page links
• Awards, thank yous, and such
• Userboxes

To do

1. fly
2. ride an orca
3. visit the moon
4. achieve immortality or the closest thing to it

Licensing

I authorize all my mainspace contributions under the Multi-licensed with the Creative Commons Attribution Share-Alike License versions 1.0 and 2.0. I'll authorize usage to all other spaces and any talk page post upon request and at my discretion.

Also, there is a template: Template:Hide. For example: साचा:Hide

Action links

Switched features

Boxes

• To make a box, do the following:

1. Type <div style="background-color:COLOR YOU WANT;"> before the text
2. Choose the color (Check out these pages: [1][2][3] for a full list of colors you can use)
3. Type your text
4. Type </div> after the text

• Overall, your code should look like this:

<div style="background-color:yellow;">Hi</div>

• Which will look like:

Hi

Curved borders

• To make borders curved (only works in Mozilla-based browsers) add the following code to the code described in the previous section:
• -moz-border-radius:15px;
• So, now your code should look like <div style="background-color:DarkGoldenrod; -moz-border-radius:15px;">Hi</div>
• Which would show up as

  Hi, I'm trying to get your attention and differentiate my message on the page.  

Text formatting

Here are some tips on how to format your text:

Center-Align

• To center text, use the following code:

1. Enter <div style="text-align: center;">
2. Then enter your text
3. Finally, enter </div>

• Overall, your code should look like this:

<div style="text-align: center;"> Centered text </div>

• Once you have entered that code, your text will look like this:

Centered text

Strike Through Text

• To strike through text, use the following code:

1. Enter a <s> before the text.
2. Enter the text
3. Enter a </s> after the text.

• Overall, your code should look like this:

<s>blah blah blah</s>

• Once you have entered that code, your text will look like this:

blah blah blah

Superscript

• To insert a superscript, use the following code:

1. Enter a <sup> before the text.
2. Enter the text
3. Enter a </sup> after the text.

• Overall, your code should look like this:

^{blah blah blah}

• Once you have entered that code, your text will look like this:

blah blah blah ^{blah blah blah}

Subscript

• To insert, use the following code:

1. Enter a <sub> before the text.
2. Enter the text
3. Enter a </sub> after the text.

• Overall, your code should look like this:

_{blah blah blah}

• Once you have entered that code, your text will look like this:

blah blah blah _{blah blah blah}

Hidden Comment

• To insert a hidden comment, use the following code:

1. Enter a <!-- before the text.
2. Enter the text
3. Enter a --> after the text.

• Overall, your code should look like this:

<!-- blah blah blah-->

• You will not be able to see the text on this page, but it will be seen when you try to edit this page. Hidden text is mostly used for warnings.

Secondary Headline

• To insert a secondary headline, use the following code:

1. Enter a == before the text.
2. Enter the text
3. Enter a == after the text.

• Overall, your code should look like this:

==blah blah blah==

Tab

• To insert a tab, use the following code:

1. Enter a :: before the text.

• Overall, your code should look like this:

::blah blah blah

• Once you have entered that code, your text will look like this:

blah blah blah

Font Color

• To change the color of text, use the following code:

1. Enter a <span style="color: ColorName"> before the text.
2. Choose the color
3. Enter the text
4. Enter a </span> after the text.

• Overall, your code should look like this:

<span style="color: red">blah blah blah</span>

• Once you have entered that code, your text will look like this:

blah blah blah

---

• Another way to do it is:

1. Enter a <font color="ColorName"> before the text.
2. Choose the color
3. Enter the text
4. Enter a </font> after the text.

• Overall, your code should look like this:

<font color="red">blah blah blah</font>

• Once you have entered that code, your text will look like this:

blah blah blah

Mouse Cursor

• To change the cursor of the mouse when you hover over text, do the following:

1. Enter a <span style="cursor:CURSOR YOU WANT;"> before the text.
2. Choose the cursor, (e.g. crosshair, default)
3. Enter the text
4. Enter a </span> after the text.

• Overall, your code should look like this:

<span style="cursor: crosshair;">blah blah blah</span>

• Once you have entered that code, and you put the mouse over the text, it should have a different mouse cursor:

blah blah blah

Links

• To make external links look internal, use the following

1. Enter a <span class="plainlinks"><font color="002bb8"> before the text.
2. Enter the external link
3. Enter a </font></span> after the text.

• Overall, your code should look like this:

<span class="plainlinks"><font color="002bb8">[http://wikipedia.com external link]</font></span>

• Once you have entered that code, the external link should look like this:

external link

• Note that if someone is using a custom skin that specifies different link colors, for example green for internal links, and purple for "redlinks," a link formatted with this code will still look blue, and not match other links in appearance, to that user.

Bolding

• To make text bold, do the following:

1. Enter 3 apostrophes ''' before the text.
2. Enter the text
3. Enter 3 more apostrophes ''' after the text.

• Overall, your code should look like this:

'''text'''

• Once you have entered that code, the text should look like this:

text

Italics

• To italicize text, do the following:

1. Enter 2 apostrophes '' before the text.
2. Enter the text
3. Enter 2 more apostrophes '' after the text.

• Overall, your code should look like this:

''text''

• Once you have entered that code, the text should look like this:

text

Underlining

• To make underline text, do the following:

1. Enter <u> before the text.
2. Enter the text
3. Enter </u> after the text.

• Overall, your code should look like this:

<u>text</u>

• Once you have entered that code, the text should look like this:

text

Font size

• To make text a certain size, use the following code:

1. Enter a <font size="4"> before the text.
2. Choose the size
3. Enter the text
4. Enter a </font> after the text.

• Overall, your code should look like this:

<font size="4">blah blah blah</font>

• Once you have entered that code, your text will look like this:

blah blah blah

Font Families

• To use the following font families, use the codes below:

1. <span style="font-family: (desired font); font-size: 12pt">
2. Enter the font you want
3. Directly after the code, enter your text
4. Enter </span>after the text

So, it should look like:

<span style="font-family: Monotype Corsiva; font-size: 12pt">Blah blah blah</span>

Which will turn out as:

Blah blah blah

List of Fonts

Font Name:	Example of font:
Agency FB	Example
Algerian	Example
Andale Mono IPA	Example
Arial	Example
Arial Black	Example
Arial Narrow	Example
Arial Rounded MT Bold	Example
Baskerville Old Face	Example
Bauhaus 93	Example
Bell MT	Example
Berlin Sans FB	Example
Berlin Sans FB Demi	Example
Bernard MT Condensed	Example
Blackadder ITC	Example
Bodoni MT	Example
Bodoni MT Black	Example
Bodoni MT Condensed	Example
Bodoni MT Poster Compressed	Example
Book Antiqua	Example
Bookman Old Style	Example
Bradley Hand ITC	Example
Britannic Bold	Example
Broadway	Example
Brush Script MT	Example
Californian FB	Example
Calisto MT	Example
Castellar	Example
Centaur	Example
Century Gothic	Example
Century Schoolbook	Example
Chiller	Example
Colonna MT	Example
Comic Sans MS	Example
Cooper Black	Example
Copperplate Gothic Bold	Example
Copperplate Gothic Light	Example
Courier New	Example
Curlz MT	Example
Edwardian Script ITC	Example
Elephant	Example
Engravers MT	Example
Eras Bold ITC	Example
Eras Demi ITC	Example
Eras Light ITC	Example
Eras Medium ITC	Example
Felix Titling	Example
Footlight MT Light	Example
Forte	Example
Franklin Gothic Book	Example
Franklin Gothic Demi	Example
Franklin Gothic Heavy	Example
Franklin Gothic Medium	Example
Franklin Gothic Medium Cond	Example
Freestyle Script	Example
French Script MT	Example
Garamond	Example
Georgia	Example
Gigi	Example
Gill Sans MT	Example
GulimChe	Example
Impact	Example
Kristen ITC	Example
Lucida Console	Example
Lucida Handwriting	Example
Marlett	Example
MingLiU	Example
Monotype Corsiva	Example
MS Gothic	Example
MS Hei	Example
MS Outlook	Example
MS Song	Example
Old English Text MT	Example
Symbol	Example
Tahoma	Example
Times New Roman	Example
Trebuchet MS	Example
Webdings	Example
Wingdings	Example
Wingdings 2	Example
Wingdings 3	Example

Picture formatting

Images, with the proper copyright tags, can be placed onto your userpage.

Inserting an Image

[[Image:Cscr-featured.png]]

This inserts an image as seen below.

[[Image:Cscr-featured.png|Star]]

Every image should have a brief description text. This enables blind wikipedians using a screen reader to know what the image is about. "Star" is the descriptive word in this case.

[[:Image:Cscr-featured.png]]

Add a colon before Image to create a link to an image.

Image:Cscr-featured.png

Left Alignment

[[Image:Cscr-featured.png|left]]

This aligns an Image to the left.

Right Alignment

[[Image:Cscr-featured.png|right]]

This aligns an Image to the right.

Center alignment

[[Image:Cscr-featured.png|center]]

This aligns an Image in the middle.

Auto-alignment

You can auto-align an Image one of two ways.

Framing

Framing an Image will automatically set the Image to the right side of the screen and frame it. (Like a picture frame)

To frame an Image type in:

[[Image:Cscr-featured.png|frame]]

Which will appear like this:

NOTE: This will force the image to be in its original size (to change the size use thumbnails or do not use the frame).

Thumbnails

Thumbnailing a picture is similar to framing because it, again, automatically aligns it to the right. What's different about thumbnails is that now you have room to write text below it and can change the size. (Like a photograph from a camera)

To thumbnail a picture type in:

[[Image:Cscr-featured.png|thumb]]

Which will appear like this:

Making Images bigger and smaller

To change the size of an image type:

[[Image:Cscr-featured.png|80px]]

Captions

To add a caption to an image, type:

Caption

[[Image:Cscr-featured.png|thumb|Caption]]

or

[[Image:Cscr-featured.png|thumb|right|Caption]]

or

[[Image:Cscr-featured.png|thumb|right|80px|Caption]]

Galleries

To make a gallery of images, type

<gallery>
Image:Bob.png|Caption
Image:Cscr-featured.png|Caption
</gallery>

• 
  Caption1
• 
  Caption2

Templates

There are plenty of users out there looking to spruce up their pages, too! This section lists a few of the really cool apps developed by others.

Digital Clock A tool developed by Anakin101, it allows you to display a digi-clock that displays the time, changing as time, well, passes. The template allows you to change the format (24 or 12 hours), the size of the numbers. and the color of the clock (any color! no, really! It uses transparency and background colors to make any color you want! For the clock on the right, the following bit of code was used: {{User:Anakin101/digiclock |format= 12 |offset= 0 |size= 45 |color= skyblue }}

Moon Phase On the right is a template that automatically displays the current moon phase, created by Dbachman. The one on the right is more workable, though, by World (no border).

Emoticons

Also called smileys, these emoticons are useful for adding emotional expression to text messages. Definitely not for use in articles, but suitable for enhancing messages on talk pages, especially user talk pages. They can also be used as menu icons and user page art.

Humanist - [[Image:HumanismSymbol.PNG|22px]]
Smiley 1 - [[Image:Smiley.svg|19px]]
Smiley 2 - [[Image:Face-glasses.svg|21px]]
Smiley 3 -
Smiley 4 - [[image:SNive.gif|19px]]
Smiley 5 - [[image:SFriendly.gif|19px]]
Smiley 6 - [[Image:Face-wink.svg|23px]]
Smiley 7 - [[image:SConfident.gif|20px]]
Smiley 8 - [[image:SInnocent.gif|18px]]
Smiley 9 - [[Image:Choice toxicity icon.png|21px]]
Smiley 10 - [[Image:Tongue.png|21px]]
Smiley 11 - [[image:SMocking.gif|19px]]
Smiley 12 चित्र:Blush.png - [[Image:Blush.png|19px]]

Smiley 13 - [[Image:XD-smiley.png|20px]]
Smiley 14 - [[Image:Emblem-cool.svg|20px]]
Smiley 15 - [[Image:Happy.gif|22px]]
Smiley 16 - [[Image:Face-grin.svg|25px]]
Smiley 17 - [[Image:Face-devil-grin.svg|25px]]
Smiley 18 - [[image:SCongratulate.gif|19px]]
Smiley 19 - [[image:SSceptical.gif|21px]]
Smiley 20 - [[image:SHurt.gif|19px]]
Smiley 21 - [[image:SIndifferent.gif|19px]]
Smiley 22 - [[Image:Animalien-smiley.gif|20px]]
Smiley 23 - [[image:SYawning.gif|19px]]
Smiley 24 - [[Image:Sleeping.png|25px]]

Smiley 25 - [[image:Very_sorry.gif|19px]]
Smiley 26 - [[image:Confused-tpvgames.gif|21px]]
Smiley 27 - [[Image:Confused.png|19px]]
Smiley 28 - [[image:SUpset.gif|19px]]
Smiley 29 - [[image:SNasty.gif|19px]]
Smiley 30 - [[image:Sad-tpvgames.gif|21px]]
Smiley 31 - [[Image:Frowny.svg|20px]]
Smiley 32 -
Smiley 33 - [[image:Shocked-tpvgames.gif|21px]]
Smiley 34 - [[Image:Face-surprise.svg|22px]]
Smiley 35 - [[image:Misc-tpvgames.gif|20px]]
Smiley 36 - [[image:SHysterical.gif|18px]]
Smiley 37 - [[image:SShocked.gif|18px]]
Smiley 38 - [[Smiley green alien KO.svg|25px]]
Smiley 39 - [[Image:Face-crying.svg|25px]] Smiley 40 - [[Image:Face-smile-big.svg|25px]]

See also

Formatting Pictures

श्शTitle Headers

Suggested Tools