Thank you for purchasing the Angularized Tumblr theme. I hope the theme serves you finely in building your new website or giving a new look to your existing one!

The Angularized theme can be installed on any Tumblr-driven Website. It makes use of the Tumblr API for crunching its data, and is built on the popular AngularJS framework, delivering a beautiful , fast-loading and unique user experience without the need for a browser refresh between one Post and the other.

The theme also enhances your normal Tumblr Blog with some unique features like

• A Full Navigation Menu
• A Configurable "Hero Panel" for your Home Page.
• Capturing and sending out data from a fully customized Form to your Inbox
• Inserting a Call to Action prompt to each of your Posts effortlessly

Last but not least, the Angularized theme integrates seamlessly with services such as Mailchimp and Disqus

A great template for Artisans and Artists selling their products online, fashion or food bloggers!

Now you've got your new Tumblr theme you'll want to install it right away!

Unzip your download folder and locate the Angularized.html file, it will be in the root of the folder.

Open that in your favourite text editor. Don't open it in a web browser as it will look a mess. Instead right click and select Open... I use Sublime Text 3 for the Mac. But there are free programs such as TextWrangler for Mac and Notepad++ for PC. Every PC comes with NotePad installed for free as well. If you've opened up the HTML file in TextEdit it may have messed it up completely. Bad times. If you follow this guide: http://support.apple.com/kb/TA20406. It'll show you how to open HTML files properly within TextEdit.

Now you've got the file open, select everything within it either by dragging your cursor from the beginning of the first line all the way to the bottom, or by pressing CMD + A (Mac) or CTRL + A (PC). Now copy all of that selected code by going to Edit then clicking Copy or by pressing CMD + C (Mac), CTRL + C (PC). That code is now stored on your clipboard.

The Customise Screen and the HTML Editor

Log into your Tumblr Dashboard, then click on the Account icon at the very top of the site, then click on the "Settings" option.

Now select the blog you would like to install the theme on from the list on the right.

Now click on the "Edit theme" button.This opens up Tumblr's Customise Screen. Pressing "Edit HTML" will send you to Tumblr's HTML Editor.

Delete all the code in this area.

Now go ahead and paste in the new code. CMD + V (Mac) or CTRL + V (PC) will paste in the code quicker than a flash. Or you can go up to the Edit menu item and click on Paste. Either way works fine.

Now hit the Update Preview button. You'll notice the preview on the right updates with your new theme.

Now take note, the Preview of the theme will ALWAYS look weird; this is NORMAL, as the theme is using the Tumblr API as its engine, along with the angular Framework. The Tumblr Preview will not be able to really show all that, but your theme will still look perfect through its normal URL.

So go ahead and hit the green "Update Preview" button and then click the blue "Save" button. Refresh this page now (F5 or right click and click Reload / Refresh). Now your new themes options have loaded in. You'll need to set some of the most basic options before checking out your brand new website so patience!!!

Now you can head on to the Set Up area of this document to find out how to make your theme look the way you want.

Uploading the Vendors Javascript file

This file keeps all the third party libraries and scripts used by the Angularized theme and the location path for the file is set by default on the "Vendors source" option. Leave this path as is if you want to always show the most recent and updated version of the Angularized theme.

Installing the Core Javascript source

This file keeps all the Javascript directives used by the Angularized theme and the location path for the file is set by default on the "Core source" option. Leave this path as is if you want to always show the most recent and updated version of the Angularized theme.

Installing the CSS source

This file keeps all the CSS styling used by the Angularized theme and the location path for the file is set by default on the "CSS source" option. Leave this path as is if you want to always show the most recent and updated version of the Angularized theme.

Image displaying the options relative to the Sources needed for the Angular theme to work. ("Vendors Source", "CSS source" and "Core Source" options)

The Angularized theme is the very first of its kind, using the tumblr API for delivering content.

This means that you can practically use ANY tumblr Blog out there, and serve it through a new web address.

It sounds a bit hard to grasp in the beginning, but it is a concept with infinite possibilities. As an example and proof of concept, you can check how the Demo Tumblr for Angularized theme is set: The content you see up there is actually using the content uploaded to the famous Scipsy Blog.

You can define the Content Source by inserting a Tumblr address on the "Blog address" option of the Angularized theme.

If you intend to use a "Native" Content source, then simply fill the "Blog address" option with the URL of the blog you're installing the theme onto (ommit the 'http://' prefix).

That's an easy one, just use the "Logo", "Logo Alt" and "Logo Height" To configure your site's logo.

Tip: For best performance, upload an image that has the double height of the one you will set in the "Logo Height" option. (For an image of natural height of 128px, set the "Logo Height" option to "64px". This will make sure your logo will show great on Retina screens (2X images)

If you have chosen to show the Description of your blog, then it will show on the Grey bar right on the top of the Interface

A great way to connect your blog to your e-commerce site, or an external link with which you or your business is somehow connected. All you need to do is configure the "Back to Store Text" option and the "Back to Store Link" option!

This is a great way to prompt the user's actions while reading a Post, as the button will tease the user to perform an action you can define through the use of the "Call to Action Text" and "Call to Action Link" options of the theme. If you don't want to use this feature, just leave those fields empty!

Use the Options called Facebook, Instagram, Pinterest, Twitter, Etsy for having your Social Profiles appear on the footer area of your site!

To set up the commenting system on the posts permalink pages you will need to sign up to www.disqus.com.

Once you've created your new blog settings there copy your disqus shortname and paste it into the theme options panel. ("Disqus" option)

Every Website needs a full-fledged Navigation Menu, and the Angularized theme has everything you could ever ask for! The Navigation Menu in Angularised is a very unique feature, making use of Tumblr's Tags, Post Id's and Post Types for helping you organise and expose your Content.

During the following few paragraphs the Navigation Menu and its functionality is explained and analysed. Use the following guide for configuring and choosing the most suitable options for your own web site!

The Navigation Menu offers up to seven main navigation Items, named conveniently as:

• Menu Item 00: the first Navigation Item, on Root level.
  This Menu Item is pretty special, enclosing the most Recent Post of your blog along with links for any of your Custom Pages and a link to the Ask Me Page.
• Menu Item 01: the second Navigation Item, on Root level. It can contain up to four Submenu Items.
• Menu Item 02: the third Navigation Item, on Root level. It can contain up to four Submenu Items.
• Menu Item 03: the fourth Navigation Item, on Root level. It can contain up to four Submenu Items.
• Menu Item 04: the fifth Navigation Item, on Root level. It can contain up to four Submenu Items.
• Menu Item 05: the sixth Navigation Item, on Root level. This is a Post-Type driven menu item. You can use this Menu Item to show the four latest Posts of your blog, taken by any of the available Tumblr Post Types you choose (Text, Photo, Quote, Link, Chat, Audio, Video or Answer).
• Menu Item 06: the seventh Navigation Item, on Root level: You can use this special Menu Item to show the four latest Posts of your blog that are marked with the tag you choose.

The Menu is also available in a super cool fly-out off-canvas style for mobile Views as well!

You can choose to hide or display each one of the Root-level Navigation Items, by turning on or off the respective switches from the Tumblr Backend by using the Show MenuItemXX option switches [from 00 up to 06], marked with Red on the image below).

You can also set the Title for each menu Parent Item by using the MenuItemXX title0 options [from 00 up to 06], marked with Yellow on the image below).

The Navigation Items, as shown in the Front-End for the above Configuration. Note that Menu Item 02 is hidden from view.

This Menu Item gives you the opportunity to create an overview of your business or personal profile. It is presented in the form of a "Mega Menu", combining the Most Recent Post from your Tumblr Blog, your Static Pages, and even a link to your "ask me" Page.

How to create, configure and display the Static Pages

The first menu item of the navigation Panel (Menu Item 00 ) can help you to insert all of your Static Pages to your Navigation.

To create a custom page for your blog make sure that you are in the Customise screen. Follow the steps above to get to the correct place.

Scroll down on the theme options sidebar and you'll see an 'Pages' button. Click on this and then click on the 'Add a page' button.This then opens up the Add page pop up. Enter all the details you need for your new page. Here is an example:

In order for it to work properly, you need to get all of your static pages under the '/static/anyname' format.For Adding the '/static/' to the URL of your page, simply edit the URL of that page, as seen on the photo below.

When you're done adding the "/static/" suffix, activate the "Show a link to this Page", option and click the Save button. Your new page has now been created and a link has been automatically added to your main navigation menu.

How to display the Ask Me Page

The First Menu Item will also show a link to your ask me page, if you choose to enable this feature from your Tumblr Settings

The Most Recent Post

Each of those menu items can hold up to Four Sub Level Menu Items. The Ones you leave empty, will simply not show on your navigation Menu. You can use those menus for "pinning" Posts you ALWAYS want to show to your viewers , using those posts as introductory pages for distinct categories and topics of your Blog.

Each Sublevel Menu Item has 3 Parameters :

• The ID of the Post it links to, here's how to find the ID of a Post.
• The Title of the Menu Item, this can be anything you want.
• The Tag of the menu item, for configuring the "active tag" of the Article Aggegator feature. For optimal performance, make sure that the Post you choose to link with the Menu Item contains the tag you are defining for this option.

The image below conveys how the theme options are connected to the menu item titles.

How to find the ID of a Post

From your Tumblr Dashboard, click On the "Posts" under the Account Tab.

Look for the Post you want to pin to the menu and hit the "clog" icon, then choose "Edit"

Look your browser's address bar. After the last slash, you will not a sequence of numbers. This is the ID of the Post. Copy that sequence to the "MenuItemXX idX" option of the Angularized theme

