How to Make Your Posts More Colorful
This thread is in response to all of the people who have asked how to add color to our posts.
This is not meant to be an exhaustive study of the use of HTML markup code but merely a brief tutorial to allow everyone to be able to use some of the more useful features in their posts. If you are interested in a more comprehensive understanding of HTML and CSS, I would recommend this website: W3Schools
1). Copy the following markup
<a style = "color:blue;">Text Goes Here</a>
2). Insert your desired text in the space that reads "text goes here"
3). If you want to use a different color, all of the primary colors will work in place of "blue."
1). Insert either the "s" or "strike" opening and closing tags around the desired text
<s>
This Text Will be Strikethrough</s>
or
<strike>
This Text Will be Strikethrough</strike>
1). Use the following code to make the font size a percentage of the original font
<a style = "font-size:200%;">Double Sized</a>
Much of this no longer works on SD in 2015.
52 Answers
The boxes below are created using the HTML element. I decorate them with margins, padding, and borders. **Margins** Margins are used to create space above, below, to the right and to the left of the "box." **Padding** Padding creates space between the text and the edges of the box. For both the margin and padding elements, the order is... 1. (all four assigned) TOP, RIGHT, BOTTOM, LEFT 2. (three assigned) TOP, RIGHT/LEFT, BOTTOM 3. (two assigned) TOP/BOTTOM, RIGHT/LEFT 4. (one assigned) all margins will take the value provided Example: margin: 10px 20px (would assign 10 pixel margin to top and bottom, 20 pixel margin to left and right) **Making Paragraphs within the Box** To separate actual text paragraphs within the element, you will need to use the two elements in a row between the paragraphs...this is because text within the element will not be parsed like text outside the element. Click the edit link to view my code.
Simple. Background color is specified. Padding is set to 20px for top, bottom, right, and left. Margin is set to 50px for top and bottom, 0 for left and right...this creates space above and below the box, but makes it extend to the very edges of the post area.
Normally, I would set the top and bottom margins to 25px and it would add to 50px between them, but somehow that doesn't work right here within the framework of Spanishdict.com's system.
Demonstrating how padding works. Top padding = 5px; Right padding = 10px; Bottom = 50px; Left = 100px.
A single dotted 2px border attribute is added to the box.
Padding: all sides are set to 20px, except for left padding, which is set to 100px.
Instead of specifying a border attribute, a border-left attribute is specified.
Main concept: you can center the box by specifying a RIGHT/LEFT margin attribute (100px in this example).
Also, just having fun with font and color. Also specified both a border-left and a border-right attribute.
Just having fun with the margin attribute.
Borders can be solid, double, dotted, or dashed.
You can right-justify your text, too.
<
p
A different way to attack borders. Using these attributes (like border-width, border-color) will work like margin and padding. If you specify 4 (border-width: thin thick medium thin), it will affect top, right, bottom, left respectively. If you specify 3, it will affect top, right/left, bottom. If you specify 2, it will affect top/bottom, right/left. Specify 1, affect all 4 borders.
<
p
Still playing with borders.
<
p
Use borders for 3D effects. Center your text.
<
p
Nauseate people with your color and font choices.
These techniques no longer work on SD
Hi Issabela
I'm all thumbs because I tried to use a different font... and failed.
Try using this markup:
b><a style = "font-family:Bradley hand itc;">Text Goes Here</a>
b>This is what your fonts should look like
If you want other fonts just replace "bradley hand itc" with the appropriate font style of your choosing. For example:
This is:
You can use Microsoft Word to look at the names of various fonts if you are unaware of their names. A word of caution, however. If you want to make sure that everyone can view the fonts as you have written them then you might want to stick to the more standard fonts and avoid using anything too exotic.
none of this works with the 2015 version of SD
Or you could expand your vocabulary.
Here is a background image box.
I created the background tile by modifying an image from mayang's free textures.
Links must be manually created with the tag within these "boxes."
I put a little space between the bottom of the box and the stuff SpanishDict.com puts at the bottom of the post with a bottom margin of 50px.
Style tags no longer work on SD
This is in response to Foxluv's request
I would like to know how to do a hard carriage return so my sentences do not run all together as they are doing now.
How do you underline text? How do you tab?
Summary
| Description | HTML Markup |
| Paragraph Tags | <p>text goes here</p> |
| Indent | <p style="text-indent:2.5em;">text goes here</p> |
| Underline | <p style="text-decoration:underline">text goes here</p> |
| Carriage Return: | <br/> |
Explanation
If you want to indent the first line of a paragraph (tab) then for each paragraph use the text-indent property.
Copy the following html markup and type your paragraph between the closing and opening angle brackets "> <" where it says text goes here:
markup
<p style="text-indent:2.5em;">text goes here</p>
Notice that if you removed the part that reads style="text-indent:2.5em;" your paragraph would no longer be indented on the first line and you would be left with the following markup:
markup
Notice the <p> and the </p> still remain. These are called the opening and closing paragraph tags, respectively, and as long as your text is sandwiched in between these two tags (whether you decide to indent or not), you will be able to make use of another useful tag - the break tag (carriage returns). The break tag looks like this:
markup
<br/>
Example:
markup
<p style="text-indent:2.5em;">Now putting it all together, this is an example of a paragraph that makes use of the indent property, and I will place several carriage returns (line breaks) <br/><br/>to demonstrate<br/>how this <br/><br/><br/>works.<br/><br/> Look below at the result to see what effect each break tag created.</p>
result
Now putting it all, together this is an example of a paragraph that makes use of the indent property, and I will place several carriage returns (line breaks)
to demonstrate
how this
works.
Look below at the result to see what effect each break tag created.
There are a couple of methods that you might try to place an underline.
Method 1: The Underline Tag
One simple method to place an underline is with the underline tag
markup
<u>text goes here</u>
This tag is deprecated, which basically means that there are better ways to go about doing this (style sheets), and there is no guarantee that the tag will work in the future on all browsers.
Example:
markup
<u>Here is an example where I tried to use the underline tag</u>
result
Here is an example where I tried to use the underline tag
Unsuccessful in Firefox
Method 2: The "text-decoration" attribute
For this method simply copy the following code
markup
<p style="text-decoration:underline">text goes here</p>
Example:
markup
<p style="text-decoration:underline">Here is an example using text-decoration</p>
result
Here is an example using text-decoration
successful in Firefox
These techiques no longer work on SDl. Style tags are stripped out.
height is 370px
line 2
line 3
spacing made with break tags
line 5
line 6
line 7
line 8
line 9
line 10
text color using anchor tags
line 12
width is 470px
line 14
line 15
Don't forget about the <a style="text-decoration: blink; color: red; font-size: 20px;">blinking</a> text. (This doesn't work in Google Chrome.)
No longer works on SD, style commands are stripped out upon saving
Style commands are now stripped out by SD upon saving.
Wall Paper Background
this no longer works in SD
|
This is some text. This is some text. This is some text. This is some text. This is some text. |
Another text. Another text. Another text. Another text. Another text. Another text. Another text. |
No longer works on SD
|
Alternately, you can use a table set to 100% width and with a single cell. You can either style the table's background color and font color, and set padding in the cell, or you can put all the style in the cell (the element). The table's cellpadding and cellspacing attributes should be set to 0.
The paragraphs still have to be manually separated. Using the element is easier, in my opinion. |
Some of these techniques no longer work on SD
I just wanted to post a link to a thread that demonstrates the use of the "paragraph tag" and how it can be used to indent your text as well as to increase the space between paragraphs. I hope that you find it useful. How do I insert a Paragraph in my post
You can make your entire post have a single background color. This would be a modified version of my "fun with boxes."
It would be a single box with margins set to 0. However, paragraphs would have to be manually separated with two tags.
Testing...........
Direct Object Pronouns
| ???????? | ?????????Singular????????? | ??????????Plural?????????? |
|---|---|---|
| 1st person | me (me) | nos **(us)*** |
| 2nd person | te (you, familiar) | os (you, familiar plural) |
| 3rd person | lo, la (him, her, you formal) | los, las (them, you, formal plural) |
????????????????????????????????????????????????????????????
<p style = "color:red;">Testing paragraph tags within code blocks</p>
| Testing | Markdown | number alignment | extra spacing | extra columns |
|---|---|---|---|---|
| within | Codeblocks | 100000 | ||
| 150 | ||||
| 15624 |
| | | | | |
| - | :-: | :-: | :-: | :-: |
| | **Birds** | **Mammals** | **Insects** | **Fish** |
| **Six Legs** | No | No | Yes | No |
| **Wings** | All | Rarely | Many | None |
| **Gills** | No | No | No | Yes |
| **Multicellular** | Yes | Yes | Yes | Yes |
Result
| Birds | Mammals | Insects | Fish | |
| Six Legs | No | No | Yes | No |
| Wings | All | Rarely | Many | None |
| Gills | No | No | No | Yes |
| Multicellular | Yes | Yes | Yes | Yes |
Lets link back to this header
| >Item1 | Value | Another | and another |
|---|---|---|---|
| Computer | $1600 | 80 | something |
| Phone | $12 | 89 | or |
| Pipe | $1 | 78 | another |
- Here is a bulleted list of text
- Here is another level
- one final level of indentation
- and another
- and another
- back to the previous level
- hopefully
- a numbered list
- List item
- finally back to the original level
List item
<blink>``Preformatted code is also easy.™ just indent 4 spaces
For any markup that is not covered by Markdown’s syntax, use HTML tags.
<object data="test.avi" type="video/x-msvideo" width=160 height=120></object>
~~~~
<object width="425" height="344">
<embed src="http://www.youtube.com/v/-YUxbDEPFiM&hl=fr&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed> </object>
~~~
This is another header ## with a closing mark
—
If you want a break between lines
just end your line with two blank spaces
and it should allow you to single space your
text however you choose
For example
Here is another
group of words that are
given breaks wherever
I choose
-
This is my footnote and here is my link: Back to the Header ↩
