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.

  1. Highlighting Text or headings
  2. Horizontal Lines
  3. 🖊 Directive Text or headings: https://wp.me/P10Tww-4tz
  4. Backgound Text or headings
  5. 🖊 Pens [article]: https://wp.me/P10Tww-4tz
  6. Alignment Bio Style: http://wp.me/P10Tww-4cv
  7. Bold Italic with in colored paragraph
  8. Special guides in how to make HTML code for specific situations for lists and quotes
    1. List example
    2. Quotes simple using <q></q> tag
    3. Block Quote
    4. Indenting (button on editor) to get block quote–to prevent breaks in the lines <br> tag is used.
  9. Super-Script and Sub-Script
  10. Anchors
  11. ░ Link Variations ░ [article]: https://wp.me/P10Tww-4tn
  12. Google Maps
  13. SPECIAL HEADERS
  14. END OF SECTION CODE FOR MOST MAIN ARTICLES
  15. Gharr is currently in hiatus–Text
  16. END OF PAGE CODE

Highlighting Text or headings

The code for highlighting text or headings uses the span tag:

<span style="color: #daa520; background-color: #000000;">Put Text Here</span>

When used for headings, other tags and options are used also, for example the above heading uses this bunch of tags (anchor tags are not included here, because they are not needed in all cases):

<h3><span style="color: #daa520; background-color: #000000;"><a id="Highlighting"></a>Highlighting Text or headings</span></h3>

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.

<pre style="color: #daa520; background-color: #eeeeee;">Used to get continuous background color and text type.</pre>

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

  1. one
  2. two
  3. 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.”

Ref: Statement made in year 1.

Code for Block Quote: <blockquote></blockquote>
Code for quote: <q></q>

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!
But what better way to show how good they are, with a real example.
1) list item one
2) list item two
3) list item three
4) list item four

Super-Script and Sub-Script

Use the <sup></sup> and <sub></sub> tags

The sampled data matched this equation Y = X2 × 2 closely see the end notes: note1 for more details.

Anchors

<a id="Anchor1">Descriptive text for anchor</a>

To make an anchor to the heading “Anchor1” we add this code:

<h3><a id="Anchor1"></a>Anchor1<h3>
  • (HTML view). Notice that  the word “Anchor1” is outside the tag, this has something to do with the way WordPress works, it will not allow Anchor1 to be inside the </a>.
  • You will need to put the above code (teal color) into your HTML code, the editor can not do this for you!
  • To access anchor code inside the document use: <a href=”#Anchor1″>Visit the Anchor Heading in the Style Codes (for Gharr’s Style Manual)</a>.
  • To access this anchor outside this document use: <a href=”http://www.w3schools.com/html_links.htm#Anchor1&#8243; > Visit the Anchor Heading in the Style Codes (for Gharr’s Style Manual)</a> or the shortened version: <a href=”http://wp.me/P10Tww-1Uj#Anchor1&#8243; > Visit the Anchor Heading in the Style Codes (for Gharr’s Style Manual)</a>
  • 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.
  • Test link if it were outside document: Visit the Anchor Heading in the Style Codes (for Gharr’s Style Manual)–this should open up a new window in this case. Please note: this link can be placed outside this document (on other websites or other WordPress articles) and still work.
  • 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 One; color: #99ccff

Sample code for the above header one style.

<h1><span style="color: #99ccff;">Header One; color: #99ccff</span></h1>

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

BD10307_

——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.”

❣ Product life cycle model reference: http://productlifecyclestages.com/

END OF SECTION CODE FOR MOST MAIN ARTICLES–LOOKS LIKE THIS:

Please note: this section is below the heading of the End Notes and References (if they exist).

———☆☆☆———

⭐️ Be Whoever You Want To Be, Say Whatever You Like ⭐️

⭐️ 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 & #Human #Rights

⭐️ https://www.privacytools.io/ “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 (⋟^ω^⋞)/

———☆☆☆———

Last edited in Month Year

Shortened link to article: Heading Name [article]: WordPress_shortened_url

—End of Article—

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>

END OF PAGE CODE

—End of Page—

Shortened link to article: Words and phrases [article]: http://wp.me/P10Tww-1IF

~~~

ACTUAL CODE (the color is teal)
<p style="text-align:center;"><span style="color:#888888;">—End of Page—</span></p>
<p style="text-align:left;"><span style="color:#888888;">Shortened link to article:</span> Article Name [article]: <a href="https://gharrhome.wordpress.com/" target="_blank">Shortened link to article</a></p>
<p style="text-align:center;"><span style="color:#888888;">~~~</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>

———End of Page———

Shortened link to article: Style Codes (for Gharr’s Style Manual) [article]: http://wp.me/P10Tww-1Uj

~~~

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s