10. Make header description visible at responsive sizes(mobile and tablets)
11. Google Analytics Setup
12. Reposition text to the bottom of posts
13. How to receive notifications for Facebook Comments
14. Add custom links to the menu that can link to any URL
15. Instagram Feed Setup
1. Larger header logo size
This is possible, you will just need to follow some instructions below to make this happen. First head to the "Edit Theme" section, scroll down the left hand sidebar till you reach the bottom of the page and click "Advanced Options". On the next page you will see a code input field titled "ADD CUSTOM CSS". You will need to copy/paste the code below into this section and click "Save" when done.
Although Tumblr offers some awesome fonts for all users to incorporate into themes for free, you may or may not find exactly what you are looking for which is why we've integrated Google Fonts into every theme we make. Google Fonts has over 500+ free fonts available to anyone. Depending on your experience with using Google Fonts, you may run into some difficulties in figuring out how to use your chosen font which is why we've created this infographic below to help you set up your font through textual and visual instructions.
We've added opacity to the background image as sometimes it may be a little hard to read the header text depending on the color of the background image. This is however, situational and depending on the background image and text color.
Below is a code snippet to help bring the full color of your background image back. First head to the "Edit Theme" section, scroll down the left hand sidebar till you reach the bottom of the page and click "Advanced Options". On the next page you will see a code input field titled "ADD CUSTOM CSS". You will need to copy/paste the code below into this section and click "Save" when done.
Make sure to copy and code exactly as displayed including fullstops and curly bracers or the code may not work.
.header-pos { opacity: 1; }
4. Grid width sizing
First head to the “Edit Theme” panel, next scroll down he left hand sidebar till you reach the bottom and click “Advanced Options”. On the next page, copy and paste the code below into the “ADD CUSTOM CSS” field. Make sure to copy the code exactly as it is including full stops and bracers and also hit save when done.
.tile-grid {width: 60%;}
Note: The width in the code is set at a 60% value(default is 80%), however you can change the “60%” value in the code to a smaller value such as 55% 50% or even smaller if you wish for a thinner grid width or change it to a larger value if thats what you fancy. However it’s important to note that the theme was made and tested only for the default sizes so depending on how big or small you adjust the grid width there may arise some inconsistencies in regards to elements being out of proportion, the areas of big effect would be video and movie posts. In the case that the layout breaks(which would only happen if the value is far off from the default), there won’t be much we can do to help you with fixing that as at that point the theme will be to far beyond the original product. In this case you can just remove or re-adjust the 60% value.
5. Twitter Feed Setup
We have a great tutorial to help get the Twitter feed up and running within our documentation. The tutorial includes step-by-step instructions + images to help you get it up and running within a few minutes.
This is possible, you will just need to follow some instructions below to make this happen. First head fo the "Edit Theme" section, scroll down the left hand sidebar till you reach the bottom of the page and click "Advanced Options". On the next page you will see a code input field titled "ADD CUSTOM CSS". You will need to copy/paste the code below into this section and click "Save" when done.
Make sure to copy the code exactly as displayed including fullstops and curly bracers or the code may not work.
That black box on your blog is the Instagram feed not working correctly, this is usually because the details entered into the "Instagram Token" and "Instagram ID" in the "Edit Theme" section may have a couple wrong digits. This can be fixed no problem :D
We have a tutorial written up in the documentation which can help get this up and running for you. The tutorial is very simple to follow step-by-step instructions with images and can help you get it up and running within a few minutes.
This code below will fix the left alignment for lists throughout the theme.
To use it, you will first need to head to the "Edit Theme" panel, scroll down the left hand sidebar till you reach the bottom and click, "Advanced Options". Once you are on the next page you will see a code input field with the title "ADD CUSTOM CSS". You will need to copy/paste the code below into this field then hit save. Make sure to copy the code exactly as shown including curly bracers and fullstops or the code may not work.
.tile-content ul, .tile-content ol {padding-left: 3px;}
.tile-content ul li, .tile-content ol li {margin-left: 0;}
9. Twitter Feed Setup
Most our themes are compatible with the embed widget provided by Twitter, it's a simple copy/paste process, however, assuming it's your first time, this support article will help make it as easy of a process as can be. As long as you follow this tutorial you should be able to have it up in less than 5 minutes in a few simple steps which we’ll outline below !! :D
1. Head over to twitter.com and sign into your account.
2. Click your profile picture on the top right to toggle the dropdown and click “Settings” as shown in the image below.
3. On the next page, click “Widgets” on the left hand sidebar as shown in the image below.
4. Click the “Create new” button located near the top right hand of the page.
5. Click “Create widget”.
6. On the next page, there will be a small box with code contained within, copy the code inside.
7. Open a new tab or window in your browser and head over the your Tumblr account > Edit Theme section. Once there, scroll down the left hand sidebar till you see the “Twitter Feed Embed Code” section and paste your Twitter embed code in the text field.
8. Now all you need to do is hit “Save” and you are done !! :D
NOTE: You may not see the Twitter widget in the live preview, if it is not showing in your live preview, save the changes anyway and go directly to your blog in a new window/tab to see if the widget has been properly installed, which it should be. If it hasn’t installed properly, read over the steps to double check you have done everything correctly. If you are still having issues, don't hesitate to drop a ticket and we'll get to you as soon as we can.
10. Make header description visible at responsive sizes(mobile and tablets)
Initially we've hidden the header description for responsive sizes because many people had very long descriptions and it was breaking the layout on mobile devices as the description filled out the screen, however if your description is short and sweet it wont be a problem to enabled it !
To do so you will just need to follow some steps below:
First head to the "Edit Theme" section, scroll down the left hand sidebar till you reach the bottom of the page and click "Advanced Options". On the next page you will see a code input field titled "ADD CUSTOM CSS". You will need to copy/paste the code below into this section and click "Save" when done.
Make sure to copy and code exactly as displayed including fullstops and curly bracers or the code may not work.
@media only screen and (max-device-width: 736px) and (min-device-width: 320px) {.prof-description {display: initial!important;}}
11. Google Analytics Setup
If you’d like to monitor your sites analytical data and have registered for Google Analytics, you can easily add your tracking code into your blog. If you do not yet have a Google Analytics account, visit http://www.google.com/analytics/, register an account for your blog website.
Now, assuming you've ticked off the prerequisites required for setting Google Analytics up on your blog, simply visit this link below for step-by-step instructions made out in infographic style to help guide you through the setup process in as simple of a way as possible:
If you still have any issues, don't hesitate to drop us a support ticket and we'll get back to you as soon as we can.
12. Reposition text to the bottom of posts
This is possible but to a certain extent. What we'll be able to do is help you re-position the text on media type posts to the bottom of the post(rather than a separate box below the post content which would require altering the HTML structure and outside the scope of our support).
To make this happen is quite simple, just follow the instructions below and you'll have it in effect within 5 mins. :D
First head to the "Edit Theme" panel, scroll down the left hand sidebar till you reach the bottom of the page and then click on "Advanced Options". On the next page you will see a code input field with the title "ADD CUSTOM CSS", you will need to copy/paste the code below into this field then hit "Save" when you are done. Also, make sure to copy/paste the code exactly aas it is displayed including fullstops and curly bracers or the code may not work.
13. How to receive notifications for Facebook Comments
Hey! :)
Since we've implemented Facebook Commenting system into our themes, we've had support questions regarding notifications not appearing after a visitor has commented on your blog post. This article has been created to directly help any users having the same issue.
There is a solution to this and our senior developer Marion has illustrated this solution in easy to follow step-by-step instructions.
FB App Setup: 1. First step is to have yourself registered to a developer account for Facebook @ https://developers.facebook.com if you don’t have an account yet.
2. Second step is to create a Facebook App.
3. Next step is to make your Facebook App public. To do this, go to the App Review panel, and toggle the option under “Make [app name] public?”.
4. Then from there, you can now get your App ID and take note of this since this will be used in later steps.
5. Last step in setting up the Facebook app is to set your moderators. To do this, you will need to go to this link: https://developers.facebook.com/tools/comments/[app_id]. Just replace [app_id] with your FB App ID you copied in step 4 (i.e. https://developers.facebook.com/tools/comments/945759668887273).
Then go to settings via the settings link. Inside the settings window, make sure that the Enable Notifications options is turned on. You can also set the default options and rules for your comment app from here. But the important step is to set your moderators via the Moderators tab. Here you can set any Facebook account as moderators of your comment app, but most importantly, you have to set you own Facebook account as a moderator in order for you to receive notifications every time someone makes a comment.
Theme modification:
For the theme modification, there is a very minor change you will need to make which will be outlined below:
1.First step is to add an option for the Facebook app ID. So, somewhere along the header where the text options are found, you will need to add the option:
P.S. Don’t forget to input your Facebook App ID into your option in the backend. And lastly, do note that the individual moderators can receive notifications from comments by other users, but not comments the moderator made himself. And to view all the comments made in your blog via the FB comment plugin, you can view them here: https://developers.facebook.com/tools/comments/[fb_app_id]/. (i.e. https://developers.facebook.com/tools/comments/945759668887273/)
Hope this helps, and of course if you are still having troubles please do not hesitate to open a support ticket where we'll be able to help troubleshoot your issue :)
14. Add custom links to the menu that can link to any URL
First head to the “Edit Theme” section and on the left hand sidebar you will need to click the “Edit HTML” button. Once the HTML editor opens up, you will need to look for this exact line of code:
{/block:IfMenuSendEmailLabel}
Once you find this code, drop a new line afterwards.
Now, you will need to make an alteration to the below code and paste it on the new line:
With the code above, the first item you will need to change is the URL within the quotes: http://artistic-influence.tumblr.com
This is the target URL you want to link to.
Next is the text:
VISIT OUR BLOG
This text is what will be the label of this link. In short, the is the part of the code that will be visible on the front end to your visitors. This can be anything you want.
Once you have made these adjustments, copy and paste the code right after {/block:IfMenuSendEmailLabel}
Now hit save and now you should have a new menu link. You may need to give it a minute or 2 for the changes to take effect.
15. Instagram Feed Setup
If you’d like a Instragram feed on your home page as seen in the Candice demo, you will need two pieces of basic info which is your Instragram ID and Access token. This can be done quite easily by following the instructions below.
Instagram ID and Access Token - Luckily this information is quite easy to retrieve even for non-developers.
