Supple - A Portfolio Theme for Tumblr
Themeforest Supple - A Portfolio Theme for Tumblr Blogging Theme
Important: All users please update their theme to version v1.6.2, which removed a JavaScript conflict that was halting script execution, breaking some Ajax functionality. Thanks!
Supple is a very versatile portfolio theme for Tumblr, aimed mainly at creatives: designer, illustrators, photographers, and any kind of visual artists.
Supple flexible portfolio grid lets you set the number of columns to display for different screen resolutions and devices. Additionally, you can set the grid gutter and the thumbnails proportions: landscape, portrait, square, and anything in between.
- Responsive layout—your portfolio looks great on phones, tablets and desktops.
- Flexible portfolio grid—define your thumbnails aspect ratio: portrait, landscape, square.
- Retina ready—Supple uses a combination of raster and webfont icons and serves high resolution images to high pixel density displays.
- Custom image logo—upload your own standard and high resolution logo images.
- Responsive homepage slider—display up to five image slides, with optional heading and subheading and custom colors.
- Responsive photosets—display your photosets using Tumblr traditional layouts, albeit completely responsive. You can optionally enable a slider for your photoset permalink pages.
- Dynamically load the next set of portfolio projects on the homepage with Ajax.
- Twitter, Flickr, Dribbble and Instagram feeds.
- Spotify support—responsive Spotify embeds that adapt to any screen size.
- Support for all of Tumblr post types, including video from Vimeo and YouTube, SoundCloud and Spotify Embeds.
- Google Web Fonts for body text, heading and titles through the site.
- Social icons: Behance, deviantArt, Dribbble, Facebook, Flickr, Google+, Instagram, LastFM, LinkedIn, MySpace, Picasa, Pinterest, SoundCloud, Twitter, Vimeo, YouTube.
- Disqus comment count and Disqus comment threads.
- Customizable footer: enable or disable individual footer columns and widgets: About, Text Widget, Flickr, Dribbble, Instagram, Ask Me Anything.
- Filter posts by tag—define up to ten custom tags to enable your visitors to sort your portfolio by project type.
- Easy Google Analytics implementation.
- Support for static pages.
- Ask and Submit enabled.
- Optionally disable additional media queries.
- Chock-full of options—all colors can be changed from the customization dashboard, plus there are plenty of options to adapt the theme to your specific needs.
- Comprehensive documentation.
v1.6.2 March 24, 2016
- Fixed: Removed a conflict between the underscore.js and lodash JavaScript libraries that was halting script execution, causing the page to stall at the loading screen.
v1.6.1 December 15, 2015
- New: Vine social icon.
- New: Added 3 column option for ‘Phone Landscape’ and 6 column option for ‘Desktop’ portfolio grid.
- Fixed: Visibility and position of Tumblr controls iframe.
- Fixed: Thumbnail buttons visibility on touch devices.
- Minor CSS and JavaScript fixes.
v1.6.0 November 28, 2015
- Fixed: Updated Dribbble widget to work with the new API.
- New: Option to enter a Facebook App ID to replace Disqus comments.
- New: ArtStation and Bandcamp social icons.
- Updated: Social icons update and refresh (Google+, DeviantArt, etc.)
- Improved: Better responsive styles to make full use of screen real-estate on tablets and phones.
- New: Option to stretch project media to screen edges on phone displays.
- New: Option to display one or two portfolio columns on phones on portrait mode (if the display is 360px wide or bigger.)
- Fixed: Remove comments from pages.
- Fixed: Solved an issue with pages and the “Enable Text Posts Thumbnail Images” setting.
v1.5.0 July 19, 2015
- New: Masonry layout mode for the portfolio grid.
- New: Option to open image lightbox from the grid (for Photo and Photoset posts.)
- Fixed: Wrongly truncated text on lightbox captions.
- Miscellaneous styling fixes and improvements.
v1.4.3 June 23, 2015
- New: Support for full-width inline images on post descriptions.
- Fixed: In some cases the top navigation would only be visible after the initial page load.
- Fixed: Don’t show slider controls when it displays a single slide.
- Minor CSS fixes.
v1.4.2 March 27, 2015
- Fixed: Homepage and photosets sliders fire only after the first image has been loaded.
- Updated FlexSlider to v2.4.0
v1.4.1 December 5, 2014
- Fixed: Slider captions CSS issue when caption text wraps.
- Fixed: Slider timing issues when animation speed is greater than slider timeout.
v1.4.0 September 5, 2014
- New: Optionally use thumbnail images for text-based posts.
- New: Options to display a Welcome Message on the homepage.
- New: Added small thumbnail preview to Link posts permalink pages.
- New: Etsy and Shop social icons.
- New: CSS styles for buttons.
- Fixed: Loading more posts with Ajax on tag pages would throw an error if the tag had special characters.
- Minor CSS and JavaScript fixes.
v1.3.2b August 8, 2014
- Fixed: Custom thumbnail images for photo/photoset posts on retina devices.
v1.3.2 July 3, 2014
- Fixed: Automatic video thumbnails when caption isn’t set for the post.
- Improved: Redid the grid logic to prevent unresponsive posts from stalling page loading.
v1.3.1 June 24, 2014
- Fixed: Loading posts with Ajax on tag pages whose tag contains spaces between words.
v1.3.0 June 10, 2014
- New: Options to set number of grid columns for different screen resolutions/devices.
- New: Set a portfolio grid gutter for a gapless grid or separation between thumbs.
- New: Option to display the portfolio grid at full width.
- New: Option to display a “faux” fullwidth footer.
- New: Endless scroll.
- New: Option to display the logo as text.
- New: Option to open permalink pages on new browser tab.
- New: Added Reddit, Spotify, Rdio and Email social icons.
- New: Optionally show “like” and “reblog” buttons on permalink pages.
- New: Custom thumbnail images for Photo and Photoset posts (independent from the ones on the set).
- New: Options to set search-box background color and opacity.
- New: Option to hide the slider on “tag” pages.
- New: Separate configuration options for photoset sliders.
- New: Scroll-to-top button.
- New: Option to use Tumblr’s own lightbox instead of the one shipped with the theme.
- New: Option to cap photosets to a certain width.
- New: Loading spinner to indicate progress.
- Improved: Navigation dropdown menus respond faster to mouse interaction.
- Improved: Faster/smoother animations/transitions whenever possible.
v1.2.0 August 3, 2013
- New: Option to use Google Fonts script subsets to extend the default Latin characters support.
- New: Option to relocate Tumblr controls iframe so it doesn’t conflict with navigation and searchbox on certain screen sizes or devices.
- New: Better options to disable header and footer gradients.
- New: Society6 social icon.
- Fixed: Better support for Tumblr hosted video files.
- Fixed: Increase Ask widget height so the Ask button is visible again.
v1.1.1 June 27, 2013
- JavaScript: fix an issue when retrieving cover art for embedded videos using the Vimeo API.
v1.1 June 10, 2013
- Added options to show “Like” and “Reblog” button on portfolio thumbnails.
- Added social media icons for Blogger, Quora and 500px.
- Added option to prevent image upscaling.
- Minor JavasScript fixes and CSS improvements.
v1.0.3 March 19, 2013
- Improved support for the SoundCloud widget for audio posts embeds.
- Uses Tumblr native “tweets.js” script for compatibility with the new Twitter v1.1 API.
v1.0.2 March 05, 2013
- Fixes an issue with photosets not displaying properly on the iPad sometimes.
v1.0.1 January 28, 2013
- JavaScript: fixes an issue when Vimeo video thumbnails wouldn’t be available on the homepage if using a HTTPS URL to embed the video when creating the post.
- Fixes an issue when sometimes images inserted into static pages wouldn’t show up.
v1.0 January 18, 2013
- Initial release
Click here for a list of the resources used in the making of this theme.
Images used in the demos
These amazingly talented illustrators and designers were generous enough to let their work be displayed on the theme demos.
Jira Jiramakorn – http://www.behance.net/JiraJiramakorn
WARHEAD – http://www.behance.net/WARHEAD
Brian Luong – http://www.behance.net/brianluong
Ignacio Valicenti – http://www.behance.net/idvalicenti
Paul Nolan – http://www.behance.net/pnodesign
Hello, frequent buyer of your themes here! Love this theme and the support your team gives to the people who buy your products. That being said, I’ve been saving questions to ask that I’ve worked on for hours but have not found a solution.
ReplyDeleteWebsite: http://bartonroad.tumblr.com/
Question 1: Would it be possible to enable the header to scroll with the page like they do in the UMO Folio theme? If not, can you point me in the direction of the code to alter to do so?
Question 2: Where in the code can I increase the width of the Ask form in the footer?
Question 3: Is it possible to wrap the text of the About section around the default image?
Thank you for any and all help you can give!
Hi there, thanks for the nice words
ReplyDelete1 - Not sure this is what you mean, but if you uncheck the option Enable Fixed Header, the header will no longer be fixed.
2 - The only way to widen the ask form will be to make the footer main columns equal in width. Go to “Advanced options” and on the “Add Custom CSS” box, paste the following:
@media screen and (min-width: 58.75em) {
#content_info .inner::after {
right: 50%;
}
#content_info .footer_left,
#content_info .footer_right {
box-sizing: border-box;
width: 50%;
}
#content_info .column--first,
#content_info .column--second {
width: 100% !important;
}
}
3 - To wrap the text around the image, instead of side-by-side, paste the following below the above code:
@media screen and (min-width: 48em) {
#content_info .widget_about .blogger_portrait {
display: block;
float: left;
}
#content_info .widget_about .blogger_info {
display: block;
}
#content_info .widget_about .image_frame {
margin-bottom: 0;
}
}
Let me know if it helps!
Both 2 and 3 work perfect, thank you!
ReplyDeleteBut as for the 1st question, what I meant was if it was possible to make the slider fixed to the background kinda? Like if you scroll everything will move upward except for the slider images like they do on the UMO theme.
The slider on the UMO theme doesn’t work that way. Some sections have background images which are fixed, maybe that’s what you mean?
ReplyDeleteI don’t think it’s possible to make the slider ‘fixed’. However, if you don’t use the slider for multiple images and just want an image background, copy the contents of this link (the RAW Paste Data) and paste it at the end of your custom CSS.
http://pastebin.com/8p4SNk8g
The comments should provide hints about what each part of the code does.
Hope that helps!
I removed the gradient and changed the height in the first lump of code to 100 so that the whole image shows. But the problem now is that no links in the footer are clickable.
ReplyDeleteDon’t know if this has to do with the extended Ask form length but if someone isn’t signed into to Tumblr, all they see is this http://i.imgur.com/CdX6DpA.jpg with no send option.
ReplyDeleteI see. Add the following at the end so the footer is on top of the background image:
ReplyDelete#site_footer {
position: relative;
z-index: 2;
}
As for the ask form, one has to be logged in for it to appear. As far as I know it has always been like that.
Cheers!
Works great! But now anything on permlink pages cannot be clicked.. http://bartonroad.tumblr.com/post/121213803461/test-test-test
ReplyDeleteWoops! Let’s amend the last bit of code then. It should be:
ReplyDelete#site_footer,
.portfolio_single {
position: relative;
z-index: 2;
}
Wow I never thanked you for the help, I’m sorry But I’m having this weird issue where there’s a blank space at the bottom of my site but only for Firefox.. There seems to be a period on the very far left and I can’t find it anywhere. I even fresh installed on another blog and it was still there. I try looking at it on Chrome and it doesn’t seem to show up. What could this be? And THANK YOU for you help!
ReplyDeleteHey there,
ReplyDeleteYour site looks fine on my end on both Chrome and Firefox — no whitespace or stray characters at the bottom. I’m using Firefox version 40 by the way.
I think you have made some changes to the HTML, so to debug it, you could install an unmodified version of the theme on a fresh blog, and then reintroduce your changes one by one to find the culprit.
When viewing the site source I don’t see anything out of the ordinary though.
One thing I noticed is that your pagination isn’t clickable. It must be because of the Custom CSS. You can edit the last bit of your Custom CSS so it reads like this to make it clickable again:
#pagination,
#site_footer,
.portfolio_single {
position: relative;
z-index: 2;
}
Hope that helps
Hello,
ReplyDeleteThe trouble I’m having with this theme is that the MENU doesn’t load sometimes and it’s very important that it is always visible…
The only way to fix is is reloading the web again and that is not very convenient.
Is there a way to fix this?
Thank you1
Hi there,
ReplyDeletePlease send me a message using the contact form on my profile page, and include a link to your site so I can troubleshoot the issue.
Thanks.
Hello, I made a million customization to v1.2, does updating to v1.5 require to redo all custom changes?
ReplyDeleteHey there,
ReplyDeleteIf your changes go beyond the options on the customizer or Custom CSS (if you altered the theme code itself), then yes, it’ll be necessary to re-apply them, so make a backup copy of your customized theme before you update.
Cheers.
Thanks, the update went successfully (I did not alter the HTML code originally).
ReplyDeleteYou’re welcome, glad I could help
ReplyDeleteHi,
ReplyDeleteI like your themes and I got another one from you, Bloq. Regarding to Supple, is there a way to take a look at a print or something to see how it looks when one enable the option for “fullwidth portfolio grid”? Thanks.
Hey there!
ReplyDeleteTake a look at this site using Supple, as it currently has that setting turned on: http://pauldolgov.com
Hope that helps!
Oh, that’s great! Loved it. Thank you so much!
ReplyDeleteNo problem! Check also http://mikemccarthy.eu/
ReplyDeleteHi. I ve got two questions.
ReplyDelete1. Is there any way to disable loading spinner from my site?
2. How can I fix this -> http://pics.tinypic.pl/i/00730/76jyk1fdz1xo_t.jpg ?
To hide the spinner, go to “Advanced Options > Add Custom CSS”, and paste the following:
ReplyDelete#spinner,
#spinner-underlay {
display: none !important;
}
The issue with the menu must be additional CSS rules that are messing with the dropdown. Please send me a link to your site using the form on my profile page and I’ll take a look.
Cheers!
hi! is there a way i can make the header background and post header background have opacity? thank you!
ReplyDeletei love supple theme will be forever using it <3
Hi there,
ReplyDeleteIf you mean having a semi-transparent header, it’s possible with some Custom CSS, but the code will depend on the header background color. Please send me a message using the form on my profile page, and include a link to your site.
Cheers!
e-mail sent! looking forward to your reply _
ReplyDeleteE-mail sent!
ReplyDeleteFirst let me say, nice theme.
ReplyDeleteTwo questions; Is there a Vine icon to link to our vine? Is there an easy way to integrate AdSense in the theme? Thank you in advance.
Thanks for the kind words
ReplyDelete1) No Vine social icon, although it could be added to the next update, which should be available this week.
2) The theme doesn’t have options to integrate AdSense or any other kind of ads easily, since it’s not really its purpose. You’ll need to get your hands dirty and edit the HTML markup to insert the ads where needed. Customization jobs are outside the scope of theme support, but we can help with that for a reasonable fee. Please use the form in our profile page to inquire about rates.
Regards.
There is not a color, and only the contribution of the audio system is unified with a color of the back. Can I change it by any setting?
ReplyDeleteHi there,
ReplyDeleteI replied to your email. Let me know if it helps
Cheers!
Hi there, love the theme, I’ve run into a problem however, I copy and paste the HTML into my Tumblr, but the edit page is blank, I have all the options on the side to change stuff, but the preview is just completely blank on the side so i’ve no idea what i’m changing. Thanks!
ReplyDeleteHi phadeds,
ReplyDeleteThanks for your purchase!
The customizer can be finicky sometimes, but a completely blank preview is really odd.
I just tested installing the latest version of the theme on a brand new blog. All worked as expected in Chrome and the preview looked just fine.
Then I tried the same on Firefox, copied and pasted the theme HTML markup into “Edit HTML” on a brand new blog. After pressing “Update preview” I got stuck with a white screen —which is actually the spinner overlay— and the rotating spinner, similar to what you had.
It seems the event that fires once the Google fonts are loaded isn’t being fired for some reason, although there are no JavaScript errors on the console, which is odd.
After pressing “Update preview” a second time the preview reloads and all looks fine. Saving and reloading the page seems to work too. So, if you’re on Firefox, try pressing “Update preview” a couple of times after pasting the code, or saving the changes before using the customizer. Or try switching to chrome is you still have no luck.
Also, be aware of a recent bug on the customizer: After installing a new theme, some toggles appear to be off when the setting is actually enabled by default. So, even if the toggles are greyed out, some options may be active. At least it’s been like that on my end for a few months now.
If you’re still having issues, you can email me using the form on my profile page, and if you include access to your Tumblr with a temporary password, I can take a look at the backend.
Hope that helps!
Hey Pixel, thank you for quick response , fortunately it decided to work after a little messing around! Loving the theme so thank you for making it available. Have a good day
ReplyDeleteNo problem! I’m glad you’re enjoying the theme
ReplyDeleteThe Periscope seems to be a hit, might add an icon for that.
ReplyDeleteThanks, I’ll look into it.
ReplyDeletePlease apply the v1.6.2 update, which solves a JavaScript conflict introduced a few days ago.
I’m subscribed to new version notifications, so I got the v1.6.2 immediately.
ReplyDeleteHello! I’ve had this theme for years and still love it! I’m having an issue with the newest update and can’t seem to figure it out. When I pasted in the new HTML my navigation immediately switched to align to the top of the page, above my logo. The search bar also is not aligned with the navigation. I’d like to have it align to the bottom but when changing the “Navigation Vertical Align” options it will not budge. Changing the Sprites also does not help. Do you have any suggestions? Thanks so much!
ReplyDeleteHi there,
ReplyDeleteThe issue must be that you have too many items on the navigation menu, and it doesn’t fit alongside the logo. I’m not sure why it goes up when it should wrap below the logo. Please shoot me an email using the form on the item support page, and include a link to your site so I can take a look.
Thanks!