Discussion on Vintage Metro — A Blog Template for Tumblr.

30 comments found

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
keywonc Purchased

Thanks for the clean theme! I have a question though:

Some photoset posts crop portrait photos, and other photoset posts don’t crop images. How can I disable cropping for good? Of course I can try css overrides but I’m wondering if there is a much less messy way, or if you can advise how to do a clean override. Here’s my work in progress blog.

Also, I’d love it if you could add infinite scrolling in the future. It’s particularly useful not to have to see the tall #header every time you want to see more posts ;)

thomv

Photosets are cropped according to the image with the smallest height. This way there won’t be any white areas between images. This is currently done using JavaScript (found around line 1845 in original code). I’ve been thinking about determining this height per row of images instead of the whole set of images, but I haven’t found the time to implement this yet.

If you want to override this JavaScript I’d recommend uploading the development version of the javascript file, found in the theme-files, using Tumblr’s own upload tool after removing/changing the appropriate functions for photosets.

I dislike infinite scrolling in any way and would recommend against its use. Hence the fact it’s not implemented. If you don’t want to see the header when going to the next page you could append #page after the href-value of the pagination links to make the page scroll to the first post instead: <a href="{NextPage}#page"></a> (found around line 1757 and 1767 in the original code).

I hope this helps. :)

thomv

Update: All the code for the improved photoset-layout is sorted. Theme update coming next week. :)

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
derosky Purchased

changing fonts in html code doeasnt work. I am changing, the preview looks good, then Im saving and exiting to blog and still have small text. Help!

Default-user
derosky Purchased

Solved this problem but I have another. I changed font to pt serif. On desktop it looks good but on iOS polish characters are displayed with different font. How to fix it? Ormifnyou know ?mia?e font that will work you cna stare with me. Best.

thomv

Anything you’d need to know about changing/installing fonts is in the documentation.

The problem you mention here is a limitation of the font you’re using. Every font has a certain amount of supported characters. A preview of the characters supported with a font is available on Google Fonts. The font’s author decides whether they support polish characters with a font.

Default-user
derosky Purchased

but pt serif support polish characters, my problem is that they are replaced on ipad or PC, mac works fine. How should I know which font support iOS and windows for polish characters?

Default-user
derosky Purchased

Trying to install google web font. They want me to copy code under <head> which I’m doing but still I got nothing on ios. Any help?

thomv

I’ve never heard of this bug, can’t reproduce the bug and can’t find anything to fix it. So, I have no idea how to help you with this. I would suggest to report the bug to Google to see if they can help you out.

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

Hey Thom. Thanks for the great theme. How can I get it to display post images and text as the same width (like it is in your demo)? I love that look. :)

Thanks!

thomv

You’ll have to host the image elsewhere to get full-width images in text posts. It’s a limitation of Tumblr, sadly. More info is in the documentation under FAQ.

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hi Thom,

Are YouTube posts not full width? because mine aren’t.

thanks,

thomv

It’s a bug in JavaScript. Will be fixed with next update in a day or two.

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hi again, for some reason, Search button doesn’t seem to work for me.

it just adds #search to the url, then nothing.

weird. anyway, I turned it off for now.

thomv

It’s a bug in JavaScript. Will be fixed with next update in a day or two.

Default-user

was there an update and I missed it?

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years

can you add pinterest, twitter, facebook shares buttons? or links to social profiles somewhere?

thomv

The following networks are integrated with the theme out of the box: Email, Twitter, Facebook, Google, LinkedIn, Digg, StumbleUpon, Reddit and Delicious. People always ask for more, but since there are a gazillion networks I’m keeping it at the ones mentioned. If you want more, you can add them to the theme yourself.

To add additional share-links to this theme, simply scroll to about line 1670 (in original code) and insert your links inside the <span class=”popup”></span> tag.

For Pinterest I would assume your link would look something like this: <a class=”pinterest” target=”_blank” href=”http://pinterest.com/pin/create/button/?url={ShortURL}&description={Title}”>Pinterest</a>

