160 comments found

Hi, I have another problem with this update, I can’t set a custom thumbnail image for photo and photoset posts, I tried following the instructions in the help document, but the custom image only appears right in video posts. As you can see the image that I have setup to be used as thumbnail appears after the date inside the image post.

I have a exemplo on this link: http://rrtesteblog.tumblr.com

Hi Ricardo,

Oops, looks like the documentation is missing an important piece of info… please add the tag `_custom-thumbnail` to your post and it should work.

Thanks for the heads-up, let me know if it works for you.



Yeah, this is it, thanks for your help, as always you gave the best support, It works perfectly! :)

Cheers, Ricardo.


You’re welcome, I’m glad it worked! Thanks for the kind words :)

Hello Sergio, I just found out that custom thumbnail doesn’t show on mobile. What I need to do to make it work in both versions?

Thanks again! Ricardo


You’re right, thanks for the heads up. Please find the script tag on line 2185:

<script src="http://static.tumblr.com/64npwmb/ojdn83mwc/main.min.js"></script>

and replace it with:

<script src="http://static.tumblr.com/64npwmb/1yun9vgnd/main.min.js"></script>

Let me know if that works, thanks!


I tested and this solve the problem, everything works now. :)

Thanks Sergio.

Cheers. Ricardo


You’re welcome Ricardo :)

I’ll submit an update soon so the fix is available for everyone.

hi, i seem to have problem with the update, my custom logo doesn’t appear when i view on mobile instead the logo that show is the “supple” logo, and also the scroll to top button doesn’t have the arrow image, it’s missing i hope you can help! thank you~ _

edit: also the social buttons doesn’t work it wont appear.


You’re welcome! Thanks for the kind words.


anyway~ i would love to suggest a image thumbnail option for text type posts on your next update i hope it’s possible _


I’ll keep it in mind, although I can’t say when the next update is going to be.

Hi Sergio, I’d like to put the slider accent at top of the page or if it’s not possible, make it transparent. How I do that?

Thanks :)


Hi Ricardo,

I’m not sure I follow. do you want to move the border underneath the slider to the top? If so, add this to your custom CSS, replacing the border color as needed:

#top_banner {
    border-top: 4px solid #00c4f5;
    border-bottom: none;

Let me know if that helps!

No matter what I do, I can’t get the mobile logo to show as the correct size. It always goes past the header background and runs off to the side. (I just want it to be flush with the mobile view and not have to worry about anything).

Could you please help me out with this? What should the final width/height be for an optimal mobile logo? What DPI should I export it as? Thank you so so much!


Hi there,

The retina or hires logo will adopt the same dimensions as the regular logo, but it will have a higher pixel density. When you export the image, it should be twice as big a the regular logo, and always export it using the Save For Web command, as a PNG with transparency. The resolution should always be 72dpi.

What’s your regular logo width in pixels? I just tested a really wide logo, and it seems that the width shouldn’t exceed 230-240px to fit comfortably on an iPhone in portrait mode. Either way, I recommend the logo isn’t wider than that even for desktop screens. Remember we’re talking about the regular logo, the retina logo will take its dimensions.

If you go to the “Advanced options” section on the customizer, you could paste the following on the “Add Custom CSS” box:

@media (max-device-width : 480px) {
    #logo_link img {
      max-width: 230px;
      height: auto !important;

That should limit the width of your logo to 230px on phones. You may need to tweak that depending on your logo but it worked well for me.

Let me know if that helps!

Hi Sergio,

Really love the theme, and all the new updates! A few (simple, I hope) questions for you, if you don’t mind…

1) I’d love to get rid of the Twitter ticker altogether, but the only way I’ve found to do that is to log out of Twitter. If do that, however, I lose the ability to publish posts to Twitter. Am I missing something? Is there an easy way to lose the ticker but remain logged in?

2) Is it possible to center the navigation instead of aligning to the left of the page?

3) Same question for slider texts – I know I can align them to top, middle, or bottom, but could they be centered instead of aligned left?

4) Possible glitch: I’ve changed my logo settings to NOT offset when rolled over, but it continues to do so, no matter what I do. Just a heads up.

5) And now we come to my main question, as it’s something I’d really love to be able to achieve… Is it possible (perhaps for a future update?) to include the ability to add a simple text section below the header slider, before the thumbnail posts? For reference, there is a theme called “Karl” that appears to do this (but I’m not willing to leave Supple just for that ;) ).

Thanks, as always!


Hey there :)

1) You can hide the Twitter widget with some custom CSS. Add the following to the “Add Custom CSS” box on the advanced section of the customizer:

/* Hide tweets */
#tweets {
    display: none !important;

If you want to go all the way, you can remove the code between the tags {block:Twitter}{/block:Twitter} beginning on line 2273. That will prevent the Twitter code form executing.

2) The following snippet worked to center the navigation for me, but it may not work depending on the length of your menu or logo size, give it a try:

/* Center navigation */
@media screen and (min-width: 58.75em) {
    #menu_bar {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;

    .navi_dropdown {
        text-align: left;

3) Centering the individual lines on each slide is not possible, because the animation is scripted, but you could center the whole heading group as a whole:

/* Center slides headings */
#top_banner .overlay .inner {
    text-align: center;

4) You’re right there, will fix. In the meantime, use this:

/* Fix logo on hover */
#logo_link a:hover {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

5) I will consider adding that as an option for the next update. If you want a quick and dirty way to have a block of text below the slider now, you can insert the code manually between the tags <div class="inner portfolio_inner"> and <div class="grid_wrap clearfix">, lines 1327 and 1328.

Take a look at this for example, the text block is inside the <div> with the “hero” ID:


Change the heading and paragraph text as needed, then add the following custom CSS to style it, adjust link colors and margins to taste:

/* Custom hero styles - adjust to taste */
#hero {
    max-width: 800px;
    margin: 80px auto 100px auto;
    text-align: center;

#hero h3 span {
    font-size: 85%;

#hero a {
    color: #00c4f5;
    border-bottom: 1px solid #00c4f5;

#hero a:hover {
    color: #333;
    border-color: #333;

I have these changes done on this dummy test site: http://pixelmoxie-supple-theme.tumblr.com

I’ll keep them there for a couple of days so you can reference them. The entire custom CSS looks like this: http://pastebin.com/e76hXtBr

Let me know if that helps!


This is a tremendous help. You’re fantastic, thank you!

HI SERGIO! :3 My name is Kylie and I’m in love with the new theme and using it for my illustration/craft portfolio ( brightbatdesign.tumblr.com ) and I am looking for a way to post a grouping of small thumbnailed photos above the about me section (when clicking- take you to my tshirts)

Similar to how Meganlara.tumblr uses hers for etsy linking I hope this makes sense! Let me know :)


Hi Kylie,

I’m glad to hear you’re enjoying the theme. Nice illustrations!

Looks like she’s using something called “Etsy Mini”:


So, you should build your own Etsy Mini and then manually paste the code on the site footer, above the “About Me” title.

Keep in mind that the Etsy widget is not responsive—it has a fixed width—so it will not look good on tablets and phones, unless you make it only three columns wide. Also, it looks like you can’t customize it at all, and has a white background, so I don’t know how good it will look against the dark background of you site.

Kind regards,


fersito Purchased


I have a problem with my theme! It was all working perfectly but now the social media icons won’t show up! I have no idea why or how to fix it…it’s like they disappeared. Check it out: http://www.vitto.es

Please help! :(


Hi there!

I think the problem is that you uploaded your logo on the Sprite image field on the customizer. If you updated from an older version of the theme, the simpler way to solve the issue would be to find the Sprite and Sprite Hires image fields on the customizer and select “Remove”, so that the theme uses the default and updated icon sprites.

Please let me know if this fixes the issue :)

mkirin Purchased

Hello, how can I set up a About Me section like http://meganlara.tumblr.com/ with a larger picture and the text to the side of it? Thank you in advanced.


Hi there!

Looks like she made several customizations to the theme. You could achieve similar results with some custom CSS. Try pasting the following into the “Add Custom CSS” box, on the advanced section of the customizer:

#content_info .widget_about .blogger_portrait {
    width: auto !important;
    max-width: 200px;

#content_info .widget_about .image_frame {
    margin-left: 0;
    padding: 0;

The `max-width` rule is to prevent the image from getting too big. Let me know if that helps!

mkirin Purchased

It worked perfectly! Thanks :D


No problem!

Hey there!

For starters, I just want to thank you for all of the great support. You really are going above and beyond.

I just have one quick question: is it possible to have all photos in a photoset display full-size instead of the tiered (1, 2, 2, 3, etc.) look? The first photo looks amazing…and then they quickly get smaller.

If that’s not possible, could they be displayed in rows of 3?

Thanks in advance!


Forgive me—haha I guess there could’ve been a better way of explaining things.

Using the above “quick test page” as a reference, I made put together this visual to display what I’m referring to:


Does that help? Long story short, I’d just like some consistency in the page size for photosets. Option #1 would be beyond perfect. Any help is greatly appreciated! =)


Hi there!

You can do that already. I guess when you created the post and dragged the images, they got arranged like that by default—but you can go back to your dashboard, edit your post and arrange them however you please. If you drag the images around you can place them in stacked order or a different grid configuration. Am I missing something else?

And if you feel your images get too wide, you can use the option Photoset Max Width to limit the width of photosets to something like 700, for example.




Derp. Haha that’s what I get for never really using Tumblr before.

Thank you so so so much!

Love the new thumbnail on link text etc feature, however once the thumbnail is set for the above the icon on the left indicating its a link disappears, can it show the link icon and thumbnail together? Thank you


Thanks! I’m glad you like the new options. It’s a little tricky, but if you add the following to your Custom CSS you should have the link icons back:

.portfolio_item.is_link .thumbnail::before {
    content: '';
    display: block !important;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 1px;
    left: 1px;
    background: url(http://static.tumblr.com/64npwmb/qRWnbdy8y/sprite.min.png) -300px -400px no-repeat;
    opacity: 0.4;

Let me know if that works for you,



Thank you so much, it worked :)

hi!!! this is me again lol! i was very happy with the update! you even did the image thumbnails for the text posts >w<

there’s only one thing i noticed, everytime i edit my theme, the footer text widget resets to it’s original value, i hope you can help!

anyway, you really did a great job! :)



Thanks for the kind words, I’m glad you’re happy with the update :)

That happens to me as well, I assume is a glitch on Tumblr’s dashboard. Tumblr doesn’t seem to like that variable, is the only one that keeps resetting itself, but there’s nothing that sets it apart from the others.

If I find a solution i’ll let you know, but for now you’ll have to paste the text widget contents back in.




ohh, i see thank you so much for always helping!~ :)

fersito Purchased

Hi!! :)

One question; is there a way to get rid of the “Thumbnail Type Text and box”? I think it’s very distracting and would look better without it. :/

So far, I have only managed to change the color but I would like to get rid of of the little “pencil” sprite and the box in general.

I hope you can help me with that!

Thank you so much in advance!


Hi there!

I’m not really sure what you mean. Do you want to get rid of text posts on the grid completely?

The latest update has options to display text posts the same way as photo posts. You have to insert a custom thumbnail image and use a special tag on the post. Have you tried that?




I just updated to the 1.4 from 1.2, and I’m having an issue with image upscaling. When I toggle “Prevent Image Upscaling,” it only works with a few images, but most still get scaled. Is this a common issue, or is there a way to fix it?

Any help would be greatly appreciated! :)

Best, John


Hi John,

Unfortunately, the option created some issues with photosets, the images were not rendered consistently in many cases.

Now you can limit the width of the photoset as a whole, so if your images aren’t wider than 700px, for example, you can enter `700` for the option Photoset Max Width.

If you want to target only specific sets, you can do so with Custom CSS using the photosets IDs, for example:

#photoset_85865878787 {
    max-width: 700px;
    margin: 0 auto;

You can grab the numerical portion of each ID from the post URL.

I hope that helps!



Thanks, Sergio! Admittedly, that’s a little disappointing, as I liked the way the feature worked in the older version – that being said, if it didn’t work consistently, I completely understand why it was nixed.

Thanks again for your help!


