Ionic

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
m (How to show blog title and tagline on top of a background image as header)
(Added = How to set up Ionic like the demo site =)
 
(12 intermediate revisions by one user not shown)
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 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 =
 +
 +
[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=
  
Line 50: Line 104:
  
 
=Adding date below post titles on Posts page=
 
=Adding date below post titles on Posts page=
 +
 +
[[Image:2011-12-12 07-06-40.jpg|672px|none]]
  
 
Edit index.php under wp-content/themes/BuilderChild-Ionic
 
Edit index.php under wp-content/themes/BuilderChild-Ionic
  
Change
+
Locate
  
 
<pre class="brush:php;">
 
<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>
 
</pre>
  
to
+
and below it the following:
  
 
<pre class="brush:php;">
 
<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>
 
 
 
<div class="date">
 
<div class="date">
 
<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
 
<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
Line 72: Line 125:
 
<span class="year"><?php the_time( 'Y' ); ?></span>
 
<span class="year"><?php the_time( 'Y' ); ?></span>
 
</div>
 
</div>
 
<!--post text with the read more link -->
 
 
</pre>
 
</pre>
 +
 +
[[File:2011-12-12 07-04-06.png|800px|thumb|none]]
  
 
<gallery widths=200px caption="Before and After">
 
<gallery widths=200px caption="Before and After">
Line 92: Line 145:
  
 
Change 280px in the above to your desired value.
 
Change 280px in the above to your desired value.
 +
 +
=== To show posts in a typical linear pattern instead of columns ===
 +
 +
Add the following at the end of your theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.builder-module-content .magazine-post {
 +
    width: 100% !important;
 +
}
 +
 +
.builder-module-content .builder-module-element {
 +
padding-right: 1em;
 +
}
 +
</pre>
  
 
= How to show a certain number of posts full width in the content area with remaining posts in columns =
 
= How to show a certain number of posts full width in the content area with remaining posts in columns =
Line 163: Line 230:
 
= How to show blog title and tagline on top of a background image as header =
 
= How to show blog title and tagline on top of a background image as header =
  
[[Image:Text-on-top-imagebkgrd.png|200px|none]]
+
[[Image:Blogtitle-tagline-backgroundimage.png|200px|none]]
  
 
'''1.''' Edit layout and add a HTML module.
 
'''1.''' Edit layout and add a HTML module.
Line 181: Line 248:
 
<pre class="brush:css;">
 
<pre class="brush:css;">
 
.builder-module-2 {
 
.builder-module-2 {
background: url("http://mycreditcrunch.info/wp-content/uploads/2011/02/art_creditcrunch9-resized-image-960x150.jpg") no-repeat;
+
background: url("http://files.droplr.com/files/12530702/mzh9.GroundhogBabies_EN-US1387348879.jpg") no-repeat;
 
height: 150px;
 
height: 150px;
 
}
 
}
Line 194: Line 261:
  
 
#blog-title {
 
#blog-title {
     padding-top: 1.2em;
+
     padding-top: 0.2em;
 
     font-size: 2.5em;
 
     font-size: 2.5em;
     padding-left: 2.2em;   
+
     padding-left: 0.5em;   
 
}
 
}
  
Line 202: Line 269:
 
     color: #FFFFFF;     
 
     color: #FFFFFF;     
 
     font-size: 2em;
 
     font-size: 2em;
     padding-left: 2.8em;
+
     padding-left: 0.7em;
 +
}
 +
 
 +
#blog-title a {
 +
    color: #d1e8e8;
 
}
 
}
 
</pre>
 
</pre>
Line 212: Line 283:
 
# height for ".builder-module-2" to match that of the image being set as its background
 
# 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
 
# 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 as header =
 +
 +
[[Image:Builder Test Site 1302236130475.png|800px|none]]
 +
 +
'''1.''' Add a HTML module as the first module in your layout.
 +
 +
Paste the following in its text area:
 +
 +
<pre class="brush:php;">
 +
<div class="blog-name"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></div>
 +
 +
<div class="tagline"><?php bloginfo('description'); ?></div>
 +
 +
<div class="highlights"><ul><li>Support Groups</li> <li>Discipleship Classes</li><li>Healing Prayer</li><li> Training & Networking</li></div>
 +
</pre>
 +
 +
Enable PHP.
 +
 +
'''2.''' Add the following at the end of your theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.blog-name, .tagline, .highlights {
 +
font-weight: bold;
 +
color: #5A5178;
 +
}
 +
 +
.builder-module-1 .builder-module-element {
 +
text-align: center;
 +
}
 +
 +
.builder-module-1  {
 +
background: #FFFFFF;
 +
}
 +
 +
.blog-name {
 +
font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', arial, sans-serif;
 +
font-size: 4em;
 +
}
 +
 +
.tagline {
 +
font-family: "Trebuchet MS", sans-serif;
 +
font-size: 1.45em;
 +
font-style: italic;
 +
margin-top: -20px;
 +
}
 +
 +
.highlights {
 +
font-family: "Trebuchet MS", sans-serif;
 +
font-size: 1.15em;
 +
margin: 10px 0 50px 135px;
 +
}
 +
 +
.highlights ul {
 +
list-style: disc outside none;
 +
}
 +
 +
.highlights li {
 +
float: left;
 +
margin-right: 25px;
 +
}
 +
 +
.highlights li:first-child {
 +
list-style: none;
 +
}
 +
</pre>
 +
 +
=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 .nocomments, .page #respond {
 +
    display: none;
 +
}
 +
</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.

Latest revision as of 01:13, April 28, 2012

Demo Sites:

Ionic

Ionic Sky

Ionic Green

Contents

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:

2012-04-28 11-16-04.png

To set it up so it looks like the 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 Top of the Menu to You and add your desired items that should appear in the nav bar at the top. Create another menu titled Subnav 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 this file and go to Tools -> Import -> WordPress to import them.

3. Download 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:

/* Custom styles */

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

7. Add Posts. The post thumbnails that appear above the titles are 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

Ionic

Ionic Sky

Ionic Green

To import this zip file, go to My Theme -> Settings -> Import / Export.

How to have navigation bar match the width of container

Screenshots: Before | After

Edit theme's style.css.

Change

.builder-module-navigation {
	font-size: 1em;
	background: transparent url('images/nav-bg.png') bottom;
	display: block;
	width: 99%;
	margin: 0em auto;
}

to

.builder-module-navigation {
	font-size: 1em;
	background: transparent url('images/nav-bg.png') bottom;
	display: block;
	width: 100%;
	margin: 0em auto;
}

and

.builder-module-navigation ul {
	float: left;
	display: block;
	background: url('images/nav-top-shadow.png') repeat-x;
	margin: 0;
	padding: 0;
	width: 99%;
}

to

.builder-module-navigation ul {
	float: left;
	display: block;
	background: url('images/nav-top-shadow.png') repeat-x;
	margin: 0;
	padding: 0;
	width: 100%;
}

Thanks to Dana.

Adding date below post titles on Posts page

2011-12-12 07-06-40.jpg

Edit index.php under wp-content/themes/BuilderChild-Ionic

Locate

<h3 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
						</div>

and below it the following:

			<div class="date">
				<span class="weekday"><?php the_time( 'l' ); ?><span class="weekday-comma">,</span></span>
				<span class="month"><?php the_time( 'F' ); ?></span>
				<span class="day"><?php the_time( 'j' ); ?><span class="day-suffix"><?php the_time( 'S' ); ?></span><span class="day-comma">,</span></span>
				<span class="year"><?php the_time( 'Y' ); ?></span>
			</div>
2011-12-12 07-04-06.png

Changing the width of each block on the Posts page

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

.builder-module-content .magazine-post {
    width: 280px !important;
}

Change 280px in the above to your desired value.

To show posts in a typical linear pattern instead of columns

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

.builder-module-content .magazine-post {
    width: 100% !important;
}

.builder-module-content .builder-module-element {
	padding-right: 1em;
}

How to show a certain number of posts full width in the content area with remaining posts in columns

Take a backup of your theme's current index.php and replace its content with the code here.

Set the value of $wideposts in line 23 to the number of wide posts that should appear above the posts in columns.

If you want to filter the query to do stuff like excluding posts from a certain category by passing parameters, then modify line 22.

For example, changing it to the following will exclude the posts from a category whose ID is 24.

