maci themes

Character page: Djakarta

This is a character bible kind of page. Displays page title and blurb and list of characters on initial load. Character details are visible on click. Features:

A post-it-style summary

Quote/catchphrase

Basic info

Modular/extended character info

Press ESC button to hide currently viewed character

Space for character tags or traits (or both)

Space for character biography or otherwise wall of text with formatted heading tags and blockquotes

Space for related characters (image + name + optional label)

Space for character moodboard and color scheme (5 colors)

Responsive! (for the most part)

Preview + Install: Preview 01 | Preview 02 (full screen) | Install

The preview images are kinda lazy, but I swear it looks a lot better live. I spent a lot of time on this and hopefully I didn’t miss anything, but if there are any problems let me know! Some notes:

Knowledge in HTML and CSS are necessary for easier editing

All sections are optional and you can switch the elements around as you please

As many of you know, I’ve been hosting my CSS files externally for quite a long time and some people have asked me why I do it. On top of that, I received a request asking for a tutorial on how it’s done.

So, I’ll be talking about the following:

Why I have my CSS files hosted externally

Why it’s a good idea to host them externally

How I do it + short tutorial on it

This post is mostly directed at theme-makers and other people sharing code work but it is also useful for anyone wondering how to host their CSS externally.

Havocker by @pohroro  —  Preview / Full Details / Purchase ($22)

Premium sidebar theme with a popup.

Popup includes a profile section, quote, up to 8 extra links, social media links, currently doing section and statistics.

Dashboard styled captions.

Option for 400px, 450px, 500px or 540px posts.

Option for infinite scroll and lazy load.

Fully responsive and compatible with mobile devices.

Many built-in options that will allow you to customize it with ease without you having to dive in to the code itself.

Please view the full details in the link above for a detailed list of the theme features.

- ̗̀ SKYOFRP’S THEME #15: LUMIÈRE ̖́-

hello hello! i’m back with another theme, one that’s really close to my heart. before we get into the nitty gritty, i want to give a shoutout to some really important people. this theme took a village to make, and i am incredibly grateful to everyone who helped in the process. rowen @pirateskinned​ saw my vision for this theme from the very beginning but showed me how to make it even better, and i can safely say this theme wouldn’t be where it is today without her. ali @sixtyfcurs​ was my eternal cheerleader and lyric formatter, and i would’ve given up on this theme (or made it unrecognizable bc of my perfectionism…) w/o her help. jayce @codematurgy​, victoria @aubadese​, & ht @glenthemes​ with the bug fixes & feedback, your input was invaluable and i’m beyond grateful for your help. and finally, major thank you to sol @suiomi​ for the honeybee font, which i am always using in my themes — it’s such a beautiful font and my themes wouldn’t be where they are without it… and the honey navigation theme in this theme is just a small shoutout to you. <3 in summary, you all have been helpful beyond words & i thank you so much!

this theme has a lot of customization options, so please be sure to read the features info fully! and lastly LASTLY, please enjoy!!! <333

credits:

mrsthemes: base code

google fonts: font hosting

@suiomi​​​: font icons

@focusedits​​ & @7ringsedits​​: icons on theme preview

animalities: the imessage chat code

padyluppet: audio player (modified by me)

features:

400px posts

background image for the container (suggested dimensions are 1050x700 at minimum)

option to have your background image automatically resize & cover the container (i’d fiddle around with it, turn it on and off and see which one looks the best)

two main accent colors featured in a gradient & throughout the theme

six body fonts to choose from

two sidebar icons with six shapes to choose from (circle, square w/ rounded edges, heptagon, message bubble, an “x” shape, & chevron)

4 navigation icon themes for u to choose from (standard, honey, celestial, nature)

option to have a dark or light theme for your description & varying levels of opacity (0-100%)

optional greyscale (of varying intensity)

an imessage effect for chat posts

a v messy code tbh, but i tried™

every ounce of love i have to give

terms of use:

edit as much as you’d like for personal use, but do not use as a base code and do not directly lift code from this theme and redistribute it as your own. do not touch the credit.

if you encounter any issues, message me off anon and i’ll try to help! other than that, enjoy!

*✧･ﾟ:* expanding menu tutorial

hey all! i made a tutorial on the menu you can find on my blog. it’s not my full code, but it covers all of the bases without the design at the end, which is totally up to you!

Modal window by suiomi | Get more goodies

Simple modal window styled after Apple’s OSX.

Download: HTML | CSS Preview

The masonry script by DeSandro is one of the most popular ones of its kind, though many people have trouble understanding how to use it and how to set it up.

This happens because most explanations on the scripts’ pages have a language that those who aren’t familiar with this kind of coding can’t follow properly. More often than not, setting up these codes is much easier than it looks and masonry isn’t an exception.

Things you need:

Masonry script

ImagesLoaded script

I’ll explain how I use mansonry and how I set it up in the simplest way I can but some coding knowledge is required to follow this tutorial more easily.

All In One Page 2 - Littoral by cactusthemes Preview | Code

An fully responsive all in one page made for the Pantone Challenge of the CodingCabin’s Awards!

Cool transitions and a vertical carousel

About, FAQ, Navigation, and Blogroll sections

Note: blogrolls don’t work on side blogs

Customization help provided within the code - please read it all carefully!

Credits

::::: previously kurtcobangs / solodesigns :::::

Hi, it’s Marie. Once again, I’ll re-create a tumblr theme blog. Hopefully for the last time. When I deleted I was getting too many stressful messages that turned into rude/demanding updates. I have a life so, I left here with zero chances of returning. However, there is info that can be seen here on the blog while I am away and working on other things. Although all themes are gone, some will reappear again in time. Instant messaging is open but when the blog launches it will be closed. Between design inspo’s, wip’s, better tagging and more - there is a lot I want to try out and redo.

Big thank you to pohroro for letting me stay on kconet. 

red light [ Theme 107 ] 

created for codingcabins - PANTONE Colour of the Year 2019 Challenge

PREVIEW || DOWNLOAD

Features - —

500px posts - tags, via & source on permalink page

3 additional links & searchbar

header image ( set to cover, will resize to fit screen, please use an HD image if possible! ) header only on index page!

easily editable font size & theme colours 

5 updates in sidebar - updates sections can be toggled on/off as needed - easily editable content for boxes ( please view all options in basic editor )

main title & subtitle in header

sticky sidebar on scroll & fade-up posts on scroll ( AOS - animate on scroll )

DON’T REMOVE CREDIT, a like or reblog would be appreciated! *please make sure to view all available options in the theme editor & preview on your live blog ( some features may not display correctly in the theme editor )

Sagittarius

Here’s a trick of how to highlight the link in your menu based on the page you’re currently locating at. Note: if you have basic knowledge with Javascript and jQuery, this would be easier to understand.

First you would need to install jQuery to your theme. If it’s already in the code, you can skip this part. If not, embed this snippet before </body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Second, add this script AFTER the jQuery snippet:

<script> (function($) { var $menu = $('.your-menu'), // replace to your menu's class name pathname = location.pathname.split('/'), pathname1 = (pathname[1]), pathname2 = (pathname[2]); if ( pathname1 != '' && pathname2 === undefined ) { // for when your link contains one part. e.g. /ask $menu.find('a[href$="/' + pathname1 + '"]').addClass('current'); } else if ( pathname1 != '' && pathname2 != undefined ) { // for when your link contains two parts. e.g. /tagged/ask $menu.find('a[href$="/' + pathname1 + '/' + pathname2 + '"]').addClass('current'); } })(jQuery); </script>

VANILLA VERSION:

Here’s a less complicated script for when your menu link is much simpler. Note: This version only works when your menu links are simple urls like ‘/ask’ or ‘/about’. If your link is something like ‘/tagged/ask’ it only works on the first page, it’s not gonna work on ‘/tagged/ask/page/2’

<script> (function($) { var $menu = $('.your-menu'), // replace to your menu's class name pathname = location.pathname; if ( pathname != '' ) { $menu.find('a[href$="' + pathname + '"]').addClass('current'); } })(jQuery); </script>

IMPORTANT NOTES:

1. If you have the jQuery snippet embeded in <head></head>, you have to wrapped the code with $(document).ready instead. Just like this:

<script> $(document).ready(function() { var $menu = .... }); </script>

2. Make sure you have changed “.your-menu” in the script to your own class name. (e.g. “.menu”, “.navbar”) And don’t forget to create a CSS style for the class “current” first. (Of course you can use your own class name, just remember to change the ones in the script too)

3. This would NOT work if you are using a redirect link. For example, the url you put in your menu is “/mine” but it redirects to the page “/tagged/my-edits”. Since the url of the final location doesn’t match the url you put in the menu, therefore it’s not gonna trigger the action.

SUPPORTS:

All-in-One Theme: Soylent static preview | download

This is my first theme, so I’m sorry if it doesn’t have a lot of customization tools. I’ll try to add more to it when I learn more code. I’m expecting to have a lot more bugs in the theme, so please let me know if you’re having issues.

Features:

drop-down menu

about, explore, and ask pages

show/hide tags and captions

pagination

lightboxes

background color changes the top color

container color changes the post background and post color

Note: If you want to add links add them to the explore page, do not switch a link out with one of the tabs, it will not work. If you do not know how to add links to the explore page look here.

Note: Please don’t make your description too long of it might make your blog look wonky. 1-2 lines look best!

Credits:

Base code: @neonbikethemes Fonts: google fonts Drop-down menu: w3schools Lightboxes: @shythemes

How to make a featured post using Tumblr API

As you probably already know, Tumblr doesn’t have the ability to have featured posts. Just imagine you have an important post that needs to be pinned on your blog that is dynamically updated with no efforts (no need to directly tweak your posts in your HTML editor, just tag the post with “featured” and it will automatically show up). You can see the example on my blog with the title named “latest posts”. In it, you can see four posts that are dynamically added if I tag them with a specific tag. Cool, isn’t? You can see the example here

Thus, I am here sharing my way on how to make it possible using jQuery and Tumblr API (I am sure there will another way to make this happen using vanilla JS, but since I am not good at this, I consider using jQuery instead). Hopefully, it will help you guys