Psympathy @psympathy - Tumblr Blog

yoongihoseok-deactivated2019122

Blanc by cyantists [ preview / code / terms ]

an easy to use icons page with filter functions

filtering via: colour buttons, category buttons, a search bar

features: space for links and some text, 75px x 75px icons

*note!! if you are using my last icons page and want to ‘upgrade’ to this one you can just copy the code for your icons directly into this code, no changes needed and it will work

Please like/reblog this post if using.

#muse page #networks page #downloads page

rnirae

base code. code. preview.

i had some time on my hands so i decided to make a base code! i have no restrictions for the code so feel free to do whatever you want with it! make sure you read the side notes, however. thank you! features:

fixed sidebar

five navigational links

customizable colors

captions/post width options (250/400/500px)

some notes:

you do not have to credit me.

if you use it as a theme, then you need to leave the credits. (:

feel free to use it to make your own themes, i don’t mind if you redistribute it as your own. (:

please like/reblog this post if you use it! also check out my other themes.

theme-coding

Base code

Preview / Pastebin

#base themes #themes

blogdeactivivvvated-deactivated

Here’s a base code for tumblr themes with no CSS, no extra HTML, and no instructions. It’s only the absolute bare minimum and will look terrible unless you add to it, but is a great starting place for any theme. It’s very short and formatted for easy editing.

CODE

Credit is appreciated but unnecessary. Enjoy!

#base themes #themes

bychloethemes

An explanation of positioning

This post is going to explain the differences between the four positioning values: static, relative, absolute and fixed. This is stuff I wish I knew when I started coding, not just absolute means it’s scrolls and fixed means it stays where it is.

Keep reading

#resource

walter-padick

base codes by Saturn Themes - more themes Terms of Use regarding base codes apply

regular layout: pastebin | alt. masonry layout w/ sidebar: pastebin | alt. masonry layout w/ top bar: pastebin | alt.

about the base codes:

there are instructions/tips throughout the codes to guide you

they’re basic and don’t have too complex customizations so you can do whatever you want with them

these base codes use PXU Extended Photosets by Pixel Union, video resize script by @shythemes and Masonry by Desandro.

reminder: using my base codes does not mean you can go and steal code or copy designs from my other themes or work.

full terms of use for base codes here

#base themes #themes

raiidens

Popup Box Tutorial by raiidens

I’ve gotten a couple requests on how I’ve been adding these to both my theme and personal blogs. But now today, I will finally show you how. Some slight knowledge of HTML, CSS and possibly jQuery would be nice but it’s mostly copy and paste so it shouldn’t be too too hard.

Keep reading

#popup #page

phoenixthemes

Tutorial: CSS tabs by phoenixthemes (robbarya)

So I had a few people asking how to work with css tabs as seen in my tags pages 3 and 4. Here I’m gonna show you the basic markup and how to customize it, so you’ll have to have some css/html knowledge to understand it. This is meant to be used as a base, please don’t claim the styling as your own.

Why CSS tabs?

Personally I think they are the perfect way to organize a good amount of content keeping the page clean and simple, especially because it doesn’t require any kind of script.

Preview

STEP 1: HTML

<div class="main"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Tab 1</label> <div class="content"> Tab 1 content </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Tab 2</label> <div class="content"> Tab 2 content </div> </div> </div>

Each tab is wrapped in the <div class=“tab”> and inside it we have the <label> and the <div class=“content”>. The label will be the one you click to see the content.

The checked attribute selects which tab will be open when refreshing the page. It can only be used in ONE tab (usually the first one). If you delete it, no tab will be checked

Note:

This is only two tabs but ,as you can see, you can add as much as you want, always changing the id=“tab-1” for anything else. In my case I increase the number. Note that you have to change the <label for=“tab-1”> aswell.

STEP 2: The CSS

2.1 Here we have the main styling. I always set the label to display:block and to cursor:pointer so you know it’s clickable. You can style it as any other div.

.main { padding:20px; width: 240px; margin: 200px auto; background: #eee; border:1px solid #e2e2e2; } .tab { width:400px; margin: 0 auto; } .tab label { color: #999; letter-spacing: 2px; font-size: 8px; line-height: 14px; font-weight: bold; background-color: #ffffff; width:100px; padding: 5px; text-transform: uppercase; height: 15px; text-align: center; cursor: pointer; display: block; margin-bottom: 5px; } .tab label:hover { background: #333; color:#fff; }

2.2 This part sets the styling of the checked label and hides the default check button.

[type=radio]:checked ~ label { z-index: 2; color: #fff; background: #afd5d5; } .tab [type=radio] { display: none; }

2.3 Here is the content styling. You’ll have to adjust the margins and such. The last part indicates the behaviour of the content when the tab is checked. In this case I increase the index for it to hide the rest of the tabs. You can also change it’s opacity, color, etc

.content { color: #999; background-color: #ffffff; width: 100px; margin-top: 190px; margin-left: 115px; height: 65px; padding: 10px; overflow: scroll; text-align: justify; position: absolute; top:30px; } .content a { color: #999; padding: 3px; font-size: 8px; margin-bottom: 2px; display: block; text-decoration: none; text-transform: uppercase; } .content a:hover { letter-spacing: 2px; border-bottom: solid 2px #666; text-align:center; color: #666; font-weight: bold; padding: 2px; } [type=radio]:checked ~ label ~ .content { z-index: 1; }

Notes:

1. I always use position:absolute for the content so they all have the same position and hide eachother. You can also set them to display:hidden and then to display:block when the tab is checked. You know, just try different things.

2. Some css pseudo classes might not work in older browsers

I don’t know if I forgot something but if I did I will edit this post!

Feel free to ask if there’s something you didn’t understand or if I messed up but please don’t ask me to help you customize this for you.

This tutorial is based on this article you can read to know a little more.

Reblog/Like if you found it useful

verteau

reblogging this old tutorial for everyone that asked. Remember I wont be answering questions about it, sorry.

#tabs #updates tab

enbythemes-moved

page 01: birthmark (preview // code)

a very simple about page with 100px icon, user stats, plenty of room in the about section, as well as a space for social media links.

credits:

tumblr controls from @cyantists

honeybee icon font from @suiomi

style my tooltips from malihu

notes:

I’m still relatively new to coding, so any and all (respectful) feedback would be greatly appreciated.

Please like or reblog if you use.

If you would like to support me directly, you could give me a tip via paypal or buy me a ko-fi.

#about page

winterskim

sleep by ally

features —

standard layout page theme

multimuse / connections page

1 picture & 3 links per muse

dimensions —

image is 60px

width of info box varies

info box is vertical scroll

edit all you like, but DON’T remove the credit

DON’T copy & paste pieces of this code into another

this is NOT a base code, so don’t use it as one

a like/reblog would be great!

preview / 300px, 400px, 500px

#page

glenthemes

Music Page [02]: Melodic Wish by glenthemes

A page to showcase music tracks. This preview features my favorite NieR: Automata soundtracks composed by Keiichi Okabe.

► PREVIEW | CODE | GUIDE | CREDITS

Features:

title block: back-to-blog arrow, headphones icon, title & subtitle

music list: up to 30 songs with automated song duration all music is manually inserted; no flash or external hosts required other songs pause when another starts playing

album display: album cover art, vinyl mini-animation on pageload

artist info: artist, album name, decorative separator, more text

bottom nav bar: left text, right custom links

A detailed guide can be found in the above link; instructions can also be found within the code. Be sure to follow the terms of use and like/reblog if you’re using this page! Please contact me if you have any questions/problems with the coding and I’ll try to help you as much as I can! ♥

#music player #music page

passo-html

theme nebu

preview

código

feito por @arcaicas se usar like, por favor!

#themes

aaronellas

21. osaka / preview; live preview & code

minimalistic network/bias page

features: title, three icon links, description, unlimited filters and boxes

credits:

filters tutorial by @magnusthemes

icons by @herbologies

text icons by feathericons

please like/reblog if using

#networks page #muse page

ghcstfaec

Theme — Wine by extasisthemes Preview/Download

Features:

64x64 avatar image

200px x 100% sidebar image

100x100px icon image

blog title

blog subtitle

nine custom links

500px text posts

option for hide tags

option for show tags

Notes:

Original Images by @lovelyeo.

Neither ask or submit links would show if you don’t allow people to ask you questions or allow people to submit things to you.

Please like or reblog if using. Message me if you found coding bugs aka a mistake caused by my sleepiness.

I don’t claim any of the fonts, scripts and/or tutorials I used unless stated otherwise. See full credits here.

#themes

pillowthemes

Greyson 3.0 (Theme 15):

Simpler, better, and compact. This is Greyson 3.0, still sharing its similarities from Theme 04, the first Greyson Theme.

Static Preview | Code

Rules: - Do not steal snippets or all of my codes. - Do not claim the theme as yours. - Do not remove the credits.

Features: - Pagination - One column theme - 500px post size - 200px sidebar - 64px x 64px sidebar image size - A space for your favorite quote on the sidebar (but you can also put something else here if you want) - Updates segment (status, mailbox, follower count, page views, etc - this is customizable) - Seven (7) links in the top bar (your blog title is your home link) - Linear icons - Hover post for permalinks

Please like or reblog if you’re using the theme!

#themes