$my_query->query('paged='.$paged . '&posts_per_page=' . get_option('posts_per_page') . '&cat=-24');

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

.widecol {
    padding: 0 10px;
}

.widecol h3 {
	font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', arial, sans-serif;
	margin-top: .2em;
	margin-bottom: 0;
	font-size: 2.8em;
}

.widecol h3 a {
	color: #333;
	margin-top: 0;
	margin-bottom: 0;
}

.widecol h3 a:hover {
	color: #777;
}

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

.widecol .post-content {
	clear: none;
}

If your blog posts have thumbnails, Posts page is going to look like this: http://d.pr/7MiU

Thanks to: Ronald.

How to create a page that shows posts from a category

Let's say there's a category called "Music News" in your site.

If pretty permalinks are enabled, then posts from this category will appear at http://www.yoursite.com/category/music-news w/o us having to do anything special.

This section will provide instructions on how to create a Page template which when applied to a Page will show the posts from a specified category besides the above standard category page.

  1. Download http://pastebin.com/b67Fg3Qu, (re)name it as page-customarchive.php and upload it to your theme directory.
  2. Create a new blank Page, set the template to "My Custom Archive Page" and publish it.

How to show blog title and tagline on top of a background image as header

Blogtitle-tagline-backgroundimage.png

1. Edit layout and add a HTML module.

Paste this in the module's text area:

<div id="blog-title"><a href="<?php bloginfo('url'); ?>" title="Home"><?php bloginfo('name'); ?></a></div>

<div id="tagline"><?php bloginfo('description'); ?></div>

Enable PHP.

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

.builder-module-2 {
	background: url("http://files.droplr.com/files/12530702/mzh9.GroundhogBabies_EN-US1387348879.jpg") no-repeat;
	height: 150px;
}

.builder-module-after-navigation {
    padding-top: 0;
}

#blog-title, #tagline {     
    font-family: 'Yanone Kaffeesatz',trebuchet,arial,sans-serif;
}

#blog-title {
    padding-top: 0.2em;
    font-size: 2.5em;
    padding-left: 0.5em;  
}

#tagline {
    color: #FFFFFF;    
    font-size: 2em;
    padding-left: 0.7em;
}

#blog-title a {
    color: #d1e8e8;
}

In the above, change

  1. the number in ".builder-module-2" to match the module's position from top in the layout
  2. URL of background image for ".builder-module-2"
  3. height for ".builder-module-2" to match that of the image being set as its background
  4. 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 as header

Builder Test Site 1302236130475.png

1. Add a HTML module as the first module in your layout.

Paste the following in its text area:

<div class="blog-name"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></div>

<div class="tagline"><?php bloginfo('description'); ?></div>

<div class="highlights"><ul><li>Support Groups</li> <li>Discipleship Classes</li><li>Healing Prayer</li><li> Training & Networking</li></div>

Enable PHP.

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

.blog-name, .tagline, .highlights {	
	font-weight: bold;
	color: #5A5178;	
}

.builder-module-1 .builder-module-element {
	text-align: center;
}

.builder-module-1  {
	background: #FFFFFF;
}

.blog-name {
	font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', arial, sans-serif;
	font-size: 4em;
}

.tagline {
	font-family: "Trebuchet MS", sans-serif;
	font-size: 1.45em;
	font-style: italic;
	margin-top: -20px;
}

.highlights {
	font-family: "Trebuchet MS", sans-serif;
	font-size: 1.15em;
	margin: 10px 0 50px 135px;
}

.highlights ul {
	list-style: disc outside none;
}

.highlights li {
	float: left;
	margin-right: 25px;
}

.highlights li:first-child {
	list-style: none;
}

How to hide comment form/"Comments are closed" message on Pages

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

.page .nocomments, .page #respond {
    display: none;
}

How to link featured image thumbnails to a user defined URL

1. Install and activate 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.

Verve-meta-box.png

3. When in the Post edit screen, enter the URL you would like the featured image to link to.

Verve-meta-box-2.png

and publish/update the post.

4. Edit theme's index.php

Change

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'front-page-thumbnail' ); ?></a>

to

<a href="<?php $values = get_post_custom_values("auction_url"); echo $values[0]; ?> "><?php the_post_thumbnail( 'front-page-thumbnail' ); ?></a>

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.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox