Rounded Corner

I have not been writing for months now, but anyway I seemed to have forgotten to write about rounded corners.

Basically rounded corners is a CSS3 specification, Firefox and Safari have implemented this on their respective browsers I think the same goes with Konqueror and Opera, but the hack seems to have just flew out of head(okay so I'm a bigot on these two, and I am going to do my best to support them next time).

-moz-border-radius: 5px; (Mozilla Browsers)
-webkit-border-radius:5px (Chrome and Safari Browsers) or -khtml-border-radius: 5px


And to extend it further:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Here is a sample css rule for it:

h2{
font-size:1.75em;
color:#0062A4;
background-color:#C6E8FF;
padding:10px 0 10px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-transform:capitalize;
margin:0 0 10px 0px;
border:#0062A4 1px solid;
}


Here is another way to use this:

-moz-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;


Sources:
http://www.css3.info/preview/rounded-border/
http://buildinternet.com/2009/10/using-rounded-corners-with-css3/

IE PNG Fix

I've been trying to remember a work around on the IE6 PNG image issue, I have made this work three years back, but after that clients have stopped supporting IE6, but recently some still wants to support IE6. So here is what I did.

If you have IE6 installed open it and navigate here; http://www.everythingcebu.com/inet-markets.com/index.html. Please take note that you may see some grayish background on the logo for awhile, it does take a second or two for the script to load... and voila! the png issue is fixed.

Others have used the png.htc, but some have used it differently and you cannot use it on background images and using the filter alpha load of IE6 sometimes make links not clickable anymore.

Here is the snippet on one of those divs:

#header_row{

background-image: url(../assets/logo2.png);

background-repeat: no-repeat;

background-position: 0px 0px;

behavior: url(scripts/iepngfix.htc);

}

The magic bullet is "behavior: url(scripts/iepngfix.htc);", one odd thing about dot htc files is that they do not need the "../" as in the case of the background image above, I do not know why but its just it. Make sure that you have a file named "blank.gif" on the root folder/directory of the site, if you plan to put the blank.gif somewhere you need to edit the HTC file, look for the line like below

var blankImg = 'blank.gif';

And make it to something like this???

var blankImg = '/images/blank.gif';

And lastly it is quite inevitable to use star html hack again, but what I do not yet get is when you try to isolate the issue with this hack:

<!--[if IE 6]> <link href="css/iecrap.css" rel="stylesheet" type="text/css" /> <![endif]-->

it won't work at all, or maybe it was just the multiple IE install that got all weird of a sudden.

I guess if you need more info here is where I rediscovered this; http://www.twinhelix.com/css/iepngfix/demo/

I guess I need to retest this with the new joomla versions.

Wordpress: Excerpts and Random Posts, And How to alternate background colors

As I've said on my last blog I'm going to create an excerpts section, whilst working on my perfect basic wordpress theme, I made this code.

<?php if (have_posts()) : $odd = true ?>

<?php

//displays post from the latest to the oldest

//$rand_posts = get_posts('numberposts=5&order=DSC');

//displays post from the oldest to the latest

//$rand_posts = get_posts('numberposts=5&order=ASC');

//displays random posts

$rand_posts = get_posts('numberposts=5&orderby=rand');

foreach( $rand_posts as $post ) :

?>



<div class="entry <?php if ($odd) echo ' odd'; ?>">

<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

<?php the_excerpt();?>

</div>

<?php

$odd = !$odd;//ends the odd post test

?>

<?php endforeach; ?>

<?php endif; ?>

Okay so its not really original you can find similar codes in wordpress support forums but I need this blog to document my own work. Now lets look at this more closely:

<?php if (have_posts()) : $odd = true ?>

Just like any standard wordpress theme you'll see the familiar if... have_posts... stuff, what I've added here is the string odd with a boolean value of true. What it does is identify if the post has an id value equivalent to an odd number. Moving on to the next line rather lets jump to this line of code:

<div class="entry <?php if ($odd) echo ' odd'; ?>">
.
.
.
$odd = !$odd;
.
.
.

This line simply adds the class odd if the value of the $odd above is an odd number, I had to jump like this to keep my train of thought and perhaps yours. Okay jumping again to the last code above, this simply ends the odd thingy above(making the $odd value to false), otherwise Wordpress will add all with an extra odd class.

Now going back up a line or two:

.
.
.
$rand_posts = get_posts('numberposts=5&orderby=rand');

foreach( $rand_posts as $post ) :
.
.
.

Yeah, this is what it looks like, it displays 5 posts randomly, and that is it.

For further reference try these links:

http://codex.wordpress.org/Template_Tags/get_posts#Random_posts
http://codex.wordpress.org/Template_Tags/query_posts

wordpress: the_excerpt function vs the_content function

As I was trying to fiddle with the_content and the_excerpt functions in wordpress I was confused with the use of the two, here is a page that deals more on the excerpts vs content functions; http://codex.wordpress.org/Template_Tags/the_excerpt.

The difference between the two is that the_excerpt does not have any parameters at all, whilst the_content function has three:

<?php the_content( $more_link_text , $strip_teaser, $more_file ); ?>

the more link is pretty much straightforward again, but here something above that I have not really grasped yet, by default the $more_file goes to the default file, but I've played around with it like this <?php the_content('more...',TRUE,'blam'); ?> it didn't do anything.

Another thing is if you change the TRUE value to FALSE and you still have a value for the first parameter, you would still have a more link, it seems that once you have a value for the first parameter Wordpress by defaults the post to have a more link. But you need to have inserted the more button in wordpress or insert this <!--more-->

For the_excerpt function if you have not added an excerpt in the edit post page WordPress automatically displays all of the text up to the 55th character limit, but if you explicitly added one it will display that. Unlike the_content you need to add a read more like this:

<a class="more-link" href="<?php the_permalink() ?>" title="Read More <?php the_title(); ?>"><span>Read More...</span></a>

Personally I would rather use the_content function. Now to my next post I think I should create an excerpts section.

Wordpress: Archives page and archives link

Creating an archives page is easy enough but how do you do that? It has been confusing at first but after several hours again of searching the web I found a solution to my issue.

First you really do need to create an archives.php template and here is how it looked:

<?php

/**

* Theme name here

*/

/*

Template Name: Archives

*/

get_header() ?>

<div id="content"><div class="entry">

<h2>Archives by Month:</h2>



<?php wp_get_archives('type=monthly'); ?>

<h2>Archives by Subject:</h2>



<?php wp_list_categories(); ?>



</div>

<?php get_sidebar(); get_footer(); ?>

Please do take note to name the template in the comments above, I haven't had any idea yet if I should but it is a good practice to do so. So above I named it 'Archives' the same as the file name, make sure it is uploaded in the theme's folder. In order for this to show up you need to create a static page. If you are using wordpress 2.7.1 go to Page>Add New, just give it a title of Archives and to the right there is or there should be a dropdown of the template to use, choose the Archives template, don't put anything in the content text area just make sure you have a title, then hit save.

Now that you have this how do you create a link, pretty simple, here is the code:

<a href="<?php echo bloginfo('url').'/'.'?pagename=archives'; ?>">Archives</a>

That is it, happy coding. ;)

WordPress Sidebars

It has been awhile since my last post, and aside from trying to understand wordpress a lot has been keeping me busy.

Anyway, a few weeks ago I was asked to create a wordpress theme with widgets all over, left, right, bottom, and top. Searching through the wordpress codex documentation and in some other blogs, I came across about registering a sidebar. Now how do you do that? after several hours of searching and experimenting how things work I found that you need to register it under the functions.php file of your theme.

Here is a sample of it:

if ( function_exists('register_sidebar') )

register_sidebar(array(

'name'=>'sidebar1',

'before_widget' => '<li id="%1$s" class="widget"><div class="widget-top"></div><div class="widget-content">',

'after_widget' => '</div></li>',

'before_title' => '<h4 class="widget-title">',

'after_title' => '</h4>',

));

register_sidebar(array('name'=>'sidebar2',

));

register_sidebar(array('name'=>'sidebar3',

));

?>

I guess it is pretty straightforward, and I don't think I need to explain the before and after thing, to know more about sidebars you could check this link out.

Below is a sample of displaying the widgets on a sidebar:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

But there is still a lingering question in my mind, having worked with a lot of Joomla templates and its predecessor Mambo, I am used to the module positions where I could put it anywhere on the template, with a lot more ease and less pain than Wordpress. I could control the module without having to code heavily. The question is can you count the number of widgets in a sidebar. What I usually do in Joomla is count the modules in a module position if it is greater tha zero then the width of the other column would be much wider, or lets say that the sidebar will collapse or be invisible.

Anyway Wordpress seems to have an answer to this, you could either make a template for a specific page and by default there is the single.php page you could make which could not have any sidebars at all. Having said that maybe my next topic would be about templates.

displaying a teaser or excerpt with read more in wordpress

In my previous post I was working on how to limit the number of post on worpress the code below also does the same thing but let me explain them line by line.


<?php $my_query = new WP_Query('category_name=f_art&showposts=50');

while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>



<?php the_content('Read More...', strip_teaser, 'more_file'); ?>

<?php endwhile; ?>


THE CODE BY LINE

<?php $my_query = new WP_Query('category_name=f_art&showposts=50');

This code calls for a specific category name which is f_cart and will display 50 posts maximum if you remove the &showposts and of course the equal sign and the number; this will display all posts categorized under the category slug f_art.

while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

Here we have three lines of code I guess this is quite straight forward this will just display the post title which is also a link under the category specified before it.

<?php the_content('Read More...', strip_teaser, 'more_file'); ?>

This line tells wordpress to display the post or article under the category specified above it, what is more it displays a read more link if you need an excerpt or teaser. There is actually a more button on the wordpress admin. If you are adding or editing a post look above the wysiwig editor you should find this image:

Just look for a desired point in your post where you want to add the more link and click on the button. This link is a further explanation http://codex.wordpress.org/Customizing_the_Read_More.