Ionic - Revision history

Sridhar: Added = How to set up Ionic like the demo site =

2012-04-28T07:13:32Z

Added = How to set up Ionic like the demo site =

Sridhar: Added = Demo Site Layouts & Views export download links =

2012-03-17T01:56:24Z

Added = Demo Site Layouts & Views export download links =

Sridhar at 02:11, December 12, 2011

2011-12-12T02:11:03Z

Sridhar at 02:10, December 12, 2011

2011-12-12T02:10:44Z

Sridhar: /* Adding date below post titles on Posts page */

2011-12-12T01:38:58Z

Adding date below post titles on Posts page

Sridhar: /* How to link featured image thumbnails to a user defined URL */

2011-04-10T07:00:39Z

How to link featured image thumbnails to a user defined URL

Sridhar: Added "How to link featured image thumbnails to a user defined URL"

2011-04-10T06:58:43Z

Added "How to link featured image thumbnails to a user defined URL"

Sridhar: /* How to show clickable blog title, tagline and text like as header */

2011-04-08T05:01:20Z

How to show clickable blog title, tagline and text like as header

Sridhar: Added "How to show clickable blog title, tagline and text as header"

2011-04-08T04:59:49Z

Added "How to show clickable blog title, tagline and text as header"

Sridhar: /* How to hide comment form on Pages */

2011-04-05T05:09:30Z

How to hide comment form on Pages

← Older revision		Revision as of 07:13, April 28, 2012
Line 6:		Line 6:

	[http://demos.ithemes.com/ionic-green/ Ionic Green]		[http://demos.ithemes.com/ionic-green/ Ionic Green]
		+
		+	= How to set up Ionic like the demo site =
		+
		+	The instructions below are for Ionic, but they should work for other color variants as well.
		+
		+	After you have activated Ionic (while ensuring that Builder core is also present in wp-content/themes), the site might look like this:
		+
		+	[[File:2012-04-28 11-16-04.png\|595px\|thumb\|none]]
		+
		+	To set it up so it looks like the [http://demos.ithemes.com/ionic/ demo site], follow the steps below:
		+
		+	'''1.''' Create the Pages that you want to have in your site.
		+
		+	'''2.''' Go to Appearance -> Menus. Create a menu titled <code>Top of the Menu to You</code> and add your desired items that should appear in the nav bar at the top. Create another menu titled <code>Subnav</code> having the items that should appear in the nav bar at the bottom above the footer. If you would like to import the menus used in demo site, download [http://cl.ly/0C0L0A0e243j17170z19 this] file and go to Tools -> Import -> WordPress to import them.
		+
		+	'''3.''' Download [http://demos.ithemes.com/ionic/files/builder-export-data/export-4f63eea1e34c47.83377325/builder-export-ionic-export.zip this] zip file containing Ionic demo site's layouts & views.
		+
		+	'''4.''' In WordPress dashboard, go to My Theme -> Settings -> Import / Export. Click on Import Data. Click Browse, select the zip file from the above step and import it. If you are setting up the site afresh, i.e., there are no layouts or views that you have created or customized, select the Replace option during import process.
		+
		+	'''5.''' Go to My Theme -> Layouts & Views. Edit "960 Home" layout. Modify the first Navigation module (below Image module) and set Navigation Type to "Top of the Menu to You". Similarly modify the second Navigation module (above the Footer module) and set its Navigation Type to "Subnav". Edit "960 Inside" layout and set Navigation Type of Navigation module to "Top of the Menu to You". You might want to similarly edit other layouts which you want to use in your site.
		+
		+	'''6.''' Go to Appearance -> Editor. Paste the following at the end:
		+
		+	<pre class="brush:css;">
		+	/* Custom styles */
		+
		+	.builder-module-1 {
		+	padding-top: 0;
		+	}
		+	</pre>
		+
		+	'''7.''' Add Posts. The post thumbnails that appear above the titles are [http://min.us/mzG4udBo3 featured images] that are added to each post.
		+
		+	'''8.''' In inner pages, to add widgets to modules' sidebars go to any inner page, hover on Builder in the top WordPress bar and click on "Manage Widgets for this Layout".
		+
		+	That's it!

	= Demo Site Layouts & Views export download links =		= Demo Site Layouts & Views export download links =

← Older revision		Revision as of 01:56, March 17, 2012
Line 6:		Line 6:

	[http://demos.ithemes.com/ionic-green/ Ionic Green]		[http://demos.ithemes.com/ionic-green/ Ionic Green]
		+
		+	= Demo Site Layouts & Views export download links =
		+
		+	[http://demos.ithemes.com/ionic/files/builder-export-data/export-4f63eea1e34c47.83377325/builder-export-ionic-export.zip Ionic]
		+
		+	[http://demos.ithemes.com/ionic-sky/files/builder-export-data/export-4f63eed637f434.62719914/builder-export-ionic-sky-export.zip Ionic Sky]
		+
		+	[http://demos.ithemes.com/ionic-green/files/builder-export-data/export-4f63ef05e296e7.47966208/builder-export-ionic-green-export.zip Ionic Green]
		+
		+	To import this zip file, go to My Theme -> Settings -> Import / Export.

	=How to have navigation bar match the width of container=		=How to have navigation bar match the width of container=

← Older revision		Revision as of 02:11, December 12, 2011
Line 1:		Line 1:
−	Demo Sites	+	Demo Sites:

	[http://demos.ithemes.com/ionic/ Ionic]		[http://demos.ithemes.com/ionic/ Ionic]

← Older revision		Revision as of 02:10, December 12, 2011
Line 1:		Line 1:
		+	Demo Sites
		+
		+	[http://demos.ithemes.com/ionic/ Ionic]
		+
		+	[http://demos.ithemes.com/ionic-sky/ Ionic Sky]
		+
		+	[http://demos.ithemes.com/ionic-green/ Ionic Green]
		+
	=How to have navigation bar match the width of container=		=How to have navigation bar match the width of container=

@@ Line 50: / Line 50: @@
 =Adding date below post titles on Posts page=
 Edit index.php under wp-content/themes/BuilderChild-Ionic
-Change
+Locate
 <pre class="brush:php;">
-<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
+<h3 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
+						</div>
-			<!--post text with the read more link -->
 </pre>
-to
+and below it the following:
 <pre class="brush:php;">
 			<div class="date">
 				<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
@@ Line 72: / Line 71: @@
 				<span class="year"><?php the_time( 'Y' ); ?></span>
 			</div>
 </pre>
 <gallery widths=200px caption="Before and After">

@@ Line 335: / Line 335: @@
 </pre>
-Change "auction_url" in the above to the name of field name(all small letters with spaces replaced by underscores).
+Change "auction_url" in the above to the name of field name (all small letters with spaces replaced by underscores).
 Edit theme's archive.php similarly.

← Older revision		Revision as of 06:58, April 10, 2011
Line 306:		Line 306:
	}		}
	</pre>		</pre>
		+
		+	=How to link featured image thumbnails to a user defined URL=
		+
		+	'''1.''' Install and activate [http://wordpress.org/extend/plugins/verve-meta-boxes/ Verve Meta Boxes] plugin.
		+
		+	'''2.''' Go to Tools -> Verve Meta Boxes. Create a new Meta Box and add a field into which the URL can be entered while a post is being added/edited.
		+
		+	[[Image:Verve-meta-box.png\|807px\|none]]
		+
		+	'''3.''' When in the Post edit screen, enter the URL you would like the featured image to link to.
		+
		+	[[Image:Verve-meta-box-2.png]]
		+
		+	and publish/update the post.
		+
		+	'''4.''' Edit theme's index.php
		+
		+	Change
		+
		+	<pre class="brush:php;">
		+	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'front-page-thumbnail' ); ?></a>
		+	</pre>
		+
		+	to
		+
		+	<pre class="brush:php;">
		+	<a href="<?php $values = get_post_custom_values("auction_url"); echo $values[0]; ?> "><?php the_post_thumbnail( 'front-page-thumbnail' ); ?></a>
		+	</pre>
		+
		+	Change "auction_url" in the above to the name of field name(all small letters with spaces replaced by underscores).
		+
		+	Edit theme's archive.php similarly.

@@ Line 231: / Line 231: @@
 # any other desired properties like the font family, font size, color, left and top padding of blog title text and tagline
-= How to show clickable blog title, tagline and text like as header =
+= How to show clickable blog title, tagline and text as header =
 [[Image:Builder Test Site 1302236130475.png|800px|none]]

@@ Line 230: / Line 230: @@
 # height for ".builder-module-2" to match that of the image being set as its background
 # any other desired properties like the font family, font size, color, left and top padding of blog title text and tagline
 =How to hide comment form/"Comments are closed" message on Pages=

@@ Line 231: / Line 231: @@
 # any other desired properties like the font family, font size, color, left and top padding of blog title text and tagline
-=How to hide comment form on Pages=
+=How to hide comment form/"Comments are closed" message on Pages=
 Add the following at the end of your theme's style.css:
 <pre class="brush:css;">
-.page #respond {
+.page .nocomments, .page #respond {
      display: none;
+}
 </pre>