Maverick Web Creations » CSS http://www.maverickwebcreations.com Thu, 29 Jul 2010 06:34:05 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 How to Display Your Twitter Status Message in a Speech Bubble in WordPress http://www.maverickwebcreations.com/2008/11/06/twitter-status-message-speech-bubble-wordpress.html http://www.maverickwebcreations.com/2008/11/06/twitter-status-message-speech-bubble-wordpress.html#comments Thu, 06 Nov 2008 00:00:13 +0000 Vincent http://www.maverickwebcreations.com/?p=440

I got my idea from Tim Ferris’ blog…

You see that nice speech bubble effect? It is actually quite a pain in the neck to create with pure CSS and images. It is possible to create it with pure CSS code in Firefox but not in Internet Explorer.… Read more...

]]> Image representing Twitter as depicted in Crun...

I got my idea from Tim Ferris’ blog…

How to Display Your Twitter Status Message in a Speech Bubble in WordPress

You see that nice speech bubble effect? It is actually quite a pain in the neck to create with pure CSS and images. It is possible to create it with pure CSS code in Firefox but not in Internet Explorer. I decided to go with Will Mayo’s CSS Speech Bubbles because the code is simpler than other similar speech bubble scripts I found on the internet. I further simplified Will’s code to cut out the unnecessary code and make it even more idiot proof.

Step 1: Download Will’s CSS Speech Bubbles

How to Display Your Twitter Status Message in a Speech Bubble in WordPress

Download Will’s CSS Speech Bubbles and extract the zip file’s contents to your computer. This script uses the Curvy Corners Javascript by Cameron Cooke and Tim Hutchison. This is a really cool way of creating rounded corners without messing around with images. The image files in Will’s package are for the part where the speech bubbles connect with the text but they have nothing to do with the rounded corners.

How to Display Your Twitter Status Message in a Speech Bubble in WordPress

If you open “index.html” from Will’s files, you will see the examples above. We have 2 challenges to make it look like Tim’s blog.

  1. The “triangle” of each speech bubble is pointing downwards but we want it to point to the left.
  2. We want to add an image to the left of the speech bubble but the default code won’t align to the right of the image.

Step 2: Download and Install Twitter for WordPress

I tested about 5 Twitter plugins that claimed to display the latest Twitter status messages on your WordPress blog. Some did not work at all, while others did not work like I expected. I settled on Twitter for WordPress because it is easy to install and customize.

Step 3: Tweak Will’s CSS Speech Bubbles

This just won’t work out of the box for our desired layout. Before we do that, let’s take a look at Will’s default code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

	<link rel="stylesheet" href="bubbles.css" type="text/css" media="screen" charset="utf-8" />
	<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
	<script type="text/JavaScript">
	  window.onload = function() {
	      settings = {
	          tl: { radius: 10 },
	          tr: { radius: 10 },
	          bl: { radius: 10 },
	          br: { radius: 10 },
	          antiAlias: true,
	          autoPad: true
	      }
	      var myBoxObject = new curvyCorners(settings, "rounded");
	      myBoxObject.applyCornersToAll();
	  }
	</script>

This is what you must have within your head tags. I shall put all that window.onload code into a Javascript file and load it from there.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

/* Normal Bubble */
div.bubble {
	width: auto;
	font-size: 0.75em;
	margin-bottom: 24px;
}
 
div.bubble blockquote {
	margin: 0px;
	padding: 0px;
	border: 1px solid #c9c2c1;
	background-color: #fff;
}
 
div.bubble blockquote p {
	margin: 10px;
	padding: 0px;
}
 
div.bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 15px;
	top: 6px;
	background: transparent url(tip.gif) no-repeat 20px 0;
	font-style: normal;
}
 
/* Rounded Bubble */
div.bubble div.rounded {
	margin-bottom: 10px;
	border: 3px solid #fff;
	background-color: #b7e0ff;
}
div.bubble div.rounded blockquote {
	border: 0;
	background-color: transparent;
}
div.bubble div.rounded blockquote p {
	margin: 0px 10px;
}
div.bubble cite.rounded {
	position: relative;
	margin: 0px;
	padding-left: 15px;
	padding-top: 12px;
	top: 9px;
	background: transparent url(tip-rounded.gif) no-repeat 15px 0;
}
 
/* Pimped Bubble */
div#pimped.bubble {
	font-size: 0.9em;
}
div#pimped.bubble div.rounded {
	color: #fff;
	border: 3px solid #fff;
	background-color: #111;
}
div#pimped.bubble cite.rounded {
	background: transparent url(tip-pimped.gif) no-repeat 15px 0;
}

This is the CSS code you should include into your web page or you own style sheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="bubble">
		<blockquote>
			<p>Works great for blog comments!</p>
		</blockquote>
		<cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite>
	</div>
 
	<div class="bubble">
		<div class="rounded">
			<blockquote>
				<p>Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.</p>
			</blockquote>
		</div>
		<cite class="rounded"><strong>Rounded Bubble</strong> using <a href="http://www.curvycorners.net/">curvy corners</a></cite>
	</div>
 
	<div id="pimped" class="bubble">
		<div class="rounded">
			<blockquote>
				<p>Expands to fit any layout and scales nicely with big and small font sizes.</p>
			</blockquote>
		</div>
		<cite class="rounded"><strong>Dark Bubble</strong></cite>
	</div>

For this tutorial, I shall create a speech bubble that is a cross between the first and second examples. I like the simplicity of the first speech bubble but it does not have any rounded corners. The code above shows 3 different implementations of the speech bubbles. I do not understand why Will uses the blockquote tags because I find them rather redundant. I also disagree with some of the CSS code and I shall show you how I cut it down to the bare essentials.

My code is very different from Will’s default samples. Firstly, I uploaded the file “rounded-corners.js” into the “js” folder of my WordPress theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//LOAD THE CURVY CORNERS FOR THE ROUNDED CLASS
window.onload = function()
{
	settings =
	{
		tl: { radius: 10 },
		tr: { radius: 10 },
		bl: { radius: 10 },
		br: { radius: 10 },
		antiAlias: true,
		autoPad: true
	}
 
	var myBoxObject = new curvyCorners(settings, "rounded");
	myBoxObject.applyCornersToAll();
}

I also created a file titled “rounded-corners-loader.js” with the code above and uploaded into the same folder as the previous “rounded-corners.js” file. Please note that I have renamed the default file name of “rounded_corners_inc.js” to “rounded-corners.js”.

Here’s what you need to add to the header.php file of your WordPress theme:

1
2

<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/rounded-corners.js"></script>
<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/rounded-corners-loader.js"></script>

Here’s my updated CSS code for the CSS speech bubbles. Add this code to the style.css file of your WordPress theme:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/* TWITTER BUBBLE */
#twitter_bubble
{
	width: auto;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
 
#twitter_bubble #twitter_photo
{
	position: relative;
	width: 89px;
	height: 73px;
	margin: 0px;
	padding: 0px;
	background: url("/wp-content/themes/YOURTHEME/images/bg-twitter-bubble-tip.gif") no-repeat right;
	z-index: 10000;
}
 
#twitter_bubble #twitter_photo img
{
	border: 1px solid #D5D5D5;
}
 
#twitter_bubble div.rounded
{
	width: 170px;
	margin: -63px 0px 0px 88px;
	padding: 10px;
	border: 1px solid #D5D5D5;
	background-color: #FFFFFF;
}
 
#twitter_bubble div.rounded p
{
	margin: 0px;
	padding: 0px;
	font-size: 11px;
}

How to Display Your Twitter Status Message in a Speech Bubble in WordPress

I created my own graphic to display on the left of the speech bubble. I won’t go through the steps on how I created this because that would be a whole different topic. Please feel free to use your image and update the “YOURTHEME” code in my CSS code to match the image folder of your WordPress theme.

Now we shall display the speech bubble and your avatar in your WordPress sidebar. I am assuming that you already have a picture ready. I created 73 px by 73 px picture of myself. Feel free to create a picture with whatever dimensions you want but you would have to edit some of the CSS code. Alternatively, you may use Gravatar avatars to replace the code below.

I design my sidebars with a fixed width therefore I manually restrict the width of the speech bubble to make it look good within my sidebar.

1
2
3
4

	<div id="twitter_bubble">
		<div id="twitter_photo"><img src="<?php echo bloginfo('template_directory'); ?>/images/icon-twitter.jpg" alt="" width="73" height="73" /></div>
		<div class="rounded"><p> on Vincent's <a href="http://twitter.com/vincentliaw" rel="nofollow">Twitter</a>, <a href="http://friendfeed.com/vincentliaw" rel="nofollow">FriendFeed</a>, <a href="http://www.linkedin.com/in/vincentliaw" rel="nofollow">LinkedIn</a> and <a href="http://www.facebook.com/people/Vincent_Liaw/701298781" rel="nofollow">Facebook</a>.</p></div>
	</div>

Twitter for WordPress has a bunch of options for you to configure. Please refer to the plugin’s site to find out more about how you may customize the Twitter status messages if my preferred settings do not suit your needs. The Twitter messages end with the time of the message like “12 hours ago”. I simply added my own text “on Vincent’s Twitter….” with links to my social networking accounts with the same update. I use Ping.fm to post status messages to my social networking accounts to save me time.

This tutorial seems very long but it really is quite simple. I briefly explained the differences between my code and Will’s code, which took up quite a big chunk of this article. You might have to tweak my code further to make it look good on your web site.

How to Display Your Twitter Status Message in a Speech Bubble in WordPress

Please check out my internet marketing blog to see it action as I have not added this Twitter speech bubble to this blog at the time of this post. Let me know if you have questions about this tutorial and ideas to improve it further.

]]> http://www.maverickwebcreations.com/2008/11/06/twitter-status-message-speech-bubble-wordpress.html/feed 20 How to Add reddit Buttons to WordPress http://www.maverickwebcreations.com/2008/10/17/how-to-add-reddit-buttons-to-wordpress.html http://www.maverickwebcreations.com/2008/10/17/how-to-add-reddit-buttons-to-wordpress.html#comments Fri, 17 Oct 2008 00:00:58 +0000 Vincent http://www.maverickwebcreations.com/?p=200 reddit, like Digg offers web site integration buttons for webmasters. The implementation of the reddit buttons is very similar to my previous post on how to add Digg buttons to WordPress. In my next post, I will show you how to display Digg and reddit voting buttons to… Read more...

]]> reddit, like Digg offers web site integration buttons for webmasters. The implementation of the reddit buttons is very similar to my previous post on how to add Digg buttons to WordPress. In my next post, I will show you how to display Digg and reddit voting buttons to your WordPress posts at the same time.

For now, let’s take a look at what reddit has to offer…

reddit has a larger list of buttons than Digg. For this post, I shall use the button that looks most like the default buttons you see on reddit.com. Again, I selected this button for usability reasons because I want people who are familiar with reddit to feel comforable with the reddit buttons on my web site.

Here’s How the reddit Button Will Look on Your Web Site…

How to Add reddit Buttons to WordPress

If your blog post has been submitted to reddit, you should see a reddit number and a “reddit” text in your reddit button.

How to Add reddit Buttons to WordPress

If you or someone else has not submitted your blog post to reddit, you won’t see any redditnumber but you will see the option to submit your blog post to reddit.

reddit’s Integration Code

1
2
3

<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
<script type='text/javascript'>reddit_url='[URL]'</script>
<script type='text/javascript'>reddit_title='[TITLE]'</script>

WordPress Default Theme’s index.php Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

What We Need to Do

We need to replace reddit integration code’s [URL] and [TITLE] with WordPress’ <?php the_permalink() ?> and <?php the_title(); ?> respectively somewhere within the WordPress Loop.

Basic Example of reddit Integration with WordPress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
		<script type='text/javascript'>reddit_url='<?php the_permalink() ?>'</script>
		<script type='text/javascript'>reddit_title='<?php the_title(); ?>'</script>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

This alone wouldn’t look good on your web site. We need some CSS style to spice things up!

reddit Integration with WordPress with HTML and CSS

1
2
3
4
5

<div class="social_news">
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
<script type='text/javascript'>reddit_url='[URL]'</script>
<script type='text/javascript'>reddit_title='[TITLE]'</script>
</div>
1
2
3
4
5
6

.social_news
{
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float: right;
}
1
2
3
4
5
6

.social_news
{
	margin: 0px 10px 0px 0px;
	padding: 0px;
	float: left;
}

Wrap the reddit code with a DIV class. You may choose to align the DIV class left or right but I think it looks better on the right.

Here’s the full source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<div class="social_news">
		<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
		<script type='text/javascript'>reddit_url='<?php the_permalink() ?>'</script>
		<script type='text/javascript'>reddit_title='<?php the_title(); ?>'</script>
		</div>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

You may apply this modification to your WordPress theme’s single.php and page.php or any other template that has the WordPress Loop.

A WordPress Plugin Alternative: Digg & Reddit Me Plugin

If you don’t want to edit your WordPress theme files, try using the Digg & Reddit Me plugin. I personally think it would be too much of a hassle to manually insert the code into each post if I were to use this plugin but it really depends on your preferences and needs for your WordPress blog.

]]> http://www.maverickwebcreations.com/2008/10/17/how-to-add-reddit-buttons-to-wordpress.html/feed 5 How to Add Digg Buttons to WordPress http://www.maverickwebcreations.com/2008/10/16/how-to-add-digg-buttons-to-wordpress.html http://www.maverickwebcreations.com/2008/10/16/how-to-add-digg-buttons-to-wordpress.html#comments Thu, 16 Oct 2008 02:24:50 +0000 Vincent http://www.maverickwebcreations.com/?p=184 On Digg.com’s Tools/Integrate page, there are 3 types of Digg buttons available for us to display on our web sites:

“Digg This” with Submit Capability Simple “Digg This” with Digg Count (original version) Custom Submission-Only Button

I think the 1st option makes the most sense. I want a Digg… Read more...

]]> On Digg.com’s Tools/Integrate page, there are 3 types of Digg buttons available for us to display on our web sites:

  • “Digg This” with Submit Capability
  • Simple “Digg This” with Digg Count (original version)
  • Custom Submission-Only Button

I think the 1st option makes the most sense. I want a Digg voting button on all my WordPress posts. If I only want a Digg submission button, I can simply use ShareThis, which takes up less space.

Here’s How the “Digg This” with Submit Capability Digg Button Will Look on Your Web Site…

How to Add Digg Buttons to WordPress

If your blog post has been submitted to Digg, you should see a Digg number and a “digg it” text in your Digg button.

How to Add Digg Buttons to WordPress

If you or someone else has not submitted your blog post to Digg, you won’t see any Digg number but you will see the option to submit your blog post to Digg.

I would refrain from using another style of Digg buttons because this style is consistent with the Digg buttons on Digg.com. I would not want to confuse my readers by using an Digg button style that they are not used to.

Digg’s Integration Code

1
2
3
4

<script type="text/javascript">
digg_url = 'WEBSITE_URL';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

WordPress Default Theme’s index.php Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

What We Need to Do

We need to replace Digg integration code’s WEBSITE_URL with WordPress’ <?php the_permalink() ?> somewhere within the WordPress Loop.

Basic Example of Digg Integration with WordPress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<script type="text/javascript">
		digg_url = '<?php the_permalink() ?>';
		</script>
		<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

The problem with this basic example is it would look like rubbish in your WordPress blog. A little CSS and HTML is required to display it properly.

Digg Integration with WordPress with HTML and CSS

1
2
3
4
5
6

<div class="social_news">
<script type="text/javascript">
digg_url = '<?php the_permalink() ?>';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
1
2
3
4
5
6

.social_news
{
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float: right;
}
1
2
3
4
5
6

.social_news
{
	margin: 0px 10px 0px 0px;
	padding: 0px;
	float: left;
}

Wrap the Digg code with a DIV class. You may choose to align the DIV class left or right but I think it looks better on the right.

Here’s the full source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<div class="social_news">
		<script type="text/javascript">
		digg_url = '<?php the_permalink() ?>';
		</script>
		<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
		</div>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

You may apply this modification to your WordPress theme’s single.php and page.php or any other template that has the WordPress Loop.

A WordPress Plugin Alternative: Digg & Reddit Me Plugin

If you don’t want to edit your WordPress theme files, try using the Digg & Reddit Me plugin. I personally think it would be too much of a hassle to manually insert the code into each post if I were to use this plugin but it really depends on your preferences and needs for your WordPress blog.

]]> http://www.maverickwebcreations.com/2008/10/16/how-to-add-digg-buttons-to-wordpress.html/feed 2 WordPress CSS http://www.maverickwebcreations.com/2008/09/10/wordpress-css.html http://www.maverickwebcreations.com/2008/09/10/wordpress-css.html#comments Wed, 10 Sep 2008 02:56:45 +0000 Vincent http://www.maverickwebcreations.com/?p=115 I was wrong about the WordPress CSS stuff being hidden. I actually found the official WordPress documentation on the WordPress picture alignment.

Apart from the code I mention, WordPress recommends adding this to your style.css too:

1 2 3 4 5 6 7 8 9 10 11

… Read more...

]]> I was wrong about the WordPress CSS stuff being hidden. I actually found the official WordPress documentation on the WordPress picture alignment.

Apart from the code I mention, WordPress recommends adding this to your style.css too:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
 
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
 
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
]]> http://www.maverickwebcreations.com/2008/09/10/wordpress-css.html/feed 0 WordPress Picture Alignment Secrets http://www.maverickwebcreations.com/2008/08/14/wordpress-picture-alignment-secrets.html http://www.maverickwebcreations.com/2008/08/14/wordpress-picture-alignment-secrets.html#comments Thu, 14 Aug 2008 14:51:06 +0000 Vincent http://www.maverickwebcreations.com/?p=93 This picture is aligned to the left of my content. Usually we display pictures to the left or right and have our sentences wrap around it. Try to make your paragraphs longer or reduce the size of the picture to make it look good when wrapped around the text.… Read more...

]]> WordPress Picture Alignment SecretsThis picture is aligned to the left of my content. Usually we display pictures to the left or right and have our sentences wrap around it. Try to make your paragraphs longer or reduce the size of the picture to make it look good when wrapped around the text.WordPress Picture Alignment Secrets

If not it might mess up the layout of your post. What I am trying to do right now is typing in filler text to illustrate my point. The good thing about WordPress’ built-in media upload function is that it has 3 sizes for you to choose – thumbnail, medium and full size. The picture on the left is the thumbnail-sized picture, which I further reduced in size to match the content of this post.

This picture is now aligned to the right of my content. The trick in aligning pictures is to have enough space to the left or right. In this case, I have enough space right above this paragraph to squeeze in a picture on the right. I used the thumbnail-sized picture and left the size untouched.

This picture is now aligned to the centre of the page. There isn’t any room to display text on the left or right if you choose to display your pictures in the centre. The picture below is the medium-sized picture that WordPress generated for me.

WordPress Picture Alignment Secrets

If you did something similar in your WordPress blog and it did not align like my pictures above, you must have forgotten to add some WordPress CSS code into your CSS style sheet. WordPress didn’t tell you that, did they?

Add this code to the style.css of your WordPress template to enable these WordPress alignment features in your blog:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* IMAGES */
img.alignleft
{
float: left;
}
 
img.alignright
{
float: right;
}
 
img.aligncenter
{
display: block;
margin: 0px auto 0px auto;
}

That’s it! Once you have this block of CSS code in your style sheet, you should be able to align your pictures in WordPress properly.

The WordPress Align Center Bug?

I find this “bug” rather interesting. Maybe it isn’t a flaw in WordPress but it was way this way. Okay, here’s the thing about this align centre feature…

When you try to align your picture to the centre the first time, WordPress adds some HTML code that looks like this:

1

<img src="http://whatever.com/picture.jpg" class="aligncenter" />

If you try to align your picture to the centre for the second time, WordPress adds more HTML code and it looks something like:

1

<p style="text-align: center;"><img src="http://whatever.com/picture.jpg" class="aligncenter" /></p>

Notice the extra P HTML tag that is added to your HTML code. Strange isn’t? Well, if you have added the block of code above, you don’t have to worry about centre aligning 2 times just to get your picture to align to the centre of the page. It sounds silly but that was what I did before I knew what WordPress actually adds to the HTML code when you try to centre align stuff.

P.S. This picture is really nice “Kodak” moment of 3 of my 4 cats. The cat lying down with the back facing the front is Mini. The kitten on the left is Coco and the other kitty on the right is Moca. All my cats have names with 4 letters and I try to give them a cool and “yummy” name.

]]> http://www.maverickwebcreations.com/2008/08/14/wordpress-picture-alignment-secrets.html/feed 4