Ionic

(Difference between revisions)
Jump to: navigation, search
(Added "How to hide comment form on Pages")
(How to hide comment form 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
 
# 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:
 
Add the following at the end of your theme's style.css:
  
 
<pre class="brush:css;">
 
<pre class="brush:css;">
.page #respond {
+
.page .nocomments, .page #respond {
 
     display: none;
 
     display: none;
 
}
 
}
 
</pre>
 
</pre>

Revision as of 23:09, April 4, 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.

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 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;
}
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox