BuilderChild-Air

From IThemes Codex
Revision as of 15:40, August 7, 2013 by Ronald (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

Introduction

Builder Child Air is a new foundational or starter child theme for iThemes Builder. Whether you're using the Builder Style Manager or writing your own CSS, we hope Air will be a great new place to start when creating your custom responsive-ready Builder child themes.

Builder child Air includes several convenient built-in features to help lay the groundwork for custom child theme creation.

Screenshot

Air 2013-04-12 09-33-58.png

Theme Demo

See Air in action on this live Demo

Builder Layout Export zip file - can be used to import the demo site's layout and settings.

Blog Announcement

Read the blog entry announcing the release of Air.

Purchase

Purchase Air

Air Features

  • Built-in Mobile-Ready Menu Style
  • Fully Optimized for Style Manager
  • New Inset Module Styles
  • Full Window Image Style

Customisations

How to Change the Appearance of Search

Follow http://ithemes.com/2013/05/03/how-to-change-the-appearance-of-search-in-ithemes-builder-air-child-theme/

How to show Excerpts instead of full post content on Posts page

1. Duplicate (using a FTP client or cPanel file manager)

wp-content/themes/BuilderChild-Air/post-formats/content.php

as

wp-content/themes/BuilderChild-Air/post-formats/content-excerpt.php

and edit content-excerpt.php.

Replace

<?php the_content( __( 'Read More →', 'it-l10n-BuilderChild-Air' ) ); ?>

with

<?php the_excerpt(); ?>

2. Edit Air's index.php and change

<?php get_template_part('post-formats/content', get_post_format()); ?>

to

<?php get_template_part('post-formats/content-excerpt', get_post_format()); ?>

That's it.

If you would like to do the same in other views like Archives or Search, edit the appropriate files.

How to have logo at left and navigation menu at right

WordPress Dev Site 2013-05-20 07-52-04.png

1. Create a HTML module and paste this code in the textarea:

<div id="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.png" alt="Home" /></a></div>

<div class="my-menu-container"><?php wp_nav_menu( array( 'menu' => 'Primary', 'menu_class' => 'builder-module-navigation') ); ?></div>

Set Enable PHP to Yes.

Screen Shot 2013-05-20 at 7.50.56 AM.png

Upload your logo to child theme's images directory and replace "logo.png" in the above code with the name of your logo image.

Also change "Primary" in the above code to the name of custom menu at Appearance -> Menus that you wish to appear in the nav bar.


2. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

#logo {
	float: left;
}

.my-menu-container {
	float: right;
}

[Optional] Also add this CSS to reduce the extra space above and below the content of our HTML module:

.builder-module-2 {
	padding-top: 1em !important;
}

.builder-module-2 .builder-module-element {
	margin-bottom: 1em !important;
}

Change the number 2 in ".builder-module-2" above to the position of module from the top in layout.


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox