BuilderChild-Thinner - Revision history

Sridhar: Added = How to show header image/logo at left and a nav bar at right =

2013-03-02T17:48:42Z

Added = How to show header image/logo at left and a nav bar at right =

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

2012-08-16T08:26:54Z

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

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

2012-08-16T08:26:10Z

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

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

2012-08-16T08:21:37Z

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

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

2012-07-23T10:57:33Z

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

Sridhar: /* How to get sliding images on Posts listing page */

2012-07-23T10:50:57Z

How to get sliding images on Posts listing page

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

2012-07-21T01:43:31Z

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

Sridhar: Added = How to modify Slider extension to show posts from a specific category =

2011-11-28T18:16:34Z

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

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

2011-08-30T08:24:59Z

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

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

2011-08-28T01:38:49Z

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

← Older revision		Revision as of 17:48, March 2, 2013
Line 189:		Line 189:
	<?php get_search_form(); ?>		<?php get_search_form(); ?>
	</pre>		</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.

@@ Line 130: / Line 130: @@
 [[File:2012-08-16 13-45-50.png|800px|thumb|none]]
-'''1.''' Create a file named searchform.php in Thinner's directory having this code:
+'''1.''' Create a file named <code>searchform.php</code> in Thinner's directory having this code:
 <pre class="brush:php;">

@@ Line 179: / Line 179: @@
+}
 </pre>
 That's it!

← Older revision		Revision as of 08:21, August 16, 2012
Line 119:		Line 119:

	[http://ithemes.com/forum/index.php?/topic/20302-how-can-i-filter-posts-shown-thinner-child-theme-featured-image-slider/#p97162 Related forum post].		[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 searchform.php 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>
		+
		+	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>

@@ Line 21: / Line 21: @@
 = 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_changed.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_changed.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.

@@ 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].
-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.

← Older revision		Revision as of 18:16, November 28, 2011
Line 88:		Line 88:
	</pre>		</pre>

−	= ~~Item 4~~ =	+	= 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].

@@ Line 56: / Line 56: @@
 = 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 who 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.
+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:'''
@@ Line 87: / Line 87: @@
+}
 </pre>
 = Item 4 =