Vignelli: Minimal Tumblr theme
Tumblr is a superb microblogging platform for folks who want to get up and running with minimum hassle. The feature set is constantly improving and there are already a number of good themes available. However, when I was searching for a minimalist-style theme, I couldn’t find one I was particularly happy with.
I decided to create to my own free minimal Tumblr theme, inspired loosely by the great Modernist Massimo Vignelli, and the style of my own blog.
Colour customisation
Colours for the following elements are completely customisable once the theme has been installed:
- Top border colour
- Site title colour
- Link colour
- Link hover colour
- Button colour
- Button hover colour
- Post title colour
- Post title link colour
To customise these colours, click ‘Customize’ from the site menu in your Dashboard, then ‘Appearance’ from the menu bar.
Twitter status and social links
To show your latest Twitter status and links to other accounts you have on the web, simply add your own usernames under the ‘Appearance’ menu on your Tumblr ‘Customization’ screen.
Hello Robbie!
You did a really nice work. The theme looks very nice and is functional too. I just have one suggestion: would be nice to have a button at the end of the page to back or go for the next one.
Keep up the great work.
Best regards.
Rodolfo
Great suggestion Rodolfo, thanks. I’ve now added pagination underneath the posts and also removed the ‘[x] notes’ link if no notes exist for the post, which will help tidy things up a bit.
I’ve submitted these changes to Tumblr, so give it a day or so before grabbing the latest version. Thanks again!
Perfect! it was really fast and is working very well. thank you!
Great theme – simple but not plain. I think it would be cool to have a small section where your “likes” appear, but maybe you don’t want to clutter the page?
Thank you!
@L.B: As you say, I’m conscious not to clutter the theme. However, I’ll look into the possibilities of implementing this kind of feature and weight up the options. Thanks for the suggestion.
I just started my Tumblr account and am using this template. I love the look of it! One question: is it only possible for followers and those I follow to comment/ask questions? I’d like to be able to allow my family, and friends who don’t have Tumblr accounts to do so, but the settings don’t seem to allow this.
@Angela: Provided you’ve signed up for a Disqus account and added your Disqus Shortname under the Appearance menu on the Customize screen, anyone should be able to comment on your posts. At least, that’s the way I understand it to work.
Hi Robbie!
I also recently started using Tumblr, along with this theme. It’s clean, flexible, attractive and easy to customize. Thanks for sharing this with us!
Hi Robbie, is there any way for me to add my own logo to the page?
Hey Robbie,
I love this theme.
Is it compatible with adding static pages?
Thanks.
Hi Robbie! This is by far the best theme I have ever found for free. Clean, simple, but extremely beautiful. =D
Just a few questions, is it possible to make the links to the pages in the title of the post instead of the date? I think it might be weird for some people.
Also, how can I add text on the sidebar?
Hi Robbie,
Thanks for the awesome theme! i totally <3 it!
However, would it be possible to have multiple pics w/in one post to be displayed separately, one after the other (as opposed to having them as part of a moving photoset)? you can set a maximum # of photos to be displayed if you like in order to stay with the minimalist theme. also, currently it is not possible to get a high-res image of the pics when clicking on photos within the moving photoset.
Cheers.
@Tom: To the best of my knowledge, it’s not possible to replace your site title with an image.
@Fernando: Vignelli is indeed compatible with static pages :)
@Gary: I’ve just submitted an updated version of the theme to Tumblr which makes the title of each post the permalink to the post’s own page. This is so obvious, I’m really not sure how I missed it! It should be available to install in a day or two. You can add your Twitter status and social links to the sidebar using the instructions I’ve provided at the end of the article above, or simply add your own text by editing the raw theme code within Appearance > Theme (be careful though!).
Hi!
Your theme is great but there is a problem with “no search results” page i.e. when nothing is found, you don’t get any message about it, there is just blank space. Example: http://robbiemanson.tumblr.com/search/fww as opposed to http://robbiemanson.tumblr.com/search/blog Would you please tell me how to fix it (add my custom message when there are no search results), or preferably – update the theme?
Best,
Piotr
Love the theme, but I have issue with a side bar URL link. I added my other website URL under the appearance menu in Website but on the page it just goes to my Tumblr page, when I inspect the source the link is empty. I entered the link as standard valid URL. Same result if I used the Blog field.
Angus, sorry to get into Robbie’s shoes, but I had the same issue and I think I know what to do. You have to edit the raw theme code within Appearance > Theme, and if you wanted the link to go to, say, youtube.com, find this:
and change it into
and this:
Elsewhere
{block:IfWebsiteAddress}
…..BLAH, BLAH, BLAH
and change it into Elsewhere
{block:IfWebsiteAddress}
YouTube
You can see the result at my site (http://teksto.tk)
If you want more links, repeat these steps where applicable.
P
Oh, bugger, looks like I can’t post the full solution in here because it gets cut out. Sorry (Robbie and Angus) for my chaotic writing above. And Angus, write me at: p.slusarski@gmail.com unless Robbie comes here sooner and gives you your answer.
@Piotr thanks very much for the feedback, but I managed to fix it properly myself. The problem is with the name of the text fields. Both the blog and website text fields are defined as “Website Address” and “Blog Address”
meta name=”text:Website Address” content=”"
but where they are used on the page the reference is missing the ” Address” part of the name in both cases. So I simply changed the call to the full name and it works as expected.
href=”{text:Website Address}”
This needs fixing in the theme.
Alright then. BTW, do you happen to know how to fix this: http://blog.robbiemanson.com/resources/vignelli-minimal-tumblr-theme/comment-page-1/#comment-246
?
Sorry Piotr, that search issue is well beyond me.
@Piotr I’ve added the {block:NoSearchResults} block to the theme, displaying a ‘Sorry, there are no results…’ message for search queries that return no results.
@Angus Great spot with the ‘Website Address’ and ‘Blog Address’ hooks. I’ve now amended these in the theme, as per your solution.
Apologies for the delay in catching up with the issues, and thanks for your investigative work. The updated version of the theme should be available in a couple of days.
Fantastic, thanks Robbie.
Hi Robbie,
I tried to use this for my blog about “pictures of lizards in dungarees” and it’s not worked. Can you re-do the whole thing so that it works please?
Yours, entrustingly…
Alex.
Robbie, I don’t know why, but it doesn’t seem to be working. I’ve added this NoSearchResults block to the theme (copied it from the updated version), but it does nothing. The blank space remains. See: http://teksto.tk/search/urtuu
How come?
Piotr: The latest version of the theme is being used on the Vignelli theme Tumblr account and the NoSearchResults block is working as expected there — http://vignelli.tumblr.com/search/urtuu
I honestly don’t know why it’s not working for you.
Robbie,
I’ve been slowly modifying Vignelli for my website, Obscene NYC.
As much as I love the design (best Tumblr theme by far) I am most impressed with the formatting and organization of the CSS and HTML. I’ve been easily able to modify things without hopelessly debugging sloppy code in Firebug for hours.
I’m taking notes on your clean code and styling from here on out. Keep fighting the good fight!
- Ryan
Hey Ryan, so glad to hear Vignelli is working out for you. I’m a stickler for keeping code clean and tidy, especially when I know people will be digging around in it. Good to know it’s all worth it!
Great job on the modifications. Oh, and thanks for introducing me to Tame Impala — awesome!
Hi Robbie,
I’ve been trying to understand this issue about Markdown rendering using your theme. It also occurs in some other themes that I tried on tumblr.
For example, if we write a code snippet (4 spaces indentation):
Code Snippet
Then, this section after the code snippet will have no spacing.
I wonder if you know anything about this.
Hi Robbie,
Love the theme, but I’m wondering if there’s anyway for me to remove the date? Please let me know if it’s possible for me to do this in the custom HTML..
Thank you,
Tasha
Jesse: Can you point me towards an example post where this is happening?
Tasha: Just add the following to the CSS within the Custom HTML window:
#aside .date {display: none;}
I did tried this on my blog, now I just created a tumblelog for this.
Visit this site: http://dnamra.tumblr.com/
Jesse: Sorry for the delayed response. The ‘pre’ element you’re using to wrap your code in didn’t have a bottom margin applied to it in the CSS. I’ve add a bottom margin and submitted the source code to Tumblr. It’ll be available soon from the themes own page soon. I’ve also emailed you a copy of the new source code, should you need it right away.
Thanks, it renders fine now.
Just installed Vignelli. Much better than the silly light Helvetica jquery mason thing I had on the go. I write too much for that and needed to get back to a single column of entries. Thanks!
I am concerned that the colour of the visited links and even the text may be too light for some people. Have you considered adding those to the Appearance options?
Hi! I can’t see my twitter status anymore. It’s a theme problem or something else? Thank you in advance!
Maurizio
Forget about it, probably was a twitter api issue. Today is ok. :-)
@Lee: It’s a fair enough concern, but I’m conscious of overloading the Appearance options with too many choices. By all means go ahead and change it in the CSS of your own copy though!
Great theme, love it…but:
On my screen the blog title and pages and other fonts are all outline with the page color showing through. I’m on a Mac Powerbook, and I’ve noticed this on wome other sites.
Also, I’d really like to run DIN on this theme (or would Vignelli keel over?). How do I do that?
Thanks,
David
Make that a MacBook Pro…sorry.
@David: I’m afraid I’ve no idea what’s causing the outline you’ve mentioned. If the outline is present on other sites too, it’s probably a device-specific issue.
You can buy DIN Web directly from FontShop and have it hosted via Typekit. All you’d need to then do is add Typekit’s required lines of JavaScript inside the ‘head’ element of the theme code.
Hello Robbie, I’m running Vignelli( simply masterful design) on my test site before going prime time for a cool curated blog I’m planning but I’ve noticed that on my two test post which are linked posts when you tap on a tag, the query returns “not found” The URL you requested could not be found.
Jorge, I’m afraid I can’t replicate the problem you’ve described. Does the problem persist if you install a different theme? If it does, then at least we know it’s not down to Vignelli.
http://www.webpagescreenshot.info/img/419483-920201090435PM
This is the problem I am having with the links , the tags just overlap the next post tags. I am using Google Chrome 6
Robbie thanks, I did a fresh install and all is well, you can check it out at http://curated.nokiamobiletalk.com/
Great theme, love it. The tags are getting overlapped though.. any workaround?
Karanvir & Mark: I’ve just submitted v1.3 of Vignelli to Tumblr, with a rebuilt post structure. This fixes the issue of your tags overlapping onto neighbouring posts. Thanks for highlighting the issue.
Incidentally, if you want to keep abreast of updates to the theme, you can follow Vignelli on Twitter.
In chrome 6 on the Mac the default colour for links links are grey not red. On mouseover they turn red, fade to black then pop back to red again. In Safari the links are red then fade to black on mouseover.
I hope i’ve made myself clear!
P.S. In these comments, the labels moving to the left when you click inside the text box is really cool.
Dean, are you sure the grey links you’re seeing in Chrome aren’t just ones you’ve visited? Both title links and majority of inline links are coloured grey once visited, whereas title links are red by default and inline links dark grey by default.
I think you’re right. I never considered that. It just looks weird.
Could you add Google Analytics support?
Dean, you can add your own Analytics tracking code through Customize > Theme and pasting the code in immediately before the closing ‘body’ tag.
I’ve never actually tried it myself, but in theory it should work!
Yeah, that’s what I have done. I meant in the same way you’ve added Twitter support etc through the Appearance menu.
Hi and thanks for this great theme. However, I have one problem with your tumblr-template. If the ask- or submit-feature is enabled, no links are shown. Could you perhaps re-check this in the template?
Another thing is directly concerned with this very site: Although it looks as if there were 51 comments, I only can see 1 of them.
Hi Michael,
Thanks very much for pointing this bug out. There was faulty logic in the theme preventing links to the ‘Let people ask questions’ and ‘Let people submit posts’ features appearing in the navigation if no Pages existed. I’ve now fixed this as part of v1.3.1, which you can reinstall by visiting http://www.tumblr.com/theme/8738
Oh, and thanks for noticing the comments situation here too. Duly fixed :)
Robbie
Thanks for the fix. I have seen that a lot of people asked for Google Analytics, which is pretty easy to implement if you know your Property ID. Could you add this one, too?
(I have sent an e-mail to you with the relevant theme-code…)
Thanks very much Michael, you’ve saved me a job! Vignelli v1.3.2 includes the addition of being able to set your Google Analytics ID in the Appearance menu, and it’s ready to install.
I have just installed the new version! (And sent a mail to tumblr with the suggestion to make theme-changes more prominent to users!)
What is the easiest way to make a small change to the css of your template? I need to reduce the text size of the links along the top of the pages so that they do not need to wrap to the second line.
The template is very very nice.
Thanks,
M./
Hi Robbie,
Thanks very much for this well-designed template. I’m excited to use it for my company’s blog! I’ve been digging around in the code, finding ways to customize it for our needs, but am having problems figuring out one thing:
I’ve enabled comments, and typed in my Disqus shortname, but I can’t find a way for the number of comments (“3 comments”) to display on the front page. It seems that the viewer would be unaware that comments have been enabled unless they click on the permalink. Is there a way to change this?
Thanks so much!
Kacia
Michael, you can edit the CSS by going to your Customize screen, selecting ‘Theme’ from the menu, then clicking ‘Use custom HTML’. You’ll see all of the CSS appearing before the theme HTML. If you want to avoid wrapping menu items, I’d try increasing the width of .navigation (line 811) and .navigation li (line 819).
Kacia, I’ve added a Comment count underneath the Note count (if you have a Disqus shortname entered) as part of v1.3.3, which I’ve just submitted to Tumblr. It’ll probably take them a couple of days to push it live, so hang on until then before you reinstall the theme!
Hi,
Thanks for the reply. I will probably try that but was put off by the fact that after I got your theme uploaded with a masthead graphic etc. that trying out another theme required that I reupload the masthead when going back to yours. I was afraid tweezing the theme might do the same thing (blow out custom graphics etc.)
Thanks,
M./
Hey Robbie, thanks for this awesome theme and for your support on all these peoples questions. My tumblr blog is an example of how one might integrate navigation and other HTML into the sidebar.
I’m also having trouble with the link color issue (in Chrome). Usually my links have been appearing as light grey always (even when I’ve never clicked them in the post, although I understand that chrome may be checking the cache and seeing that I’ve been there already) and they jump to black then fade to red on mouseover. In safari they show as black then fade to red on mouseover, then turn light grey when visited. Recently however some links (in a single post using chrome) were light grey and some were black. They fade on mouseover yet the black ones don’t turn to light grey once they’ve been visited. Any tips or fixes would be greatly appreciated if you have time!
here is the post in question: http://mattgrandin.tumblr.com/post/1728449178/the-north-face-x-supreme-canvas-duffle-jacket
Hi there,
First I want to thank you for this superb and clean theme. I love it, I have already modded it to suit my needs a bit but as I am not an HTML or CSS fluent speaker… I just wonder how I could just suppress the images drop shadow. I would like them to be flat without border.
Is there anything I can do just to deactivate this ?
Thanks for your time,
Nicolas from FRANCE
@Matt Thanks for pointing this out. I’m looking into it just now and will keep you updated.
@Nicolas You can suppress the drop shadow on the images by removing lines 953, 954 and 955 from theme code.
Hi! Decided to use your theme. But I was just wondering why every time I click on comments, it does not go directly to the comment fields (like most disqus-enabled tumblr themes I’ve tried). You have to scroll down to reach the comment fields in this case. It would be nicer if it goes directly to the comment field. Help? Thank you!
The theme looks nice! I found this while googling for a stripped down, generic Tumblr theme to use as a rudimentary base for making new themes.
The number of Tumblr themes with bad html code is astonishing, so it’s pleasing to see a theme that’s made properly!
Robbie, how do I go about removing Addthis share feature as well as Feedburner (email flare) link (“Songs wouldn’t play…etc.”) from non-post pages?
Hey, was wondering if there is any way to change the background colour? I’d really love something kinda off white. Thanks!
matt
hey robbie,
i was wondering if you knew how to properly make the navbar and sidebar fixed so that only the main content scrolls? I’ve tried adding “position: fixed;” to both and although the Nav stays stationary, the posts just overlap the navbar as I scroll down. As for the sidebar, it seems to have overlapped the nav buttons. I just think it would be convenient to have the Nav buttons and search bar stay where they are, no matter how much you scroll. Other than that, it’s a great theme.
- Darren
Hi. Thank you so much for this theme. It is exactly what I was looking for.
One request:
I want to add short urls of the posts under the posts. But not bit.ly or something. I want tumblr.com/asdfgfgh like short urls. How can i do that?
I have an embarrassing question. I really love your Vignelli Tumblr theme, but as I’m new to this whole blogging thing and have minimal skills, can anyone help me on how to justify the text in my post? I could use a bit of help with this most elementary of HTML tagging.
Thanks, in advance.
Hi Robbie. Thanks for sharing such a smart, clean design. Regarding your reply to Nicolas’ drop shadow suppression question: how do I tell what are lines 953, 954, and 955 in the Tumblr “Theme” customization screen? Thanks again!
All the Best,
-B-
Rob, any chance of upgrading the theme with Vimeo as a social option?
Good Morning
I wasent looking for that but still a great post
how did you guys found this information??thank you for your article I saw it on Yahoo And I saved it .I like. You have my email guys, so can you please send me an email when you post some new blogs on your site!!!
thank you and have a nice day
Hi!
love the theme.. just what i was looking for.
just one thing… when i click on any of the images i post, instead of getting a high res image, i get an error message… eg below:
NoSuchKeyThe specified key does not exist.
tumblr_lo2u9qjMFQ1qizzieo1_1280.jpg
6861F43E10E70B41
−
wMxfoFw71gR56OKc+VgLjQb+gOnkMagJo1lGEFpqvC3ZaKYGuvKS9aY4/887L4+N
do you know what i need to do to fix that?
thanks
Ushma
There are some attention-grabbing deadlines on this article however I don’t know if I see all of them middle to heart. There’s some validity but I will take maintain opinion till I look into it further. Good article , thanks and we wish more! Added to FeedBurner as nicely
Dear Robbie,
I am having the same issue as Kacia– the number of comments for each of the blog posts does not appear on the main page, even if comments have been made on some of them. Is that upgrade still in the works?
Otherwise, I think it is a great theme.
Best,
Andrea
Dear Robbie,
The comment number is now appearing on the main page beside the posts that have comments. I suppose it just took a long time for the site to realize that comments had been posted.
Best,
Andrea
Hey there, Thank you just for that amazing article! I must bookmark 301 Moved Permanently. Regards.
Love the theme.
Is there anyway to get the post “tags” on the left hand side to disappear?
Many thanks!
Hi there,
I really like the clean interface of this theme! Well done!
I want to ask you whether it is possible to add a tag categories on the right hand side.
Thanks
Costas
Easy, quick and very nice on my blog! greting lara
How do I take myself off the notification of new comments via email? The link in the email asks for a ‘valid key’.
Thanks
wow i like the minimalistic style! greetings Cara
my tumblr page runs now with this grat theme! thx jenny
谢谢你，还有你的主题。
Thank you and your theme.
How about adding facebook/twitter-share buttons in blog posts?
Please!!! I cant bear to get any more emails about comments added to this article!!! How to get off the list!!???!??!
Hi
Does anyone know how to edit the image sizes so they all vary on each image size uploaded or if you can set a bigger PhotoSET image size or PhotoURL size? Just need a bit more flexibility in the image size department on this theme.
Thanks,
Mark
Great tumblr theme dude thx marlene
Nice theme, any plans to make this for WordPress?
Love your theme although I would like the fonts darker. I managed to change the colour of quotes (blockquotes) but not the colour of text in posts. Please, could someone tell me how to do it or what to look for? Reading the comments I’m aware this is the tidiest HTML ever, but I still have no idea, sorry.
@azabach: look for “Master/Reset html,legend{background: #777777; color:#000000″. The 000000 in this case is the post font color .
Dans le cas inverse rester a lecoute des avec une potion magique.
Nice page na a very cool article. Thanks for sharing
This type of are actually remarkable once physical exercises where can help you unwind your back bone in addition to sleep accordingly without the working experience about pressure of your for a second time.
I love the design. Can you tell me how do I allow people to comment on my posts? I don’t see the option. I added a link for questions, but It would be nice if it were possible under each post.
thanks so much
h
Nice post. I learn something more challenging on different blogs everyday.This is very interesting and the content is simply amazing.
Comfortably, the post is really the freshest on that laudable topic. I match in with your conclusions and can thirstily look forward to your next updates.
Nice share of a tumblr theme its a simple but and effective and glossy theme