Won’t be around much for awhile because uni has started and I’m very tired and my laptop has been sent to be repaired.

Introducing: Graceful Degradation

maomuthemes:

On my personal blog, I got a question asking how I customized my fourth theme, Lilith, for mobile. I used CSS media queries to set rules according to the screen resolution. See responsive design here.

DIFFICULTY: BEGINNER | INTERMEDIATE | EXPERT

WARNING: This is a long post, and you should be comfortable with CSS before attempting this. I set the difficulty to intermediate because you don’t have to be a professional developer to do this. It is a challenge at first, though.

Read More

maomuthemes:

Theme 004: Lilith by maomuthemes (previously evabadon & maomu). Compatible with Google Chrome, Opera, Mozilla Firefox, Safari, and IE 10/11. 

Live preview + device previews : Code : Theme docs - I. II. III. IV. : Credits

This is my first attempt at UI Design, so this theme works on every modern browser and on multiple devices! Make sure you read through the theme documentation. There’s a lot you can customize, so some questions you have/resources you need should be included there. If you have any other questions or see any glitches, feel free to send me a message. I’ll do my best to help you.

Also, there are three things you can commission me for:

I. Additional sections: I can make extra custom pages to add to this theme for you.

II. Customization: If you’re one of those people who doesn’t like the hassle of customizing themes yourself, you can tell me what you want and I’ll customize it for you.

III. Custom theme: If you like what you see and you want me to code something completely original for you, I can also do that!

*Please note that commissions are not always open, so make sure to check here before asking.

That’s pretty much it. If you like this theme or plan to use it, please show your support and like/reblog it!

Using Tumblr’s Dropdown function to allow users to select post sizes 
Most theme makers I see on Tumblr use Booleans to allow users to select what post size they’d like. However, there’s an easier way. Here’s a tutorial on how to use Tumblr’s Dropdown function to choose post sizes, based off what the default Optica theme does, as well as some words on how to use responsive variables, grids and infinite scroll. 

Using Tumblr’s Dropdown function to allow users to select post sizes 

Most theme makers I see on Tumblr use Booleans to allow users to select what post size they’d like. However, there’s an easier way. Here’s a tutorial on how to use Tumblr’s Dropdown function to choose post sizes, based off what the default Optica theme does, as well as some words on how to use responsive variables, grids and infinite scroll. 

magistramagi:

Would anyone be interested in a tutorial on how to use the Tumblr Select Features to allow for different post sizes? I’d be doing it the same way Optica does.

…first draft is done.

Would anyone be interested in a tutorial on how to use the Tumblr Select Features to allow for different post sizes? I’d be doing it the same way Optica does.

I’m still figuring out a way to include grids but I think I’m onto an idea.

Otherwise I’ll just write it later after I’m done with this online design course (bc I can code and I can code responsive themes, but I can’t design for crap)

?

yeahps:


"Make all visual distinctions as subtle as possible, but still clear and effective."
Tips, tricks, and resources for the basics of good online typography. Does not apply to print. There always exceptions to the advice below. 
GENERAL TIPS
Align your text left. text-align: left; The ragged right hand side tends help you keep your place while reading.
Make your leading 140%. line-height: 140%; This makes it more legible. 
User proper punctuation. Em dashes instead of hyphens. Curly quotes instead of dumb quotes. You can find the codes here.
Look into good fonts. Font packs and best free fonts lists are your friends.
SERIFS VS. SANS SERIFS
Serifs. a.k.a Times New Roman, Georgia. Typically used for headers. Easy to read. Can stand out too much. Work better over 12pt. Most have poorly spaced lettering (which means letters may run together) and serifs tend to make letters blur together. 
Sans Serifs. a.k.a Arial, Helvetica. Typically used for body text. Take up less space. Overused. Visually appealing. Tend to read better small (but blur at a larger size). Most people can read sans serif fonts faster online. 

Read More

yeahps:

"Make all visual distinctions as subtle as possible, but still clear and effective."

Tips, tricks, and resources for the basics of good online typography. Does not apply to print. There always exceptions to the advice below. 

GENERAL TIPS

Align your text left. text-align: left; The ragged right hand side tends help you keep your place while reading.

Make your leading 140%. line-height: 140%; This makes it more legible

User proper punctuation. Em dashes instead of hyphens. Curly quotes instead of dumb quotes. You can find the codes here.

Look into good fonts. Font packs and best free fonts lists are your friends.

SERIFS VS. SANS SERIFS

Serifs. a.k.a Times New Roman, Georgia. Typically used for headers. Easy to read. Can stand out too much. Work better over 12pt. Most have poorly spaced lettering (which means letters may run together) and serifs tend to make letters blur together. 

Sans Serifs. a.k.a Arial, Helvetica. Typically used for body text. Take up less space. Overused. Visually appealing. Tend to read better small (but blur at a larger size). Most people can read sans serif fonts faster online. 

Read More

projects

  • [done] custom nested blockquotes script tutorial
  • alternating img mascots on posts
  • revamp/remake chiu’s homepage theme/page [link]
  • theme for this blog

okay so despite having a drop-down lists feature, nobody uses it for post sizes. so that’s the next project =___=

Colour Blockquotes Tutorial | Difficulty: Easy

Inspired by xkit’s color quotes [link] I decided to make a version for Tumblr blogs using jQuery. There are three slightly different versions, differing on the level of customisability, and thus difficulty.

The point of colours of random colours for nested blockquotes, other than how pretty they are? Visual accessibility. It makes it easier to follow information.

theme [01] change by magistramagi

Features

  • mobile ready theme (layout will automatically change when screen/window size becomes small)
  • go to [Advanced Options] > [Use default mobile theme] and make sure to turn it off
  • 5 optional post sizes (for desktops)
  • [img] background image, sidebar image, custom infinite scroll loading image
  • 42 custom colours and
  • 9 custom nested blockquote colours [inspired by xkit’s color quotes]
  • [on/off] infinite scroll,  lazy load, back to top, custom tooltips, show captions
  • [text] custom symbols for tags


sidebar

  • [on/off] transparent or color background for sidebar
  • [img] sidebar image
  • [text] custom sidebar vertical position (use percentages for best results)
  • [text] 5 custom links + one more if you remove the sidebar credit

please like/reblog if you use it

preview | code