BuilderChild-Acute

(Difference between revisions)
Jump to: navigation, search
(Added a link to Acute's export file)
m (How to make search look the same in all modules)
(3 intermediate revisions by one user not shown)
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 =
Line 11: Line 13:
 
When a Custom Menu widget is used in Header module, it gets styled automatically as can be seen in the demo site.
 
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.
 
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 =

Revision as of 22:43, July 7, 2012

Demo Site

Contents

Demo site Layouts & Views export files

Acute

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

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

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:

Screen Shot 2012-07-07 at 12.31.19 PM.png

where as in a widget bar module's widget, it may look like:

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):

/** 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;
}

How to set default text in search field

Acute-search-text.png

Create a file named searchform.php in the child theme directory having this code:

<?php $search_box_default = __( 'Search site', 'it-l10n-BuilderChild-Acute-Blue' ); ?>
<?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 role="search" method="get" id="searchform" action="<?php echo get_option( 'home' ); ?>/">
	<div>
		<input type="text" value="<?php echo $search_box_value; ?>" name="s" id="s" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
		<input type="submit" id="searchsubmit" value="<?php echo esc_attr__( 'Search', 'it-l10n-BuilderChild-Acute-Blue' ); ?>" />
	</div>
</form>

In the above, change

  1. Search site to the text that you would like to appear by default in the search box.
  2. it-l10n-BuilderChild-Acute-Blue to indicate the particular color variation of Acute. This is only for translation purpose.

How to add a logo in the header module

Logo-in-header-acute.png

1. Edit the layout(s), edit the Header module and add a left sidebar that is at least as wide as the logo.

Ex.:

For a logo that's 113px wide, here's a screenshot of the module being edited

Logo-in-header-acute-1.png

2. At Appearance -> Widgets, add a text widget into the sidebar of this header module having the code needed to display logo.

Ex.:

<a href="http://localhost/builder3"><img src="http://localhost/builder3/wp-content/themes/BuilderChild-Acute-Blue/images/logo.png" width="113" height="113" alt="home" /></a>

Note: In the above, change the URLs, width and height appropriately.

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

.right .site-title, .right .site-tagline {
    text-align: left;
}

.builder-module-1 .builder-module-sidebar {
    padding-top: 0;
    padding-bottom: 0;
}

.builder-module-1 .widget {
    padding: 0;
}

How to show excerpts with post thumbnails in Posts page and archive pages

All child themes in Acute series use

<?php the_content( __( 'Read More...', 'it-l10n-BuilderChild-Acute-Blue' ) ); ?>

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 (<!–more–> 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

My-Test-Site-2011-11-29-11-01-13.jpg

1. Edit child theme's content.php.

Change

<!-- post content -->
						<div class="entry-content clearfix">
							<?php the_content( __( 'Read More...', 'it-l10n-BuilderChild-Acute-Blue' ) ); ?>

to

<?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(); ?>

2. Edit child theme's functions.php.

Add the following at end:

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);

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:

.front-page-thumbnail {
    float: left;
    margin-right: 1em;
    margin-top: 1.6em;
}

.blog .entry-content, .archive .entry-content {
    clear: none;
    margin-top: 0;
}

Method 2

My-Test-Site-2011-11-29-12-55-11.jpg

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 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:

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.

function excerpt_length( $length ) {
			return 60;
		}

To change post thumbnail dimensions, edit the following in lib/image-size.php:

add_image_size( 'it-teaser-thumb', 150, 200, true );

3. Apply this extension to your Posts page layout and archives/category pages layout (via My Theme -> Layouts & Views -> Views).

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox