WikiQueer:User page design center/Style

Style is page layout, 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....



Service provider of gold leafing, italian gold leafing, silver leafing, champagne leafing, hotels & restaurants, 24k gold leafing, antique gold leafing, bronze leafing, catalogue and copper leafing to sacred places, malls and multiplexes.

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

Alternate 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 how the default looks, follow the instructions below
 * 1) First, create a user subpage titled "User:Example User/Header"
 * 2) Then, copy the following code into the subpage and change the parts in all caps (e.g.: "COLOR OF TEXT" and "HEADER TEXT YOU WANT")
 * 3) Transclude the header onto your userpage (type the full name of the subpage inside double curly brackets)

Example code:

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 (, , , |} ) at the end of the border markup examples.

Some example borders:






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

Round corners
As of November 2008, round corners will only display in Mozilla Firefox, Apple Safari and Google Chrome. EDIT: As of June 2011, round corners will display also on Internet Explorer 9

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:

 sample text sample text sample text sample text

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

Ah, the sissy way to do it.

Here's the manly way: -moz-border-radius:Xpx, where X is the number of pixels wide the rounded edge should be.

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 want to use fancy colors, eh? The following is a range of Web-Safe colors (non-dithering) 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:

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

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


 * Example page
 * Example page

 To do


 * 1) Sample Text
 * 2) Sample Text
 * 3) Sample Text

 <font face="arial" color="#6B00A8" size="+1">Licensing

<div style="background-color:#c5fcdc; font-color:#00A86B; line-height:1.5; border-width:4px; border-style:solid; border-color:#EEFFEE">

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:

Boxes

 * To make a box, do the following:
 * 1) Type   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    after the text
 * Overall, your code should look like this:
 *  Hi 

Hi
 * Which will look like:

Curved borders
Hi, I'm trying to get your attention and differentiate my message on the page.
 * 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
 * Which would show up as

Text formatting
 Here are some tips on how to format your text: 

Center-Align

 * To center text, use the following code:


 * 1) Enter  
 * 2) Then enter your text
 * 3) Finally, enter   


 * Overall, your code should look like this:

''' Centered text '''

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

Strike Through Text

 * To strike through text, use the following code:


 * 1) Enter a   before the text.
 * 2) Enter the text
 * 3) Enter a   after the text.

 blah blah blah 
 * Overall, your code should look like this:

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

Superscript

 * To insert a superscript, use the following code:


 * 1) Enter a    before the text.
 * 2) Enter the text
 * 3) Enter a    after the text.

Normal text superscript text 
 * Overall, your code should look like this:

Normal textsuperscript text
 * Once you have entered that code, your text will look like this:

Subscript

 * To insert, use the following code:


 * 1) Enter a    before the text.
 * 2) Enter the text
 * 3) Enter a    after the text.

 Normal textsubscript text 
 * Overall, your code should look like this:

Normal textsubscript text
 * Once you have entered that code, your text will look like this:

Hidden Comment

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


 * 1) Enter a   after the text.

 
 * Overall, your code should look like this:


 * 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.

==blah blah blah==
 * Overall, your code should look like this:

Tab

 * To insert a tab, use the following code:


 * 1) Enter a  ::  before the text.

 ::blah blah blah 
 * Overall, your code should look like this:


 * 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   before the text.
 * 2) Choose the color
 * 3) Enter the text
 * 4) Enter a    after the text.

 blah blah blah 
 * Overall, your code should look like this:

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


 * 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   after the text.

 blah blah blah 
 * Overall, your code should look like this:

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

Mouse Cursor

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


 * 1) Enter a   before the text.
 * 2) Choose the cursor, (e.g. crosshair, default)
 * 3) Enter the text
 * 4) Enter a    after the text.

 blah blah blah 
 * Overall, your code should look like this:

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

Links

 * To make external links look internal, use the following


 * 1) Enter a   before the text.
 * 2) Enter the external link
 * 3) Enter a   after the text.

 external link 
 * Overall, your code should look like this:

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


 * 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 <tt>  </tt>''' before the text.
 * 2) Enter the text
 * 3) Enter 3 more apostrophes <tt>  </tt>''' after the text.

<tt>  </tt>text<tt>  </tt>
 * Overall, your code should look like this:

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

Italics

 * To italicize text, do the following:


 * 1) Enter 2 apostrophes <tt> '' </tt> before the text.
 * 2) Enter the text
 * 3) Enter 2 more apostrophes <tt> '' </tt> after the text.

<tt>  </tt>text<tt>  </tt>
 * Overall, your code should look like this:

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

Underlining

 * To make underline text, do the following:


 * 1) Enter    before the text.
 * 2) Enter the text
 * 3) Enter    after the text.

 text  
 * Overall, your code should look like this:

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

Font size

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


 * 1) Enter a   before the text.
 * 2) Choose the size
 * 3) Enter the text
 * 4) Enter a   after the text.

 blah blah blah 
 * Overall, your code should look like this:

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

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   after the text

So, it should look like:

 Blah blah blah 

Which will turn out as:

Blah blah blah

Picture formatting
<div style="padding: 1px; background: lightblue; border: width: 100px; -moz-border-radius:15px; font-size: 11pt;"> Images, with the proper copyright tags, can be placed onto your userpage.

Inserting an Image


This inserts an image as seen below.





Every image should have a brief description text. This enables blind WikiQueerians 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


This aligns an Image to the left.



Right Alignment


This aligns an Image to the right.



Center alignment


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:



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:



Which will appear like this:



Making Images bigger and smaller
To change the size of an image type:



Captions
To add a caption to an image, type: or or

Galleries
To make a gallery of images, type

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.

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.


 * HumanismSymbol.PNG-
 * Smiley.svg -
 * Face-smile.svg -
 * Face-glasses.svg -
 * Face-grin expert.svg -
 * [[File:SoleteRayosÑajo.gif]] -
 * SNive.gif -
 * SFriendly.gif -
 * Face-wink.svg -
 * SConfident.gif -
 * SInnocent.gif -
 * Choice toxicity icon.png -
 * Tongue.png -
 * SMocking.gif -
 * Blush.png -
 * Face-blush.svg -
 * Face-boudeur.svg -
 * Face-sad.svg -
 * Face-tongue.svg -


 * XD-smiley.png -
 * Emblem-cool.svg -
 * Happy.gif -
 * Face-grin.svg -
 * Face-grin-braces.svg -
 * Face-devil-grin.svg -
 * SCongratulate.gif -
 * SSceptical.gif -
 * SHurt.gif -
 * SIndifferent.gif -
 * Animalien-smiley.gif -
 * SYawning.gif -
 * Sleeping.png -
 * Face-angel.svg -
 * Face-kiss.svg -
 * Face-monkey.svg -
 * Face-plain.svg -


 * Very_sorry.gif -
 * Confused-tpvgames.gif -
 * Confused.png -
 * SUpset.gif -
 * SNasty.gif -
 * Sad-tpvgames.gif -
 * Frowny.svg -
 * Shocked-tpvgames.gif -
 * Face-surprise.svg -
 * Misc-tpvgames.gif -
 * SHysterical.gif -
 * SShocked.gif -
 * Smiley green alien KO.svg -
 * Face-crying.svg -
 * Face-smile-big.svg -