BuilderChild-Thinner

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Added = How to move wide featured image above the content in single posts to right side with content wrapping around =)
(Added = How to show header image/logo at left and a nav bar at right =)
 
(9 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
Thinner child theme includes Featured Image Slider extension which is what is being applied for the layout used by the homepage at [http://demos.ithemes.com/thinner/ Thinner's demo site].
 
Thinner child theme includes Featured Image Slider extension which is what is being applied for the layout used by the homepage at [http://demos.ithemes.com/thinner/ Thinner's demo site].
  
Screenshot: http://ithemes.com/codex/images/8/83/Thinner-slider-extn-after.png
+
[[File:Thinner 2012-07-23 16-17-23.png|800px|thumb|none]]
  
 
Featured Image Extension displays Featured Image & Post Title of first 6 posts in a custom slider and the Featured Image, Post Title & Excerpt for the remaining posts. Therefore you should edit the posts whose featured images you would like to be displayed in the slider and add featured images in all of them.
 
Featured Image Extension displays Featured Image & Post Title of first 6 posts in a custom slider and the Featured Image, Post Title & Excerpt for the remaining posts. Therefore you should edit the posts whose featured images you would like to be displayed in the slider and add featured images in all of them.
Line 21: Line 21:
 
= How to move wide featured image above the content in single posts to right side with content wrapping around =
 
= How to move wide featured image above the content in single posts to right side with content wrapping around =
  
[[File:Thinner-single-featured-image-before.png|800px|thumb|none|Before]]
+
[[File:My Test Site 2012-07-23 16-23-33.png|800px|thumb|none|Before]]
  
[[File:Thinner-single-featured-image-after.png|800px|thumb|none|After]]
+
[[File:My Test Site 2012-07-23 16-25-04.png|800px|thumb|none|After]]
  
 
'''1.''' Edit lib/image-sizes.php in child theme.
 
'''1.''' Edit lib/image-sizes.php in child theme.
Line 54: Line 54:
 
</pre>
 
</pre>
  
= Item 3 =
+
= How to get "Read More→" below each post when using "Teasers Layout - Image Left" extension =
  
= Item 4 =
+
When "Thinner Teasers Layout - Image Left" extension is used on a listing page (like Posts page or a category page), "Read More→" will only appear under those posts which have more than 60 words. i.e., If a post has more than 60 words, the first 60 words are shown and the rest will be cut off with "Read More→" automatically appearing. If a post has less than 60 words, "Read More→" will not appear by default.
 +
 
 +
'''If you would like to have "Read More→" appearing always below each post irrespective of length of the post follow this:'''
 +
 
 +
[[File:Thinner-readmore-below-each-post.png|363px|thumb|none|Click to enlarge]]
 +
 
 +
Edit wp-content/themes/BuilderChild-Thinner/extensions/post-teasers-left/functions.php.
 +
 
 +
Below <code><?php the_excerpt(); ?></code>, add
 +
 
 +
<pre class="brush:php;">
 +
<p><a href="<?php the_permalink(); ?>" class="more-link">Read More&rarr;</a></p>
 +
</pre>
 +
 
 +
Change
 +
 
 +
<pre class="brush:php;">
 +
function builder_teasers_left_excerpt_more( $more ) {
 +
global $post;
 +
return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More&rarr;</a></p>';
 +
}
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:php;">
 +
function builder_teasers_left_excerpt_more( $more ) {
 +
global $post;
 +
return '';
 +
}
 +
</pre>
 +
 
 +
= How to modify Slider extension to show posts from a specific category =
 +
 
 +
'''1.''' Copy wp-content/themes/Builder/extensions/slider to wp-content/themes/BuilderChild-Thinner/extensions/slider.
 +
 
 +
'''2.''' Edit wp-content/themes/BuilderChild-Thinner/extensions/slider/functions.php.
 +
 
 +
Change
 +
 
 +
<pre class="brush:php;">
 +
$args = array(
 +
'posts_per_page' => 6,
 +
'order'          => 'date',
 +
'meta_key'      => '_thumbnail_id'
 +
);
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush:php;">
 +
$cat_id = get_cat_id('services');
 +
$args = array(
 +
'posts_per_page' => 6,
 +
'order'          => 'date',
 +
'meta_key'      => '_thumbnail_id',
 +
'cat'          => $cat_id
 +
);
 +
</pre>
 +
 
 +
In the above, change "services" to the slug of category from which posts should be shown in slider.
 +
 
 +
[http://ithemes.com/forum/index.php?/topic/20302-how-can-i-filter-posts-shown-thinner-child-theme-featured-image-slider/#p97162 Related forum post].
 +
 
 +
= How to replace standard search widget's look and behavior with the one in footer =
 +
 
 +
To replace the default/standard appearance/behavior of search widget, i.e.,
 +
 
 +
[[File:2012-08-16 13-44-09.png|799px|thumb|none]]
 +
 
 +
with
 +
 
 +
[[File:2012-08-16 13-45-50.png|800px|thumb|none]]
 +
 
 +
'''1.''' Create a file named <code>searchform.php</code> in Thinner's directory having this code:
 +
 
 +
<pre class="brush:php;">
 +
<?php $search_box_default = __( 'Search', 'it-l10n-BuilderChild-Thinner' ); ?>
 +
<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>
 +
<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>
 +
<form method="get" class="search-form" action="<?php echo get_option( 'home' ); ?>">
 +
<input type="text" value="<?php echo $search_box_value; ?>" name="s" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
 +
</form>
 +
</pre>
 +
 
 +
'''2.''' Add the following at the end of Thinner's style.css (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush:css;">
 +
.search-form input[type="text"] {
 +
width: 40px;
 +
margin: 0;
 +
margin-top: 2px;
 +
padding: 10px 12px;
 +
background-color: #EEEEEE;
 +
border-color: #636B72;
 +
color: #636B72;
 +
text-shadow: #FFFFFF 0px 1px 1px;
 +
-webkit-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
-webkit-transition:  width .2s ease-in-out;
 +
-moz-transition:  width .2s ease-in-out;
 +
-o-transition:  width .2s ease-in-out;
 +
transition:  width .2s ease-in-out;
 +
font-size: 0.75em;
 +
}
 +
.search-form input[type="text"]:hover {
 +
background: #DDDDDD;
 +
cursor: pointer;
 +
}
 +
.search-form input[type="text"]:focus {
 +
width: 200px;
 +
background: #FBFBFB url('images/search-glass.png') center right no-repeat;
 +
color: #555555;
 +
text-shadow: none;
 +
-webkit-border-radius: 20px;
 +
-moz-border-radius: 20px;
 +
border-radius: 20px;
 +
-webkit-box-shadow: inset #888888 1px 1px 2px;
 +
-moz-box-shadow: inset #888888 1px 1px 2px;
 +
box-shadow: inset #888888 1px 1px 2px;
 +
}
 +
</pre>
 +
 
 +
<u>Note:</u> If you want to use the search widget in the right sidebar of say, Header module, ensure that the sidebar width is at least 250px in module's settings.
 +
 
 +
That's it!
 +
 
 +
If you would like to display this search in a HTML module, enable PHP in it and use this code:
 +
 
 +
<pre class="brush:php;">
 +
<?php get_search_form(); ?>
 +
</pre>
 +
 
 +
= How to Show Header image/Logo at Left and a Nav bar at Right =
 +
 
 +
[[File:2013-03-02 22-40-06.jpg]]
 +
 
 +
'''1.''' Place (upload) your header/logo image in/to Thinner's images directory.
 +
 
 +
'''2.''' At Appearance -> Menus create a custom menu (if you haven't already) that you would like to be shown at the right.
 +
 
 +
'''3.''' Add a HTML module having following sample code:
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<div id="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/header.png" alt="Home" /></a></div>
 +
 
 +
<?php wp_nav_menu( array( 'menu' => 'Main', 'menu_class' => 'builder-module-navigation') ); ?>
 +
</pre>
 +
 
 +
where
 +
 
 +
a) <code>header.png</code> is the name of your header/logo image.
 +
 
 +
b) <code>Main</code> is the name of custom menu.
 +
 
 +
<u>Enable PHP</u>.
 +
 
 +
'''4.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush: css; gutter: false;">
 +
#logo {
 +
    float: left;
 +
    margin-top: 20px;
 +
}
 +
 
 +
#menu-main li a {
 +
    font-size: 13px;
 +
    padding: 6px 15px;
 +
    text-transform: none;
 +
}
 +
 
 +
.builder-module-1 {
 +
    margin-top: 0 !important;
 +
    margin-bottom: 0 !important;
 +
}
 +
 
 +
.menu-main-container {
 +
    float: right;
 +
    margin-right: 4px;
 +
}
 +
 
 +
ul.builder-module-navigation {
 +
overflow: hidden;
 +
background: #F6F6F6;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F6F6F6));
 +
background: -webkit-linear-gradient(#FFFFFF, #F6F6F6);
 +
background: -moz-linear-gradient(#FFFFFF, #F6F6F6);
 +
background: -ms-linear-gradient(#FFFFFF, #F6F6F6);
 +
background: -o-linear-gradient(#FFFFFF, #F6F6F6);
 +
background: linear-gradient(#FFFFFF, #F6F6F6);
 +
border: 1px solid #FFF;
 +
-moz-border-radius: 0px 0px 10px 10px;
 +
-webkit-border-radius: 0px 0px 10px 10px;
 +
border-radius: 0px 0px 10px 10px;
 +
-webkit-box-shadow: #AAAAAA 1px 1px 2px;
 +
-moz-box-shadow: #AAAAAA 1px 1px 2px;
 +
-o-box-shadow: #AAAAAA 1px 1px 2px;
 +
-khtml-box-shadow: #AAAAAA 1px 1px 2px;
 +
box-shadow: #AAAAAA 1px 1px 2px;
 +
}
 +
 
 +
#menu-main li:last-child a {
 +
    border-right: none;
 +
}
 +
 
 +
#menu-main li li, #menu-main li ul {
 +
    width: 11em;
 +
}
 +
 
 +
#menu-main li ul ul {
 +
margin: -2.3em 0 0 11em;
 +
}
 +
</pre>
 +
 
 +
In the above replace <code>menu-main</code> with the CSS ID of your custom menu. This can be obtained from Firebug. If the name of custom menu is <code>Primary</code>, its CSS ID would be <code>menu-primary</code>. If it is <code>Primary Menu</code>, it would be <code>menu-primary-menu</code>
 +
 
 +
Also replace 1 in <code>.builder-module-1</code> with the position of HTML module from the top in layout.

Latest revision as of 11:48, March 2, 2013

Contents

How to get sliding images on Posts listing page

Thinner child theme includes Featured Image Slider extension which is what is being applied for the layout used by the homepage at Thinner's demo site.

Thinner 2012-07-23 16-17-23.png

Featured Image Extension displays Featured Image & Post Title of first 6 posts in a custom slider and the Featured Image, Post Title & Excerpt for the remaining posts. Therefore you should edit the posts whose featured images you would like to be displayed in the slider and add featured images in all of them.

Follow these steps to get a working slider on your site's homepage:

1. Ensure that there is a separate layout to be used for homepage. Edit this layout and apply "Featured Image Slider" extension.

Slider-extn-home-layout.png

2. Add a view associating Home view with the layout set aside for homepage.

Set-view-to-layout.png

This extension can be any applied to a layout or view for listing pages like the Homepage (where posts appear by default) or Posts page or archive page or category page.

How to move wide featured image above the content in single posts to right side with content wrapping around

Before
After

1. Edit lib/image-sizes.php in child theme.

Change

	add_image_size( 'singular-alternate-image', 650, 200, true );

to say,

	add_image_size( 'singular-alternate-image', 300, 200, true );

where 300 and 200 are your desired max width and height values for the featured image.

2. Add the following at the end of child theme's style.css:

.single .entry-image img {
    width: auto;
}

.single .entry-image {
	float: right;
	margin-left: 1em;
}

How to get "Read More→" below each post when using "Teasers Layout - Image Left" extension

When "Thinner Teasers Layout - Image Left" extension is used on a listing page (like Posts page or a category page), "Read More→" will only appear under those posts which have more than 60 words. i.e., If a post has more than 60 words, the first 60 words are shown and the rest will be cut off with "Read More→" automatically appearing. If a post has less than 60 words, "Read More→" will not appear by default.

If you would like to have "Read More→" appearing always below each post irrespective of length of the post follow this:

Click to enlarge

Edit wp-content/themes/BuilderChild-Thinner/extensions/post-teasers-left/functions.php.

Below <?php the_excerpt(); ?>, add

<p><a href="<?php the_permalink(); ?>" class="more-link">Read More→</a></p>

Change

function builder_teasers_left_excerpt_more( $more ) {
	global $post;
	return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More→</a></p>';
}

to

function builder_teasers_left_excerpt_more( $more ) {
	global $post;
	return '';
}

How to modify Slider extension to show posts from a specific category

1. Copy wp-content/themes/Builder/extensions/slider to wp-content/themes/BuilderChild-Thinner/extensions/slider.

2. Edit wp-content/themes/BuilderChild-Thinner/extensions/slider/functions.php.

Change

					$args = array(
						'posts_per_page' => 6,
						'order'          => 'date',
						'meta_key'       => '_thumbnail_id'
					);

to

					$cat_id = get_cat_id('services');
					$args = array(
						'posts_per_page' => 6,
						'order'          => 'date',
						'meta_key'       => '_thumbnail_id',
						'cat'  	         => $cat_id
					);

In the above, change "services" to the slug of category from which posts should be shown in slider.

Related forum post.

How to replace standard search widget's look and behavior with the one in footer

To replace the default/standard appearance/behavior of search widget, i.e.,

2012-08-16 13-44-09.png

with

2012-08-16 13-45-50.png

1. Create a file named searchform.php in Thinner's directory having this code:

<?php $search_box_default = __( 'Search', 'it-l10n-BuilderChild-Thinner' ); ?>
<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>
<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>
<form method="get" class="search-form" action="<?php echo get_option( 'home' ); ?>">
	<input type="text" value="<?php echo $search_box_value; ?>" name="s" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
</form>

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

.search-form input[type="text"] {
	width: 40px;
	margin: 0;
	margin-top: 2px;
	padding: 10px 12px;
	background-color: #EEEEEE;
	border-color: #636B72;
	color: #636B72;
	text-shadow: #FFFFFF 0px 1px 1px;	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-transition:  width .2s ease-in-out;
	-moz-transition:  width .2s ease-in-out;
	-o-transition:  width .2s ease-in-out;
	transition:  width .2s ease-in-out;
	font-size: 0.75em;
}
.search-form input[type="text"]:hover {
	background: #DDDDDD;
	cursor: pointer;
}
.search-form input[type="text"]:focus {
	width: 200px;
	background: #FBFBFB url('images/search-glass.png') center right no-repeat;
	color: #555555;
	text-shadow: none;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: inset #888888 1px 1px 2px;
	-moz-box-shadow: inset #888888 1px 1px 2px;
	box-shadow: inset #888888 1px 1px 2px;
}

Note: If you want to use the search widget in the right sidebar of say, Header module, ensure that the sidebar width is at least 250px in module's settings.

That's it!

If you would like to display this search in a HTML module, enable PHP in it and use this code:

<?php get_search_form(); ?>

How to Show Header image/Logo at Left and a Nav bar at Right

2013-03-02 22-40-06.jpg

1. Place (upload) your header/logo image in/to Thinner's images directory.

2. At Appearance -> Menus create a custom menu (if you haven't already) that you would like to be shown at the right.

3. Add a HTML module having following sample code:

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

<?php wp_nav_menu( array( 'menu' => 'Main', 'menu_class' => 'builder-module-navigation') ); ?>

where

a) header.png is the name of your header/logo image.

b) Main is the name of custom menu.

Enable PHP.

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

#logo {
    float: left;
    margin-top: 20px;
}

#menu-main li a {
    font-size: 13px;
    padding: 6px 15px;
    text-transform: none;
}

.builder-module-1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.menu-main-container {
    float: right;
    margin-right: 4px;
}

ul.builder-module-navigation {
	overflow: hidden;
	background: #F6F6F6;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F6F6F6));
	background: -webkit-linear-gradient(#FFFFFF, #F6F6F6);
	background: -moz-linear-gradient(#FFFFFF, #F6F6F6);
	background: -ms-linear-gradient(#FFFFFF, #F6F6F6);
	background: -o-linear-gradient(#FFFFFF, #F6F6F6);
	background: linear-gradient(#FFFFFF, #F6F6F6);
	border: 1px solid #FFF;
	-moz-border-radius: 0px 0px 10px 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px;
	-webkit-box-shadow: #AAAAAA 1px 1px 2px;
	-moz-box-shadow: #AAAAAA 1px 1px 2px;
	-o-box-shadow: #AAAAAA 1px 1px 2px;
	-khtml-box-shadow: #AAAAAA 1px 1px 2px;
	box-shadow: #AAAAAA 1px 1px 2px;
}

#menu-main li:last-child a {
    border-right: none;
}

#menu-main li li, #menu-main li ul {
    width: 11em;
}

#menu-main li ul ul {
	margin: -2.3em 0 0 11em;
}

In the above replace menu-main with the CSS ID of your custom menu. This can be obtained from Firebug. If the name of custom menu is Primary, its CSS ID would be menu-primary. If it is Primary Menu, it would be menu-primary-menu

Also replace 1 in .builder-module-1 with the position of HTML module from the top in layout.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox