WordPress › Support » Tag: wordpress loop - Recent Posts

jeffeggleston on "[Plugin: WordPress Loop] Expire Posts"

jeffeggleston — Mon, 09 Jan 2012 20:21:04 +0000

Hello, I am using Wordpress Loop to show a series of movies that are appearing in a theatre. After the movie shows, I want the post to be removed from the plugin loop. I have added custom fields with the key $post_expiration for the expiration date and the format mm/dd/yyyy 00:00:00. How can I use this information in conjunction with the Wordpress Loop plugin? It would be similar to the info in teh following post:
Setting Post Expiration Date
Any help would be greatly appreciated. Thanks!

http://wordpress.org/extend/plugins/wordpress-loop/

scottcarlton on "Show/Hide div in loop"

scottcarlton — Wed, 23 Nov 2011 18:25:26 +0000

Big Bagel, I wanted to thank you for all your help and teaching me some great stuff along the way! Thanks again!

scottcarlton on "Show/Hide div in loop"

scottcarlton — Tue, 22 Nov 2011 22:12:57 +0000

got the toggle working the way I wanted it to with the code bellow.

$(document).ready(function() {
	$('.bio-block').hide();
        $('.show').click(function(event){
            event.preventDefault();
            var sliderContent = $(this).next('.bio-block');
            $('.bio-block').not(sliderContent).hide();
            sliderContent.toggle();
        });
        $('.close').click(function(){
            $(this).parent().hide();
        });
    });

scottcarlton on "Show/Hide div in loop"

scottcarlton — Tue, 22 Nov 2011 19:12:31 +0000

forgot about that. Fixed it and now works. Almost there now. Just have to get it to close div if another div is clicked to open and get the footer to move down when open.
Thanks again for all your help!

Big Bagel on "Show/Hide div in loop"

Big Bagel — Tue, 22 Nov 2011 17:29:17 +0000

The external JavaScript file is currently being added correctly to every page but this one. If you check your site's footer on any other page:

<script type='text/javascript' src='http://scottcarltonblog.net/wp-content/themes/BLANK-Theme/author-toggle.js?ver=3.2.1'></script>

Is the "our-team" page using a custom template? It seems to be missing the footer: get_footer();

If you want to move the file here: wp-content/theme/BLANK-Theme/js/author-toggle.js

Then you just need to alter the second argument of wp_register_script:

add_action( 'wp_enqueue_scripts', 'add_my_js' );

function add_my_js() {
    wp_register_script( 'my-author-js', get_template_directory_uri() . '/js/author-toggle.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'my-author-js' );
}

And, if you want to have it only load on this one page, you can do this:

add_action( 'wp_enqueue_scripts', 'add_my_js' );

function add_my_js() {
    if ( is_page( 8 ) ) {
        wp_register_script( 'my-author-js', get_template_directory_uri() . '/js/author-toggle.js', array( 'jquery' ), false, true );
        wp_enqueue_script( 'my-author-js' );
    }
}

scottcarlton on "Show/Hide div in loop"

scottcarlton — Tue, 22 Nov 2011 14:19:07 +0000

Fixed the class issue and set "a" to .show instead. Then set jquery .show back to .slideToggle

Now just need to get the function working through function.php

scottcarlton on "Show/Hide div in loop"

scottcarlton — Tue, 22 Nov 2011 14:11:59 +0000

Ya, I removed the script from the header. had the script run in the page just to get it working. Can't get the function.php to work with

function add_my_js() {
    wp_register_script( 'my-author-js', get_template_directory_uri() . '/author-toggle.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'my-author-js' );
}

the file is under wp-content/theme/my-theme

Once I remove the code from the page directly and place the code back in the js file with the add_my_js in function.php it doesn't work. Would like to put the file in my js folder under wp-content/theme/my-theme/js

I have been building this theme from scratch. Here is my function.php

Big Bagel on "Show/Hide div in loop"

Big Bagel — Tue, 22 Nov 2011 06:05:31 +0000

The error I pointed out earlier is still there:

<a href="#" class"show">

Of course, should be:

<a href="#" class="show">

That alone would cause the jQuery example I gave to not work. :)

You currently have this in your <head>:

<script type='text/javascript' src='http://scottcarltonblog.net/author-toggle.js'></script>

However, there's no file at that location and it appears to be directly added to your theme's header.php rather than included the proper way with wp_register_script and wp_enqueue_script in your theme's functions.php. Did you already remove that code?

You current jQuery is targeting all <a> tags which is probably not what you want. Did you want two separate buttons for opening and closing (like you have now) instead of a single button that toggles (like your example link)?

Forcing only one div open at a time isn't too hard but before I recommend anything it would best to finalize this part.

scottcarlton on "Show/Hide div in loop"

scottcarlton — Tue, 22 Nov 2011 05:58:28 +0000

Alright we are making headway here. I have got the code working with this

$(document).ready(function(){

$('.hidden').hide();

$('a').click(function(){
$( this ).next('.hidden').show('fast');

$('a.close').click(function(){
$('.hidden').hide('fast');
})
});

});

It allow only the one div to be opened. Now just have to get it opening div and if another is open close it.

scottcarlton on "Show/Hide div in loop"

scottcarlton — Tue, 22 Nov 2011 04:35:57 +0000

$(document).ready(function(){

$('.hidden').hide();

$('a').click(function(){
$('.hidden').show('slow');

$('a.close').click(function(){
$('.hidden').hide('slow');
})
});

});

scottcarlton on "Show/Hide div in loop"

scottcarlton — Tue, 22 Nov 2011 04:32:53 +0000

Ok I have got it to work with this. But it opens all the hidden divs. Now I need to had a parent/child to it if I am correct.

I had to post the code directly into the page though, because it's not working through function.php

scottcarlton on "Show/Hide div in loop"

scottcarlton — Tue, 22 Nov 2011 04:06:29 +0000

Doesn't seem to be loading the js file.

scottcarlton on "Show/Hide div in loop"

scottcarlton — Tue, 22 Nov 2011 03:42:31 +0000

page is up. here

Still not working. Right now just copy pasted as you say just to see if I could get it working. There will be multiple ones though because it is in the query post loop.

Thanks for your help. This defiantly help me understand this alot more.

Big Bagel on "Show/Hide div in loop"

Big Bagel — Tue, 22 Nov 2011 00:25:39 +0000

That's enough to see how everything is structured. :)

So, when the title and image that goes along with it (currently wrapped in an <a>) is clicked, the "hidden" <div> should toggle on and off? Will there be multiple copies of this code on the same page or only one? As I mentioned earlier, you probably want to go with jQuery. Here's an example that should work with the code you gave:

jQuery( document ) . ready( function( $ ) {
    $( '.show' ) . click( function() {
        $( this ) . next( '.hidden' ) . slideToggle( 'fast' );
    } );
} );

This essentially says, when the page is done loading, if somebody clicks on any element with the class "show", that the following element with the class "hidden" should be toggled.

You can put that in a separate file, upload it wherever you want (probably in your theme's folder) then simply include it in whatever page you want it to work on. For example, if you name it author-toggle.js and put it directly in your theme's folder (wp-content/themes/your-current-theme) then, to include it, you can add something like this to your theme's functions.php:

add_action( 'wp_enqueue_scripts', 'add_my_js' );

function add_my_js() {
    wp_register_script( 'my-author-js', get_template_directory_uri() . '/author-toggle.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'my-author-js' );
}

If you wanted to only have the script load on certain pages you can wrap it up in a conditional. For example, if you only wanted it on the page with ID = 7, then:

add_action( 'wp_enqueue_scripts', 'add_my_js' );

function add_my_js() {
    if ( is_page( 7 ) ) {
        wp_register_script( 'my-author-js', get_template_directory_uri() . '/author-toggle.js', array( 'jquery' ), false, true );
        wp_enqueue_script( 'my-author-js' );
    }
}

Here are reference pages to some of the things I used in my examples:

Function Reference/wp register script
Function Reference/wp enqueue script
Function Reference/get template directory uri
http://api.jquery.com/slideToggle/
http://api.jquery.com/next/

Of course, if you plan on editing a theme, it's always a good idea to use a child theme:

Child Themes

If you do use a child theme, my example for functions.php might need a little altering depending on where you upload the JavaScript file.

Also, it was probably just lost in the move to pastebin, but make sure there's an equals in there:

<a href"#" class"show">

Once you get a working page up I'll be happy to troubleshoot any problems. I haven't exactly tested may examples to make sure there aren't any errors. :)

scottcarlton on "Show/Hide div in loop"

scottcarlton — Mon, 21 Nov 2011 17:39:54 +0000

Here is a link to what I am trying to accomplish so what.

So I have my get_title and professional title with image in a box with the "a href" attribute and get_content and contact info in a hidden div until clicked. All in a loop.

here is a link to the code....

Wish I had more, but as I work on this will try and get a page up for you to see. Thanks again!

Big Bagel on "Show/Hide div in loop"

Big Bagel — Mon, 21 Nov 2011 15:20:02 +0000

If providing a link to the site is possible, that would be super helpful. Without actually seeing the structure of the site and exactly what you want hidden/shown it's hard to suggest anything specific.

scottcarlton on "Show/Hide div in loop"

scottcarlton — Mon, 21 Nov 2011 14:39:10 +0000

@Big Bagel
Thanks for your response. Ya, the code as of now is in the header.php file. Not sure if that is best, but as a newbie and not an experienced js coder or wordpress coder, it's the easiest for me. This issue is that it does target all hidden divs causing them all to open or close. The other issue that I came across in the loop is that it will target only one div instead of the div in that particular loop posting. I keep search google for a fix, but haven't found one yet.
As for the plugin, it looks great, but I am trying to stay away from plugins as much as possible. I would rather learn how to do it versus just adding a plugin for something. Helps me learn. Just a personal thing. Plus my trying to make it user friendly as possible for my client. So shortcode just adds one more think to teach my client.

@SwansonPhotos
Thanks for the posting code rules. I'm new to the forums and didn't realize the code posting. It will be helpful in the future

Big Bagel on "Show/Hide div in loop"

Big Bagel — Mon, 21 Nov 2011 08:16:04 +0000

@SwansonPhotos:

I'm aware of strip_tags. I'm assuming the OP's code is being included directly in the theme (in header.php for example). It wouldn't be run through any functions so strip_tags isn't an issue.

Additionally, the JavaScript should be in a separate file, the file called in the head or footer removing any such issues.

I know, but we weren't taking about that. The OP's code was obviously being included directly in the file, so I constrained my recommendations to such. My offer to give a jQuery example, if taken, would have included this fact.

I also disagree about validation issues, if a page is not able to be validated based on the DOCTYPE called, it can and will cause issues.

I never said validation issues should be ignored. I simply said that the only issue with accidentally using the wrong technique in this very specific case would be that it won't validate. In other words, it will still work as expected in all relevant browsers. Further, since we can't check the DOCTYPE of the OP's theme anymore, this doesn't really matter.

Commenting JavaScript in this fashion was required a very long time ago, but unless you are running Netscape 1 or IE4, it's not required and can cause validation issues are even be stripped out confusing WP.

I know...that's what I've been saying. From my previous posts:

However, it is true that since practically every browser used today can understand JavaScript, there's no real reason to do it anymore.

With the browsers used today it's best just to not use either.

Since these posts don't have much of anything to do with the OP's original topic it would be best to continue asking questions in a new topic or, if you want to direct them specifically towards me, on my site.

SwansonPhotos on "Show/Hide div in loop"

SwansonPhotos — Mon, 21 Nov 2011 07:33:59 +0000

http://www.w3.org/TR/xhtml1/#h-4.8

strip_tags is used by several WordPress functions including the excerpt.

Commenting JavaScript in this fashion was required a very long time ago, but unless you are running Netscape 1 or IE4, it's not required and can cause validation issues are even be stripped out confusing WP.

Additionally, the JavaScript should be in a separate file, the file called in the head or footer removing any such issues.

I also disagree about validation issues, if a page is not able to be validated based on the DOCTYPE called, it can and will cause issues. I will continue to rely on the expertise of the those who continue to strive towards validation.

Big Bagel on "Show/Hide div in loop"

Big Bagel — Mon, 21 Nov 2011 06:47:57 +0000

@SwansonPhotos:

The DOCTYPE is completely up to the theme (look in header.php). Plus, using the wrong example won't break anything other than validation. With the browsers used today it's best just to not use either.

And what about stripping HTML tags?

What?

SwansonPhotos on "Show/Hide div in loop"

SwansonPhotos — Mon, 21 Nov 2011 06:43:02 +0000

Isn't the default DOCTYPE for WordPress sites XHTML 1.0 Transitional?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And what about stripping HTML tags?

Big Bagel on "Show/Hide div in loop"

Big Bagel — Mon, 21 Nov 2011 06:20:29 +0000

That's how you would do it if you were using XHTML, right above it is the example for HTML like the OP's code example:

http://en.wikibooks.org/wiki/JavaScript/Placing_the_Code#Inline_HTML_comment_markers

SwansonPhotos on "Show/Hide div in loop"

SwansonPhotos — Mon, 21 Nov 2011 06:15:44 +0000

@ Big Bagel,
In this form?

Big Bagel on "Show/Hide div in loop"

Big Bagel — Mon, 21 Nov 2011 05:50:28 +0000

@SwansonPhotos:

Wrapping JavaScript in an HTML comment used to be standard practice to keep browsers that didn't support JavaScript from having problems. The JavaScript inside will still run regardless. However, it is true that since practically every browser used today can understand JavaScript, there's no real reason to do it anymore.

@scottcarlton:

The problem is that your script is probably targeting your entire content section. The best way to toggle specific content is by using jQuery. If you're trying to show/hide individual posts, you can give a link to your site and I'll try to come up with a working code example; it shouldn't be too hard. If you're looking to hide content within a post/page you can also check out this plugin:

http://wordpress.org/extend/plugins/jquery-collapse-o-matic/

SwansonPhotos on "Show/Hide div in loop"

SwansonPhotos — Mon, 21 Nov 2011 03:23:33 +0000

<-- these are for comments in HTML -->

Remove the comments if you want this to run. Also see the forum rules for posting code.

scottcarlton on "Show/Hide div in loop"

scottcarlton — Mon, 21 Nov 2011 02:40:09 +0000

I have been trying to create a show/hide div in the wp loop without any success. This simple script work great for one, but in the loop it toggles everything or nothing. Looking at this I need to be able to append something to each one that gets created so that it only works for that one only. Such as this on there bios. Not even sure if this is the right script to work with. Any help out there?

vtxyzzy on "Static Homepage vs The Loop/"

vtxyzzy — Sat, 19 Nov 2011 19:11:52 +0000

The content of a Static Page is generally displayed by a Loop if it shows at all.

The screen could be totally generated by the template code for the SP, or pulled from another source, but this is generally not the case.

Shapeshifter 3 on "Static Homepage vs The Loop/"

Shapeshifter 3 — Sat, 19 Nov 2011 15:28:36 +0000

Howdy,

What are the downsides of using a Static Homepage and other Static Navigational Pages? I'm using a HTML5 & CSS3 framework whose front-end editor seems to be affected by my usage of a Static Front Page. I don't quite understand the whole WordPress Loop (I'll go back to the Codex), but had the thought that Static Pages in general seem to place limitations on WordPress (I'm using 3.2.1). Do Static Pages run outside of the "Loop", need to added back into it, or are they 100% included in it?

Sorry if this seems like a dumb question!

randyttp on "Display the_content(); for a post_id outside WP Loop"

randyttp — Fri, 19 Aug 2011 01:49:15 +0000

Is it possible? of course.

Sounds like you want the content to load into the div without the page refreshing though right? That would take javascript, something I'm not very good at.

mathewhood on "Display the_content(); for a post_id outside WP Loop"

mathewhood — Fri, 19 Aug 2011 00:33:45 +0000

Hey,

I have currently made my website display 12 recent posts from the category portfolio. They just display the_post_thumbnail and have the_title and the_content in a div above it as an overlay.

An example can be found here http://www.mathewhood.com

What I ideally want to do, is have it so that when you click on one of these thumbnails, the content for the post is shown in a div above.

http://mathewhood.com/sitefiles/?page_id=71

Is it possible for me to make it so that when you click on the div, it stores the post_id in a variable and then the_content calls that variable to show the post?

Here is pretty much all my code, I am not sure exactly what you would need for it so yeah, sorry if it is a bit much :(

Any help would be greatly appreciated!!!

header.php Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo( 'name' ); ?> | <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js"></script>
<script>
$(document).ready(function() {
	//move the image in pixel
	var move = 8;
	//zoom percentage, 1.2 =120%
	var zoom = 1;
	//On mouse over those thumbnail
	$('.recentPost').hover(function() {
		//Set the width and height according to the zoom percentage
		width = $('.recentPost').width() * zoom;
		height = $('.recentPost').height() * zoom;
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height<?php /*?>, 'top':move, 'left':move<?php */?>}, {duration:200});
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.recentPost').width(), 'height':$('.recentPost').height()<?php /*?>, 'top':'8', 'left':'8'<?php */?>}, {duration:100});
		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
});
</script>
<script>
$('.thumbs').click(function(e){
    e.preventDefault();
    var contents = $(this).closest('.recentPost').find('.caption').html();

    var $container = $('#theContainer').html(contents);
    $container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:150}, {duration: 1000, easing: 'easeInOutCirc'});
    $container.click(function(){
        $container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
        $container.fadeOut('slow');
        $container.html('');
    });
});
</script>
<?php wp_head();?>
</head>

<body>

<div id="wrapper">
	<div id="container">
    	<div id="headerWrap">
        	<a href="http://www.mathewhood.com"><div id="logo"></div></a>
            <div id="nav"></div>
        </div>

test.php Code

<?php
/*
Template Name: Test
*/
?>
<?php get_header(); ?>
<script type="text/javascript">
$(document).ready(function(){
$(".recentPost").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
width: 885px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background:url(images/border.png);
border-left: 1px dashed #5cd3f8;
border-right: 1px dashed #5cd3f8;
}
div.panel
{
display: none;
border: 1px dashed #5cd3f8;
}
p.flip
{
border-top: 1px dashed #5cd3f8;
border-bottom: 1px dashed #5cd3f8;
}
</style>

<?php query_posts('category_name=portfolio&showposts=12'); ?>
<div class="panel">
<b><?php the_content();?></b>
</div>

                <?php while (have_posts()) : the_post(); ?>
                   <div class="recentPost">
                    <a href="#">
                        <?php the_post_thumbnail('204, 144'); ?>
                    </a>
                    <a href="#">
                        <div class="caption">
                            <div class="captionTitle"><?php the_title(); ?></div>
                            <p><?php the_content();?></p>
                        </div>
                    </a>
                </div>
                <?php endwhile; ?>
                <div class="cleared"></div>

<?php get_footer(); ?>

footer.php Code

<div id="footerWrap">
        	<div id="footerLeft">
            	<p>Copyright 2011 <a href="http://www.mathewhood.com">Mathew Hood</a> / Powered by <a href="http://www.wordpress.org">Wordpress</a></p>
            </div>
            <div id="footerRight">
            	<p>Follow me on <a href="#">Forrst</a>, <a href="#">Twitter</a> or <a href="#">Facebook</a>.</p>
            </div>
        </div>
    </div>
</div>
<?php wp_footer(); ?>
</body>
</html>

functions.php Code

<?php

add_theme_support( 'post-thumbnails' );

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 204, 144 ); // default Post Thumbnail dimensions
}

if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'navigation',
	'before_widget' => '',
	'after_widget' => '',
	'before_title' => '',
	'after_title' => '',
));

register_sidebar(array('name'=>'sidebar',
	'before_widget' => '',
	'after_widget' => '',
	'before_title' => '',
	'after_title' => '',
));

?>

style.css Code

/*
Theme Name: Mathew Hood 2011
Theme URI: http://www.mathewhood.com
Author: Mathew Hood
Author URI: http://www.mathewhood.com
Description: The 2011 theme for MathewHood.com
Version: 1.2
License: Not for re-use.
*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Begin Normal Stylesheet */

body{
	background-color:#202023;
	background-image:url(images/background.png);
	background-repeat:repeat-x;
	color:#ffffff;
	font-family: 'Actor', sans-serif;
}
h1{
	font-size:30px;
	color:#fff;
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight:100;
	text-transform:uppercase;
	margin-bottom:5px;
	text-shadow:-1px -1px 2px #000;
}
a{
	color:#70daf8;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
#wrapper{
	margin:0;
	margin:auto;
}
#container{
	width:924px;
	margin:0;
	margin:auto;
	margin-top:63px;
}
#logo{
	background:url(images/logo.png) no-repeat;
	width:292px;
	height:74px;
}
#contentWrap{
	position:relative;
	margin-top:45px;
}
#newBanner{
	position:absolute;
	background:url(images/newBanner.png) no-repeat;
	top:-5px;
	left:161px;
	width:64px;
	height:64px;
	z-index:2;
}
#footerWrap{
	font-size:14px;
	margin-top:4px;
}
#footerLeft{
	float:left;
}
#footerRight{
	float:right;
}
#theContainer{
 background:#EEEEEE;
}
.captionTitle{
	color:#70daf8;
	margin-top:10px;
	font-size:18px;
	text-align:center;
	filter:alpha(opacity=10);    /* ie  */
	-moz-opacity:1;    /* old mozilla browser like netscape  */
	-khtml-opacity: 1;    /* for really really old safari */
	opacity: 1;
}
.recentPost{
	width:204px;
	height:144px;
	background: url(images/border.png);
	padding:8px;
	float:left;
	margin-right:11px;
	margin-bottom:11px;
	overflow:hidden;
	position:relative;
}
.caption {
	margin-left:8px;
	width:204px;
	height:144px;
	background:#000;
	color:#fff;
	font-weight:bold;
	/* fix it at the bottom */
	position:absolute;
	left:0;
	/* hide it by default */
	display:none;
	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */
}

.recentPost .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:16px;
	filter:alpha(opacity=100);    /* ie  */
	-moz-opacity:1;    /* old mozilla browser like netscape  */
	-khtml-opacity: 1;    /* for really really old safari */
	opacity: 1;

	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

.recentPost .caption p {
	padding:5px;
	margin:0;
	font-size:14px;
	filter:alpha(opacity=100);    /* ie  */
	-moz-opacity:1;    /* old mozilla browser like netscape  */
	-khtml-opacity: 1;    /* for really really old safari */
	opacity: 1
}
img {
	border:0;
	/* allow javascript moves the img position*/
	position:absolute;
}
.cleared{
	clear:both;
}
.post-content {
	display: none;
}
#current-post .post-content {
	display: block;
}

/* Blog Styles */
#blogContainer{
	float:left;
	width:654px;;
	margin-right:40px;
}
#sidebar{
	float:right;
	width:223px;
}
.blogPost{
	margin-bottom: 20px;
	float:left;
}
.blogLeft{
	float:left;
	width:143px;
	text-align:right;
	margin-right:37px;
	border-top:1px solid #fff;
	padding-top:15px;
	font-size:14px;
	font-style:italic;
	line-height:18px;
}
.blogRight{
	float:right;
	width:467px;
}
.blogRight p{
	color:#fff;
}
.readMore{
	float:right;
}
.textwidget{
	margin-bottom:20px;
}

.caption{
display:none;
}

#contentWrap{
position:relative;
}

.recentPost{
 display:inline;
  margin:4px;
}

#theContainer{
 background:#EEEEEE;
}

/* Contact Form */
#ajaxForm .textfield{
	width:250px;
	height:20px;
	background: url(images/border.png);
	padding-left:5px;
	padding-top:5px;
	margin-bottom:5px;
	color:#fff;
}