And your CSS would then be .popup .pinterest {background: #c8232c;}

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
derosky Purchased

solved the font problem but I have another question. I want to create side margins on the text. I use template for photo posts with text under each photo. I want the photo to remain without margins and the text to have 20-25px margins on te left and right. How?

My blog: derosky.com

thomv
I would suggest adding the following code to the Custom CSS box in your theme’s customization panel:
p, article ul, article ol { margin: 15px 20px 0; } h1, h2, h3, h4, h5 { margin: 0 20px 25px; }
This overwrites the default values for those elements. Change the 20px to however you want it to appear. If you want ‘everything’ but the images to be less wide, then you might want to add this code as well to decrease the width of code-blocks, post-info, etc:
aside { margin: 0 20px; } pre, code { margin: 15px 20px 0; }
Default-user
derosky Purchased

Thanks. I used your code but now blog is unreadable when trying to open it on iPhone. One or two words on each line. Can the margins work only on bigger screens like iPad or Mac but not on iPhone?

thomv
Sure, wrap the CSS-code in:
@media (min-width: 640px) { CODE HERE }

Use 640px for every screen bigger than iPhone, or if needed 768px for every screen bigger than iPad.

This way CSS is only applied when the screen-width is above 640 pixels. If the screen-width is 640 pixels or lower it’ll not apply the CSS and use to the default values of the theme instead.

Default-user
derosky Purchased

Thanks a lot, works like magic. Last question, I’ve tried to change permanently the h2 color in css. I use h2 as my title in photo posts so I want them to be in different color. I tried to paste this to css but it didnt worked:

h2 {color:#00ff00;}

Is there other code to do that, and where to paste it if mine is good?

Default-user
derosky Purchased

dont answer that, just recalled that you can change title colors in template menu ;)

Default-user
derosky Purchased

Any code to make video posts look like photo posts? Now I have a video thats aligned to left and its so small, half the photo size. I want them center and bigger, not 1000px wide bud wider.

thomv

When you insert an image into your blog-post make sure you remove the height and width attributes from the <iframe> or <embed>. If you remove those, then the video will automatically get a width of 100% (same as photo).

Got a similar case here.

Default-user
derosky Purchased

thank you for this. Probably my last questions (for now ;)). How to make photos in photo posts to have sharp 90 degree corners, not rounded like in default theme, and how to hide Post Notes (“Show Post Notes” switch doesnt work)

thomv

What you’re looking for is an octagon, did a quick Google search and found this (source: StackOverflow).

The “Show Post Notes” switch does work, but the change isn’t effective immediately. Don’t know why that is, but I’m going to blame Tumblr for that. :P

Default-user
derosky Purchased
I don’t know what this octagon is for and what code should I paste to blog to have normal photos. Maybe You get me wrong. I have posts with photo corners like this: https://www.dropbox.com/s/i6vgxa9225etfvt/Screen%20Shot%202014-04-04%20at%2019.36.21.png and want to have them like this: https://www.dropbox.com/s/19fai14a1cd3y9z/Screen%20Shot%202014-04-04%20at%2019.36.34.png

About “Show Post Notes” switch. I turned it off couple days, maybe week ago, still see Post Notes under Post.

thomv
I’m sorry for the misunderstanding. If you just want to get rid of the border-radius on images, then simply remove the border-radius. Can’t make it easier than it is:
article img { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }

If you’re on the latest version of this theme (1.8), and if you’re sure you didn’t change anything in the code that could affect the post notes, then I have no idea why it doesn’t work. It’s either on or off, nothing else is possible. Make sure you save the theme after changing something in the Customization Panel. You might want to try and refresh the page or exit completely after editing and saving the settings.

Default-user
derosky Purchased

Border radius reduction went well. Thanks.

About Post Notes. I think I explained what i mean wrong. I dont see post notes when I turn off the switch. I just checked “Show Post Notes” Switch on and when clicking on Notes under Post I see them. What I wanted to hide is the “3 Notes” link under the post. I dont want it to be visible. How to perform that?

thomv

Scroll to about line 1650 (in the original code) and remove this line: <a class=”notes” href=”{Permalink}#notes”><span class=”icon”></span>{NoteCount} Notes</a>
or comment it out by wrapping it in code like this <!‐‐ code here ‐‐>

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hi, the ASK label doesn’t show up in the header (the footer is ok) even if the switch is on in the settings, Can you help me? Thanks.

I.

Default-user

Fixed. Cheers!

  • Bought between 1 and 9 items
  • Has been a member for 3-4 years

Hi Thom, this is a great theme and I’m really enjoying the clean look of it. There is one thing that is quite distracting though. I usually only post photo sets and what happens is that a clipped version appears first and then only after a while (presumably after the JavaScript code runs) does it change it to the proper size. This causes the page to jump around in a rather distracting manner.

Is there any way to fix this? Have a look at my tumblr at http://rafiq.sarlie.com to see what I mean.

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
derosky Purchased

I dont know if this request can be done via this template support, if not i would pay for some modifcation. I wanted the header and menu links to look like in basic tumblr theme – Observer. But I wanted rest of the blog to look like vintage metro. Is it possible for you to show me how to implement this: http://cl.ly/W4qQ into your temlate?

Just wanted to have menu at the top of template aligned center. Blog logo to be bigger like in the screenshot and all white theme with no image or separator from rest of the blog. Please let me know if you can help me with this. Thanks

by
by
by
by
by
by