Moving some information from The Sandbox to a more appropriate, permanent place:

A little code in HTML mode can make your text fancier, with muted or bold colors and highlighting, sizes, different fonts, or other effects. (Yes, when you're starting a discussion you get visual-mode options for some of that, but this technique works in replies and comments too.)

One method is to enclose your text, as seen in HTML mode, in <span style="incantations go here">your text to be dressed up</span>. Quick shortcut: underlining the text in visual mode applies that "span" container for you; then in HTML mode, replace "text-decoration: underline;" with your own directives.

The code I used above:

... fancier, with <span style="color: gray;">muted or</span> <span style="color: maroon; background-color: yellow;">bold colors and highlighting</span>, <span style="font-size: 200%;">sizes</span>, <span style="font-family: 'Book Antiqua',Georgia,serif; font-style: italic;">different fonts</span>, or other effects.

(Note the single quotes around 'Book Antiqua' in the list of fonts to try to use.)

Even fancier stuff, thanks to a link from Daniel, coming soon!... added below.
[and a "muted" color example added above]

Views: 135

Replies to This Discussion

I've been using "background" to specify background colors. Either way works: "background:white;" or "background-color:white;".

When you specify a text color, it's good to give a background color as well. Even if 99% of us leave the default black-on-white color scheme on our web browsers alone, giving both colors is safer, just in case someone has a light-on-dark setup.

Turns out that Atheist Nexus's mobile view uses a light gray (not white) background for the starting post in a group discussion. (Replies are on white, as are comments on a group page.)

Very cool, Grinning Cat, and useful to boot!  Thanks a LOT for this!

Thanks to Daniel W. for sharing this link about text effects:

It's intended for Ning site owners like Brother Richard who want to customize their site's look -- that's why "it might make more sense if written backwards in Greek then translated to Maya glyph alphabet" -- but we can borrow incantations from there for our own messages!

The trick: look for { style properties inside curly brackets } and put them inside the <span style="..."> tag.

Let's try a "RETRO" shadow effect!

For what I just did, I used:

<span style="font-size: 400%; background: white; color: #7d4217; text-shadow: 3px 2px 0 #333333, 6px 4px 0 #999999;">Let's try a "RETRO" shadow effect!</span>

The "color" and "text-shadow" parts were from inside the curly brackets in the "text_retro" effect definition in that "hieroglyphic" web page.

Trying another effect:

Some politicians' statements deserve to be rendered with a "pants on fire" style.

I added "font-size: 300%; background: #000000; display: inline-block; padding: 0.5em;" to the "fire" stuff.

An important and cool detail about "text-shadow" is that a shadow can be blurred. Details:

Web design professionals: I know some people criticize, which I linked to, for being simplistic, but it's a useful way to get started. (And it lets you experiment with "Try it!" editors.)

On fonts: Here's an article listing several extremely common, and good-looking, fonts that are very likely to be installed on people's computers. No idea about phones.

16 Gorgeous Web Safe Fonts To Use With CSS

BTW, at some point "they" added buttons for bold, italics, underline, etc. to HTML mode, like the buttons in regular visual mode. You'll get to see the markup they add immediately.

Also, colors can be specified both by name and in a variety of ways numerically. For example, this color, which I specified as #22aa66, has a little red, more blue, and lots of green. (That "hexadecimal" color specification, very commonly used, uses two digits each for red, green, and blue; digits range 0,1,2,...,8,9,a,b,c,d,e,f. #000000 is pure black, #ffffff is pure white, #00ff00 is a bright pure green, #ffff00 is bright yellow -- additive mixing, not like paints or pigments.)




Update Your Membership :



Nexus on Social Media:

© 2020   Atheist Nexus. All rights reserved. Admin: The Nexus Group.   Powered by

Badges  |  Report an Issue  |  Terms of Service