Flint 0.5.7 Update

We’re moving directly to 0.5.7. Flint 0.5.6 was an internal release only.

This is another fairly large update that will disrupt your current installation. This update introduces a completely new color picker and big changes to the way background colors and images are managed in the administration pages. For this reason, any background colors or images you had set previously, will likely be wiped out with this update.

Menus got some significant updates as well. You can now add background images to menu items and the handling of borders is much better, but let me just say this about styling menus: It’s not easy to keep straight. You really have to know something about CSS style inheritance to understand how and why these options work the way they do. Some of it is intuitive and some of it is not. It is just plain not easy to make an interface that lets you style things like menus. So with that said, please give yourself a lot of time and patience if you attempt to do crazy things with your menus. Please ask for some guidance if necessary. I’m happy to help.

Upgrade Procedure

Backup Current Copy First

If you have custom files in your Flint theme folder, back up the entire folder so you can copy your custom files into the new version you’ll get with the update. 

Update

To update, just visit the Updates page or the Themes page to initiate the auto-update. Note: This version of Flint requires WordPress 3.8.

New Features

  • Tabbed Pages
    All Flint admin screens were broken into tabs. Most sections are still just one page and a new Help page for the section, but the Menus section now has four tabs ( Primary, Secondary, Header, and Help ) and the Content section has four tabs ( Sections, General, Entries and Help ).  For Content, the Sections tab covers the main sections within the content area: .site-inner, .content, .breadcrumb and .author-box. The General tab covers any kind of content you’d use in your pages or posts, things like general headings, images, forms, pre-formatted text, code, and blockquotes. The Entries tab covers anything related to the entries, HTML articles with a class of .entry.
  • New Color Picker
    I switched Flint to use the Spectrum color picker. I wanted to use this one originally, but it did not have the ability to clear a color so I had to stick with the built-in WP color picker (which is sluggish in comparison). However, my inquiries about Spectrum’s features actually spurred the completion of the feature I wanted so I delayed the update to get it installed and configured. This color picker allows you to do some amazing things and I think you’ll love it for this reason alone: transparent colors.
  • Header
    I added options for .site-header .wrap because there are a number of situations where you might need to apply the background image to the .wrap and not .site-header itself.
  • Comments
    Comment text can now be colorized. Not sure why that option was there earlier but it is now. Child comments got padding and background controls.
  • Setup » Site Type
    I added the “Header on the left” site type option. This mimics the StudioPress Sixteen Nine theme that affixes the header to the left side of the screen, only scrolling the content. This solution supports the primary and secondary menus after the header only. You can independently set the header width and the width of everything else so you’re not stuck with the widths I choose. When this site type is chosen, I also hide many options within Flint that do not apply, such as, the centering of header content. I do that for you automatically and remove the option to alleviate confusion.

Updates and Enhancements

  • Gradients
    Yes you read that right – Flint now lets you create gradients for many areas of the site including the header, menus, menu items, buttons and more. These are pure CSS gradients that work in all major browsers including back as far as IE8. Just pick gradient for the color type and you’ll get two color pickers to set the colors. You can also set the direction of the gradient. Future releases may support more than two colors and radial gradients.
  • Background Color/Image layering and Faux Tinted Images
    I’ve also included an option for background images that lets you place the image above or below the background color. This is interesting in that it allows you to place a semi-transparent color above the image, essentially tinting it. It’ll be interesting to see what some of you do with that.

Usability and General Housekeeping

  • Admin
    Clicking the Reset Settings button on any Flint admin page will now require you to confirm the action.
  • Breadcrumbs
    Breadcrumbs got some usability updates to ensure you don’t see options that don’t apply when you position the crumbs after the header.
  • Captions
    To avoid confusion , I’ve added 8px of padding for image captions. This produces the box-like effect around the image and the caption text which is more of what you’d expect to see at first.

Bug Fixes

  • Header » Site Title Image
    Fixed a bug that prevented the site title image from showing. That should work again.
  • Comment Form
    Fixed a bug that prevented the background of the section to be transparent when the default color was removed.
  • Comment Form
    Fixed the filter that changes the heading text and the button text.
  • Archives
    Fixed the left margin value for featured images.
  • Comments
    Child comment header padding was not hooked up. It is now.
  • Footer Widgets
    Ooops, forgot to test those when I moved the function last release. They’re working again.
  • Archives
    Fixed the H2 entry title border styles.
  • There were numerous other little things I found along the way as well.

On The Radar

  • Post format support ( post formats are already enabled, but Flint does not include styles for them)
  • Translation
  • Remove Single Post Navigation and making that a real plugin as it should be
  • Borders for headings
  • Maybe consider gap control for footer widgets
  • Always, more efficiency, more quality, more security… every day one more thing. It all adds up to something good.

Striking Back Against Censorship – This is Automattic

HUZZAH! I believe that every individual has the power to change the world. It doesn’t take a giant manifesto, or big dreams or even a charismatic personality. It really only takes an authentic love of something – anything – and a genuine interest to evolve and share it. But there are always those who will base their own success on the failure of others, and who will actively attempt to undermine activities that may impact their agendas in adverse ways.

Today Automattic, creators of WordPress and other tools for the evolution of publishing, issued two law suits against two separate individuals who have done just that. These individuals have abused the DMCA Act in blatant ways, issuing take-down orders on two WordPress.com bloggers who openly criticized their questionable activities.

Nothing makes my day more than when a giant organization like Automattic steps in to assist in this way. It shows a kind of commitment to a higher ideal that we all share, one where everyone has equal access to investigate, experience and potentially question or criticize the results. The unauthentic tend not to like that kind of thing… it removes any advantage they may have.

This gets a HUZZAH!

Source article: Striking Back Against Censorship.

Flint 0.5.5 Update

This is the all-new mobile responsiveness release. Once again, not what I planned, but that’s what I did. The default theme now responds better than ever and uses new left and right padding methods that just work. Please read my release notes below so you know exactly what changed and the advice I give you about the Responsiveness page.

Also in this release, all-new mobile menus! You can now mobilize all three of your menus. Mobile menus no longer float around near the top of your pages. They remain relative to their normal positions, but I think you’re going to like this a lot more. You can test drive them right now by making your browser window really narrow for this site. I’ve got my primary navigation menu mobilized.

Bonus! Flint Subscription Widget Styles Plugin

I’m starting to create little plugins for Flint that add style options for popular widgets. The first one ready for release is called Flint Subscription Widget Styles and it allows you to style popular subscription widgets including those for Jetpack and Genesis eNews Extended. A handy CSS class field lets you specify the class of any other third-party subscription widget so it can work too. Learn more and download →

Stay tuned because I have a killer plugin rolling for WooCommerce styles too!

Upgrade Procedure

Updating From 0.5.0 or later

Just do the update from the admin Update page.

Backup custom files! — Remember to save any custom files you put in the Flint child theme folder! Move them back after update.

Updating From 0.4.x

If you were running any version older than 0.5.0, please read the 0.5.1 Release and follow the instructions for upgrading Flint.

New Features

  • Flint Documentation Link
    I added a link to the documentation in the Flint admin bar menu.
  • Header » Background Gradients
    A secondary color was added to the Header Background option so that you can easily create gradient backgrounds. Be aware however, that if you specify a background image, the background image will take precedence and only your first background color will be recognized. If no background image is specified, then both background colors will be recognized and a gradient will be produced rather than a solid color.
  • Menus » Menu Item Background Gradients
    I also added gradient styles to the top-level menu items and current menu items for the primary and secondary navigation menus. If you do not specify a background color for your drop down menu items, they’ll inherit your gradients from the parent items.

Updates and Enhancements

  • Responsiveness » Mobile Menu
    I rewrote the Mobile Menu feature so that you can now mobilize any of your navigation menus: Header, Primary or Secondary. Menus are annoyingly complex so there aren’t tons of style options for mobile menus, but I think you’re going to like the options you get. You can specify your own label for the menu, color the toggle button and apply basic color and text styles to the menu items. Super slick update.
  • Responsiveness
    I added responsive CSS text areas for 568 ( iPhone 5 landscape ) and 380 ( Samsung Galaxy portrait ).
  • Comments & Pingbacks
    I added a new section on the Comments page  for trackbacks and added padding controls to that section. Trackbacks ( for now ) will get the same styles as your top-level comments ( the list item ) and the new padding controls will pad the list for you.

Usability and General Housekeeping

  • Responsiveness
    I reworked the default responsiveness styles a bit more in this release and rather than produce a dull and visually unappealing mobile view, I did a few things to maintain some of the character of the default theme which should not only make things look better in mobile views, but also make it easier to manage for your own design.

    I highly recommend you RESET your Flint » Responsiveness settings in order to pull in the NEW default values.

    Copy your current styles if you’ve specified some. Then you can copy back the ones you actually do need if you find it necessary after the reset. You’ll likely find many of them are no longer necessary.

Bug Fixes

  • Header » Site Title
    Fixed a bug that failed to check whether the site title link colors had been set, and therefore didn’t write the CSS.
  • Content » Images
    Not really a bug here, but I added display:block to the .alignleft and .alignright image and caption classes in mobile mode. The original CSS removed the float, but in cases where the image didn’t fill the width of the screen, text would still align to the base of the image. Adding display:block forces the text to realign on its own line as you’d expect.

On The Radar

  • Post format support
  • Translation
  • Better border options for drop down menus ( .submenu and .submenu a )
  • Remove Single Post Navigation and making that a real plugin as it should be
  • Borders for headings
  • Maybe consider gap control for footer widgets
  • Always, more efficiency, more quality, more security… every day one more thing. It all adds up to something good.

Background Image Generator

Blend colors and patterns using standard blend modes to generate seamless background images on the fly!

Background Image Generator is probably one of the cooler utilities I’ve seen in a while. This web app lets you blend colors with the subtlepatterns.com patterns using all the standard blend modes and it can produce a seamless 1x or 2x PNG image for you, on the fly. Absolutely fabulous.

Flint 0.5.4 Update

This is another big update with numerous new features and a lot of code changes. This version has been running live on this site for some time already, but obviously, if you’re not using some of the options, you don’t find the bugs. Take a minute to read the list of new features and updates. Enjoy!

Upgrade Procedure

Updating From 0.5.0 or later

Just do the update from the admin Update page.

Backup custom files! — Remember to save any custom files you put in the Flint child theme folder! Move them back after update.

Updating From 0.4.x

If you were running any version older than 0.5.0, please read the 0.5.1 Release and follow the instructions for upgrading Flint.

New Features

  • Archives » Added post-info and post-meta filters so that you can display different information on archive entries versus the singles.
  • Menus » Added border radius for top-level .genesis-nav-menu > menu-item a so that you can make nice round-top tabs or just round all corners of a button-style menu link
  • Comments » a number of new options were added including individual styles for the comment form header
  • Widgets » Widget titles now have a “spanitize” option which will insert <span> tags around the title text so you have have more of an inline look for the title. The padding, background colors/image and borders are applied to the span and not the <h4> itself.
  • Content » controls for .entry-header and .entry-footer were added: margin, padding and border. Full controls are still available for post-info and post-meta ( the new .entry-meta ).
  • Responsiveness » Added a response point at 685 for iPhone 5 and Samsung Galaxy in landscape mode. Some things like the home page 3-up widget areas can still float 3-up at 768, but not at 685 so that response point helps cater to that view.
  • Home Page » big changes for the Home Page configuration tools. Some new features were added to help manage the padding and bottom margin on widgets within the widget areas you enable. You can now size the widget areas yourself – they don’t have to be equal sizes. For example, the 3 slot options can have widget areas of 50/25/25 or 25/50/25 or 33/33/33. The two slot options can be 65/35 or 40/60 or whatever you choose.
  • Responsiveness » Options to provide responsive CSS for your custom MR points were added. Same for 685 which is the portrait with for Samsung Galaxy phones.
  • Filters were added for at the end of general CSS, and for all response points so that plugins can plug their CSS into Flint’s generator.
  • Added border controls to Archive Entry Titles because, when semantic HTML for headings is enabled on the Genesis SEO Settings page,  your archive entry titles are H1 tags and will inherit from the page title options rather than the old standard H2 options.
  • Starting to add inline help right within the Flint admin pages. You’ll see these new help links on the Flint » Content page now.
  • Content » Numerous new options for Headings and Text

Usability and General Housekeeping

  • Wow, a whopping update to the stylesheet generator code. Wasn’t expecting to do this, but you know how things go… you start out to fix something and the whole new approach just unfolds before you. I’ve slimmed the generator code by about 2000 lines. This was achieved by creating some routines that generate all the common CSS output. These routines verify option values are set and only output CSS for values it finds. I also added conditional checks to almost every selector so that we don’t output empty selectors either. Still a few left, but we’ll get there. The resulting settings.css stylesheet was reduced by around 30% and the generation time is much faster. You should notice your Flint admin pages load faster and save faster too.
  • Added support for post formats because I want Flint to be very integrated with whatever WordPress.com has up its sleeve.
  • Added support for editor.css. Add a file called editor.css to your /wp-content/uploads/flint/ directory and Flint will pull that in and use any CSS you’ve specified for your editing window. I do not like serif fonts at all so I’ll be posting a tutorial about how to use this feature for all my fellow serif haters ha!
  • Tidied the code for the Infinite Scroll Fix. Gary Jones had a “the right” solution posted on GitHub so we’re rockin’ that now.
  • Rearranged init.php to be even more “correct” as far as the way the action hooks load.
  • Some minor tweaks for Firefox.
  • Major mobile responsiveness updates. The theme should be responding accurately now.

Bug Fixes

  • Fixed sidebar-alt margin and padding controls which had the wrong options tied to their $vars
  • Fixed sidebar sub-menu margin-top gap
  • Fixed awkward display of comment form when it appears within the comment list
  • Fixed things so that .archive-pagination will still show on a page with the Genesis Blog page template applied even when Jetpack Infinite Scroll has been enabled. JPIS doesn’t work on the Genesis page template for the Blog so the normal navigation controls have to be there.
  • Fixed the double margins on widget images when both the anchor and the image had the same alignment class. Now the margin is only on the image and never on the anchor.
  • Home page page title works again – had to update the option after I moved it to the new Home Page page.
  • Speaking of the home page, I fixed a bunch of bugs there…

On The Radar

  • Post format support
  • Translation
  • Better border options for drop down menus ( .submenu and .submenu a )
  • Remove Single Post Navigation and making that a real plugin as it should be
  • Borders for headings
  • Add support for eNews widget
  • Maybe consider gap control for footer widgets
  • Redo Mobile Menu so that all menus can be mobilized
  • Always, more efficiency, more quality, more security… every day one more thing. It all adds up to something good.

TGM Plugin Activation

The Best Way to Include Plugins with WordPress Themes and Plugins

TGM Plugin Activation is a script that helps theme and plugin developers recommend or require plugins with their themes and plugins. It’s not a bundler as much as a manager. It will tell the user what’s required and what’s recommended, but the user still has to install these plugins themselves. Handy.

The Road From Karakol

Now here’s what I believe. Real adventure is not polished. It’s not the result of some marketing budget. There’s no hashtag for it. It burns brightest on the map’s edges, but it exists in all of us. It exists at the intersection of imagination and the ridiculous. You have to have faith. It will find you there. And when it does, there’s just one question… “In this life, when the road comes to an end, will you keep pedaling?”