Monday, February 27, 2012

The New "Nymphont Style," Blogger Template

The New Nymphont Style Blogger TemplateMaking yet another stride in my goal to modernize of all of my free Blogger template designs and retrofit them with threaded comments, the new "Nymphont Style," template is up-to-date and ready for your blogging pleasure. I do hope the updates are pleasing to those stylish bloggers' already sporting a version of the template, and to those who might like to as well.

Modernization of the code and a little streamlining to the aesthetic make for the more inconspicuous changes in the new template, while major renovations to speak of include the threaded comments, which have been enabled, new-line wrapping capabilities in the horizontal LinkList and PageList widgets, creating the design and giving style to Blogger's Jump-break ("read-more," or post-summary links), and also the ability to add Blogger's share buttons to the post-footer. Yay!

« Enabled Blogger's Threaded Comments
Enabled Blogger's Threaded CommentsA sample comment and threaded-reply from the demonstration blog is shown in the above screen-capture.

Since their debut, share buttons have been the most requested template feature I have received by far, and Blogger's threaded comments have recently become the second most requested feature I have received. I am stoked to get both of these tasks accomplished for those that asked, whom, I would like to add, have been beyond patient! The new "Nymphont Style," template, and all of my planned template-updating would be impossible if it were not for your feedback, suggestions, and kindness. Thanks so much Blogger enthusiasts!

« Restructured & Redesigned Post-Footer
Restructured & Redesigned Post-FooterThe pink text given the thin pink border shown in the image above depicts the default style for a Jump-Break (read more/post summary link) in the new template. Also visible in the above image, Blogger's post sharing buttons in the new "Nymphont Style" template's post-footer.

To accommodate the newly implemented Blogger share buttons and Jump-Break (Blogger's read more/post-summary link), the post-footer underwent a little restructuring. Akin to all other areas of the template, individual color options for the border and text color are provided for the Jump-Break link in the Template Designer's "Advanced," editor.

« Horizontal Nav/PageList New-Line Wrapping
New-Line WrappingThe horizontal navigation bar utilizes either a LinkList or a PageList widget to function, and accommodates more items (the links) than the previous version. Items that are unable to fit within the first line will handsomely wrap onto and become a corresponding new-line, as the links do in the image example shown above. The new-line wrapping permits the LinkList widget or PageList widget used to accommodate lists containing only a few items or links, to those containing many.

Another improvement in the new "Nymphont Style," template has been made to the sidebar's "blog sharing icons," which are "hard-coded," into the template. Now even easier to modify, remove, or hide, these icons are located in the template code between starting caption:
<!-- NT Share Icons START -->
and ending caption:
<!-- NT Share Icons END -->
in the template code. Just below this in the template, you will also find the code for the search form.

« Blog Sharing Icons & Search Feature
Blog Sharing Icons & Search Feature
Working immediately requiring no effort on the user to implement, the sidebar boasts social network icons for which to share your blog, along with a blog search utility.

To remove the sidebar's blog sharing icons, beginning with the "starting" caption, and ending after the "ending," caption, select the text, delete it (cut it), and save the template. In their absence, the search-box will then handsomely align to the center of the column. Additionally, the sidebar icons can be "hidden" by adding:
.share {display:none;}
to the template CSS, just above the following line:

In the same manner the sidebar sharing icons can be removed or hidden, the search-box can also be removed by deleting it from the template code directly, or adding this line:
#searchbox {display:none;}
to the template CSS, above the following line:

« Bold & Italic Settings for Fonts and Text
Bold & Italic Settings for Fonts and Text
Font and text style definitions added to the "Advanced," editing options within the Template Designer allow for a much more pleasing visual to text.

Another seemingly less-conspicuous yet substantial improvement in new "Nymphont Style," template, has been the addition of Bold and Italic font definitions to the "Advanced," editor of the Template Designer. Seemingly would be the emphatic word in there, as these new definitions allow the user to set a specific font-face and style to italicized text and bold text. This means, any time the user selects texts within a post to appear bold or italic, it will be styled as per their definitions set within Template Designer's "Advanced," editor.

Simply styling bold and italicized text the right fashion can have an incredible impact on the blog's typography, substantially improving it's presense and readability.

The New "Nymphont Style"
Blogger Template

View Demo | ↓ Download Template

The New Nymphont Style Blogger Template

Template Basic Features

  • 2 column fixed width layout, the second column allowing optional narrow-third column, all sections "widgetized" or "gadget-ready"
  • 3 column footer, also "widgetized"
  • Horizontal navigation utilizing either the PageList widget or a LinkList widget
  • Template Designer, "Advanced," editing enabled encompassing the font and color selections for most if not all areas of the layout.
  • Working immediatly, the images are included and I will continue to maintian them, however, users are advised to download the images, upload them to their own server, and then replace the image links with their own as the bandwidth could potentially be exceeded in the future. Images can be downloaded from the Nymphont Style TinyPic folder. I have written a post and created a page with specific instructions on how to replace the images in your template on the demonstration blog.
  • Title setup optimized and corrected for better SEO.
  • Embedded comment form below post, with threaded comments enabled to boot :D
  • Functioning social network icons in the top right sidebar. Your blog's data is reflected once uploaded, so they do not require editing. These allow visitors to your blog to easily submit, share, and save your blog.
  • Functioning search form for searching the blog contents.
  • Wire-frame setup for easy wigetizing and adding, removing and changing gadgets
  • Equipped the horizontal navigation bar with new-line wrapping, allowing for multiple lines of links / more links / longer link lists
  • Blogger Jump Break / expandable post / post summary links styled and customized.

terms of use*
* The link back to 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

* Do not link directly to my files, but to my template posts to share

Special thanks to my kind visitor MamaMona who commented with her interest in Nymphont Style hence helping it come to fruition. Thanks again to all of the sweet Blogger enthusiasts using my templates and sharing their thoughts on them. Stay tuned my friends, another updated template will be coming this way very soon. ♥

Tuesday, February 21, 2012

Updated HautePress Blogger Templates!

Updated HautePress Blogger Templates!Hot off the presses, new and improved HautePress templates are available. That's right, templates, plural. HautePress now comes in a 'sidebar right/main content left' orientation as well as the reverse.

« Threaded Comments Enabled

Threaded Comments Enabled
In what might be the biggest and the best of the improvements to HautePress, is the enabling of Blogger's threaded comment system. An example comment and comment reply shown in the image above.

« New-line Wrapping in PageList Widget

PageList new-line wrapping demonstration
The preceeding screencapture illustrates how I have designed and coded the PageList widget to handle new-line wrapping. New-line wrapping will now neatly wrap additional line items in the PageList widget. In the earlier version of HautePress, new-lines would overlap, limiting the number of links to what could fit the width of given a browser.

**Important Note Regarding PageList Widget:

To rearrange order of items in the PageList widget, use the widget-edit icon on the actual live blog, do not use the Pages tab in the dashboard.

How to specifically: View your blog, and click the wrench icon located to the bottom right of the PageList widget to access items for reordering and rearranging. (Use the Pages tab as normal for the initial adding of pages or links, and editing of pages.)

« Post Sharing Buttons

Post Share Buttons Added
Offical Twitter, StumbleUpon, Facebook, and G+ sharing buttons now in place. These buttons are located between <!-- Social Share Buttons Start --> and <!-- Social Share Buttons End --> of the 'widgets expanded' template code should you like to modify them.

« Additional Updates of Note:

  • Replaced the previous image-dependent search feature with a new HTML and CSS only search feature, with Template Designer color options
  • Fixed the header image settings for the Header widget. Adding a header image using the Header widget on the layouts tab is now much more efficient. Options for placing an image behind the title and description, and for using an image instead of the title and description are working, and the option to have description display after the image only requires one additional edit to the template code in order to display correctly, in the case that any editing is necessary at all.
  • Organized and added new options to the Template editor for customizing fonts and colors
  • Streamlined design and coding throughout along with subtle changes to (border sizes/colors and what not)
  • Two new background image options available. (Did anyone notice the background difference?) To view the new backgrounds as well as the original visit the HautePress Photobucket album.

« Basic Template Features:

  • "Responsive"/Fluid width, two columns, in either sidebar left/content right or sidebar right/content left orientations with a two column footer, all sections "widgetized" or "gadget-ready"
  • Dynamic linkbar menu and PageList widget
  • Supports Template Designer, "Advanced," font and color editing tools.
  • Working immediately: background image included; however, users are advised to save and upload the image to their own server, as the bandwidth could potentially be exceeded in the future. Images can be downloaded or directly linked to from the HautePress Photobucket album.
  • Title setup optimized and corrected for better SEO.*
  • Wireframe setup for easy gadget/widget managing
  • Threaded comments enabled with embedded comment form below post
  • Functional image-less search box included
  • Fancy fonts a la Google Font API
  • Customized and easy to use "read more" feature using Blogger's "Jump Break" feature
  • "Calendar Style" post date*

Calendar Style Post Date*Format Date Header: 

From Settings, select "Language and Formatting." For the "Date Header Format" choose "DD Month YYYY" style, (two digit day, name of month, four digit year with no commas) and then select "Save Settings." Be sure the format chosen has 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.

HautePress Version 2-1

Sidebar Left/Content Right Orientation
View Demo | Download Template
HautePress Version 2-1: Sidebar left/Content Right Orientation

HautePress Version 2-2

Sidebar Right/Content Left Orientation
View Demo | Download Template
HautePress Version 2-2: Content left/Sidebar Right Orientation

terms of use*
* The link back to 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

* Do not link directly to my files, but to my template posts to share

I hope you like the new and improved HautePress. Feel free to leave a comment with your thoughts below, or if you need any assistance. More templates updates with threaded comments enabled coming soon, so stay tuned! ♥

Saturday, February 18, 2012

Proggin' on Blogger!

Proggin' on Blogger! In light of the new threaded comment system and other recent improvements made to the Blogger platform, I have been busy familiarizing myself with the new template code. My existing free Blogger template creations will soon be updated and retrofitted with the new comment system. Several new templates will also make their debut here shortly.

I've been steady Blogger proggin' over the past few weeks. In addition to the template updates, I've been quite busy working on GlitterBurned and the GlitterBurned Blog. GlitterBurned is a showcase gallery of Blogger powered blogs. Gallery news, updates, and articles are shared on the GlitterBurned blog.

Fluid / responsive width content slider on the GlitterBurned Blog
Fluid / responsive width content slider on the GlitterBurned Blog.

One thing I am happy with, is the featured content slider I shimmied-up for the GlitterBurned Blog. I created a fluid width slider with on-hover text and clickable-links using CSS and MooTools. I believe it to be relatively cross-browser with the small exception that in IE there is no on-hover text, but linked contents are still clickable.

Pixel-Vixen - Design Portfolio of Lauren Thompson
Pixel-Vixen - designs by Lauren Thompson. Hosted on Blogger :)

Also... I have unveiled and added the actual blog aspect to my Blogger hosted portfolio site, Pixel-Vixen. I wanted to keep it simple and uncluttered, so I implemented a "toggle" content menu, that is, it expands and contracts with a click at the user's discretion. As always, Pixel-Vixen is a work-in-progress and changes in the blog layout and design are guaranteed to come. Still, this is the premise; simple without clutter. That is the idea, and that will remain.

The newly unveiled Pixel-Vixen blog.

In other news? I have been stuck on fonts as well. To be perfectly honest, I am not satisfied with the fonts I have created thus far. There are so many things that I did not anticipate or had not considered. But I have no regrets, I accomplished a goal and have been able to learn from the experience.

There might be a few new fonts to come in the near future as well. Till then, stay tuned and give your life a listen,