Monday, August 22, 2011

Lummoxie Blogger Template

Lummoxie Blogger TemplateThe namesake of the series I am creating, Lummoxie harkens a fresh and new perspective with simplicity, style, and functionality.

Hallmark aspects of the Lummoxie template are it's "liquid" layout, navigation utilizing Blogger's PageList widget, and a post summary option employing Blogger's "jump break," feature for starters. In addition, save for the (one) search box image, Lummoxie is an image-less template; all fonts and colors may be customized via the Template Designer

XML Blogger Template
By Lauren Thompson
Lummoxie Blogger Template
*Notice July/20/12:
→This template has been updated.

→Visit the updated post for the new download

Features

  • 2 column liquid/fluid layout, all sections "widgetized" or "gadget-ready" 
  • 2 column footer, also gadget-ready/widgetized
  • Optional and customizable menu/linkbar with "dynamic" highlighting of current page, utilizing Blogger's new PageList widget feature. Super easy to use and customize, details below.
  • Supports Blogger Dashboard editing tools, easily change fonts and colors in practically all areas of the template via the "Template Designer," within the "Advanced" subcategory.
  • Search box image included, it is stored in my photobucket.com account which allows generous direct linking bandwidth. However, users who have access to an image host are advised to upload it to their own server, as the bandwidth could potentially be exceeded in the future. (Image also included in the zip download for convenience.)
  • Title setup optimized and corrected for better SEO.
  • Wireframe setup for easy gadget/widget managing
  • Embedded comment form below post
  • Functional search box included
  • Fancy fonts a la Google Font API
  • Customized and easy to use "read more" feature using Blogger's "Page Break" feature
  • "Calendar Style" post date

terms*
* The link back to http://www.nymFont.com must not be removed

* Do not impose charges or a fee for these templates

* Do not add links and redistribute

* Modifications allowed so long as the link back is not removed

* Link to my template download postsnot my files to share



Top Navigation / PageList Widget

Page List Widget The Page List Widget has been customized to fit the template and comprises the top navigational links. Page links will be automatically added, and other additional links can be added via the pages section of the Blogger dashboard.

Navigation offers "dynamic highlighting" of the current page, i.e. the current page is "highlighted" automatically.

Post Summary Option

Post Summary
No scripts are necessary in using the read more feature on this template, as it utilizes the in-place "jump break" feature in Blogger. Simply add a page break when and if you would like a post to be summarized.

Setting Up Calendar-Style Post Date

Calendar-Style Post DateThe correct Date Header format must be selected in order for the post date to display correctly. From the Dashboard > Settings > then Language and Formatting. From the "Date Header Format" select "DD Month YYYY" style, (two digit day, name of month, four digit year with no commas) and then select "Save Settings." Be sure that you select the format with no commas, or else it will not display correctly.

Posts published on the same day will display a blank post date (just an empty grey box) because of the calendar style date set-up. At present there is no way around this (that I know of), so remember to select a different date with the "Post Options," if publishing multiple posts on the same day. I have to do this myself with this blog actually.

Additional Details

At this time I am having difficulties with Bloggers post sharing buttons so they are turned off in the template, and it is advised that users have them "turned off" as well. I apologize for this, and I am working on it.

Please do feel free to share your thoughts on this template!

Saturday, August 20, 2011

Haute Press Blogger Template

Haute Press Blogger TemplateIt has been a while since I published a new free Blogger template, so without further ado, I present Haute Press, the first in a series of templates I have called my Lummoxie themes.

Some extra features of this template include the top menu which utilizes Blogger's new PageList widget, and the post summary feature utilizing Blogger's page-break feature.Another bonus is that this template is "liquid," or "fluid," meaning that it is not fixed-width, it will fit to virtually all screen resolutions.

XML Blogger Template
By Lauren Thompson
Haute Press Blogger Template
Live Demo | Download Zip

*Notice February/21/12:

→Download not available as the template has been updated.

→Visit the updated post to view demos and download


Features

  • 2 column liquid/fluid layout, all sections "widgetized" or "gadget-ready" 
  • 2 column footer, also gadget-ready/widgetized
  • Optional and customizable menu/linkbar with "dynamic" highlighting of current page, utilizing Blogger's new PageList widget feature. Super easy to use and customize, details below.
  • Supports Blogger Dashboard editing tools, easily change fonts and colors in practically all areas of the template via the "Template Designer," within the "Advanced" subcategory.
  • Images included, you do not need to upload the images to your own server, they are stored in my photobucket.com account which allows generous direct linking bandwidth. However, users who have access to an image host are advised to upload them to their own server, as the bandwidth could potentially be exceeded in the future. (Images are now also included in the zip download for convenience.)
  • Title setup optimized and corrected for better SEO.
  • Wireframe setup for easy gadget/widget managing
  • Embedded comment form below post
  • Functional search box included
  • Fancy fonts a la Google Font API
  • Customized and easy to use "read more" feature using Blogger's "Page Break" feature
  • "Calendar Style" post date

terms*
* The link back to http://www.nymFont.com must not be removed

* Do not impose charges or a fee for these templates

* Do not add links and redistribute

* Modifications allowed so long as the link back is not removed

* Link to my template download postsnot my files to share


Top Linkbar / PageList Widget

Page List Widget The Page List Widget has been customized to fit the template. Page links will be automatically added, and other additional links can be added via the pages section of the Blogger dashboard.

This menu features "dynamic highlighting" of the current page. If a menu link is the current page, that link in the menu is "highlighted" automatically. As in the demo page, when at the index or home page, the "Home" link is highlighted. Click on any link in the demonstration menu to see the "dynamic highlighting" in action.

This section is also optional and may be removed.

Post Summaries Feature

Page List WidgetNo scripts are necessary in using the read more feature on this template, as it utilizes the in-place "post-break" feature in Blogger. Simply add a page break when and if you would like a post to be summarized.

Setting Up Calendar-Style Post Date

date Have no fear, I promise setting up the post date is easy-peasy-lemon-squeezy. Go to Dashboard > Settings > then Language and Formatting. From the "Date Header Format" select "DD Month YYYY" style, (two digit day, name of month, four digit year with no commas) and then select "Save Settings." Be sure that you select the format with no commas, or else it will not display correctly.

Posts published on the same day will display a blank post date (just an empty grey box) because of the calendar style date set-up. At present there is no way around this (that I know of), so remember to select a different date with the "Post Options," if publishing multiple posts on the same day. I have to do this myself with this blog actually.

Additional Details

The only images in the template are the background image and the searchbox image. If you do have access to your own image host, you might want to host the images at your own server. Replace image URL's in the code with the corresponding URL's at your server. Images are also now included in the zip download for convenience. Feel free to contact me or leave a comment if you need assistance replacing the images.

At this time I am having difficulties with Bloggers post sharing buttons so they are turned off in the template, and it is advised that users have them "turned off" as well. I apologize for this, and I am working on it.

Please do feel free to share your thoughts on this template in a comment! If you need any assistance with this template, feel free to leave a comment below. I hope you like it!

Thursday, August 11, 2011

Character & Caricature Vector Illustration

Character & Caricature Vector IllustrationMy start in vector illustration began only last year, but it has become one of my favorite new art forms and hobbies. I have particularly enjoyed doing vector cartoon caricatures of people, in what has been called "chibi" formats. I have done illustrations in this style as caricatures of actual people (as in my Mia Zoe illustration), fan arts of existing characters (as in Alice from "Alice in Wonderland,"), and most enjoyably, of original characters created by myself such as my illustrations of my first 'OC,' Laila.

I shared some of my chibi vectors in a post last year, but I had yet to share these illustrations in my blog (except for "Painting the Roses Red," which was featured previously) so I am glad to be sharing these character and caricature illustrations now. Some are done in all vector format  (no raster or Photoshop styling) while others have used both vector and raster elements, specific details are given for each illustration. Click to view full size images.

Painting the Roses Red Vector Illustration
Painting the Roses Red © Lauren Thompson
This vector remains my most popular illustration (as far as favorites go) on deviantART, which is why I am showing it here again. This was my very first attempt at such an illustration. It containins both vector and raster elements. I have no idea how she managed to keep her paintbrush so clean after painting all of those roses.

Mia Zoe Vector Illustration
Mia Zoe © Lauren Thompson
This is an all vector illustration I created as a caricature of my 'reallife' friend, the talented developer and designer Miss Mia Zoe.

Laila Does it Again Vector Illustration
Laila Does it Again © Lauren Thompson
Here is my own personal favorite of my illustrations of my original character, Laila. Here she is emulating Britney Spears in her Circus album art, hence the title of the illustration being a play on the title of Britney's song, "Oops! I Did It Again." This is an all vector illustration, which took me several overs over a course of several days to complete. Some more illustrations of Laila can be seen in this post.