Check out the following configuration for the Demo Tumblr for Angularized theme.Note that the Menu Items marked with :"MenuItem02 ...", are not being used, since we have chosen to hide the second Root Level Menu Item.

This Menu automatically retreives the four most recent Post of any Type you will choose

Use the "MenuItem05 Type" Option for Configuring this. (You can type anything from "Text", "Photo", "Quote", "Link", "Chat", "Audio", "Video" or "Answer")

This Menu automatically retreives the four most recent Post of any Tag you will choose

Use the "MenuItem06 Tag" Option for Configuring this. Check here if you want to learn how to tag your Posts.

The "Hero Panel" is the first visual your visitor will encounter on the site. Its purpose is to present an overview of the site's most important content.

The Hero Panel will display the most recent Photo Post Types or even Video Post Types marked with the specified tag. Check here if you want to learn how to tag your Posts.

The Theme will automatically calculate the best possible fit for your images, no matter what their dimensions will be!

The Hero Panel will show only on the Home Page of your site while it is hidden from view on mobile views to save up valuable screen real-estate space!

Setting the Hero Panel related options in the back-end of Tumblr: The Demo Tumblr for Angularized theme uses the tag "astronomy" for creating its Hero Panel, with six Posts format. This means that the 6 most recent posts tagged with the "#astronomy" tag will show up here.

Choosing the Hero Tag

Choosing the Layout Format

You can choose the Hero Panel Layout Format by simply typing "4", "5", or "6" under the "Hero Format" Option.

The hero panel will display 4, 5, or even 6 posts tagged with the tag you choose.

The six-post layout of the Hero Panel.

The five-post layout of the Hero Panel.

The four-post layout of the Hero Panel.

The Featured Panel offers an additional way to "pin" down some of your most recent posts tagged with the tag of your choice. Use it for bringing the focus of your viewers to events happening soon, announcements or a category of general interest.

Choosing the Featured Tag

The Featured Panel follows the logic of the Hero Panel, so all you need to do is simply set the tag of your choice to the "Featured Tag" option.Check here if you want to learn how to tag your Posts.

Choosing the Layout Format

You can choose the Featured Panel Layout Format by simply typing "1", "2", or "3" under the "Featured Format" Option.

The one-post layout of the Featured Panel.

The two-posts layout of the Featured Panel.

The three-post layout of the Featured Panel.

One of the most amazing features of the Angularized theme is its ability to aggregate the Posts of your Tumblr blog, based on the "active tag" of the current Post a user is browsing.

On the Home Page, this feature is behaving differently than what it does on a Post-specific Page.

You can control the Hover State of an aggegated article Box, deciding whether to show or hide more info relative to that Post by defining the state of the "Show Text on Hover" option.

If you want to give more visibility to this great feature, then go ahead and activate the "Fix More Posts Button" option : This action will make sure the Aggregator will always "stick" on the user's screen!

The "Show More Posts Text" option will set the text of the Aggregator button on a Post-specific page, while the "Show More Posts Home Text" will define the text of the Aggregator button for the Home Page View.

Home Page feature : Showing all posts

On the Home Page, the Posts aggregator will retreive every Post in your Blog, in chunks of 12 posts each time it is pressed, creating a grid under a "User-Triggered Infinite Scroll" logik, starting from the most recent Posts. This is a great way for the User to check out just about everything that's going on in your blog, without even having to refresh the Page!

Post-Specific Page : Aggregating Posts based on the article's "Active Tag"

Based on the Tag set for each Navigation Sub-level Menu Item, the Article Aggregator will filter out the Posts of your Blog, showing only the posts that contain the tag of the active category. This feature helps the user to stay focused and continue reading Articles that are related to the current choice.

The "Active Tag" for each menu item can be set by the relative "MenuItemXX TagX" option for that menu item.

The Image below shows how the Article Aggegator behave when we click on "Galaxies" Menu Item on the Demo Website: In this case, we have set the "MenuItem01 tag2" option to "galaxy", thus configuring the Article Aggegator to filter out all Posts that contain that tag.

So you've downloaded and installed your new Tumblr theme and you want to get rid of the boring default Tumblr mobile layout. OK so what you need to do first is make sure your in the Customise screen. Scroll down and click on the 'Advanced' button. This drops down some more options. Simply untick the 'Use optimized mobile layout' option and hit the green Save button.

And... YOUR DONE! Now go and enjoy your nice new mobile friendly blog.

Below is a list of ALL the theme options added into this theme. Customise these options for a unique version of the Angularized theme.

Colors

Tick Box Options

Upload Images

Text Inputs

19.06.2016 - v1.0

It would be awesome if you could rate the theme for me. If you feel the theme deserves less than 5 stars please contact me before rating and I will try to improve your experience with the theme.

If you need a helping hand or would like to customise the theme then shoot me an email at feddyups@gmail.com