Guide

Rights / Headlines / Tags / Featured Images / Filenames / Links / Embeds / Discourse / Proofreading / Publishing / Profiles / Brand / Styles / Helper Classes

Some features and instructions only apply to users with full access.

Anyone is welcome to join and contribute content to Techpost, even if you’ve never run your own blog or published anything you’ve written before. So long as you have a genuine interest in any of the many subjects that encompass technology, and can write in English, anyone in the world, with any point of view, is welcome to submit content.

New contributors have a few restrictions, like being limited to the front-end editor, only being able to set one featured image, and require approval for each submission. Active contributors, over time, may earn access to the full editor privileges, set as many images as they like, publish freely without an approval process, and other perks.

Concerning the content we’re willing to accept and publish, we’re pretty open-minded, and offer a lot of freedom. For the most part, you can write about whatever you like, when you like, how you like, choosing your own headlines, content, and images. We care very deeply about freedom of speech, and will do our best to keep the platform fair, allowing people to share their opinions freely, even if we don’t agree with them or some people find them offensive.

That said, this isn’t an anything goes type of platform. With kindness and respect, understanding each other should always be the goal when communicating. Within reason, we’ll allow most content, profanity, nudity, even violent images if relevant, because these are all real parts of life, and as long as it’s legal in the United States (where we’re based and the laws of which we must abide) and as long as your words don’t cross a line to actually attack or violate the lives, privacy, or safety of others, we won’t censor you.

Free speech is a very complicated issue. Reviewing each submission, on a case-by-case basis, we promise to do our very best to do what’s right for knowledge and people as a whole, and not just what fits our or anyone else’s personal agenda.

Rights

Only original, unique, and exclusive content is allowed on Techpost. You will always remain the copyright holder and credited author of your content, but by publishing on Techpost, you’re granting us exclusive publishing rights to that content in the medium of websites.

Concerning the trademarks and copyrights of images that you use in your posts. There are thousands of great, high-quality images out there that are completely safe to use under fair use, public domain, and other friendly licenses, without any copyright notice or attribution required.

In rare circumstances, when sharing direct work from photographers or artists, you should reach out to them for permission and provide a credit link to their website, as a courtesy.

Headlines

Use title case only.

Tags

Use lower case only.

A featured image is required for all posts. It must be exactly 1920×1080 pixels.

When adding images to a post, do not hotlink to them from other sites. You need to actually upload them to Techpost.

Filenames

Filenames must be all lower case, keyworded appropriately, with each keyword separated by a dash.

Example: brown-leather-chair.jpg

Use the canonical (clean) version of URLs only, removing any unnecessary parameters. Quickly find the canonical URL of a page you’re on with this Firefox add-on. Shortened links and affiliate links are not allowed.

Embeds

You can embed YouTube videos, Twitter tweets, Kickstarter projects, and many other types of external content by simply pasting in their URLs to the post content area. WordPress will automatically handle the rest.

Discourse

Published posts automatically create a corresponding forum topic for discussion. Make sure to set the Discourse category to the same primary category you’ve set for your post.

Proofreading

That means spellchecking, checking for grammatical issues, verifying definitions, and most importantly, previewing your content before submitting.

First, it’s always good to look at everything visually to make sure it looks right and that nothing is broken.

Second, after doing one or two passes of critical reading (checking for errors), it’s always good to try a natural and casual read-through like you’re reading it for the first time to see how it flows, how it sounds.

Publishing

Click “Submit for Review” or “Publish” when ready. Just note that this process can sometimes hang. Do not leave the editor page until you receive the message that indicates it was successfully submitted or published. New posts, once published, will automatically syndicate to the forum, social media, and email subscribers.

Profiles

You can optionally adjust how your byline appears, add your avatar, website, social media links, and bio from your Settings page. When adding social profile links, make sure to add the full URLs (not just the usernames), which means including https:// at the beginning of your URLs or your social profile links will be broken.

Brand

  • Name: Techpost (upper case “T” / lower case “p” / all one word)
  • URL: https://techpost.io/ (SSL / non-www)
  • Color: #9370DB
  • Logo: Preview | Download: .ai / .psd / .png
  • Icon: Preview | Download: .ai / .psd / .png
  • 1080: Preview | Download: .png

Styles

Note — Many of the below styles can also be mixed and matched in creative ways not demonstrated. For instance, adding a color class to different HTML elements.

The title of your post is the header one. So, for sub-headers, start with a header two.

This is a header two.

<h2>This is a header two.</h2>

This is a header three.

<h3>This is a header three.</h3>

This is a header four.

<h4>This is a header four.</h4>
This is a header five.
<h5>This is a header five.</h5>
This is a header six.
<h6>This is a header six.</h6>

This is a sentence wrapped in paragraph tags. Unless you wish to explicitly declare and perhaps add a class to the paragraph tag, there’s no need to wrap paragraphs in tags as WordPress adds them automatically.

<p>This is a sentence wrapped in paragraph tags.</p>

This is a link.

<a href="#">This is a link</a>

This is bold text.

<strong>This is bold text</strong>

This is italic text.

<em>This is italic text</em>

This is code that we want to display: .blue{color:blue}

<pre><code>.blue{color:blue}</code></pre>

This is the horizontal rule:


<hr />

This is the special horizontal rule:


<hr class="special" />

This is a sentence wrapped in blockquote tags.

<blockquote>This is a sentence wrapped in blockquote tags.</blockquote>
  • This
  • is
  • an
  • unordered
  • list.
<ul>
<li>This</li>
<li>is</li>
<li>an</li>
<li>unordered</li>
<li>list.</li>
</ul>
  1. This
  2. is
  3. an
  4. ordered
  5. list.
<ol>
<li>This</li>
<li>is</li>
<li>an</li>
<li>ordered</li>
<li>list.</li>
</ol>

<input type="text" value="This is a text input." size="25" />

<textarea rows="5" cols="50">This is a textarea.</textarea>

<input type="submit" value="This is a submit input." />

This is an image.

<img src="https://techpost.io/uploads/tech.jpg" alt="This is an image." />

This is the default button.

<a href="#" class="button">This is the default button.</a>

This is a button set to white.

<a href="#" class="button white">This is a button set to white.</a>

This is a button set to blue.

<a href="#" class="button blue">This is a button set to blue.</a>

This is a button set to dark blue.

<a href="#" class="button blue-dark">This is a button set to dark blue.</a>

This is a button set to green.

<a href="#" class="button green">This is a button set to green.</a>

This is a button set to dark green.

<a href="#" class="button green-dark">This is a button set to dark green.</a>

This is a button set to orange.

<a href="#" class="button orange">This is a button set to orange.</a>

This is a button set to purple.

<a href="#" class="button purple">This is a button set to purple.</a>

This is a button set to red.

<a href="#" class="button red">This is a button set to red.</a>

This is a button set to yellow.

<a href="#" class="button yellow">This is a button set to yellow.</a>

This is a button set to black.

<a href="#" class="button black">This is a button set to black.</a>

This is a caution note.

<span class="note yellow">This is a caution note.</span>

This is a warning note.

<span class="note red">This is a warning note.</span>

 

This is a single-column box.
<div class="boxes">
<div class="box">This is a single-column box.</div>
</div>

 

This is a two-column box.
This is a two-column box.
<div class="boxes">
<div class="box-2">This is a two-column box.</div>
<div class="box-2">This is a two-column box.</div>
</div>

 

This is a three-column box.
This is a three-column box.
This is a three-column box.
<div class="boxes">
<div class="box-3">This is a three-column box.</div>
<div class="box-3">This is a three-column box.</div>
<div class="box-3">This is a three-column box.</div>
</div>

 

This is a four-column box.
This is a four-column box.
This is a four-column box.
This is a four-column box.
<div class="boxes">
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
</div>

 

This is a five-column box.
This is a five-column box.
This is a five-column box.
This is a five-column box.
This is a five-column box.
<div class="boxes">
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
</div>

 

This is a six-column box.
This is a six-column box.
This is a six-column box.
This is a six-column box.
This is a six-column box.
This is a six-column box.
<div class="boxes">
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
</div>

 

This is a one-thirds box.
This is a two-thirds box.
<div class="boxes">
<div class="box-1-3">This is a one-third box.</div>
<div class="box-2-3">This is a two-thirds box.</div>
</div>

 

Helper Classes

.left{text-align:left}
.center{text-align:center}
.right{text-align:right}
.float-left{float:left}
.float-right{float:right}
.clear{clear:both}
.clear-left{clear:left}
.clear-right{clear:right}
.clear-float:after{display:table;content:'';clear:both}
.offset{padding-top:130px;margin-top:-130px}