AyushSaran.com

CROSS POSTED FROM http://www.dedestruct.com/customizing-the-wordpress-login-screen-pt-2/2007/07/

 
This Blog is closing, please direct all links / comments to www.dedestruct.com

 

Improving on the previous customize the wordpress login screen - Pt 1. The original method I proposed involved over-writing the core wordpress admin images with custom ones. This would replace the default admin page but the hack was temporary and resets when the core files are overwritten during an upgrade.

The solution is to use the Wordpress Custom Login Plugin from Ben over at BinaryMoon.

De-constructing the plugin

• <?php
•  
• function bm_custom_login() {
• echo '<link rel="stylesheet" type="text/css" href="' . get_settings('siteurl') . '/wp-content/plugins/bm-custom-login/bm-custom-login.css" />';
• }
•  
• add_action('login_head', 'bm_custom_login');
•  
• ?>

For those interested in how the plugin works. Ben uses a wordpress hook ‘login-head’ to call out his own css stylesheet.
The backgrounds set in his css stylesheet override the default image paths set in the wp-admin stylesheet.
If you are interested in building your own plugins a comprehensive list of wordpress hooks can be found at the codex.

To help you out here is a basic PSD with the re-created Logo, Glow, Gradient and rounded corners seen on the default login screen.

To see download files visit the new home of this blog at www.dedestruct.com

The ‘Customize Login Screen’ has been my most popular post so far, and id love to see what screens you guy make.
You can post your screenshots over at the Flickr - Custom wordpress login Group

CROSS POSTED FROM http://www.dedestruct.com/google-adsense-targeting-for-relevant-ads/2007/07/

Another Reminder - This blog is closing, please direct any comments/links to dedestruct.com

If the ads served up by Google Adsense on your blog/website arent relevant to your content its usually because other content on the page is throwing off the density and Adsense cannot decide whats most relevant on the page.

To fix this you can use Google Section Targeting with the use of <!– google_ad_section_start –> and <!- -google_ad_section_end –> to tell Adsense what content to consider for relevant ads.

You can manually add this into your template, but plugins are easier to manage so here is the Google AdSense Targeting plugin from Il Filosofo. It automatically adds the tags around your post content and templates.

Some Handy Tips

via Tech Addict
1. Don’t cheat Google by targetting wrong content (doing so will result in Google banning).
2. Always include user comments in the Tags.

3. If you do not see results quickly, give it few days for the adsense bot to crawl your blog.
4. If your Google earnings drop for the first few days, experiment for some time. 
5. Always include the Title of post within the tags.

Ive been tracking my Freelance work through the web service SidejobTrack. Its completely free and allows for Multiple simultaneous projects and clients.
They have a clean Web 2.0 style Interface. Features include Time Tracking, Data Export(xml) and Custom Invoicing.

While this servers my purpose for time-tracking and custom Invoice Templates, it leaves a lot missing on the Project Management Side.
The current market leader in that field is 37Signal’s Basecamp. I’ve used Basecamp with a few companies before and its near-perfect. It handles Tasks, Milestones, Notes, Messages, Writeboards etc… basically a full featured Project Manager.
 
Here’s the catch
 
Its Expensive. Its not just ‘not cheap’, its downright expensive. The basic pricing plans limit projects and for my needs i would have to get the $49/mo plan, although I could manage in the $24/mo plan with a 15 active project limit. But even then, monthly fees add up. At the end of the year id be paying a minimum of $288.

 
So I’ve been searching for ‘Basecamp Alternatives’.
 

http://www.php-collab.org
http://www.dotproject.net
http://www.quickbase.com
http://www.intranets.com
http://www.grovesite.com
http://www.copperproject.com
http://www.taskspro.com/
http://www.creative-manager.com/
http://www.activecollab.com
http://www.infowit.com

 
And the ‘Basecamp Killer’ is
 

Active Collab - Its a basecamp clone created by Ilija Studen, a developer from Serbia. Built in Php/MySQL it started off playing catch-up with Basecamp, but with the soon-to-be-released v1.0(currently at 0.7.1) They look like they may offer some features Basecamp still doesnt provide. Im eagerly awaiting the v1.0.
Did I mention it’s open-source and FREE!!
 
(Found: Techcrunch had done a feature on them in June06 )

and missed the 80s… i found a few relics…

Dadepo Aderemi on why he choose JQuery over MooTools for his JS Framework

Compared to mootools, Jquery’s Selectors makes accessing the Dom such a breeze. Borrowing syntax from CSS and Xpath you can burrow all the way down or climb all the way up the DOM with a succinct amount of code.

http://geekabyte.blogspot.com/2007/06/ditching-mootools-for-jquery.html

For those unfamiliar with the Activity Window in Safari, read

MacWorld: Secrets of Safari’s Activity window

If you try to load a page and it stalls out with “loading,� for instance, the Activity window will show you exactly which item is causing the problem—just click the disclosure triangle next to the page in question, and you’ll see entries for every item on the page, and (if those items are loaded) their size or (if they’re not loaded) a message showing their status.

And Here is the Firefox alternative

http://livehttpheaders.mozdev.org/

This is a wordpress hack which will allow your users to add images and videos in comments.


Wordpress strips out most HTML tags for non-admin users. This leaves comments with text-only.But what if you want to run a contest for the funniest image/video etc….. something where you want users to be able to embed rich media in the comments instead of a text link

Step One - Locate your kses.php file


This can be found under /wp-includes/kses.php
Make a backup of this file - incase you need to revert to original


open the file in a text editor, Notepad or TextEdit(Mac) will do just fine


Around line 25 you will see html tags commented out using the // system


'strike' => array (), 'strong' => array (),
// 'sub' => array(),
// 'sup' => array(),



tags not commented are allowed, commented tags are NOT


we can add tags to this list to allow rich media but we also have to allow the attributes


To allow images add these lines after // 'ul' => array(), but before );

‘img’ => array (’alt’ => array (), ‘align’ => array (), ‘border’ => array (), ‘height’ => array (), ‘hspace’ => array (), ‘longdesc’ => array (), ‘vspace’ => array (), ’src’ => array ()),

This will allow image tags to be embedded in comments
To allow Youtube Videos add these lines

‘embed’ => array (’src’ => array (), ‘type’ => array (), ‘wmode’ => array (), ‘height’ => array (), ‘width’ => array ()),
‘object’ => array (’src’ => array (), ‘type’ => array (), ‘wmode’ => array (), ‘height’ => array (), ‘width’ => array ()),
‘param’ => array (’name’ => array (), ‘value’ => array (), ‘wmode’ => array (), ‘height’ => array (), ‘width’ => array ()),

This approach can be modified to allow videos from any site as long as you add the right Tags and Attributes

Its hard to get footers positioned right with CSS. There are numerous techniques to do this.

The Problem
If you rely on the footer clearing all other elements, then on smaller pages, the footer wont push to the bottom because the document ends before the screen.

If you specify position:absolute; bottom:0px; left: 0px; … etc… When you load a page longer than the screen display resolution the footer floats on top of content

My Solution

First find the height of the document

function getHeight(){
y = 0;
x = 0;
var test1 = document.body.scrollHeight;
var test2 = document.body.offsetHeight
if (test1 > test2) // all but Explorer Mac
{
x = document.body.scrollWidth;
y = document.body.scrollHeight;
}
else // Explorer Mac;
//would also work in Explorer 6 Strict, Mozilla and Safari
{
x = document.body.offsetWidth;
y = document.body.offsetHeight;
}
innerDim();
}

Now the height of the Viewport [i.e. the visible screen area]

function innerDim(){
var o;
innerH=0;
if (self.innerHeight) // all except Explorer
{
o = self.innerWidth;
innerH = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
o = document.documentElement.clientWidth;
innerH = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
o = document.body.clientWidth;
innerH = document.body.clientHeight;
}
changeFooter();
}

Now compare the two , If the document is shorter than the screen force the footer to sit at the absolute positioned bottom:0px.
Else drop it 50px south of the document end for long pages.

function changeFooter(){
var z = y + 50;
var q = innerH - 32;
if (innerH < y){
document.getElementById("footer").style.top = z+"px";
}else {
document.getElementById("footer").style.top = q+"px";}
}