gonzolicious

[gonzolicious]

I ❤ Heidi MacDonald (@Comixace)

Gonzolicious is an excellent new premium theme for Tumblr by @gonzodesign -- http://t.co/S9vp716uZe

— Heidi MacDonald (@Comixace)

March 2, 2015

[gonzolicious]

Inserting a 'full-width' image into a text post

If you're writing a text post and you want to insert an image, you'll probably will use the 'upload image' button in the text editor? The problem with uploading an image via the text editor, is that Tumblr scales your image down to a 'standard' width of 500px!

But wait .. there is a way to insert full-width images into your text posts! Choose an appropriate image, and upload it into Tumblr's static file upload or onto your FTP-server.

Then insert this piece of code into your post <p><img src="URL of your picture (full path)" alt="image" /></p>, make sure this line of text has a paragraph wrapped around it, browsers automatically add some space (margin) before and after each <p></p> element.

img.: 1920x600 px

You can use this method to upload any .JPG, .PNG or .GIF you like, but make sure the width of this image is >800px! If your image is smaller, your image will get scaled to the full width of it's container (the width of the post area), which can cause blurred photo's!

[gonzolicious]

.. have been making some 'promo' pictures for my premium Tumblr theme, gonzolicious, which you can buy here: Buy gonzolicious

[gonzolicious]

.. survived the 'Ish Disco Mode', yay! Using Brad Frost's Viewport Resizer Ish for a responsive fatique test. There are several options for you to use this useful tool, I always use the 'Disco Mode' to check if my design breaks somewhere.

[gonzolicious]

"Orange is red brought nearer to humanity by yellow."

Wassily Kandinsky

[gonzolicious]

Set your own breakpoint for Mobile Navigation

One of the cool features (imho) of this Theme is that you can set your Breakpoint (px/em) for the Mobile Navigation in the Customization Panel!

You can now set your breakpoint based on the amount of navigation menu items, so the responsive design of your main navigation menu will not break when your viewport gets smaller!

Personally, I'm not a big fan of setting breakpoints based on existing device resolutions because a) there are way too many devices out there already and b) new devices with different screen resolutions are getting introduced almost daily.

To be more bulletproof, or future-friendly as you wish, breakpoints should be based on the design and content, without any concern for devices.

[gonzolicious]

.. oh noooo, forgot Tumblr has a thingie with animated GIF's, make sure it is no larger than 1MB and no more than 540 pixels wide! #{CurrentStatus}

Photo Troubleshooting

[gonzolicious]

Inserting HTML codes

You can switch to 'Edit HTML Source' within the text editor, this way you can insert some standard HTML codes but also one or two pre-fab CSS class names I created in the stylesheet.

You may use some HTML tags and attribute when writing your post or page, below you see some of the examples:

<a href="#"></a> /* simple link */ <code>Q</code> /* show codes */ <pre></pre> /* show more codes */ <p></p> /* Paragraph */ <br /> /* Linebreak */ .. etc., etc.

But there are also some goodies hidden in the jar, yay! Let's say you want to link to an internal/external URL, but you wanna do it with a fancy button .., okay, done:

<p> <a class="linkbutton" href="YourURL">Button Text</a> </p>

The magic starts when you insert class="linkbutton" to a normal link when you click the 'Insert/Edit Link' menu button in your text editor.

The HTML <p> element defines the start of a paragraph, the closing </p> element will assure you the button will be the only element in this paragraph. The example below is NOT using the <p></p> HTML elements, hence the position .. right after the text!

Example: Online Portfolio

Extra styles

Also included are some HTML elements you can use to spice up the typography of your theme, you can use these throughout your posts and pages.

<blockquote>Q</blockquote> /* style quote */ <h1></h1> /* Heading H1 - Main Title */ <h2></h2> /* Heading H2 - Paragraph Title */ <h3></h3> /* Heading H3 - Subparagraph Title */ <small></small> /* font-size: 12px */ <big></big> /* font-size: 18px */  /* Superscript */  /* Subscript */

Heading H1

Heading H2

Heading H3

Knock yaself OUT!

Superscript

Subscript

[gonzolicious]

Pick Your Custom Webfont

Readability is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content. It is the intended result of the complete process of presentation of textual material in order to communicate meaning as unambiguously as possible.

Adding a custom font to your Tumblr theme

It is understandable that, for one reason or another, your project needs a font that is not available by default within this theme – whether it's for branding reasons, or your own aesthetic choices.

Tumblr's Websafe Fontpicker

Tumblr provides a set of web-safe fonts that users can select from. I've included special meta font tags in this theme, so you can easily change fonts using your Customize page. You can choose a web-safe font for your body text as well as your heading tags (h1, h2, h3).

Import Google Webfonts

You can also import Google Web Fonts. There are a few steps, but it will let you override all the fonts. For my example, I will use the font Open Sans (To use a Google font, first find the font you wish to use from their font library, click the ‘Quick-use’ button, and copy the code).

In your Customize page, you can add some custom CSS styles, by clicking the 'Advanced options' button at the bottom of the main menu. In the Advanced Option menu you can see the section 'ADD CUSTOM CSS' where you can copy/paste your custom CSS styles

@import url(http://fonts.googleapis.com/css?family=Open+Sans); /* CHANGE ONLY BODY TEXT FONT */ body { font-family: 'Open Sans', sans-serif; } /* CHANGE ONLY FONT H1, H2, H3 HEADING TAGS */ h1,h2,h3 { font-family: 'Open Sans', sans-serif; } /* CHANGE ONLY FONT HEADER TITLE */ #title h1, #title h1 a { font-family: 'Open Sans', sans-serif; } /* CHANGE ALL FONTS IN THEME */ * { font-family: 'Open Sans', sans-serif; }

Typekit

Typekit is a great service that lets you choose one of their many neat fonts and apply them to your blog or website. Their trial account type lets you use their service forever, but limits how many fonts are available to you and how many websites you can use them with. They have great documentation and make the process super easy.

Changing Font-size of the Title

The font-size of the title (the Blogname) can be adjusted as well, it all depends on the amount of characters that your Blogname will have. I've set up an default font-size best for 12-15 characters.

If you have more characters you might want to change the default font-size .. place this piece of code in the section 'ADD CUSTOM CSS' and change the font-size to what 'fits' best!

#title h1, #title h1 a { font-size: 1.5em; }

[gonzolicious]

Iconlicious, a new icon font!

I've baked a new icon font using Icomoon.io for this Theme. You can use these icons throughout this theme as well, by inserting some HTML code in your post or page (press the button in the top-right in the text editor to edit HTML source).

<span aria-hidden="true" class="icon-twitter"></span> =>

Below you see ALL icons used in this theme and the specific class name for each one of them to use in the HTML code to insert icons in your text

Font Name: iconlicious (Glyphs: 59)

icon-youtube

icon-behance

icon-github

icon-instagram

icon-quote

icon-soundcloud

icon-tag

icon-about

icon-mail

icon-export

icon-heart

icon-star

icon-thumbsup

icon-comment

icon-search

icon-link

icon-flag

icon-cog

icon-megaphone

icon-music

icon-graduation

icon-book

icon-eye

icon-clock

icon-calendar

icon-bolt

icon-briefcase

icon-rocket

icon-cone

icon-screen

icon-rss

icon-close

icon-retweet

icon-menu

icon-archive

icon-arrow-left

icon-arrow-down

icon-arrow-up

icon-arrow-right

icon-ellipsis

icon-dots

icon-flickr

icon-vimeo

icon-tweet

icon-twitter

icon-facebook

icon-plus-it

icon-googleplus

icon-pin-it

icon-pinterest

icon-tumblr

icon-linkit

icon-linkedin

icon-dribbble

icon-lastfm

icon-rdio

icon-spotify

icon-dropbox

icon-skype

[gonzolicious]

Mystery surrounds the identity of production combo Claptone. Their first EP “She Loves You” was a mix of sharply floor focused tech-house, deep house and disco blends. Here is the follow-up: CREAM… not only for lovers of 90ies Rapmusic.

[gonzolicious]

Don't find customers for your products, find products for your customers.

Seth Godin

[gonzolicious]

Blockquote within a Post

Testing a 'standard' blockquote on a text post, you can do this by making a text selection first and then click the 'Block Quote' button in the text editor:

Nizzle cool phat break yo neck, yall nisl. Away quizzle arcu. Gizzle owned, ipsizzle malesuada malesuada scelerisque, nulla yo euismod felis, izzle luctizzle metus nulla izzle break it down.

Et voila ..!

[gonzolicious]

Inserting Code with <code> and <pre>

You can now also insert code into posts when using this Theme, wrap your code in <code></code> brackets (using the <html> button in your text editor).

But if you have a bigger code snippet, than you can wrap this into <pre></pre> brackets, like this:

pre, tt { font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; border: solid 1px #d0cdc7; margin: -8px 0 24px 0; padding: 32px 10px 10px; background: #e3e2e1; overflow: auto; color: #06F; }

This way you can use this Theme as a Web Development Blog Theme as well .. yay!

[gonzolicious]

Hey Gonz, did you also styled the questions and answers, just in case someone wants to ask you something?

Yoh Gonz, .. what do you think? Also the Q&A section of this Tumblr Theme is totally styled for your pleasure! I even took the liberty to show the avatars of both the ‘asker’ and the person that answeres (usually the ‘owner’).

Hope you like it? Cheerio ol’ chap!

[gonzolicious]

Pretty pleased to inform you the new gonzolicious Tumblr Theme now also has the possibility to upload a header image, or to just choose a header background color .. you can really personalize the crap out of this theme!

[gonzolicious]

If you ever developed Tumblr Themes you’ll know {PhotoSet} is a pain in the butt, especially when you want to make everything responsive! (because by default Tumblr wraps the {Photoset} into an iFrame when on mobile .. ehr?)

Photoset Grid is a free jQuery Plugin For Flexible Tumblr Photoset Grid Layout and very useful when your users want to upload several different dimensions of photos. If clicked a photo will open in the same window, without any (lightbox) effects what so ever.

By default the 1st row has 2 images, 2nd row has 3 images, 3rd row has 3 images, and 4th row has 1 image .. etc. But you can change the amount of images per row by dragging and dropping your images in the grid shown in the text editor (where you can upload your images).

Credits for the jQuery Plugin, even after a small tweak from me, goes entirely to the cool guys at Style Hatch CO.