Ionic

(Difference between revisions)
Jump to: navigation, search
m (How to have navigation bar match the width of container)
(Added "How to show a certain number of posts full width in the content area with remaining posts in columns")
Line 1: Line 1:
==How to have navigation bar match the width of container==
+
=How to have navigation bar match the width of container=
  
 
Screenshots: [http://d.pr/FUT9 Before] | [http://d.pr/Ochy After]
 
Screenshots: [http://d.pr/FUT9 Before] | [http://d.pr/Ochy After]
Line 49: Line 49:
 
Thanks to [http://ithemes.com/forum/index.php?/topic/10133-change-navigation-size-for-iconic-child-theme/ Dana].
 
Thanks to [http://ithemes.com/forum/index.php?/topic/10133-change-navigation-size-for-iconic-child-theme/ Dana].
  
==Adding date below post titles on Posts page==
+
=Adding date below post titles on Posts page=
  
 
Edit index.php under wp-content/themes/BuilderChild-Ionic
 
Edit index.php under wp-content/themes/BuilderChild-Ionic
Line 81: Line 81:
 
</gallery>
 
</gallery>
  
==Changing the width of each block on the Posts page==
+
=Changing the width of each block on the Posts page=
  
 
Add the following at the end of your theme's style.css:
 
Add the following at the end of your theme's style.css:
Line 93: Line 93:
 
Change 280px in the above to your desired value.
 
Change 280px in the above to your desired value.
  
==Adding a blank item here so TOC gets generated==
+
= How to show a certain number of posts full width in the content area with remaining posts in columns =
 +
 
 +
<gallery widths=200px caption="Before and After">
 +
File:before-wide.png
 +
File:after-wide.png
 +
</gallery>
 +
 
 +
Take a backup of your theme's current index.php and replace its content with the code [http://pastebin.com/ws9LUvdG 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.
 +
 
 +
<pre class="brush:php;">
 +
$my_query->query('paged='.$paged . '&posts_per_page=' . get_option('posts_per_page') . '&cat=-24');
 +
</pre>
 +
 
 +
Add the following at the end of your theme's style.css:
 +
 
 +
<pre class="brush: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;
 +
}
 +
</pre>
 +
 
 +
If your blog posts have thumbnails, it's going to look like this: http://d.pr/7MiU

Revision as of 00:33, February 7, 2011

Contents

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

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

Change

<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
			
			<!--post text with the read more link -->

to

<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">
				<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>
			
			<!--post text with the read more link -->

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.

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, it's going to look like this: http://d.pr/7MiU

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox