HTML - Revision history

MGentry: /* Tips and Troubleshooting */

2015-05-05T21:56:30Z

‎Tips and Troubleshooting

Lammy: /* Adding a Border Around Text */

2014-09-28T04:50:26Z

‎Adding a Border Around Text

Lammy: Text replace - "colour" to "color"

2014-03-31T05:52:51Z

Text replace - "colour" to "color"

Lammy at 04:28, 18 February 2014

2014-02-18T04:28:12Z

Lammy at 23:10, 11 January 2014

2014-01-11T23:10:34Z

Lammy at 23:09, 11 January 2014

2014-01-11T23:09:29Z

Malicei: /* Editing Text Appearance */

2013-12-10T03:53:04Z

‎Editing Text Appearance

Malicei: /* Links and Images */

2013-12-10T03:48:31Z

‎Links and Images

Malicei: /* Editing Text Appearance */

2013-12-10T03:47:02Z

‎Editing Text Appearance

Malicei: /* Where to find the image URL */

2013-12-10T03:38:55Z

‎Where to find the image URL

← Older revision		Revision as of 21:56, 5 May 2015
Line 143:		Line 143:

	=Tips and Troubleshooting=		=Tips and Troubleshooting=
		+	*'''Lammy, [http://www.wajas.com/profile.php?id=1205 (#1205)] has created a HTML guide on Wajas, located [http://www.wajas.com/communicate_topic.php?id=587489 here].
		+
	*'''Only edit the text where indicated'''. Everything else is code and needs to be copied exactly. Do not remove the quotation marks in codes where they are present, as they are part of the code.		*'''Only edit the text where indicated'''. Everything else is code and needs to be copied exactly. Do not remove the quotation marks in codes where they are present, as they are part of the code.

@@ Line 51: / Line 51: @@
 ''&lt;p style="border:SIZEpx STYLE #HEXCODE;"&gt;''Your Text Goes Here''&lt;/p&gt;''
-(Replacing SIZE with a thickness in pixels that you want the border to be, HEXCODE with the [[hex code]] of the color you want the border to be, and STYLE with the style of border you want. Examples of possible border styles include dotted, dashed, solid, double, ridge, groove, inset, or outset.
+(Replacing SIZE with a thickness (whole number) in pixels that you want the border to be, HEXCODE with the [[hex code]] of the color you want the border to be, and STYLE with the style of border you want. Examples of possible border styles include dotted, dashed, solid, double, ridge, groove, inset, and outset.
 You can also modify borders individually by using border-left, border-right, border-top and border-bottom instead of border.)

@@ Line 7: / Line 7: @@
 ==Editing Text Appearance==
-It should be noted that most style codes can be used as either ''&lt;p style=""&gt;  &lt;/p&gt;'' or ''&lt;a style=""&gt;  &lt;/a&gt;'' (most notable exceptions being the width and text-align attributes, which can only be used with ''&lt;p style=""&gt;  &lt;/p&gt;'').  Using the ''&lt;p style=""&gt;  &lt;/p&gt;'' version will separate the text that it edits from any text around it by padding and linebreaks, whereas ''&lt;a style=""&gt;  &lt;/a&gt;'' version will not separate the edited text from the text around it and is more facilitative of flowing text. ''&lt;a style=""&gt;  &lt;/a&gt;'' will only affect a single line of text. If you want to add a background colour to make it look like a textbox, you need to use ''&lt;p style=""&gt;  &lt;/p&gt;''.
+It should be noted that most style codes can be used as either ''&lt;p style=""&gt;  &lt;/p&gt;'' or ''&lt;a style=""&gt;  &lt;/a&gt;'' (most notable exceptions being the width and text-align attributes, which can only be used with ''&lt;p style=""&gt;  &lt;/p&gt;'').  Using the ''&lt;p style=""&gt;  &lt;/p&gt;'' version will separate the text that it edits from any text around it by padding and linebreaks, whereas ''&lt;a style=""&gt;  &lt;/a&gt;'' version will not separate the edited text from the text around it and is more facilitative of flowing text. ''&lt;a style=""&gt;  &lt;/a&gt;'' will only affect a single line of text. If you want to add a background color to make it look like a textbox, you need to use ''&lt;p style=""&gt;  &lt;/p&gt;''.
 DISCLAIMER: Please use these sparingly and tastefully, as overuse of large or brightly colored text is obnoxious and could get you in trouble.

← Older revision		Revision as of 04:28, 18 February 2014
Line 64:		Line 64:

	(Replacing SIZE with the number of pixels you want the text to stay on one line before wrapping to the next line. Maximum comfortable width on Wajas forums is 400px, assuming you have not set the padding.)		(Replacing SIZE with the number of pixels you want the text to stay on one line before wrapping to the next line. Maximum comfortable width on Wajas forums is 400px, assuming you have not set the padding.)
		+
		+	===Centering Paragraphs===
		+	''<p style="margin:auto;">''Your Text Goes Here'''</p>''
		+
		+	(If you add this in, it will automatically center your paragraph. So, if you have a paragraph which is 300px wide on the forums and add this to the code it will automatically appear in the middle of the post rather than off to the left.)

	===Changing Text Font===		===Changing Text Font===

@@ Line 7: / Line 7: @@
 ==Editing Text Appearance==
-It should be noted that most style codes can be used as either ''&lt;p style=""&gt;  &lt;/p&gt;'' or ''&lt;a style=""&gt;  &lt;/a&gt;'' (most notable exceptions being the width and text-align attributes, which can only be used with ''&lt;p style=""&gt;  &lt;/p&gt;'').  Using the ''&lt;p style=""&gt;  &lt;/p&gt;'' version will separate the text that it edits from any text around it by padding and linebreaks, whereas ''&lt;a style=""&gt;  &lt;/a&gt;'' version will not separate the edited text from the text around it and is more facilitative of flowing text. <a style=""></a> will only affect a single line of text. If you want to add a background colour to make it look like a textbox, you need to use <p style=""></p>.
+It should be noted that most style codes can be used as either ''&lt;p style=""&gt;  &lt;/p&gt;'' or ''&lt;a style=""&gt;  &lt;/a&gt;'' (most notable exceptions being the width and text-align attributes, which can only be used with ''&lt;p style=""&gt;  &lt;/p&gt;'').  Using the ''&lt;p style=""&gt;  &lt;/p&gt;'' version will separate the text that it edits from any text around it by padding and linebreaks, whereas ''&lt;a style=""&gt;  &lt;/a&gt;'' version will not separate the edited text from the text around it and is more facilitative of flowing text. ''&lt;a style=""&gt;  &lt;/a&gt;'' will only affect a single line of text. If you want to add a background colour to make it look like a textbox, you need to use ''&lt;p style=""&gt;  &lt;/p&gt;''.
 DISCLAIMER: Please use these sparingly and tastefully, as overuse of large or brightly colored text is obnoxious and could get you in trouble.

@@ Line 7: / Line 7: @@
 ==Editing Text Appearance==
-It should be noted that most style codes can be used as either ''&lt;p style=""&gt;  &lt;/p&gt;'' or ''&lt;a style=""&gt;  &lt;/a&gt;'' (most notable exceptions being the width and text-align attributes, which can only be used with ''&lt;p style=""&gt;  &lt;/p&gt;'').  Using the ''&lt;p style=""&gt;  &lt;/p&gt;'' version will separate the text that it edits from any text around it by padding and linebreaks, whereas ''&lt;a style=""&gt;  &lt;/a&gt;'' version will not separate the edited text from the text around it and is more facilitative of flowing text.
+It should be noted that most style codes can be used as either ''&lt;p style=""&gt;  &lt;/p&gt;'' or ''&lt;a style=""&gt;  &lt;/a&gt;'' (most notable exceptions being the width and text-align attributes, which can only be used with ''&lt;p style=""&gt;  &lt;/p&gt;'').  Using the ''&lt;p style=""&gt;  &lt;/p&gt;'' version will separate the text that it edits from any text around it by padding and linebreaks, whereas ''&lt;a style=""&gt;  &lt;/a&gt;'' version will not separate the edited text from the text around it and is more facilitative of flowing text. <a style=""></a> will only affect a single line of text. If you want to add a background colour to make it look like a textbox, you need to use <p style=""></p>.
 DISCLAIMER: Please use these sparingly and tastefully, as overuse of large or brightly colored text is obnoxious and could get you in trouble.
@@ Line 19: / Line 19: @@
 ===Underlining Text===
 ''&lt;a style="text-decoration:underline;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 ===Over-lining Text Text===
 ''&lt;a style="text-decoration:overline;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 ===Striking Through Text===
 ''&lt;a style="text-decoration:line-through;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 ===Changing Text Color===
 ''&lt;a style="color:#HEXCODE;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing HEXCODE with the [[hex code]] of the color you want the text to be.)
@@ Line 33: / Line 37: @@
 ===Adding Background Color to Text===
 ''&lt;a style="background-color:#HEXCODE;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing HEXCODE with the [[hex code]] of the color you want the area around the text to be.)
@@ Line 38: / Line 43: @@
 ===Adding Background Image to Text===
 ''&lt;a style="background-image:url(IMAGEURL);"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing IMAGEURL with the url of the image you wish to use.)
