okay, lets just say i was making an icon-font with kpop fandom and band logos only. what would you guys like to have included, band-wise?

okay, lets just say i was making an icon-font with kpop fandom and band logos only. what would you guys like to have included, band-wise?

5/12 Magic Summer

Preview // Code

This theme is inspired by Red Velvet’s upcoming comback titled “Magic Summer”! Having celebrated their 4th year since debut recently, i decided to dedicate this theme to Red Velvet as they’re a group i love very much and supported since day 1!

5/12 Magic Summer features

Compability:

Please like/reblog if using or planning on using ♡

Absolutely ignore this because I have nothing better to do with my time.

So, no more work for today and I decided that making flat logos inspired by six of my friends was a good idea.

If you can’t recognise them, they’re respectively inspired by: @espoirthemes , @baechys , @cactusthemes , @magnusthemes , @octomoosey , and @badwolf

Serendipity by extasisthemes Live Preview/Code

Features

Notes

PAGE #2 JOLT (2.0) [Preview]

Character List (revamp). A minimal character list with pictures & an icon menu for linking to character tags, information, etc. & room for a short bio text.

↳ [GITHUB] | [PASTEBIN]

This is a revamp of the JOLT page theme. The old code will hereby be retired and I won’t offer support for it any longer. Please update your code.

Features:

Credits:

Edit and customise to your liking. Don’t repost/redistribute and/or claim it as your own. Do not use as a base code. Leave the credit intact, thank you.

As always, explanations for most things are in the code. I’ll be updating them from time to time as I get questions. If you are having issues, take a look at this themes FAQ, or my general FAQ. Not finding anything? Shoot me a message. If you find any bugs – any errors etc., please contact me so I can fix them!

air : preview / code

features:

notes:

Tutorial: jQuery-Free, Simple, Flexible, and Responsive Photosets

I recently decided to make all my themes jQuery-free. This required me to rewrite almost all of the plugins that I was using, including Pixel Union’s PXU Photoset, the current most popular way of managing tumblr photosets.

tumblr default photosets are atrocious, so I understand why so many rely on PXU Photoset, but the script was designed for Pixel Union themselves, and has far too many features for most users.

My new photoset uses minimal javascript processing and relies fully on modern CSS for style, allowing you to customize the look of the photoset completely. You may preview the photoset with many styles here.

Setting Up

This is how your photoset should be set up in the tumblr html.

{block:Photoset} <div class="photoset" data-layout="{PhotosetLayout}"> {block:Photos} <div class="image-container" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}"> <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="image"/> </div> {/block:Photos} </div><!-- photoset --> {/block:Photoset}

You may of course add other things, like the caption. The important part is the image-container and the image.

Javascript

The processing of the photosets in javascript uses three functions: lightbox, makeLightboxes, and makePhotoset. They can be found here.

You may choose to use these functions in any way to suit the rest of your theme code, but here is a barebones setup that runs the functions on window load:

window.addEventListener('load', startup, false); function startup() { let photosets = document.getElementsByClassName("photoset"); for (let i = 0, n = photosets.length; i < n; i++) { makeLightboxes(photosets[i]); makePhotoset(photosets[i]); } }

These scripts produce lightbox functionality for the photoset. It also puts the images into containers according to the rows in the photoset’s data. Each row has a class of photo-row-n where n is the number of photos in the row (up to three, which is the current tumblr maximum), allowing us to easily style the photoset in our CSS. Speaking of which…

CSS

Here is where the magic happens. You can really do whatever you want, but I have provided a styling that mimicks the tumblr default styling. Preview of how this styling looks.

You can find the CSS for this styling here. This solution uses flex and object-fit. These don’t fail particularly gracefully. If a browser doesn’t support object-fit (mainly Internet Explorer), images will be squished and stretched. If a brwoser doesn’t support flex (mainly old versions of Internet Explorer), images will be displayed at awkwardly small sizes in a list. I doubt many tumblr users are on IE, but it may be a concern to some.

Flexible Style

The best thing is, the magic of flexbox allows us to have the images sit next to each other while maintaining their aspect ratios. Preview to show you what I mean.

To get this style, you can use the CSS here. This solution doesn’t look exactly like normal tumblr photosets, but it does have the benefit of failing much more graceully. It does not rely on object-fit, and if flex fails, the images appear normally in a list (albeit with some arbitrary padding). It also looks amazing in my opinion, because images don’t need to be cropped and can retain their artistic composition. I will be using this method in my new themes.

Coda

Ultimately, you can decide exactly how you want the photoset to look in CSS, which is the power of this method. You can add borders or make all the images have rounded corners. You can view more possible styles on the project preview page. I hope I have been able to help you make your themes simpler and yet more responsive!

This post might become outdated. The most relevant and detailed information will always be found in the GitHub repository for this project, located here. If the tutorial doesn’t work, always check the repository first.

#nojschallenge theme pack

PREVIEWS & CODES

Special thanks to @themehive , @annasthms , @baechys , and @magnusthemes for hosting this event!