Theme Overview
Nocturnal is a responsive free Tumblr theme with a built in Theme Editor.
With Nocturnal, you have the ability to customize the look of your site to any way you see fit. Nocturnal features built in theme editor options for changing the look and feel of your site, to adding further personalization to your website.
Installing Nocturnal
To install "Nocturnal" go to "Tumblr.com" and make sure you are logged into your dashboard. Either click "Settings" and navigate to your theme and select the "Customize" option. And or visit your blog, and hit the "Customize" button in the upper right hand corner. This will open up a sidebar to the left of your site. Simply, click on the "Edit/HTML" button in the upper right hand corner of the sidebar and copy and paste all the code in the .HTML file provided in the theme assets folder that came with downloading this theme or if you're downloading from Tumblr, it should automatically do the steps below for you.
After you've clicked on "Edit/HTML" (Window1), paste in all the source code and Window 2 should look exactly like the screenshot.
Afterwards, make sure to click the "Save" & "Update Preview" buttons and then you should see your new sites layout.
If you don't see an immediate change let it sit for a few seconds and then try refreshing the page.
Theme Layout and Structure
Tumblr themes use CSS and HTML markup to setup the structure of a theme by using "blocks" to structure content and to "hook" posts, images, and various things together.
This theme follows the basic Tumblr "blocks" layout in regard to the structure of how the blog functions.
Below is an example of what the CSS structure looks like
/*-- BASE STYLES --*/
/*-- SIMPLE RESET --*/
/*-- HEADER STYLES --*/
/*-- SEARCH STYLES --*/
/*-- MENU STYLES --*/
/*-- WRAPPER STYLES --*/
/*-- POST BASE STYLES --*/
Below is how the HTML structure looks
Header
Nav
Wrapper
Section
Article
Post Meta Data
Comments
Pagination
Footer
Scripts
This is what the structure of the site looks like when you view the source code.
Tweaking the Theme - CSS
If you would like to add your own adjustments to the CSS please use the "Custom CSS" form at the bottom of the sidebar under the "Advanced tab"
Tweaking the Theme - Options
If you're not familiar with CSS, then don't fret! This theme comes loaded with built-in options, that allow you to edit your site to your desire.
Tweaking the Theme - Resources
If you want to learn CSS, but don't know any of it please visit http://www.w3schools.com/css/. For tutorials on CSS, W3 is a great place to start. If you're also looking to tweak and edit the HTML please visit http://www.w3schools.com/html/default.asp. You'll find a heap of resources on W3 that break down and explain HTML and CSS in a concise manner that is easy to follow.
Images
This theme uses Tumblr's static image hosting service. The images being used in this theme are only the post icons which reside in the upper right hand corner of each post.The size of these icon images are 80 x 80 pixels.
Images - Post Icons
If you would like to use your own icon images for the post-icons, please replace this area using Control + F and search for this comment
/*-- POST DATA ICONS --*/
From here you will need to replace the current url with your own url that hosts the icon image.
aside#post-data-icons aside.music-icon {
background:url('http://static.tumblr.com/
dsnh5zg/3WZmchrib/icon_music.png') no-repeat;
}
You will have to replace each #aside-post-data-icons aside.x with your own url.
Bits and Pieces
This theme contains features such as adding a Google Analytics id using just your UA-ID number, social media integration, and custom links.
Bits and Pieces - Social Media Profiles
To simply add your Twitter Account just copy your profile URL and paste it in the box below like so. For other social media profiles, just copy your profile url / or just url and paste it in the designated profile box.
Bits and Pieces - Comments
This theme has integrated the DISQUS commenting system within the theme. If you would like to use comments simply enter in your DISQUS shortname ("my-site1990") and click on show comments. If you would like no comments to show up on your site simply click on the checkbox and make sure it's not-checked.
Bits and Pieces - Social Icons
If you would like to change the color of the Social Icons simply just open up "Customize" and change the options in the theme editor.
If you would like to add your own customize icons, simply navigate through the HTML code and replace the socialbuttons images with your images with the appropriate sizes of 20 x 20 pixels.
Bits and Pieces - Ask Me Anything
To enable the Ask Me Anything Page, please go to your Tumblr-Dashboard and click on the "Settings Icon". From there, navigate to your theme if you have multiple accounts and in your theme's setting / options page click on the checkbox to enable AMA. And that should be it!
About The Author
Hello, my name is Matthew. I develop and design themes for Wordpress, Tumblr, Drupal, and Joomla. I primarily specialize in front-end development, and am also a game developer by night. You can follow me on Twitter, and or watch my work on Dribbble.
Questions, Comments?
If you're running into any problems please don't hesitate to contact me at: mstenquist@dig.ital.me
Colophon
This site was written in CODA II IDE
This site uses fonts from Google Fonts
This theme was built in Google Canary
Fonts - Merriweather (Google Fonts)
Fonts - Open Sans (Google Fonts)
DISQUS Commenting System
ICONS - Impressionist 2
Images hosted by Tumblr Static Service