@@ Line 43: / Line 49: @@
 ===Adding a Border Around Text===
 ''&lt;a style="border:SIZEpx STYLE #HEXCODE;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing SIZE with a thickness in pixels that you want the border to be, HEXCODE with the [[hex code]] of the color you want the border to be, and STYLE with the style of border you want. Examples of possible border styles include dotted, dashed, solid, double, ridge, groove, inset, or outset.
@@ Line 56: / Line 63: @@
 ''&lt;p style="width:SIZEpx;"&gt;''Your Text Goes Here''&lt;/p&gt;''
-(Replacing SIZE with the number of pixels you want the text to stay on one line before wrapping to the next line.)
+(Replacing SIZE with the number of pixels you want the text to stay on one line before wrapping to the next line. Maximum comfortable width on Wajas forums is 400px, assuming you have not set the padding.)
 ===Changing Text Font===
 ''&lt;a style="font-family:FONTNAME;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing FONTNAME with the name of the font which you want to use, such as verdana or times. NOTE: Only basic, web-friendly fonts will work.)
@@ Line 65: / Line 73: @@
 ===Changing Text Size===
 ''&lt;a style="font-size:SIZEpx;"&gt;''Your Text Goes Here''&lt;/a&gt;''
-(Replacing SIZE with a numerical value for the text in pixels, such as 15 or 30.)
+(Replacing SIZE with a numerical value for the text in pixels, such as 15 or 30. You can also use pt instead of px. If you use pt, the font sizes work like those in word documents (so 10pt, 14pt, 32pt etc) and can be easier to work with than pixels.)
 ===Combining Codes===
@@ Line 84: / Line 93: @@
 This gives us:
 ''&lt;a style="font-family:verdana;color:#FF0000;"&gt; &lt;b&gt;''Your Text Goes Here''&lt;/b&gt; &lt;/a&gt;''
@@ Line 108: / Line 118: @@
 ''&lt;img src="Image URL Goes Here" title="Mouseover text goes here"&gt;''
-Mouse-over text will appear when someone viewing your image idles their cursor over it.
+Mouse-over text will appear when someone viewing your image hovers their cursor over it.
 ===How to post an image that links to a page===

@@ Line 12: / Line 12: @@
 ===How to make text Bold===
-''&lt;b&gt; Your Text Goes Here &lt;/b&gt;''
+''&lt;b&gt;''Your Text Goes Here''&lt;/b&gt;''
 ===How to Italicize text===
-''&lt;i&gt; Your Text Goes Here &lt;/i&gt;''
+''&lt;i&gt;''Your Text Goes Here''&lt;/i&gt;''
 ===Underlining Text===
-''&lt;a style="text-decoration:underline;"&gt; Your Text Goes Here&lt;/a&gt;''
+''&lt;a style="text-decoration:underline;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 ===Over-lining Text Text===
-''&lt;a style="text-decoration:overline;"&gt; Your Text Goes Here&lt;/a&gt;''
+''&lt;a style="text-decoration:overline;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 ===Striking Through Text===
-''&lt;a style="text-decoration:line-through;"&gt; Your Text Goes Here&lt;/a&gt;''
+''&lt;a style="text-decoration:line-through;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 ===Changing Text Color===
-''&lt;a style="color:#HEXCODE;"&gt;Your Text Goes Here&lt;/a&gt;''
+''&lt;a style="color:#HEXCODE;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing HEXCODE with the [[hex code]] of the color you want the text to be.)
 ===Adding Background Color to Text===
-''&lt;a style="background-color:#HEXCODE;"&gt;Your Text Goes Here&lt;/a&gt;''
+''&lt;a style="background-color:#HEXCODE;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing HEXCODE with the [[hex code]] of the color you want the area around the text to be.)
 ===Adding Background Image to Text===
-''&lt;a style="background-image:url(IMAGEURL);"&gt;Your Text Goes Here&lt;/a&gt;''
+''&lt;a style="background-image:url(IMAGEURL);"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing IMAGEURL with the url of the image you wish to use.)
 ===Adding a Border Around Text===
-''&lt;a style="border:SIZEpx STYLE #HEXCODE;"&gt;Your Text Goes Here&lt;/a&gt;''
+''&lt;a style="border:SIZEpx STYLE #HEXCODE;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing SIZE with a thickness in pixels that you want the border to be, HEXCODE with the [[hex code]] of the color you want the border to be, and STYLE with the style of border you want. Examples of possible border styles include dotted, dashed, solid, double, ridge, groove, inset, or outset.
@@ Line 49: / Line 49: @@
 ===Changing Text Alignment===
-''&lt;p style="text-align:ALIGNMENT;"&gt;Your Text Goes Here&lt;/p&gt;''
+''&lt;p style="text-align:ALIGNMENT;"&gt;''Your Text Goes Here''&lt;/p&gt;''
 (Replacing ALIGNMENT with either left, right, or center)
 ===Changing Paragraph Width===
-''&lt;p style="width:SIZEpx;"&gt;Your Text Goes Here&lt;/p&gt;''
+''&lt;p style="width:SIZEpx;"&gt;''Your Text Goes Here''&lt;/p&gt;''
 (Replacing SIZE with the number of pixels you want the text to stay on one line before wrapping to the next line.)
 ===Changing Text Font===
-''&lt;a style="font-family:FONTNAME;"&gt;Your Text Goes Here&lt;/a&gt;''
+''&lt;a style="font-family:FONTNAME;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing FONTNAME with the name of the font which you want to use, such as verdana or times. NOTE: Only basic, web-friendly fonts will work.)
 ===Changing Text Size===
-''&lt;a style="font-size:SIZEpx;"&gt;Your Text Goes Here&lt;/a&gt;''
+''&lt;a style="font-size:SIZEpx;"&gt;''Your Text Goes Here''&lt;/a&gt;''
 (Replacing SIZE with a numerical value for the text in pixels, such as 15 or 30.)
@@ Line 83: / Line 83: @@
 This gives us:
-''&lt;a style="font-family:verdana;color:#FF0000;"&gt; &lt;b&gt;Your Text Goes Here&lt;/b&gt; &lt;/a&gt;''
+''&lt;a style="font-family:verdana;color:#FF0000;"&gt; &lt;b&gt;''Your Text Goes Here''&lt;/b&gt; &lt;/a&gt;''
@@ Line 89: / Line 89: @@
-''&lt;p style="text-align:center;font-family:verdana;color:#FF0000;"&gt; &lt;b&gt;Your Text Goes Here&lt;/b&gt; &lt;/p&gt;''
+''&lt;p style="text-align:center;font-family:verdana;color:#FF0000;"&gt;&lt;b&gt;''Your Text Goes Here''&lt;/b&gt;&lt;/p&gt;''
 ==Links and Images==

@@ Line 93: / Line 93: @@
 ==Links and Images==
 ===How to post a link===
-&lt;a href="Link URL Goes Here"&gt;What you want the link to say goes here&lt;/a&gt;
+''&lt;a href="Link URL Goes Here"&gt;''What you want the link to say goes here''&lt;/a&gt;''
 ===How to post an image===
-&lt;img src="Image URL Goes Here"&gt;
+''&lt;img src="Image URL Goes Here"&gt;''
 ===How to resize an image===
-&lt;img src="Image URL Goes Here" width="FIRSTNUMBER" height="SECONDNUMBER"&gt;
+''&lt;img src="Image URL Goes Here" width="FIRSTNUMBER" height="SECONDNUMBER"&gt;''
 (replacing FIRSTNUMBER with a numerical value for the width in pixels, and SECOND NUMBER with a numerical value for the height in pixels)
@@ Line 106: / Line 106: @@
 ===How to add mouse-over text to an image===
-&lt;img src="Image URL Goes Here" title="Mouseover text goes here"&gt;
+''&lt;img src="Image URL Goes Here" title="Mouseover text goes here"&gt;''
 Mouse-over text will appear when someone viewing your image idles their cursor over it.
 ===How to post an image that links to a page===
-&lt;a href="Link URL Goes Here"&gt;&lt;img src="Image URL Goes Here"&gt;&lt;/a&gt;
+''&lt;a href="Link URL Goes Here"&gt;&lt;img src="Image URL Goes Here"&gt;&lt;/a&gt;''
 The "Link URL" is the address of the page you want the link to go to.  The "Image URL" is the location of the image.

@@ Line 120: / Line 120: @@
 ===Where to find the image URL===
 For Firefox, right click on the image and select "copy image location".
-For Internet Explorer, right click on the image and select "properties".  Copy the address listed after "Address(URL)".  If you paste the Image URL in the address bar of your browser and press enter, you should come up with a page featuring nothing but the image in question.
+For Internet Explorer, right click on the image and select "properties".  Copy the address listed after "Address(URL)".
 '''Remember!'''  If you want to post an image off the Custom Demo, you must save the finished image to your computer and then upload it to an image hosting site.   Linking to the custom demo image directly will cause it to show up incorrectly to other users because that image isn't stored on the server and ceases to exist when you leave the Custom Demo page.  You must save your completed design to your computer, upload it to an image hosting site, and use the Image URL provided there.