Screamer Wiki:Guides/Styling: Difference between revisions

From Screamer Wiki
Jump to: navigation, search
VisualWikitext
imported>Sumpy
(Created page with "== '''Styling an article''' == This guide explains how to style articles: how to change colors, size and font. == '''Colors''' == To change the text color, you will have to c...")
 
m (→‎top: clean up/remove __NOTOC__, removed: __NOTOC__)
 
(67 intermediate revisions by 4 users not shown)
Line 1: Line 1:
== '''Styling an article''' ==
{{DISPLAYTITLE:Styling Guide}}
This guide explains how to style articles: how to change colors, size and font.


== '''Colors''' ==
== '''Styling Guide''' ==
This guide explains how to style articles. You will learn how to change colors, size and font to make your articles pop!
 
=== '''Color''' ===
To change the text color, you will have to copy the following line of code.
To change the text color, you will have to copy the following line of code.
  <nowiki><span class="" style="color:COLORNAME; margin-bottom:1em;">TEXTHERE</span></nowiki>
  <nowiki><font color=COLOR>TEXT</font></nowiki>
Then, you have to press the http://images2.wikia.nocookie.net/screamerchecker/images/a/a8/Contibute.png button in the upper right corner of the website, then ''Edit this Page,'' and again in the upper right corner, click the ''Source'' tab. Here you will see the source code of the page. Now, paste the code where you want to change the text color.
 
Then, you have to press the <font color=#e87057>Edit source</font> button in the upper right corner. Here you will see the source code of the page. Now, paste the code where you want to change the text color.


There are nine color choices: '''black''', '''red''', '''green''', '''yellow''', '''blue''', '''cyan''', '''magenta''', '''white''' and '''orange'''. Choose the color you want and replace the ''COLORNAME'' from the code with your color.
Here are some colors that you can use.
* <font color="white">'''White'''</font>
* <font color="gray">'''Gray'''</font>
* <font color="black">'''Black'''</font>
* <font color="maroon">'''Maroon'''</font>
* <font color="red">'''Red'''</font>
* <font color="orangered">'''OrangeRed'''</font>
* <font color="orange">'''Orange'''</font>
* <font color="yellow">'''Yellow'''</font>
* <font color="lime">'''Lime'''</font>
* <font color="cyan">'''Cyan'''</font>
* <font color="blue">'''Blue'''</font>
* <font color="purple">'''Purple'''</font>
* <font color="magenta">'''Magenta'''</font>
* <font color="deeppink">'''DeepPink'''</font>
* <font color="pink">'''Pink'''</font>
* <font color="lightblue">'''LightBlue'''</font>


Then, copy the text you want to color and replace the ''TEXTHERE'' from the code with your text.
Now, simply choose the color you want from this list and replace the ''COLOR'' string with your chosen color. You can also use [http://www.w3schools.com/html/html_colornames.asp this website] to get more color codes.


And voilà, your text is now coloured!
And voilà, your text is now coloured!


== '''Size''' ==
==='''Size'''===
To change the text size,<span> you will have to copy the following line of code.</span>
 
<nowiki><font size="SIZE">TEXT</font></nowiki>
To change the text size, you will have to copy the following line of code.
<span>Then, you have to press the http://images2.wikia.nocookie.net/screamerchecker/images/a/a8/Contibute.png button in the upper right corner of the website, then </span>''Edit this Page,''<span> and again in the upper right corner, click the </span>''Source''<span> tab. Here you will see the source code of the page. Now, paste the code where you want to change the text size.</span>


Now, choose a value that's between '''7''' and '''-7'''. After, replace the ''SIZE'' from the code with the size you chose and replace the ''TEXT'' from the code with your text.
<nowiki><font size=SIZE>TEXT</font></nowiki>
 
Then, you have to press the <font color=#e87057>Edit source</font> button in the upper right corner. Here you will see the source code of the page. Now, paste the code where you want to change the text size.
 
Now, choose a value that's between '''7''' and '''-7'''. After, replace the ''SIZE'' string with the size you chose and replace the ''TEXT'' from the code with your text.


Your text size should now be changed!
Your text size should now be changed!


== '''Font''' ==
=== '''Font''' ===
<span>To change the text font,</span><span class=""> you will have to copy the following line of code.</span>
<span><nowiki><font face="FONT">TEXT</font></nowiki></span>
<span class="">Then, you have to press the http://images2.wikia.nocookie.net/screamerchecker/images/a/a8/Contibute.png button in the upper right corner of the website, then </span>''Edit this Page,''<span class=""> and again in the upper right corner, click the </span>''Source''<span class=""> tab. Here you will see the source code of the page. Now, paste the code where you want to change the text font.</span>


After that, you have to c<span>hoose a font, like '''Helvetica''' or '''Arial'''. After, replace the </span>''FONT''<span> from the code with the font you chose and replace the </span>''TEXT''<span> from the code with your text.</span>
To change the text font, you will have to copy the following line of code.
<span><nowiki><font face=FONT>TEXT</font></nowiki></span>
 
 
 
Then, you have to press the <font color=#e87057>Edit source</font> button in the upper right corner. Here you will see the source code of the page. Now, paste the code where you want to change the text font.
 
After that, you have to choose a font, like '''Helvetica''' or '''Arial'''. After, replace the ''FONT'' string with the font you chose and replace the ''TEXT'' string with your text. You can use [http://www.w3.org/Style/Examples/007/fonts.en.html#font-style this website] to learn how to do more with font styles, like changing the weight, stretch, and more.


And boom! The font face is now changed.
And boom! The font face is now changed.


'''Hope this helped you!'''
 
 
'''If you want to combine multiple text style codes in one line, just add a '';'' between them.'''
<nowiki><font color=COLOR;font size=SIZE;font face=FONT>TEXT</font></nowiki>
 
<center>
<font color="orange">'''<font size="3">Hope this helped you!</font>'''</font>
</center>
 
[[Category:Guides]]
[[Category:Community]]
[[Category:Help]]

Latest revision as of 13:40, 25 January 2023


Styling Guide

This guide explains how to style articles. You will learn how to change colors, size and font to make your articles pop!

Color

To change the text color, you will have to copy the following line of code. 

<font color=COLOR>TEXT</font>

Then, you have to press the Edit source button in the upper right corner. Here you will see the source code of the page. Now, paste the code where you want to change the text color.

Here are some colors that you can use.

  • White
  • Gray
  • Black
  • Maroon
  • Red
  • OrangeRed
  • Orange
  • Yellow
  • Lime
  • Cyan
  • Blue
  • Purple
  • Magenta
  • DeepPink
  • Pink
  • LightBlue

Now, simply choose the color you want from this list and replace the COLOR string with your chosen color. You can also use this website to get more color codes.

And voilà, your text is now coloured!

Size

To change the text size, you will have to copy the following line of code. 

<font size=SIZE>TEXT</font>

Then, you have to press the Edit source button in the upper right corner. Here you will see the source code of the page. Now, paste the code where you want to change the text size.

Now, choose a value that's between 7 and -7. After, replace the SIZE string with the size you chose and replace the TEXT from the code with your text.

Your text size should now be changed!

Font

To change the text font, you will have to copy the following line of code. 

<font face=FONT>TEXT</font>


Then, you have to press the Edit source button in the upper right corner. Here you will see the source code of the page. Now, paste the code where you want to change the text font.

After that, you have to choose a font, like Helvetica or Arial. After, replace the FONT string with the font you chose and replace the TEXT string with your text. You can use this website to learn how to do more with font styles, like changing the weight, stretch, and more.

And boom! The font face is now changed.


If you want to combine multiple text style codes in one line, just add a ; between them. 

<font color=COLOR;font size=SIZE;font face=FONT>TEXT</font>

Hope this helped you!

Retrieved from "https://screamer.wiki/index.php?title=Screamer_Wiki:Guides/Styling&oldid=121672"