BuilderChild-Acute - Revision history

Sridhar: /* How to style navigation menu in non Header module */

2013-03-29T11:24:03Z

How to style navigation menu in non Header module

Sridhar: /* How to make search look the same in all modules */

2012-07-08T03:43:45Z

How to make search look the same in all modules

Sridhar: Added = How to make search look the same in all modules =

2012-07-07T07:08:00Z

Added = How to make search look the same in all modules =

Sridhar: /* How to style navigation menu in non Header module */

2012-06-03T06:02:33Z

How to style navigation menu in non Header module

Sridhar: /* Acute */

2012-05-31T11:42:11Z

Acute

Sridhar: Added a link to Acute's export file

2012-03-14T05:45:59Z

Added a link to Acute's export file

Sridhar: /* Method 2 */

2011-11-29T07:52:32Z

Method 2

Sridhar: Added Method 2 in /* How to show excerpts with post thumbnails in Posts page and archive pages */

2011-11-29T07:46:42Z

Added Method 2 in - How to show excerpts with post thumbnails in Posts page and archive pages

Sridhar: Added Method 1 of = How to show excerpts with post thumbnails in Posts page and archive pages =

2011-11-29T05:40:12Z

Added Method 1 of = How to show excerpts with post thumbnails in Posts page and archive pages =

Sridhar: /* How to add a logo in the header module */

2011-10-26T11:22:31Z

How to add a logo in the header module

@@ Line 13: / Line 13: @@
 When a Custom Menu widget is used in Header module, it gets styled automatically as can be seen in the demo site.
