HomeQ&AHow to Make Your Posts More Colorful

How to Make Your Posts More Colorful

68
votes

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


To Add Color

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


Strikethrough

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>


Font Size

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.

24853 views
updated SEP 22, 2015
edited by DilKen
posted by Izanoni1
wonderful post, thanks Izan:) - 00494d19, OCT 26, 2009
Wow! What an awesome post! I'll make sure to link to it in the reference section. You're the best! - Paralee, OCT 27, 2009
I L-O-V-E this post! I've been feeling like a total digi-betic! - chicasabrosa, MAR 19, 2010
updated the strikethrough reference - Izanoni1, JUL 10, 2010
Great info!Thanks! - Jraider, MAY 17, 2011
For instruction on putting in a picture see these links http://www.spanishdict.com/answers/226052/lets-practice-putting-in-a-picture-vamos-a-practicar-a-poner-en-una-imagen - sanlee, ENE 6, 2015
http://www.spanishdict.com/answers/270032/how-to-post-an-picture-in-spanish-dict-for-dummies-como-poner-una-imagen-en-su-respuesta-para-dummies- - sanlee, ENE 6, 2015
Some of the html code is being stripped out by the Spanish Dict program that is used to process what we type in the answer box before it is shown as a post. Many of the tips in this article no longer work. - DilKen, MAY 28, 2015

52 Answers

15
votes

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

updated MAY 28, 2015
edited by DilKen
posted by webdunce
am mi me gusta :) - MeEncantanCarasSonrisas, ABR 29, 2010
11
votes

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:


b>times new roman

b>comic sans ms

b>freestyle script

b>impact

b>jokerman


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

updated MAY 28, 2015
edited by DilKen
posted by Izanoni1
10
votes

Or you could expand your vocabulary.

updated AGO 3, 2011
posted by nizhoni1
I am with you ! More dialogue and less fancy bizzo, but maybe that is because I do not have a clue about what all this is. - ray76, ABR 24, 2010
This all seems way too complicated for me. I spend too much time here already. - sagiia, AGO 9, 2010
Vocabulary is great! But something fancy for the Congratulation threads is great, too! - chaparrito, AGO 10, 2010
7
votes

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

updated MAY 28, 2015
edited by DilKen
posted by webdunce
7
votes

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

<p>text goes here

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.

updated MAY 28, 2015
edited by DilKen
posted by Izanoni1
Sos un genio Izan!!!!!!!!!!!!!!!! Gracias!! :) - Benz, ABR 25, 2010
7
votes
updated JUN 19, 2011
edited by 0074b507
posted by 0074b507
5
votes

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

updated MAY 28, 2015
edited by DilKen
posted by Rex_W
4
votes

Text with colored background

Style commands are now stripped out by SD upon saving.

updated MAY 28, 2015
edited by DilKen
posted by Brett1971
No, I want the entire reply to have a colored background, not just the text that I write. - 0074b507, DIC 15, 2009
4
votes

Wall Paper Background

this no longer works in SD

updated MAY 28, 2015
edited by DilKen
posted by Izanoni1
code? - Brett1971, DIC 15, 2009
I will PM you - Izanoni1, DIC 15, 2009
Your still only doing text background. Not what I'm looking for. - 0074b507, DIC 15, 2009
This isn't a bkgrnd img q, it's a hex color, I think this is what you're asking for - Brett1971, DIC 16, 2009
4
votes

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

updated MAY 28, 2015
edited by DilKen
posted by 0074b507
Tables??? They allow tables, too? Wow! :)) - webdunce, MAR 19, 2010
4
votes
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

updated MAY 28, 2015
edited by DilKen
posted by webdunce
4
votes

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

updated AGO 14, 2011
edited by Izanoni1
posted by Izanoni1
Thanks! I was going to ask about that. :D - galsally, MAR 19, 2010
4
votes

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.

updated AGO 3, 2011
edited by webdunce
posted by webdunce
Could you guys actually write the HTML text, not just the results, for each of these awesome samples? - StephenTrevor, AGO 3, 2011
3
votes

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
updated JUL 12, 2011
edited by Izanoni1
posted by Izanoni1
Very nice...especially since it is only a test! :) - Nicole-B, AGO 9, 2010
Excellent demonstration of how to present clear and usable material with HTML markup! - territurtle, JUN 19, 2011
3
votes

Lets link back to this header

>Item1 Value Another and another
Computer $1600 80 something
Phone $12 89 or
Pipe $1 78 another
  1. Here is a bulleted list of text
  2. Here is another level
    • one final level of indentation
    • and another
    • and another
  3. back to the previous level
  4. hopefully
  5. a numbered list
  6. List item
  7. finally back to the original level
  8. List item

    &lt;blink&gt; ``

    Preformatted code is also easy.™ just indent 4 spaces

For any markup that is not covered by Markdown’s syntax, use HTML tags.

In-line image

<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


  1. This is my footnote and here is my link: Back to the Header 

updated JUL 12, 2011
edited by Izanoni1
posted by Izanoni1
SpanishDict is the world's most popular Spanish-English dictionary, translation, and learning website.
© Curiosity Media Inc.
SOCIAL NETWORKS
APPS