Premade Pages and Posts

The approach of small components added to a document is useful, it can lead to inconsistencies that do no always look good, especially when the creative mood is not there. This list of style pages and posts are here to help out.

The basic idea behind the styles is that it makes the page easy to read, the page looks good, and it is practical as the page may be used very often. Obviously there is some conflict with style choices for a working page vs a page that is left there for other people to read.

In general for this type of work-space, documents should be short, and have plenty of pictures if possible, long sections of text might be ignored in a lot of cases.

Contents List

Standard Heading: Introduction

A lot has changed since this page was first made. Pages and articles are now more complex. The three main articles you need to consult are:

  1. Tweeting Symbols and Texting: Gharr’s Style Manual [article]: http://wp.me/P10Tww-1U1
  2. Style Codes (for Gharr’s Style Manual) [article]: http://wp.me/P10Tww-1Uj
  3. Article Tags [article]: http://wp.me/P10Tww-48f
Tweeting Symbols and Texting Contains
  • Emoji
  • ASCII
  • Symbols
  • Texting
  • Symbols
  • Very basic text code meanings
Style Codes (for Gharr’s Style Manual)
  • Background boxes
  • Comment box
  • Highlighters
  • Pens: used in for various reasons
  • Basic HTML and Style tips
  • Using anchors
  • Link Variations: marking links for various reasons (inc. links that don’t work).
  • Google maps
  • Special Headers
  • End of section, and page codes
Article Tags
  • Used in contents list
  • Working Area Standard Divider
  • Tags to show the basic class or type the document is

Article Tags: Used for various reasons to mark a contents list, article, or page

Article Tags class or type: used to define core reason for an article. This can help retain a focus in future edits, and may help divide the article into smaller parts as the article may have several focuses, or core reasons in some cases (especially the case in notes, and reports that may cover broad subjects).

Standard Heading: Topic Based Style

Introduction text. Often related to the heading, or if the heading is general in nature, it may describe what type of subjects will be mentioned under this heading.

Links and associated text is often the focus of sharing, in this type of article the links and surrounding text is bold.

Topic Heading

Topic text is just standard paragraph text. It’s related to the topic. Previously twitter discussions were mentioned here, but they get a little messy as links mix in with text. A list will follow that shows how this might be handled. In general only one or possibly two heading levels is needed for these type of articles.

📌 Plain text comments that may also be shared

Optional descriptive text or introductory text to a link. This text might no be part of the share, it may be here in case people visit the article, and might appreciate the shared link to flow with the surrounding text. The reason this text is bold is that shares are critical parts of any article here. This of course assumes that the article itself is not meant to be shared often: ☆ The link text [bio]: http://wp.me/p10Tww-1xM.

Twitter Discussions and or Interview Heading

This is an example of a two person discussion on twitter: Tribute Article to @Antwaanmusic for his 50’th Video–Let Us All Unite! (The Great Dictator speech) [article]: http://wp.me/p10Tww-1Wl

Twitter discussion can be quite complex, and trying to record them can also be very difficult. The below example, is not easy to make, but the twitter conversation is probably a lot clearer, and follows the general twitter rule of mentioning the people that you intend the message to go to.

  • @person_one — “@person_two @person_three Comment text[1].”
  • @person_two — “@person_one @person_three Comment text that is usually a part of a conversation with person one possibly[2].”
  • @person_three — “@person_one @person_two Comment text that is usually a part of a conversation with person one and or two. You can see how both people are mentioned in this example. This style of mention is based on twitter rules and is copied here[3].”
  • Break from stream: explanation text. Twitter tends to form tree like discussions, and it can be hard to follow what is going on afterwards. The break from stream often allows for this, or it may simply leave out parts that might be relevant to the topic or interview. Normally a twitter conversation or interview could continue below this point.
  • @person_one — “@person_two @person_three thank you for this interview or discussion[4].”

End Notes

The reference points don’t need to be hyperlinked, but it can be nice to have such links.

[1] Reference text and/or link

[2] Reference text and/or link

[3] Reference text and/or link

[4] Reference text and/or link

Code To Get Page or Post Style

Introduction text. Often related to the heading, or if the heading is general in nature, it may describe what type of subjects will be mentioned under this heading.

