Edge, theme for Tumblr

Documentation - version 1.00

Edge Theme

Introduction

Thank you for choosing this theme and my services for enhancing your Tumblr experience. You will find in this documentation the instructions you need to start using the theme within a few minutes only, and you'll learn how to add your own customizations.

You can also contact me regarding any questions you have about this theme, or suggestions for new features, and you can follow me on social networks.

Install the theme

In the theme package you downloaded, locate the theme.txt file and open it with a text editor.

Then login to your Tumblr account, select the blog you want to customize if you have multiple blogs, and click on the Customize button

Customize

Now, click on the Edit HTML button on the left sidebar

Customize

Select all the content on this area (ctrl + a on Windows, Command + a on Mac), delete it, and paste in the code from the theme.txt file you opened earlier

Customize

Click on Update Preview, and then on Save

Congratulations, your theme is now ready to use ! You may want to check out the rest of this documentation if you want to customize your theme with the built-in options.

Customize

You can customize this theme by adding your own logo, enabling or disabling some features, and adding your links to socials networks. Let's have a look to each one of these features.

Customize

Customize

Customize

Note for labels : If you don't set a value for a label option, the theme will use a default value, using Tumblr localized strings, which means that the default label will match your blog language.

Blog preview

Customize

Customize

If you prefer the Tumblr customization tool to show a preview that matches your blog content, select your own posts as a preview for your blog. Click the advanced link in the sidebar, and then choose My posts in the preview dropdown.

Enable theme on mobile devices

Customize

The theme is fully responsive and designed to work on mobile devices. By default, Tumblr uses its own theme for those devices, so you have to disable it. Click on the advanced link in the sidebar, then disable the Use optimized mobile layout setting

1. About and Services sections

The About section displays the description of your blog and also includes an optional Services section

Customize

1.1 About section display

Customize

  • On Toggle : By default, the About section is displayed when the About Me link of the menu is clicked.
  • Yes : The About section is always displayed.
  • No : The About section is never displayed.
  • On sidebar : The About section is displayed on the sidebar, but only includes the description
Note : The Services section is only available if you choose Yes or On Toggle

1.2 About Image

Customize

Choose an avatar you want to upload. It will appear as a circle above the description in the about section.

1.3 About Me Label

Customize

Enter the label you want to use as a title for the About section

1.4 Show About Me Label

Customize

Disabling this option will hide the About Me title from the section.

1.5 Description

Please note that you can use basic HTML language for the description (which will appear in the About section). You can use tags like <strong>...</strong> for bold text, <em>...</em> for italic text, <a href="http://www.yoursite.com">...</a> for links, or <p>...</p> for paragraphs.

1.6 My Services section

Customize

Enable this option to add a My Services section. You can customize its content with the following options

1.7 My Services Label

Customize

Enter the label you want to use as a title for the My Services section

1.8 My Services Options

Customize

Customize

  • Services Text xx : To enable a service item, you need to give a value to the Text option. Leaving this option blank will hide the related service item.
  • Services Title xx : If a text is set, choose a title for your service item.
  • Services Icon xx : If a text is set, choose an icon for your service item. Icons are provided by Font Awesome. Go to this website (fortawesome.github.io/Font-Awesome/icons) and choose any icon from this list, and enter its name on the Services Icon xx field.

2. Sidebar Customization

The sidebar contains the blog title, optional logo images, social networks links with icons, the menu, and an optionnal Twitter feed. For informations about the color customization, see the Colors section below.

2.1 Subtitle

Customize

Enter some text to display a subtitle.

Customize

Upload a logo either above or below the title (or both).

2.3 Social Networks Icons

Customize

Entering a social network username will enable an icon that links to your profile on this network.

2.4 Random and Archive links

Customize

Disable these options to hide Random and Archive links in the menu

2.5 Ask and Submit

Customize

Open the settings of your blog from your dashboard, and toggle Ask and Submissions options if you want to use them on your blog

2.6 Custom Tags

Customize

Enter the tag you want to track as it appears on your post, and enter a label for it as you want to appear on the menu.

Customize

You can change the labels of all menus items.

Note for labels : If you don't set a value for a label option, the theme will use a default value, using Tumblr localized strings, which means that the default label will match your blog language.

2.8 Twitter Feed

Customize

To enable the twitter feed, you need to connect your Twitter account with Tumblr account. From your Tumblr dashboard, open your account settings, and locate the Share on Twitter button. Clicking on it will redirect you to a prompt to allow your twitter account to be connected to your Tumblr account. Accept, and a Twitter feed will now be displayed on your blog.

3. Grid Customization

The grid is the area dedicated to showing your post. Each post features an overlay that appears on mouse over (or on tap with touch devices), that shows informations about the post and a link to its page view.

Customize

3.1 Overlay

Customize

  • On Hover : The overlay will appear when the mouse comes over the post
  • On Toggle : User will need to click a button to toggle the overlay.

This option can ben set for each kind of tumblr post.

3.2 Overlay content

Customize

Customize

  • Date on Grid view : Shows the date on the overlay.
  • Note count on grid view : Shows the note count on the overlay. If disabled, it will show a "Show Post" label, that can be customized.
  • Comment link grid view : If comments are enabled, this option will show a link to the comments anchor inside the page view.
  • Like and Reblog buttons : Shows buttons that allow users to like the posts or reblog them directly from the grid view.
  • Show Post label : If the note count on grid view is disabled or if the post doesn't have notes, a "Show Post" label will be displayed instead. You can customize it.

3.3 Enable Grid items custom colors

Customize

You can enable this options to give custom colors for each kind of post (except photos, photoset and videos, since they only contain an image that takes the full grid item). Disabling this option will make posts inherit the value of Grid Text Color and Grid Background Color

For each kind of post the option is enabled, you will find the colors to customize in the colors section

Customize

3.4 Posts per page

Customize

Customize

Tumblr will load the number of posts you choose with this options when the site is reached, and the same number of posts will be loaded when the user clicks the More Posts (+) button.

To increase or decrease this value, click on the Advanced link in the bottom of the customization sidebar, and choose a value in the Posts per page dropdown.

4. Page View

Every post has a page view (a permalink), that contains it in a large view, with informations about it, sharing options, and comments.

4.1 Page View options

Customize

  • Share this : Enable a "Share this" link that once clicked shows sharing buttons for Facebook, Twitter, Google Plus and Pinterest.
  • Date on Page View : Shows the date of the post.
  • Note Count on Page View : Shows a link with the note counts that once clicked shows a list of all the notes for the post.

4.2 Comments

Customize

Comments for this theme are powered by DISQUS. Just enter your Disqus shortname in the field to enable comments. If you don't have a Disqus account, you can create one on www.disqus.com

4.3 Adding a page

Customize

Customize

To add a page, click on the Add a page link in the bottom of the customization sidebar. Then choose a title, an url, and some content. If you want a link to the page you just created to be shown in the blog menu, enable the Show a link to this page option, and add a the name you want users to see in the menu.

5. Colors

You can customize the theme with you own colors. The theme package comes with the same color settings as the demo, but feel free to play with the settings and see what suits you the most.

Since Tumblr doesn't have a reset setting, here are the default colors values :

Color Value Description
Content Background color #1b1b2b Default background color of content area
Text color #ffffff Default text color for the blog
Site Title Color #ffffff Color for the blog title (on the sidebar)
Sidebar Text Color #ffffff Color for the sidebar text
Sidebar Background Color #191928 Color for the sidebar background
Sidebar Color Primary #cb3536 Primary theme color for the sidebar, used in the heading bar, the Latest Tweets label, and the tweets links.
Sidebar Color Secondary #de3838 Primary theme color for the sidebar, used in the heading bar, the Latest Tweets label, and the tweets links.
About Text Color #ffffff If the about section is set on "On Toggle" or "Yes", this color will define the text color of this section.
About Background Color #1b1b2b If the about section is set on "On Toggle" or "Yes", this color will define the background color of this section.
About Color Primary #e18a1d If the about section is set on "On Toggle" or "Yes", this color will define the primary theme color of this section.
About Color Secondary #eb9918 If the about section is set on "On Toggle" or "Yes", this color will define the secondary theme color of this section.
Grid Text Color #ffffff Default text color for the grid
Grid Background Color #181828 Background color for the grid
Grid Color Primary #63be35 Primary theme color for the grid
Grid Color Secondary #76e738 Secondary theme color for the grid
Page View Text Color #ffffff Default text color for the page view
Page View Background Color #1b1b2b Default background color for the page view
Page View Color Primary #2ec0c5 Primary theme color for the page view
Page View Color Secondary #33e9eb Secondary theme color for the page view
Grid Text Item Font Color #ffffff Text color for grid Text item (if custom colors are enabled for this post type).
Grid Text Item Background Color #c34041 Background color for grid Text item (if custom colors are enabled for this post type).
Grid Text Item Link Color #e7ee19 Link color for grid Text item (if custom colors are enabled for this post type).
Grid Text Item Link Hover Color #e7ee19 Link Hover color for grid Text item (if custom colors are enabled for this post type).
Grid Chat Item Font Color #ffffff Text color for grid Chat item (if custom colors are enabled for this post type).
Grid Chat Item Background Color #4a92bf Background color for grid Chat item (if custom colors are enabled for this post type).
Grid Chat Item Link Color #ffd21d Link color for grid Chat item (if custom colors are enabled for this post type).
Grid Chat Item Link Hover Color #ffd21d Link Hover color for grid Chat item (if custom colors are enabled for this post type).
Grid Quote Item Font Color #5e4a21 Text color for grid Quote item (if custom colors are enabled for this post type).
Grid Quote Item Background Color #f6e324 Background color for grid Quote item (if custom colors are enabled for this post type).
Grid Quote Item Link Color #f23b0f Link color for grid Quote item (if custom colors are enabled for this post type).
Grid Quote Item Link Hover Color #f23b0f Link Hover color for grid Quote item (if custom colors are enabled for this post type).
Grid Link Item Font Color #ffffff Text color for grid Link item (if custom colors are enabled for this post type).
Grid Link Item Background Color #1c7e3d Background color for grid Link item (if custom colors are enabled for this post type).
Grid Link Item Link Color #fefefe Link color for grid Link item (if custom colors are enabled for this post type).
Grid Link Item Link Hover Color #fefefe Link Hover color for grid Link item (if custom colors are enabled for this post type).
Grid Answer Item Font Color #ffffff Text color for grid Answer item (if custom colors are enabled for this post type).
Grid Answer Item Background Color #c35640 Background color for grid Answer item (if custom colors are enabled for this post type).
Grid Answer Item Link Color #e7ee19 Link color for grid Answer item (if custom colors are enabled for this post type).
Grid Answer Item Link Hover Color #e7ee19 Link Hover color for grid Answer item (if custom colors are enabled for this post type).
Grid Audio Item Font Color #ffffff Text color for grid Audio item (if custom colors are enabled for this post type).
Grid Audio Item Background Color #4a92bf Background color for grid Audio item (if custom colors are enabled for this post type).
Grid Audio Item Link Color #ffd21d Link color for grid Audio item (if custom colors are enabled for this post type).
Grid Audio Item Link Hover Color #ffd21d Link Hover color for grid Audio item (if custom colors are enabled for this post type).

6. Misc. Options

6.1 Google Analytics

Customize

You can use Google Analytics to get traffic statistics for your blog. Enter your Google Analytics ID in the field to enable it. If you don't have a Google Analytics account, you can get one on www.google.com/analytics

6.2 Custom CSS

Customize

Customize

If you want to customize the theme css yourself, you can use the Tumblr built-in custom CSS tool. Just click on the advanced link on the sidebar, and add your own CSS in the Custom CSS area.

6.3 Changelog

Version 1.00 March 10, 2014 :

  • Initial release