Yeah, it depended on the way the images were arranged on the set and their size. I think most people didn’t have issues, but for some photosets looked wrong, so I thought it would be more consistent to limit the width of the entire photoset.

I’ll look into bringing back the old behavior, if possible, but that would probably require redoing the whole logic behind the photosets script.



Hey again!

A previous comment mentioned having a custom background. Simple enough stuff. I was wondering: what’s the size of the footer? This would help out a ton in planning my background.


Haha yes and no.

It’s simple enough to add in and get uploaded! Buuuuut, by doing so, I can’t use the “Body Background” color option anymore.

I guess it’d be better if I further explain what I was trying to do: - I wanted to keep the “body background” color option enabled, so I could change it to whatever I want, whenever I want. - I thought I could have a no-repeating and centered “white” background that’d lay on top of the “body background” color. It’d be the same size as the max-width of the footer, so the “body” (what all the text and pictures and stuff lays on top of) would have a white background.

Does that make sense?

Haha sorry for bugging ya again.


Actually, this might be easier to for me to explain:

Is there just a simple way to make the body white and have a custom background image behind that?

There. Haha I think I explained that the best way possible.


I think I got it ;)

Use the `Body Background` option to set the color for the main background, and then change the background color of the content with some Custom CSS; for example:

.no_slider #portfolio_index,
.no_slider .portfolio_single {
    margin: 0;
    padding: 0

#portfolio_index .inner,
.portfolio_single .inner {
    padding: 40px 0;
    background: #fff;

If you don’t want it on the homepage, just remove the lines referencing `#portfolio_index`.

Hope that works as intended!

Also, another completely random question:

Is there any way I can have the text be displayed before the photoset? I’m pretty sure Tumblr’s built to always show the photoset first.


If you have a tip jar somewhere, I’ll be more than happy to throw in for all of the wonderful help you’ve been giving! =)


Actually, I was able to figure this thing out:


Buuuuut the “reblog” button shrinks every time you highlight it. Is there anything I can do to make it so it doesn’t shrink?


Did you just duplicated the code (for the title, date, buttons, etc.) at the top? The button behaves like that because you have the block

<section class="post_details"> ... </section>

inside of

<section class="post_content"> ... </section>

...not its intended parent. Try moving it out and above that block instead, so you will have:

<section class="post_details"> your duplicated title, date, buttons... </section>
<section class="post_content"> the post content... </section>

No need to wrap the code on the extra <div> either. That will fix the issues with the paddings/margins as well.

Never thought about setting up a tip jar, good one!. If you want to return the favor, just head to your “Downloads” tab and rate the item 5 stars :)

Let me know if the above helps!


Hello, Any way to use a hosted image for the header or footer? What about a non-tiled hosted image for the background? Thank you!


Hey there,

Sometimes I use https://imgur.com/ to host my images, seems to be fast. Make sure the images are optimized for the web and the file size is as low as possible.

Assuming the header and footer should have a tiled image applied, you can use the following:

/* Header Bg */
#site_header .inner {
    background: url(http://path/to/my/hosted/image);

/* Footer Bg */
#outgoing .inner,
#content_info .inner {
    background: url(http://path/to/my/hosted/image);

/* Get back the gradient */
#outgoing_links {
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.13)));
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.13));
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.13));
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 25px;
    background-size: 100% 25px;

For the body background, you can play with the `background-size` property to see what works best (cover, contain, auto):

/* Body Bg */
body {
    background-image: url(http://path/to/my/hosted/image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

I hope that helps!


Awesome, I’ll start fiddling with those, I’m assuming those are all to go in the ‘custom css’ section? Also, how would I do a non-tiled header? Would a .tiff with transparent sections work to show the background underneath? I imagine not but I had to ask.


Yes, “Advanced options > Add Custom CSS”.

For a non-tiled header you want to use `background-repeat: no-repeat;` and set `background-size` to `auto` or `cover`, depending on what you want to achieve.

A TIFF image will be way too heavy. Export your image as a PNG with transparency (Use the “Save for Web” command in Photoshop). You can additionally run it through http://optimizilla.com/ to compress it even further.


Okay, soooo: I’m, like, 90% complete with what I’m trying to do. Just a few final (promise!) questions:

1.) http://readchallenger.tumblr.com/post/96516650636/free-read-challenger-comics-is-proud-to - Is there any way to only have the social share, reblog, and “like” buttons at the bottom of the page? - Long story short, as you most likely have noticed, I reversed the photoset/caption order. As you mentioned above, I cut+pasted all of the post goodies (Title, date, share, reblog, like) into a separate section. Ideally, I’d only have the social share, reblog, and like buttons duplicated at the bottom. But, when I tried, it always displayed the title too. As such, I deleted everything above the <footer class=post_meta”> section.

2.) Is there any way I could place floating/clickable banners on the outside of the body?