Links and associated text is often the focus of sharing, in this type of article the links and surrounding text is bold.
<h1><span style="color: #99ccff;">Topic Heading</span></h1>
Topic text is just standard paragraph text. It's related to the topic. Previously twitter discussions were mentioned here, but they get a little messy as links mix in with text. A list will follow that shows how this might be handled. In general only one or possibly two heading levels is needed for these type of articles.

<strong><span style="color: #707777;">📌 Plain text comments that may also be shared</span></strong>

<strong>Optional descriptive text or introductory text to a link. This text might no be part of the share, it may be here in case people visit the article, and might appreciate the shared link to flow with the surrounding text. The reason this text is bold is that shares are critical parts of any article here. This of course assumes that the article itself is not meant to be shared often: <span style="color: #0000ff;">☆ The link text [bio]:</span> <a href="http://Actual Link" target="_blank">http://wp.me/p10Tww-1xM</a>.</strong>
<h2><span style="color: #ffaa55;">Twitter Discussions and or Interview Heading
</span></h2>
Twitter discussion can be quite complex, and trying to record them can also be very difficult. The below example, is not easy to make, but the twitter conversation is probably a lot clearer, and follows the general twitter rule of mentioning the people that you intend the message to go to.
<ul>
    <li><strong><span style="color: #550303;">@person_one</span></strong> — "<span style="color: #707777;">@person_two @person_three</span> Comment text<sup><a href="#Anchor1">[1]</a></sup>."</li>
    <li><strong><span style="color: #550303;">@person_two</span></strong> — "<span style="color: #707777;">@person_one @person_three</span> Comment text that is usually a part of a conversation with person one possibly<sup><a href="#Anchor1">[2]</a></sup>."</li>
    <li><strong><span style="color: #550303;">@person_three</span></strong> — "<span style="color: #707777;">@person_one @person_two</span> Comment text that is usually a part of a conversation with person one and or two. You can see how both people are mentioned in this example. This style of mention is based on twitter rules and is copied here<sup><a href="#Anchor1">[3]</a></sup>."</li>
    <li><strong><span style="color: #000080;">Break from stream</span></strong><span style="color: #707777;">: explanation text. Twitter tends to form tree like discussions, and it can be hard to follow what is going on afterwards. The break from stream often allows for this, or it may simply leave out parts that might be relevant to the topic or interview. Normally a twitter conversation or interview could continue below this point.</span></li>
    <li><strong><span style="color: #550303;">@person_one</span></strong> — "<span style="color: #707777;">@person_two @person_three</span> thank you for this interview or discussion<sup><a href="#Anchor1">[4]</a></sup>."</li>
</ul>
<h1><span style="color: #99ccff;">End Notes</span></h1>
The reference points don't need to be hyperlinked, but it can be nice to have such links.

<a id="Anchor1"></a>[1] Reference text and/or link

<a id="Anchor2"></a>[2] Reference text and/or link

<a id="Anchor3"></a>[3] Reference text and/or link

<a id="Anchor4"></a>[4] Reference text and/or link

 

Standard Heading: Music List Style Page of Post

List: Often Used With Music

Artist One

☆ Artist’s or group’s name — Song, or Music Name [song/music]: link to music #Vocaloid

☆ Artist_1 & et al. (@Twitter_Name) — Song, or Music Name (Aya Uchida Cover) [dance/song/music]: link to music, http://www.uchidaaya.com/ ♬ #TheProject

Artist Two

♬ Artist’s or group’s name — Song, or Music Name [song/music]: link to music #Nice

🎶 Artist’s or group’s name — Song, or Music Name [song/music]: link to music

♫ Artist’s or group’s name — Song, or Music Name [song/music]: link to music

Code To Get Page or Post Style

<h1><span style="color: #99ccff;">List: Often Used With Music</span></h1>
<h2><span style="color: #ffaa55;">Artist One</span></h2>
☆ Artist's or group's name — Song, or Music Name [song/music]: <a href="https://youtu.be/kd1LW-4uTgw" target="_blank">link to music</a> #Vocaloid

☆ Artist_1 & et al. (@Twitter_Name) — Song, or Music Name (Aya Uchida Cover) [dance/song/music]: <a href="https://youtu.be/kd1LW-4uTgw" target="_blank">link to music</a>, <a href="http://youtu.be/KjKmOwkqvKI" target="_blank">http://www.uchidaaya.com/</a> ♬ #TheProject
<h2><span style="color: #ffaa55;">Artist Two</span></h2>
♬ Artist's or group's name — Song, or Music Name [song/music]: <a href="https://youtu.be/kd1LW-4uTgw" target="_blank">link to music</a> #Nice

🎶 Artist's or group's name — Song, or Music Name [song/music]: <a href="https://youtu.be/kd1LW-4uTgw" target="_blank">link to music</a>

♫ Artist's or group's name — Song, or Music Name [song/music]: <a href="https://youtu.be/kd1LW-4uTgw" target="_blank">link to music</a>

 

Standard Heading: Nexus Style Post or Pages

Nexus pages or posts are an attempt to centralize articles that are posted all over the place. They have a quite individual style.

The nexus pages or posts also have a page that summarizes where they are. It can be found here: ☆ Happy (Miku Hatsune PV) – English lyrics translation [song/music]: http://bit.ly/oWR4ah.

The thought of placing the listing of the nexus pages here is that one of the earliest posts made should keep Gharr’s interest, it is the starting point to all of this, but it should also be updated and expanded, it should not be a museum piece as most of the stuff here live and active.

It’s quite of lot of effort to promote stuff, and many artists are promoted here. Some posts have band details, and the many social media sites they can be found on. This information can be useful for shares, or to assist in helping understanding which members might be in charge of posting the bands updates for example. But updating such information can take a lot of time, so unless it is a interview, such extra details should be avoided, and the bands own links should provide most of the up to date information. Again this is a rule that will have grey areas, and will be broken in certain cases.

Topic Heading: Nexus Style

The band or artist’s name often goes into the heading. Neutrino actually has all green, but typical nexus will have both blue/green colors, the variation is pleasing.

Code To Get Page or Post Style