Summertime Laila Vector Illustration
Summertime Laila © Lauren Thompson
This illustration is an all vector re-work and new rendition of Laila in her signature pose from my very first illustration of her. The typeface used for the titling is called Voivode and is courtesy of the font and type master Ray Larabie of the foundry Typodermic. View the original rendition and first illustration of Laila in this post. Additional illustrations of Laila can be seen in this post as well.

I would love to hear your feedback on my illustrations, so feel free to share your thoughts on them with a comment. I have enjoyed creating them and plan to create more in the future as well. View more of my illustrations and other artwork on deviantART.

Sunday, August 7, 2011

5 Favorite Blogger Resources

5 Favorite Blogger Resources I have a few favorites when it comes to the sites and tools I use to assist me in my Blogger-related pursuits. They might also prove useful to my fellow Blogger enthusiasts, so I have compiled a list of five such favorites with them in mind. Without further ado, here are 5 favorite Blogger resources:

LeBlogger
LeBlogger
LeBlogger is written in French, however, I find I am able to understand his articles fairly well with web translation. He (Soufiane, the author) writes the best and correct way to implement something on Blogger, not just how to. He really seems to understand the Blogger platform quite well. I heart LeBlogger.

Blogger Widgets
Blogger Widgets
Blogger Widgets, or Blogger Plugins, is a great resource of reliable Blogger information. The tutorials on using a custom domain on Blogger and name.com have been most helpful to myself personally, invaluable really.

Blogger Tips and Blogger Templates, Abu Farhan
Blogger Tips and Blogger Templates, Abu Farhan
Abu Farhan's blog is a reputable and quality resource for Blogger tutorials and fantastic scripts and other elements for Blogger. Recently I have relied on a modified version of his script to create my Site Archive & Table of Contents.

Spice Up Your Blog
Spice Up Your Blog
Spice Up Your Blog offers top notch Blogger tutorials, templates and more. Paul (the webmaster) has been very helpful to me with his knowledge and tips on things like SEO and PageRank, which I am eternally grateful and would otherwise be clueless.

StarSunflower Studio
StarSunflower Studio
StarSunflower Studio is cherished and most helpful to those of us of the 'artsy' persuasion on Blogger. Here you will find all sorts of goodies and tips to beautify your Blogger, and of course, full templates too. And StarSunflower Studio is not limited to just Blogger goodies, virtually all digital niches are covered, you must stop and see for yourself!

Have these sites been helpful to you? Do you know of any other really handy sites or Blogger resources? Feel free to tell in a comment below.

Saturday, July 30, 2011

Twitter Status Display Widget Blogger Tutorial

Twitter Status Display with Blogger How-ToI receive many inquires on how I created my 'latest tweet' display on this blog. To pose an answer to those inquiries I have not only written a step by step tutorial on creating a custom Twitter status display widget to display your latest tweet in Blogger, but I have created several free Twitter status display images to go along with the step by step tutorial

In all there are seven Twitter status display image styles to choose from, and that's a good place to start: choosing a Twitter status display. Examples of each Twitter status display image and it's associated styling are shown below.


Step 1

Choose and download the background image associated with the Twitter status display you would like to implement, click the link reading, "Download Image," and upload it to your image host. (Picasa, photobucket, and so on).




» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #77595c;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}

a#twitter-link {
float : right;
padding : 0 25px 0 0;
float : right!important;
text-align : right!important;
padding : 0 25px;
}

#twitter_div a, #twitter_div a:visited {
color : #ea3c6f;
}

#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #77595c !important ;
}



» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #624e5b;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #ff5f9d;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #624e5b !important ;
}



» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #6c5e57;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #4d9b96;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #6c5e57 !important ;
}


» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #6c5e57;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #4d9b96;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #6c5e57 !important ;
}


» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #2f2f2f;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00c5dd;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #2f2f2f !important ;
}



» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #000000;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00aeef;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #000000 !important ;
}



» Download Image


#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(YOUR_IMAGE_URL);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #3c3c3c;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #00b196;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #3c3c3c !important ;
}



Step 2

Copy the CSS in the grey box below the style of your choice, and replace YOUR_IMAGE_URL with (drumroll) the URL to the your uploaded background image, and paste this CSS into your template above,
]]></b:skin>

Step 3

Next, replace the pink text, TWITTER_ID with your twitter ID in the Twitter timeline script shown below, and paste this at the bottom of your template, above the tag,
</body>

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/TWITTER_ID.json?callback=twitterCallback2& amp;count=1' type='text/javascript'/>

*Note there is a space between the & symbol and the text that follows. You will need to delete this space upon pasting into your template or else it will not work.

Step 4

Before saving your changes, preview your template. If your template looks the same/normal, then click Save.

Step 5

Now for the fun part, the Twitter display itself! Where you would like your Twitter status display to appear, select "Add a New Gadget," and choose an "HTML/JavaScript" gadget from Layout. In the "Content" field of the new gadget, copy and paste the code shown below. Be sure to replace the pink text TWITTER_ID with of course, your actual Twitter ID. Again, with no @ symbol, just your user-name. Save your new gadget, and view your blog. Your twitter status update or updates should now appear on your blog where you have added the new gadget.

<div id='twitter_div'><ul id='twitter_update_list'></ul><a href='http://twitter.com/TWITTER_ID' id='twitter-link' title='follow me!'>follow me!</a></div>

If you use this tutorial or one of these Twitter status display badges on your blog, please comment below and let me know how it has worked for you. Feel free to ask if you need any assistance with this as well.

Wednesday, July 13, 2011

Twitter Sweet - 26 Free Twitter Icons

Twitter Sweet - 26 Free Twitter IconsI really wanted to create a new set of free twitter icons since my last set is no longer available. So I created the 26 free twitter icons in the Twitter Sweet set. These icons are free for use in personal as well as commercial projects. Attribution link not required, however if you were planning on re-distributing these icons you must refer downloads to this page and not directly to the download itself.

The set includes my own rendition of the Twitter bird in two different color schemes with three sizes each, a Twitter "follow me," Twitter "tweet this," and blank button in light and dark shades, four different Twitter "T" logo icons with three sizes each, and a Twitter tweet stream/status display icon in a light and a dark shade. The icons are in PNG format, transparent when necessary, and are in a zip file.

Twitter Sweet



Twitter Sweet - 26 Free Twitter Icons

Download Icon Set

I'd like to re-iterate that these icons are free to use commercially and personally, with no attribution link required. I did draw the twitter bird myself, so please do not claim these icons as your solely own art, and please do not redistribute these icons yourself, but refer downloads to this page please. Thanks!

I appreciate your thoughts and feedback on these icons, so please do leave yours in a comment!

Sunday, July 3, 2011

35 Inspiring Beige Colored Web Designs

35 Inspiring Beige & Creme Colored Web DesignsFrom blond to banana, web designs in beige and creme live up to conjured definitions making a sweet and soft sight on the eyes. This is a color scheme that gets quite a fair amount of use in the web designs of the present, and doesn't seem a fleeting trend.

I don't predict the future; however, I do see recurring themes and styles in artwork from decades past. Perhaps these lovely websites will exemplify a time period, or perhaps they'll be seen timeless. Either way, they are exemplary examples in yellow beige.

WellMedicated
WellMedicated

Web is love
Web is Love

W + K Studio
W + K Studio

Visual Republic
Visual Republic

Vector Stories
Vector Stories

toggle
toggle

toggle
toggle

The Waiting Room
The Waiting Room

The Unbearable Lightness of Being Taylor Negron
The Unbearable Lightness of Being Taylor Negron

StillPointe Llama Sanctuary
StillPointe Llama Sanctuary

Souliss
Souliss

Social Snack
Social Snack

Railroad Revival Tour
Railroad Revival Tour

Pixelbleed
Pixelbleed

Peter Granfors
Peter Granfors<

Osmond Interactive
Osmond Interactive

Nordic Ruby Conference
Nordic Ruby Conference

MCQ
MCQ

Matt Hamm
Matt Hamm

La Cavalerie
La Cavalerie

Ken Mann's Transformology
Ken Mann's Transformology

JUNECLOUD
JUNECLOUD

Web is beautiful
Web is beautiful

intensify.org
intensify.org

InfinVision
InfinVision

I am Docto
I am Docto

Hunters Wines
Hunters Wines

Frish Design Studio
Frish Design Studio

Exhibit/Poster
Exhibit/Poster

Et toque !
Et toque !

DAMNGOOD digital ateliers
DAMNGOOD digital ateliers

Blind Renaissance Inc.
Blind Renaissance Inc.

Boop Baby
Boop Baby

Bernat Fortet
Bernat Fortet

B3 Studios
B3 Studios


That wraps up the 35 inspiring beige or 'creme,' colored web designs. I hope that you enjoyed them as much as I have.