BuilderChild-Air

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Added == How to Change the Appearance of Search ==)
 
(2 intermediate revisions by one user not shown)
Line 3: Line 3:
 
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 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. A few of Air's theme highlights include:
+
Builder child Air includes several convenient built-in features to help lay the groundwork for custom child theme creation.
 +
 
 +
== Screenshot ==
 +
[[File:Air 2013-04-12 09-33-58.png|291px|thumb|none]]
 +
 
 +
== Theme Demo ==
 +
See Air in action on this [http://demos.ithemes.com/air/ live Demo]
 +
 
 +
[http://demos.ithemes.com/air/files/builder-export-data/export-5202b06b4ee361.03602572/builder-export-air.zip Builder Layout Export zip file] - can be used to [http://ithemes.com/codex/page/Builder_Import_and_Export_Tool import the demo site's layout and settings].
 +
 
 +
== Blog Announcement ==
 +
Read the [http://ithemes.com/2013/04/04/introducing-air-a-new-foundation-child-theme-for-builder/ blog entry] announcing the release of Air.
 +
 
 +
== Purchase ==
 +
 
 +
[http://ithemes.com/purchase/air/ Purchase Air]
 +
 
 +
== Air Features ==
  
 
* Built-in Mobile-Ready Menu Style
 
* Built-in Mobile-Ready Menu Style
Line 10: Line 27:
 
* Full Window Image Style
 
* Full Window Image Style
  
[[File:Air 2013-04-12 09-33-58.png|291px|thumb|none]]
+
== Customisations ==
 +
=== How to Change the Appearance of Search ===
  
[http://demos.ithemes.com/air/ Live Demo]
+
Follow http://ithemes.com/2013/05/03/how-to-change-the-appearance-of-search-in-ithemes-builder-air-child-theme/
  
[http://ithemes.com/2013/04/04/introducing-air-a-new-foundation-child-theme-for-builder/ Blog entry announcing the release of Air]
+
=== How to show Excerpts instead of full post content on Posts page ===
  
== How to Change the Appearance of Search ==
+
'''1.''' Duplicate (using a FTP client or cPanel file manager)
  
Follow http://ithemes.com/2013/05/03/how-to-change-the-appearance-of-search-in-ithemes-builder-air-child-theme/
+
wp-content/themes/BuilderChild-Air/post-formats/content.php
 +
 
 +
as
 +
 
 +
wp-content/themes/BuilderChild-Air/post-formats/content-excerpt.php
 +
 
 +
and edit <code>content-excerpt.php</code>.
 +
 
 +
Replace
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php the_content( __( 'Read More &rarr;', 'it-l10n-BuilderChild-Air' ) ); ?>
 +
</pre>
 +
 
 +
with
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php the_excerpt(); ?>
 +
</pre>
 +
 
 +
'''2.''' Edit Air's <code>index.php</code> and change
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php get_template_part('post-formats/content', get_post_format()); ?>
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php get_template_part('post-formats/content-excerpt', get_post_format()); ?>
 +
</pre>
 +
 
 +
That's it.
 +
 
 +
If you would like to do the same in other views like Archives or Search, edit the [http://codex.wordpress.org/images/1/18/Template_Hierarchy.png appropriate files].
 +
 
 +
=== How to have logo at left and navigation menu at right ===
 +
 
 +
[[File:WordPress Dev Site 2013-05-20 07-52-04.png|800px|thumb|none]]
 +
 
 +
'''1.''' Create a HTML module and paste this code in the textarea:
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<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>
 +
</pre>
 +
 
 +
Set <code>Enable PHP</code> to <code>Yes</code>.
 +
 
 +
[[File:Screen Shot 2013-05-20 at 7.50.56 AM.png|595px|thumb|none]]
 +
 
 +
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 <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush: css; gutter: false;">
 +
#logo {
 +
float: left;
 +
}
 +
 
 +
.my-menu-container {
 +
float: right;
 +
}
 +
</pre>
 +
 
 +
[Optional] Also add this CSS to reduce the extra space above and below the content of our HTML module:
 +
 
 +
<pre class="brush: css; gutter: false;">
 +
.builder-module-2 {
 +
padding-top: 1em !important;
 +
}
 +
 
 +
.builder-module-2 .builder-module-element {
 +
margin-bottom: 1em !important;
 +
}
 +
</pre>
 +
 
 +
Change the number <code>2</code> in ".builder-module-2" above to the position of module from the top in layout.
 +
 
 +
<br />
 +
[[:Builder|← Back to Builder Codex Home]]

Latest revision as of 14:40, August 7, 2013

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