<h1>Topic Heading: Nexus Style</h1>
The band or artist's name often goes into the heading. Neutrino actually has all green, but typical nexus will have both blue/green colors, the variation is pleasing.
<ul>
    <li><span style="color: #339966;">16 [and in love] [<a href="http://wp.me/p10Tww-1LL" target="_blank">http://wp.me/p10Tww-1LL</a>], 16才 [<a href="http://wp.me/p10Tww-3xp" target="_blank">http://wp.me/p10Tww-3xp</a>]</span></li>
    <li><span style="color: #339966;">What ’bout my Star [<a href="http://wp.me/p10Tww-3xp" target="_blank">http://wp.me/p10Tww-3xp</a>]</span></li>
    <li><span style="color: #339966;">Wishing on the same star [<a href="http://wp.me/p10Tww-1LL" target="_blank">http://wp.me/p10Tww-1LL</a>]</span></li>
    <li><span style="color: #339966;">You are the reason [<a href="http://wp.me/p10Tww-1Qa" target="_blank">http://wp.me/p10Tww-1Qa</a>]</span></li>
    <li><span style="color: #339966;">You I [<a href="http://wp.me/p10Tww-2ql" target="_blank">http://wp.me/p10Tww-2ql</a>]</span></li>
</ul>

 

Standard Heading: Story Style Post or Pages

A sample of how story style might work: ☆ Verge Songs and Music [article]: http://wp.me/p10Tww-2YX

Here the green text works just fine and looks good: ✎ Cybernated Farm Systems welcomes you to the 21’st century [article]: http://wp.me/p10Tww-2IJ

Story style is the idea that not only #hashtags can help promote things, but adding a story (in the above: Japanese Myth and Stories) to the promoted thing will also help. While there is no style how a page or post is structured, with Verge there was a tendency to publish suggested articles as premade tweets and that did not work well, so Directive Text was designed to help prevent that, so the story or additional information will not harm the promotion of a song for instance.

The original premade tweet text was changed from green to blue to make it easier on the eyes.

☆ Simple Standard Headings

☆ (@link) Band ft. Name & et al. — Song Name (cover) [song/music]: link , Band website link #Hashtag (PREMADE TWEET)

📌 #Hashtag: some text #Hashtag (PREMADE STORY TWEET)

📌 #Hashtag: some text #Hashtag some text #Hashtag some text #Hashtag (PREMADE STORY TWEET)

  • ♬ Mingoz — Say You Do ( Japanese Cover ) [song/music]: http://wp.me/P10Tww-37p #MEGITSUNE (NOT A PREMADE TWEET, A DIRECTIVE TEXT)

📌 Some text (PREMADE STORY TWEET)

  • ☆ Hello blue sky train // ハロー青空トレイン — I will kiss your ring // 君の指輪にキスをする [song/music]: https://youtu.be/xWov3whuvXI (copy) (PREMADE TWEET, excluding copy word)

Code To Get Page or Post Style

To get YouTube to stay as code, it will need the double bracket, which does not show in user view.

<h1>☆ Simple Standard Headings</h1>
[youtube https://youtu.be/5AqMLGljwPk]

☆ (@<a href="https://www.youtube.com/user/unicef" target="_blank">link</a>) Band ft. Name & et al. — Song Name (cover) [song/music]: <a href="https://youtu.be/5AqMLGljwPk" target="_blank">link</a> , <a href="https://www.youtube.com/user/unicef" target="_blank">Band website link</a> #Hashtag (PREMADE TWEET)

<span style="color: #202277;">📌 #Hashtag: some text #Hashtag (PREMADE STORY TWEET)
</span>

<span style="color: #202277;">📌 #Hashtag: some text #Hashtag some text #Hashtag some text #Hashtag (PREMADE STORY TWEET)
</span>
<ul>
    <li><span style="color: #0085a0;">♬ Mingoz — Say You Do ( Japanese Cover ) [song/music]: <a href="http://wp.me/P10Tww-37p" target="_blank">http://wp.me/P10Tww-37p</a> #MEGITSUNE (NOT A PREMADE TWEET, A DIRECTIVE TEXT)
</span></li>
</ul>
<span style="color: #202277;">📌 Some text (PREMADE STORY TWEET)
</span>
<ul>
    <li>☆ Hello blue sky train // ハロー青空トレイン — I will kiss your ring // 君の指輪にキスをする [song/music]: <a href="https://youtu.be/xWov3whuvXI" target="_blank">https://youtu.be/xWov3whuvXI</a> (copy) (PREMADE TWEET, excluding copy word)</li>
</ul>

 

Standard Heading: Term, Definition Style

This is a simple HTML trick to define terms. It can be put in the glossary, end notes, reference, or definitions section.

This article uses block quotes instead: ✎ Non-interpretable language (can only be interpreted in one way) or descriptive universal language [article]: http://wp.me/p10Tww-2WF

This page uses standard headings for the term, and paragraphs or other methods in the text below the heading to define what the term in the heading means: Words and phrases [article]: http://wp.me/P10Tww-1IF

This definition method can be achieved with more control by using indentations or bullet lists and indentation.

A Gadget
1) A thing or device of some sort that might have a function.
2) A fictional inspector with lots of gadgets.
3) A mechanical device
Term: <dl> tag
Definition: The <dl> tag is used to code a description list consisting
of description terms alternating with groups of one or more detail descriptions.
Term: <dt> tag
Definition: The <dt> tag is used to code a description term
in a description list, leading into one or more detail description elements.
Term: <dd> tag
Definition: The <dd> detail description tag is used to code the
description of an item inside a dl element for a description list.
Term: Fix
Definition: repair something
Term: Thing
Definition: An undefined item of some kind
Term: Surf
Definition: To roam

Code To Get Page or Post Style

<dl><dt>A <dfn>Gadget</dfn></dt>
<dd>1) A thing or device of some sort that might have a function.</dd>
<dd>2) A fictional inspector with lots of gadgets.</dd>
<dd>3) A mechanical device</dd></dl>

<dl><dt>Term: <dfn><dl> tag</dfn></dt><dd>Definition: The <dl> tag is used to code a description list consisting
of description terms alternating with groups of one or more detail descriptions.</dd>
<dt>Term: <dfn><dt> tag</dfn></dt><dd>Definition: The <dt> tag is used to code a description term
in a description list, leading into one or more detail description elements.</dd>
<dt>Term: <dfn><dd> tag</dfn></dt><dd>Definition: The <dd> detail description tag is used to code the
description of an item inside a <b>dl</b> element for a description list.</dd></dl>

<dl><dt>Term: <dfn>Fix</dfn></dt><dd>Definition: repair something</dd>
<dt>Term: <dfn>Thing</dfn></dt><dd>Definition: An undefined item of some kind</dd>
<dt>Term: <dfn>Surf</dfn></dt><dd>Definition: To roam</dd></dl>

—End of Page—

Shortened link to article: ☆ Premade Pages and Posts [article]: http://wp.me/P10Tww-3Av

~~~

Advertisements