-To get the same styling working in a non Header module, like say, a widget bar module, add [http://cl.ly/310h0p42312I2L3T3x40 this] CSS code at end of your child theme's style.css.
+To get the same styling working in a non Header module, like say, a widget bar module, add [http://pastebin.com/FWKnNYvW this] CSS code at end of your child theme's style.css.
 Note: In the CSS code, "1" in ".builder-module-1" must be changed to match the position of module from the top.

@@ Line 34: / Line 34: @@
 /** styling the search widget in all modules */
-.builder-module .widget_search .widget-title {
+/*.builder-module .widget_search .widget-title {
 	display: none;
 	visibility: hidden;
+}*/
 .builder-module .widget_search input {
 	height: 30px;

← Older revision		Revision as of 07:08, July 7, 2012
Line 16:		Line 16:

	Note: In the CSS code, "1" in ".builder-module-1" must be changed to match the position of module from the top.		Note: In the CSS code, "1" in ".builder-module-1" must be changed to match the position of module from the top.
		+
		+	= How to make search look the same in all modules =
		+
		+	By default, search is styled only for Header and Content modules in Acute and all its color variants (like Acute Blue).
		+
		+	Ex.: Search widget in content module's sidebar will look like this:
		+
		+	[[File:Screen Shot 2012-07-07 at 12.31.19 PM.png]]
		+
		+	where as in a widget bar module's widget, it may look like:
		+
		+	[[File:Screen Shot 2012-07-07 at 12.31.30 PM.png]]
		+
		+	To make the search look the same irrespective of which module it is in, add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
		+
		+	<pre class="brush:css;">
		+	/** styling the search widget in all modules */
		+
		+	.builder-module .widget_search .widget-title {
		+	display: none;
		+	visibility: hidden;
		+	}
		+	.builder-module .widget_search input {
		+	height: 30px;
		+	border: 0;
		+	margin: 0;
		+	right: 0;
		+	float: left;
		+	}
		+	.builder-module .widget_search input[type="text"] {
		+	background: #EEEEEE;
		+	margin-right: 2px;
		+	-webkit-border-top-left-radius: 3px;
		+	-moz-border-top-left-radius: 3px;
		+	border-top-left-radius: 3px;
		+	-webkit-border-bottom-left-radius: 3px;
		+	-moz-border-bottom-left-radius: 3px;
		+	border-bottom-left-radius: 3px;
		+	width: 99.5%;
		+	background: #FFFFFF;
		+	border: 1px solid #D1D1D1;
		+	color: #888888;
		+	-webkit-border-radius: 3px;
		+	-moz-border-radius: 3px;
		+	border-radius: 3px;
		+	}
		+	.builder-module .widget_search input[type="text"]:focus {
		+	background: #FFFFFF;
		+	color: #333333;
		+	-webkit-box-shadow: inset #D1D1D1 0 0 2px;
		+	-moz-box-shadow: inset #D1D1D1 0 0 2px;
		+	box-shadow: inset #D1D1D1 0 0 2px;
		+	}
		+	.builder-module .widget_search input[type="submit"] {
		+	width: 22px;
		+	height: 22px;
		+	margin-top: 6px !important;
		+	margin-left: -25px !important;
		+	background: url('images/search.png') no-repeat;
		+	text-indent: -9999px;
		+	}
		+	.builder-module .widget_search input[type="submit"]:hover {
		+	cursor: pointer;
		+	}
		+	.builder-module .right .widget_search,
		+	.builder-module .left .widget_search {
		+	float: right;
		+	}
		+	.builder-module .builder-module-sidebar .widget_search {
		+	width: 95%;
		+	/padding: 0;/
		+	background: none;
		+	border: 0;
		+	-moz-box-shadow: none;
		+	-webkit-box-shadow: none;
		+	box-shadow: none;
		+	}
		+	</pre>

	= How to set default text in search field =		= How to set default text in search field =

@@ Line 13: / Line 13: @@
 When a Custom Menu widget is used in Header module, it gets styled automatically as can be seen in the demo site.
-To get the same styling working in a non Header module, like say, a widget bar module, add [http://d.pr/IbQU this] CSS code at end of your child theme's style.css.
+To get the same styling working in a non Header module, like say, a widget bar module, add [http://cl.ly/310h0p42312I2L3T3x40 this] CSS code at end of your child theme's style.css.
 Note: In the CSS code, "1" in ".builder-module-1" must be changed to match the position of module from the top.

← Older revision		Revision as of 11:42, May 31, 2012
Line 6:		Line 6:

	[http://demos.ithemes.com/acute/files/builder-export-data/export-4e779144461d49.13772860/builder-export-acute-export.zip Click here to download]		[http://demos.ithemes.com/acute/files/builder-export-data/export-4e779144461d49.13772860/builder-export-acute-export.zip Click here to download]
		+
		+	To import this zip file, go to My Theme -> Settings -> Import / Export.

	= How to style navigation menu in non Header module =		= How to style navigation menu in non Header module =

← Older revision		Revision as of 05:45, March 14, 2012
Line 1:		Line 1:
	[http://demos.ithemes.com/acute/ Demo Site]		[http://demos.ithemes.com/acute/ Demo Site]
		+
		+	= Demo site Layouts & Views export files =
		+
		+	== Acute ==
		+
		+	[http://demos.ithemes.com/acute/files/builder-export-data/export-4e779144461d49.13772860/builder-export-acute-export.zip Click here to download]

	= How to style navigation menu in non Header module =		= How to style navigation menu in non Header module =

@@ Line 155: / Line 155: @@
 [[File:My-Test-Site-2011-11-29-12-55-11.jpg|800px|thumb|none]]
-This method involves applying "Teasers Layout - Image Left" extension, as is or modified to the layouts being used for homepage and archives.
+This method involves applying "Teasers Layout - Image Left" extension, as is or modified to the layouts being used for Posts page and archives.
 The default excerpt length (number of words) in this extension is 60.
 The default post thumbnail dimensions in this extension is 150x200.
-If you do not wish to make any changes to the above values, the following steps need not be performed. Just apply this extension to your homepage layout and archives/category pages layout (via My Theme -> Layouts & Views -> Views).
+If you do not wish to make any changes to the above values, the following steps need not be performed. Just apply this extension to your Posts page layout and archives/category pages layout (via My Theme -> Layouts & Views -> Views).
 If you wish to change excerpt length and/or post thumbnail dimensions, do these steps:
@@ Line 184: / Line 184: @@
 </pre>
-'''3.''' Apply this extension to your homepage layout and archives/category pages layout (via My Theme -> Layouts & Views -> Views).
+'''3.''' Apply this extension to your Posts page layout and archives/category pages layout (via My Theme -> Layouts & Views -> Views).

← Older revision		Revision as of 07:46, November 29, 2011
Line 152:		Line 152:

	== Method 2 ==		== Method 2 ==
		+
		+	[[File:My-Test-Site-2011-11-29-12-55-11.jpg\|800px\|thumb\|none]]
		+
		+	This method involves applying "Teasers Layout - Image Left" extension, as is or modified to the layouts being used for homepage and archives.
		+
		+	The default excerpt length (number of words) in this extension is 60.
		+	The default post thumbnail dimensions in this extension is 150x200.
		+
		+	If you do not wish to make any changes to the above values, the following steps need not be performed. Just apply this extension to your homepage layout and archives/category pages layout (via My Theme -> Layouts & Views -> Views).
		+
		+	If you wish to change excerpt length and/or post thumbnail dimensions, do these steps:
		+
		+	'''1.''' Copy/upload wp-content/themes/Builder/extensions/post-teasers-left to wp-content/themes/BuilderChild-Acute-Blue/extensions.
		+
		+	In the above "BuilderChild-Acute-Blue" should be replaced with the Acute child theme currently being used. "extensions" folder will not be present by default in any child theme. It should be created in this case.
		+
		+	'''2.''' Edit wp-content/themes/BuilderChild-Acute-Blue/extensions/functions.php.
		+
		+	To change excerpt length, change 60 in the following to your desired value.
		+
		+	<pre class="brush:php;">
		+	function excerpt_length( $length ) {
		+	return 60;
		+	}
		+	</pre>
		+
		+	To change post thumbnail dimensions, edit the following in lib/image-size.php:
		+
		+	<pre class="brush:php;">
		+	add_image_size( 'it-teaser-thumb', 150, 200, true );
		+	</pre>
		+
		+	'''3.''' Apply this extension to your homepage layout and archives/category pages layout (via My Theme -> Layouts & Views -> Views).

← Older revision		Revision as of 05:40, November 29, 2011
Line 71:		Line 71:
	</pre>		</pre>

−	= ~~Item 4~~ =	+	= How to show excerpts with post thumbnails in Posts page and archive pages =
		+
		+	All child themes in Acute series use
		+
		+	<pre class="brush:php;">
		+	<?php the_content( __( 'Read More...', 'it-l10n-BuilderChild-Acute-Blue' ) ); ?>
		+	</pre>
		+
		+	for the display of content.
		+
		+	To get more link to appear in the posts, all you have to do is edit the posts and insert more quicktag (<code><!–more–></code> when in HTML view). Wherever the more quicktag is present, the post gets cut off at that point with a "Read More..." link to read the rest of the post.
		+
		+	If you like to use the_excerpt() instead of the_content() so that posts automatically get cut off after a set number of words, follow one of the two methods below:
		+
		+	== Method 1 ==
		+
		+	[[File:My-Test-Site-2011-11-29-11-01-13.jpg\|800px\|thumb\|none]]
		+
		+	'''1.''' Edit child theme's ''content.php''.
		+
		+	Change
		+
		+	<pre class="brush:php;">
		+	<!-- post content -->
		+	<div class="entry-content clearfix">
		+	<?php the_content( __( 'Read More...', 'it-l10n-BuilderChild-Acute-Blue' ) ); ?>
		+	</pre>
		+
		+	to
		+
		+	<pre class="brush:php;">
		+	<?php if (has_post_thumbnail()) { ?>
		+	<div class="front-page-thumbnail">
		+	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('front-page-thumbnail'); ?></a>
		+	</div>
		+	<?php } ?>
		+	<!-- post content -->
		+	<div class="entry-content clearfix">
		+	<?php //the_content( __( 'Read More...', 'it-l10n-BuilderChild-Acute-Blue' ) ); ?>
		+	<?php the_excerpt(); ?>
		+	</pre>
		+
		+	'''2.''' Edit child theme's ''functions.php''.
		+
		+	Add the following at end:
		+
		+	<pre class="brush:php;">
		+	function acute_excerpt_length($length) {
		+	return 65;
		+	}
		+	add_filter('excerpt_length', 'acute_excerpt_length');
		+	function acute_excerpt_more($excerpt) {
		+	global $post;
		+	return '<br /><p class="readmore"><a class="more-link" href="' . get_permalink($post->ID) . '">Read More →</a></p>';
		+	}
		+	add_filter('excerpt_more', 'acute_excerpt_more');
		+
		+
		+	add_image_size('front-page-thumbnail', 150, 150, true);
		+	</pre>
		+
		+	In the above, excerpt length can be changed from 65 to your desired number of words that should appear in each excerpt.
		+
		+	'''3.''' Edit child theme's ''style.css''.
		+
		+	Add the following at end:
		+
		+	<pre class="brush:css;">
		+	.front-page-thumbnail {
		+	float: left;
		+	margin-right: 1em;
		+	margin-top: 1.6em;
		+	}
		+
		+	.blog .entry-content, .archive .entry-content {
		+	clear: none;
		+	margin-top: 0;
		+	}
		+	</pre>
		+
		+	== Method 2 ==

@@ Line 52: / Line 52: @@
 </pre>
-<u>Note</u>: In the above, change the URLs appropriately.
+<u>Note</u>: In the above, change the URLs, width and height appropriately.
 '''3.''' Add the following at the end of child theme's style.css: