Feature preview: pullquote and Google Webfont

Starting from version 1.7.3, a new feature will be added to the Graphene theme, called pullquote.

What is a pullquote? It’s that enlarged block of text you usually see in magazine articles. This screenshot would explain it better than any words can:

The pullquote has been implemented as a shortcode that you can easily use in the WordPress Editor. There will also be a button in the editor that’ll quickly add the shortcode for you:

As you can see in the screenshot above, the pullquote button will automatically wrap selected text in the pullquote shortcode. The shortcode itself accepts two parameters: align and width. The default value for width is 30%, which is added by default to the shortcode, but you can change it to any CSS width value, e.g. 100% for full width, or 250px, 10em, etc.

The align parameter accepts three values: left, center, or right. This allows you to determine the alignment of the pullquote in the post.

Different variations of the pullquote width and alignment.

The text in the pullquote will be styled using the Pontano Sans font from Google Webfont. Since the theme will be loading the font using Google’s Webfont Loader, it’s only natural to expand that feature to allow you to add other fonts from Google Webfont from the theme’s options page. The new option is located in Graphene Options > Display > Text Style Options.

As you can probably discern from the screenshots above, these features are pretty much completed. Keep an eye out for the next theme update for these goodies.

Update 16/6/2012:

The shortcode will also accept another parameter: textalign. The acceptable values for this parameter is the same as the align parameter: left, center, or right. This will allow you to align the text inside the pullquote.

  • Excellent feature. I love Graphene theme. It is easy to use and adapt regardless of your abilities and it keeps evolving in style & features. Keep up the good work.

  • abaco

    I am very pleased with Graphene theme, I have tried pretty well all of them from wordpress and your’s rates 6 ****** keep up the good work Syahir Hakim

  • Dantalion Jones

    Wow! I love this idea.
    Keep up the Great Work.

    Dantalion

  • Lampai

    Graphene theme is the best theme, easy to use, customize,…. and everything.. Great work…..

  • Great Work! Love the new Quote- Box! ๐Ÿ˜‰
    But i confused about the Google-Fonts feature:
    How can i use the embedded Fonts in the editor or in the theme, eg for titels..?

    DG

    • The option just allows you to load other Google Webfonts. You’ll need to use either the Custom CSS or your child theme’s style.css file to change the font of any text you want to the Google Webfont that you have added.

      The theme will just load the font, but it won’t apply it automatically. That’s up to the user to decide and do.

  • I love that this Web Font functionality is built into Graphene. Are there plans to add it into Graphene Mobile?

    • Now that you’ve mentioned it, why not? I’ll add it in the next update ๐Ÿ™‚

  • This is a great feature, I can include in it links to related post inside the current post. Just what I was looking for.
    The I can customize the CSS of it.

    Syahir,

    great work!!!

    Udi.

  • Sam

    This is great… The theme is getting better and better!