Style Codes (for Gharr’s Style Manual)

HTML code in Gharr’s articles (for style manual)

(The main heading is in Royal Blue; color: #4169e1)

Table of Contents

(color is golden rod; color: #daa520–to make bold golden rod, had to use plain text, color it golden rod, then make it bold, and italic in this case. The bold can change the color back to black, so may need to retry this on occasions)

This section can be confusing, because of the example headings and all the colors.

For Black Background Box color you can also do it in a paragraph tag (only for one paragraph) or a continuous paragraph using pre-tags.

Several Lines of text can be highlighted using the pre-tag.
This method is especially useful when for programs, either to show
code, or a program in operation, where the information is
significantly different from the surrounding text in meaning.
It makes it easier for the reader to focus on specific types of
information in a functional way that is not possible with
distracting surrounding text of the same style.
Paragraphing is done by looking at the background box in the edit
view, and pressing return when required so text does not stray
outside the box. This does have disadvantages, as if display is
wider, or thinner the text will not auto adjust.

This is a nice background for a Faded Comment Box, the margin also offsets the text so that the flow of reading is not interrupted:

Info: Group Name that produced the music
Comment: Not sure of “ft.” as original: https://youtu.be/luODrlELINE as only features one singer. But with 7 million views, not going to question that one.

<p style="margin-left: 50px; color: #707777; background-color: #eaeaea; border-bottom: 2px solid #e0e0ff; border-top: 2px solid #e0e0ff; border-left: 4px solid #eaeaea; border-right: 1px solid #eaeaea;">Info: Group Name that produced the music
Comment: Not sure of "ft." as original: <a href="https://youtu.be/luODrlELINE" target="_blank">https://youtu.be/luODrlELINE </a> as only features one singer. <u style="text-decoration-color: red;">But with 7 million views, not going to question that one</u>.</p>

Highlighting Text

The choice of highlighting text depends also on the colors used in the document. The colors here are chosen to conform with traditional highlighters. With computers it is also possible to use dark colors to highlight lighter text.

Text that is highlighted
General highlighting<span style="background-color: #fefa80;">Text that is highlighted</span>Text that is highlighted
Stand out highlighting (similar to red pen use)<span style="background-color: #fec0fe;">Text that is highlighted</span>Text that is highlighted<span style="background-color: #88fe88;">Text that is highlighted</span>Text that is highlighted<span style="background-color: #80fafe;">Text that is highlighted</span>Text that is highlighted<span style="background-color: #ffd0b0;">Text that is highlighted</span>Text that is highlighted<span style="background-color: #bebefe;">Text that is highlighted</span>

Horizontal (divider) Lines with Color

Generally 1px thick, and they come in many colors. Currently the color is just designed to fit in with the document, so the below color is not standard, choose the one that suits the document the best, or represents the document type. They are considered a decoration, but also help readers seperate parts of a document.

<hr style="border: 0 solid #f06040; border-top-width: 1px;" />

<hr style="border: 0 solid #f06040; border-top-width: 2px;" />

<hr style="border: 0 solid #f06040; border-top-width: 3px;" />

Special guides in how to make HTML code for specific situations for lists and quotes

No break between lines
tag (this tag is alone and has not got an end tag)

List example

one

two

three

This is the code:

<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>

Quotes simple using <q></q> tag

The <q></q> tag does not seem to be required, and is not similar to a block quote–as it is probably easier to do it in the WYSIWYG editor. In edit mode you will see a difference in how the quote marks are displayed, but this does difference does not appear in the view page screen.

So in the view page screen, both of the below examples look exactly the same, and on the edit screen the quote marks look different.

To do // or not to do // that is the question Haiku-mod

WHEN NOT USING THIS TAG:

“To do // or not to do // that is the question” Haiku-mod

Block Quote

The ref. statement is created by hitting the italic button. As you can see the reference ends up not being in italic, the block quote is already in italic, and the press of the button adds italic tags <em>italic text</em> to counteract this automatic italic form of the block quote.

The quote marks had to be added manually using the keyboard. The <q></q> tags did not seem to work here.

“Over there in the meadow.
I can see some trees.
I must say, they look very nice.”

Indenting (button on editor) to get block quote–to prevent breaks in the lines <br> tag is used.

We can see that the lists are important. However, when we indent a paragraph, using lists becomes difficult, especially when headings are combined with them! WordPress makes the
code into an invisible code, so you can not see it when you look in the text editor, but you can still add additional
tags as needed.

Adding text into an indented section (each paragraph–except those with <br>) are independent, and need you to set the color and indent amount. this paragraph started out not indented and in black! It had to be formatted to fit into this block (indented) quote section!

You don’t need to use the above code, if you choose to use insert/edit link button in editor–just make sure you get the right link.

Test link inside document: Visit the Anchor Heading in the Style Codes (for Gharr’s Style Manual)–this will not open up a new window, so try scrolling the window below the heading “Anchor, so you can’t see it to check out if this link works! Checking out WordPress, shows that this code is converted into the longer address when the file is saved! There is no harm in this, as the resultant link still gets to where it is supposed to go anyway.

Feel free to visit your text editor and see what the links look like, as I added only the #Anchor1, code for internal document use to the “Insert Link” input box, and http://wp.me/P10Tww-1Uj#Anchor1 into the “Insert Link” input box for a more general form that can be used outside this article.

—————————————————————————————————

Google Maps

Go to Google-maps, choose map, get code for map (HTML to embed in website), go to text editor and past it in… simple as that! Here is a map of Iceland for example:

Centering Google-maps can be a problem, I used the <blockquote></blockquote> tags to achieve the above effect on the map,

SPECIAL HEADERS

——Header style section beginning——

<span style="color: #cc99ff;">A Special Header</span>

Most Headings for Article Style Documents

Introduction

Main Body Headings

———————–

End Notes

References

Decoration or Theme

These headers, pictures, and the texts are specifically designed to make an article stick out. A bit of work needs to go into making these articles look good and artistic.

Header Two; color: #ffaa55

Header Three; color: #ff99cc

HEADER FOUR; color: #66cccc

HEADER FIVE; color: #8888ff

Commonly used for highlighting subjects, and make them stand out from the many other articles.

HEADER SIX; color: #a0aaaa

Minor headings; color: #daa520 (example):

The Article: None; color: #aba37c

Black Standard Jessica : None; color: none

Grey Landis : None; color: #808080

V.D. Lime Green Jessica : None; color: #003300

Green Music Songs : None; color: #44aa44

Bright (lime) Green Landis : None; color: #00ff00

Red Music Songs : None; color: #aa4444

Purple Music Songs : None; color: #880088

Violet Music Songs : None; color: #5b22ca (blue/purple)

Mauve (Violet Blue) Landis : None; color: #cc99ff

V.D.Blue Jessica : None; color: #003366

Blue Music Songs : None; color: #3366ff

Sapphire Jessica : None; color: #333399

Lt Blue Landis : None; color: #99ccff

Magenta Music Songs : None; color: #dd22dd

Dark Gold Music Songs : None; color: #aaaa44

Pink Music Songs : None; color: #ff8080

V.Lt. Pink Landis : None; color: #ff99cc

Orange Music Songs : None; color: #ff6600

Bright Orange Landis : None; color: #ff9900

Divider example

——Header Style Section end——

Material Placed at the Very End of a Page or Post

Altered in 2017 as part of the Re-Branding of Gharr (changing what I do). Possibly… this type of re-branding exercise will occur again some time in the future as Gharr has aspects that seem to follow the product life cycle model: a normal curve or “S-Curve.”

❤ Always working hard to put a smile on your face #Techno #Chans, and vocaloid fans. You are the reason why I do what I do, and why I am really here… to make your world a better place is my wish. Some call it selfish functionality (I enjoy the thought of making this tiny solar system a better place, and acting on those impulses. To put that smile on your face is my ultimate project of love to this universe), and others call it an alternative word for love: Extensionality (◕ω◕)—doing things that enhance your life (⋟^ω^⋞)/

Last edited in Month Year

The Material below this point may, or may not be supported by the article, author, or any of those people or organizations that may be mentioned in the above article.

Any material below this point could be: adverts; endorsements; paid to click sites (some may try to trick you into clicking on them by using misleading graphics and/or words); misleading material; material that is for, or against the above article; or other types of material that is not part of the above article.

In single article view: this article does have an associated “Leave a Reply” and “Enter your comment here…” comment box below this point. You should get used to where this comment box is located before you try to leave a comment for this article.

Thank you for taking an interest in this WordPress page.

———☆☆☆———

ACTUAL CODE (the color is teal)

<p style="text-align: center;"><span style="color: #aaaaaa;">———☆☆☆———</span></p>
<p style="border-bottom: 2px solid #000000; border-top: 2px solid #000000; color: #ff70a0; background-color: #000050; text-align: center;">⭐️ Be Whoever You Want To Be, Say Whatever You Like ⭐️</p>⭐️ Don’t forget that most of the posts I do here, and the music also 🚪Works on TOR✅ Be whoever U want to be #Techno #Chans and Vocaloid fans: support #Free #Speech &amp; #Human #Rights⭐️ <a href="https://www.privacytools.io/" rel="noopener" target="_blank">https://www.privacytools.io/</a> "provides knowledge and tools to protect your privacy against global mass surveillance." #Free #Speech Say want you want, be whoever you want.
❤ Always working hard to put a smile on your face #Techno #Chans, and vocaloid fans. You are the reason why I do what I do, and why I am really here... to make your world a better place is my wish. Some call it selfish functionality (I enjoy the thought of making this tiny solar system a better place, and acting on those impulses. To put that smile on your face is my ultimate project of love to this universe), and others call it an alternative word for love: Extensionality (◕ω◕)—doing things that enhance your life (⋟^ω^⋞)/
<p style="text-align: center;"><span style="color: #aaaaaa;">———☆☆☆———</span></p><h5 style="text-align: center;"><span style="color: #808080;">Last edited in Month Year</span></h5><p style="text-align: left;"><span style="color: #808080;">Shortened link to article: Heading Name [article]:</span> WordPress_shortened_url</p><p style="text-align: center;"><span style="color: #888888;">—End of Article—</span></p><h6 style="text-align: center;"><strong><span style="color: #808080;">The Material below this point may, or may not be supported by the article, author, or any of those people or organizations that may be mentioned in the above article.</span></strong></h6><h6 style="text-align: center;"><strong><span style="color: #808080;">Any material below this point could be: adverts; endorsements; paid to click sites (some may try to trick you into clicking on them by using misleading graphics and/or words); misleading material; material that is for, or against the above article; or other types of material that is not part of the above article.</span></strong></h6><h6 style="text-align: center;"><strong><span style="color: #808080;">In single article view: this article does have an associated "Leave a Reply" and "Enter your comment here..." comment box below this point. You should get used to where this comment box is located before you try to leave a comment for this article.</span></strong></h6>
<h6 style="text-align: center;"><strong><span style="color: #808080;">Thank you for taking an interest in this WordPress page.</span></strong></h6><p style="text-align: center;"><span style="color: #aaaaaa;">———☆☆☆———</span></p>

Gharr is currently in hiatus–Text

During re-branding of Gharr (changing what I do) in 2017, am working to reword this to reflect a new concept of working with the global-community…

Gharr is currently in hiatus: “I miss writing all those articles, and sharing all those great things, and ideas on the internet.” 2015

ACTUAL CODE (the color is teal)

<h6 style="text-align: center;"><span style="color: #857cab;">Gharr is currently in hiatus: “I miss writing all those articles, and sharing all those great things, and ideas on the internet.” Sept 2016</span></h6>