3.) If not, is there anyway I could expand the white background section and make it a clickable background? (Option #1 would be preferable though!)


Although I gave you a 5/5 star rating, I’d love to be able to send something over too. You need to open up that tip jar! Even if it’s just a Paypal “donate” link, it could really go a long way haha.


Hey there,

1) Paste the contents of this bin above the <footer class=”post_meta”> tag, Is basically what you have above without the title and date, with an extra class.


The title gets duplicated because is injected via JavaScript (is a fake title after all), but it can be hidden. Add this to your Custom CSS:

.post_details.hide_title .project_title {
    display: none;

I also notice the reblog button still behaves a little weird up there. This should tame it:

.portfolio_single .post_details .reblog_button:hover {
    padding-left: 5px !important;
    padding-right: 5px !important;

2) Placing floating banners would be hard because the content width changes depending on the screen size or device.

3) If I understand correctly, you want to make the light blue background clickable. I think it would be possible to put a giant clickable banner behind the post content, something like this site: http://www.kvraudio.com. Some changes to the layout will be needed in order to click through the banner, and it would only be shown on large screens, when there’s enough room on the sides and the content width is fixed. Let me know if something like that would work for you.

Thanks for the rating and positive review! If you want to send something my way, please get in touch via the form on my profile page.


I used the custom background and header and it looks great. After fiddling with font colours and fonts I seem to have lost my navigation link to my ‘about’ page. The ‘show a link to this page’ slider is on and the page url still exists (www.arronjackson.com/about). The about link also appears in the site preview and enabling home button also appears in the preview but neither in the actual site. I was wondering how I can get the link to my ‘about’ page back, and if it was possible to reposition the link in the lower right of my header. Thanks again for the support.


Hi Arron,

Glad to hear the background images worked fine, looking good :)

The issue seems to be that the Lato font you assigned to the navigation isn’t being loaded. I think you entered “lato” (all lowercase), make sure the Navigation Font Family reads “Lato” (capitalized).

Please let me know if that helps!

Thank you very much for sharing this with us. Here is my blog so far: http://mexdragoon.tumblr.com I am having a bad time with the header and adding another dropdown menu like the one of gallery. Also is there a way to add more menus on the header? Thanks :)


You’re welcome, thanks for your purchase!

The theme has two dropdown menus, one for the tags (the one you’re using) and another one for pages you create on the customizer.

The easier way to add a second dropdown would be to create as many pages as you need, and if you want them to take you to ‘tagged’ results, you can use the Redirect feature to make them point to the right tag page. For example, create a page pointing to


that redirects to


More about using pages here: http://www.tumblr.com/docs/en/pages

Then make sure “Enable Pages Dropdown” is enabled.

The other option would be to manually insert the code for an extra menu into the theme markup. This is the HTML structure you should use for a dropdown menu:

<li class="has_submenu"><a href="javascript:;">Your Label <i class="icon-plus-alt"></i></a>
    <ul class="navi_dropdown">
        <li><a href="/tagged/whatever">whatever</a></li>
        <li><a href="/tagged/whatever">whatever</a></li>
        <li><a href="/tagged/whatever">whatever</a></li>
        <li><a href="/tagged/whatever">whatever</a></li>

The ‘href’ attributes don’t have to be ‘tagged’ pages necessarily, and you can use relative or absolute paths. You could insert you code on a new line after {/block:IfEnablePagesDropdown}{/block:HasPages} on line 1169.

Let me know if that helps!