BuilderChild-Air

(Difference between revisions)
Jump to: navigation, search
(Created Air page)
 
(Added == How to have logo at left and navigation menu at right ==)
(2 intermediate revisions by 2 users not shown)
Line 15: Line 15:
  
 
[http://ithemes.com/2013/04/04/introducing-air-a-new-foundation-child-theme-for-builder/ Blog entry announcing the release of Air]
 
[http://ithemes.com/2013/04/04/introducing-air-a-new-foundation-child-theme-for-builder/ Blog entry announcing the release of Air]
 +
 +
== 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 <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.

Revision as of 20:25, May 19, 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. A few of Air's theme highlights include:

  • Built-in Mobile-Ready Menu Style
  • Fully Optimized for Style Manager
  • New Inset Module Styles
  • Full Window Image Style
Air 2013-04-12 09-33-58.png

Live Demo

Blog entry announcing the release of Air

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.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox