Update: New date format

Wednesday, September 17th, 2008

by Philip Hoyos

It might seem that I have not been active for a while. However, I am currently working on a new design which I will implement into the website whenever I have the time. 

Today I have implemented a new date format, which uses a background picture I created in Photoshop. If you would like to have a similar date format on you website please read on.

You need to be able to edit:
- Main Index Template -> index.php
- StyleSheet -> style.css

and have a date picture that you want to use. This picture should be uploaded to the same folder as where you keep your other theme pictures. I would recommend the picture to be either png, jpg or gif. Of course that depends on your theme.

At first you will have to create the following style in your style.css

/* Begin Date Format */

.dateblock{ text-align: center; width: 65px; font-family: Arial; float: left; display: inline; margin: 10px 10px 0 0; background: url(images/your-date-picture.png) no-repeat }

.day { font-size: 22px; position: relative; top: 0px; margin: 2px 0 0 0; }

.month { font-size: 10px; top: 0px; margin: 6px 0 0 0; }

.year { font-size: 10px; font-weight: bold; position: relative; top: 0px; margin: 7px 0 10px 0; }
}

/* End Date Format*/

Secondly you will have to edit your index.php. The line you need to locate looks like the following, in the default WordPress theme:

<small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

This line needs to be changed into the following, if it should look like mine

<small><div class=”dateblock”><div class=”month”><?php the_time(‘F’) ?></div><div class=”day”><?php the_time(‘jS’) ?></div><div class=”year”><?php the_time(‘Y’) ?></div></div> <div class=”author”>by <?php the_author() ?></div></small>

There are a lot of other ways to display the_time format. But this is my setting. To see other variations or create your own. Go to http://us2.php.net/manual/en/function.date.php

To make the date fit the your-date picture you will have to mess around with the top and margin settings until you are satisfied.

Good luck.

Tags: CSS, Update, WordPress
Posted in Tutorials, WordPress | No Comments »

HowTo: Get a blank title in kubrick default theme

Thursday, June 19th, 2008

by Philip Hoyos

I have been asked if I knew how to stop the title showing up on top of the kubrick header, while it still maintains the title and description of the site. So here goes I hope it will help you.

First, get this plugin All-in-one-SEO 
Configuring this plugin should allow you the option of having a site title name, but without it showing up on top of the kubrick image header.

Secondly, remove the title from the kubrick image header.
In the WordPress admin site, you need to go to Design>Theme Editor>header.php
Here you will need to remove or comment out the code that looks like this: 

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”>
<?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php bloginfo(‘description’); ?></div>
</div>
</div>

This is the code that generates the Title and blog description of your WordPress site.

Tags: kubrick, Tutorial, Tutorials, WordPress
Posted in Tutorials, WordPress | 7 Comments »

Aetas.dk Update

Wednesday, May 21st, 2008

by Philip Hoyos

I have finally had the time, and found the right plug-ins to protect my site from the various spam-bots. Well, that of course remains to be seen. Hopefully these plug-ins should help me from being spammed. 

Anyway, I have made it possible to create a user-login to be able to comment on my posts. Hopefully the comments should help me improve my posts, and tutorials with the right form of criticism.

You may now comment =)

Tags: WordPress
Posted in WordPress | 1 Comment »

HowTo: Change Kubrick header in default WordPress Theme

Tuesday, May 20th, 2008

by Philip Hoyos

I thought I wanted to have my own image as header, but it was damn near impossible to figure out where to do the change in the default kubrick theme that comes with WordPress. However, I found a solution =). In this tutorial I will show you how to change the Kubrick header in the default WordPress theme.

Find wp-content>themes>default>images>header-img.php

Find the above path on your site by accessing the site by FTP, you can use a free one as Cyberduck (for mac OS X) or Free FTP by CoffeeCup (for windows). Go to the path and use a text-editor to edit header-img.php. Im using TextEdit in OS X.

A short explanation of the technique I use. In php you can place comments in the code for you self or others and you do that by typing ‘/*‘ then you write your comment and end the comment with ‘*/’.

Now comment out the following pice of code, found in the header-img.php like this:

/* <- Remove If you want the color thing back.
// If we don’t have image processing support, redirect.

if ( ! function_exists(‘imagecreatefromjpeg’) )
die(header(“Location: kubrickheader.jpg”));

// Assign and validate the color values
$default = false;
$vars = array(‘upper’=>array(‘r1′, ‘g1′, ‘b1′), ‘lower’=>array(‘r2′, ‘g2′, ‘b2′));
foreach ( $vars as $var => $subvars ) {
if ( isset($_GET[$var]) ) {
foreach ( $subvars as $index => $subvar ) {
$length = strlen($_GET[$var]) / 3;
$v = substr($_GET[$var], $index * $length, $length);
if ( $length == 1 ) $v = ” . $v . $v;
$subvar = hexdec( $v );
if ( $subvar < 0 || $subvar > 255 )
$default = true;
}
} else {
$default = true;
}
}

if ( $default )
list ( $r1, $g1, $b1, $r2, $g2, $b2 ) = array ( 105, 174, 231, 65, 128, 182 );
Remove If you want the color thing back. -> */

That will remove the blue gradiant image, and instead turn the header black. To reveal the picture underneath you need to comment out a bit more:

/* <- Remove If you want the gradiant back.

// Blank out the blue gradiant
for ( $i = 0; $i < $h; $i++ ) {
$x1 = 19;
$x2 = 740;
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $white );
}

// Draw a new color thing
for ( $i = 0; $i < $h; $i++ ) {
$x1 = 20;
$x2 = 739;
$r = ( $r2 – $r1 != 0 ) ? $r1 + ( $r2 – $r1 ) * ( $i / $h ) : $r1;
$g = ( $g2 – $g1 != 0 ) ? $g1 + ( $g2 – $g1 ) * ( $i / $h ) : $g1;
$b = ( $b2 – $b1 != 0 ) ? $b1 + ( $b2 – $b1 ) * ( $i / $h ) : $b1;
$color = imagecolorallocate( $im, $r, $g, $b );
if ( array_key_exists($i, $corners) ) {
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $white );
list ( $x1, $x2 ) = $corners[$i];
}
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $color );
}

Remove If you want the gradiant back. -> */

Thats it, you are done. Now your header will reveal kubrickheader.jpg, and not the generated gradient. Of course you could delete the pice of code you commented out, however, you might find it useful at a later point. If you are like me you will keep exploring ways to give you blog a look and feel that you like, which is why I recommend that you keep the code.

Insert your own picture in the Kubrick header default WordPress Theme

All you have to do is to upload (with your FTP browser, to the location where you have located your default WordPress theme) your header image with the same dimensions (758×200), extension(.jpg) and name as the kubickheader.jpg. And replace the default header image.

Now make sure that your image has the right dimensions and it must have the name kubickheader.jpg, for this tutorial to work.

This is my result

Update:

Thanks a lot for all your comments. I really appreciate it =)

Tags: kubrick, Tutorial, Tutorials, WordPress
Posted in Tutorials, WordPress | 54 Comments »

Gallery

Saturday, May 17th, 2008

by Philip Hoyos

Im wondering where the freakin’ gallery might be placed! It seems to me that there were supposed to be one somewhere inside this WordPress. However, it also seems quite hidden! 

Tags: Gallery
Posted in WordPress | No Comments »