Twitter Style Glow on Input Focus

Recently Twitter homepage went through a redesign and included a soft glow on their login boxes when highlighted. A colleague wanted to recreate the effect and asked me to provide the code. The twitter one is a lot more complex and has a few more functions but the code below is the basics behind the …

Recently Twitter homepage went through a redesign and included a soft glow on their login boxes when highlighted. A colleague wanted to recreate the effect and asked me to provide the code.

The twitter one is a lot more complex and has a few more functions but the code below is the basics behind the effect. On the :focus style, the appropriate web browser prefixed CSS is required, but you get the general idea!

[CSS]
input {
border-radius: 5px;
border: none;
outline: none; /* Get Rid of the Webkit Default Glow */
}
input:focus {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); /* -webkit/-moz prefixes needed */
}
[/CSS]

Posted in HTML/CSS | Tagged css3, focus, glow, text box, twitter

Widgetizing a WordPress Sidebar and Creating an Additional One

When developing a WordPress theme, you may wish to take advantage of the built in system to manage, edit and order the sidebar widgets. Many themes have this built in, but if you’re developing from scratch, you might not have the code to implement it. First, locate your functions.php. This can be found in: wp-contentthemesYOUR …

First, locate your functions.php. This can be found in:

wp-contentthemesYOUR THEME NAMEfunctions.php

If this file doesn’t exist, then simply make one starting and finishing with the standard php tags

In between the php tags, paste the following code:

[PHP]
/* ADDING SIDEBAR WIDGETS FUNCTIONS */
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘

‘, //closing tag of the above
‘before_title’ => ‘

‘, //what the widget title is wrapped in
‘after_title’ => ‘

‘, //closing tag of the above
));
[/PHP]

This code (commented appropriately) is what wraps the widget and it’s heading. The %2$s adds a class specific to the widget.

Next, head to sidebar.php or wherever you want your widgets to appear. Paste in the following code:

[HTML]

[/HTML]

The alternative content will only appear if there are no widgets in the sidebar.

If you want to create a second widget section (be it in your footer, or in a second sidebar) then you will need the following code in your functions.php

[PHP]
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’=>’after_posts’,
‘before_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
[/PHP]

The only new code here is ‘name’. Which tells WordPress what the name of your new sidebar is. Now head over to the file where you want this second widget section to be and paste in the following code:

[HTML]
|| !dynamic_sidebar('after_posts') ) : ?>

[/HTML]

Change ‘after_posts’ in both bits of code accordingly and you are good to go!

Posted in PHP, Wordpress | Tagged adding widgets, sidebar, theme, widgets, wordpress

jQuery Expand/Collapse FAQs

To make a expanding FAQ style section, first make a simple definition list with terms and definitions. Give the list an id of ‘faq’. The code should look something like this: [HTML] FAQ 1 Answer 1 FAQ 1 Answer 1 FAQ 1 Answer 1 [/HTML] Make sure you have included jQuery and then use the …

To make a expanding FAQ style section, first make a simple definition list with terms and definitions. Give the list an id of ‘faq’. The code should look something like this:

[HTML]

FAQ 1: Answer 1
FAQ 1: Answer 1
FAQ 1: Answer 1

[/HTML]

Make sure you have included jQuery and then use the following code

[JS]

[/JS]

This will make a simple toggle open/close on each FAQ.

We can take this one step further and make the FAQs slide up and down. Also included in the code below is having the first one open and all the others close when you open a new one.

[JS]

[/JS]

Posted in Javascript | Tagged animation, definition, faq, html, jquery, sliding, toggle | Leave a reply

Limit Items (e.g. News posts)

If you would like to limit the amount of items coming out of an array (for example the first 5 news items), then before your loop (e.g. while), specify your start and finish points [PHP] $A = array_slice($A, START, END); while $A { [/PHP] For example, if you did want to only pull out the …

If you would like to limit the amount of items coming out of an array (for example the first 5 news items), then before your loop (e.g. while), specify your start and finish points

[PHP]
$A = array_slice($A, START, END);
while $A {
[/PHP]

For example, if you did want to only pull out the first 5 news items in an array, you would:

[PHP]
$news_items = array_slice($news_items, 0, 5);
while $news_items {
[/PHP]

Posted in PHP | Tagged array, limit, loop, php, slice | Leave a reply

Redirect to one central domain – htaccess

If you would like to ‘redirect’ all your users to a central domain (for example if you would like all users to browse your site with the www or you have several parked domains) then paste the following code into your .htacces file (normally located in the root) – works on Linux servers with cPanel. …

[html]

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !=www.codehorse.co.uk
RewriteRule ^(.*)$ http://www.codehorse.co.uk/$1 [L,R=301]

[/html]

Change the domain where appropriate. In English this says if its not codehorse.co.uk then redirect to codehorse.co.uk.

This is especially good for SEO purposes as it means google does not see duplicate content if you have several parked domains, or if you have flash on your website which generally requires the www. prefix to work

Posted in HTML/CSS | Tagged central domain, flash, google, Htaccess, redirect, seo, URL | Leave a reply

Get an ‘Even’ Class

This simple PHP statement applies class=”even” to every other element when in a loop. I often use this on tables to get an even class to help devide up the rows, but it can also be used to add a class to the 4th item in a list (if you want to remove certain margin/padding …

This simple PHP statement applies class=”even” to every other element when in a loop.

I often use this on tables to get an even class to help devide up the rows, but it can also be used to add a class to the 4th item in a list (if you want to remove certain margin/padding for example).

To start, ‘clear’ i and make it 0. (if $i is already used elsewhere in your code, you can replace it with anything)

[PHP]$i=0;[/PHP]

Then once in the loop, use/adapt the following code to achieve the desired result (have broken it up into seperate lines to add comments. The single line code is included after)

[PHP]
echo $i++ % 2 ? //if $i divided by 2 has no remainder
' class="even"' : //then echo this result
''; //if not echo this result
?>
[/PHP]

the number 2 can be replaced with what ever number item you want the class. And if you already have existing classes on your item, then remove the class=”" and just have the class name.

The code as a single line:

[PHP]

[/PHP]

Posted in PHP | Tagged class, css, if statement, loop, php | Leave a reply

Giving something a ‘Last’ Class

If you want to apply a different class to the last item in a list generated by PHP, start off with Setting the $lastOne variable to the end of your list [php]$lastOne = end($A);[/php] This stores the details of the last one in your list into the lastOne variable – we’ll compare later. You may …

If you want to apply a different class to the last item in a list generated by PHP, start off with Setting the $lastOne variable to the end of your list

[php]$lastOne = end($A);[/php]

This stores the details of the last one in your list into the lastOne variable – we’ll compare later.

You may need to modify your existing while/foreach loop, adding in the $i variable to your item. If i is already used, then pick any other letter.

[php]foreach($A as $i => $B){[/php]

Then on the list item or table row that you want to apply the last class to, compare your $lastOne with the current one your are looping through.

[php][/php]

To give you an real life example, the below was used on a project while listing out related categories to the one the user was currently browsing. We experienced a recurrence loop and so to overcome this, we simply compare the unique ID (primary key) field for ease and to bypass any problems

[php]$lastOne = end($relatedCategories);
foreach($relatedCategories as $i => $relCat){

uid==$relCat->uid?’ last’:”?>[/php]

Posted in PHP | Tagged css, last class, last one, last row, list item, loop, php, table | Leave a reply

Using PHP to get the dimensions of an image

The following code will get the dimensions of an image: [php] [/php] I found this useful when using a lightbox to load an image that I didn’t initially know the size of, to ensure the lightbox positioned itsself in the middle, based on the height and width of the image. The contents of $attr is …

The following code will get the dimensions of an image:

[php]
list($width, $height, $type, $attr) = getimagesize(PATH_TO_IMAGE);
?>
[/php]

I found this useful when using a lightbox to load an image that I didn’t initially know the size of, to ensure the lightbox positioned itsself in the middle, based on the height and width of the image.

The contents of $attr is useful for slotting straight into an tag, like so:

[html]
” />
[/html]

This will produce, for example:

[html]

[/html]

Posted in HTML/CSS | Leave a reply

Develop, Style or Add Content to a Live Site

If you want to develop/edit something on a live website, but you want to send a preview to a client, it can sometimes be tricky weighing up where and how to do it. If your website is PHP, there is a simple piece of code you can implement to send someone a test URL. Copy …

If you want to develop/edit something on a live website, but you want to send a preview to a client, it can sometimes be tricky weighing up where and how to do it.

If your website is PHP, there is a simple piece of code you can implement to send someone a test URL. Copy and paste the below code into wherever you need to add/change.

[php]<?php if($_SERVER['QUERY_STRING'] == ‘test’) { ?>
<!– code protected from public viewing –>
<?php } ?>[/php]

You can put anything in between the PHP, Including CSS, HTML and PHP. If you need to replace something rather than add, simply adapt it to be an ELSE statement like so:

[php]<?php if($_SERVER['QUERY_STRING'] == ‘test’) { ?>
<!– code protected from public viewing –>
<?php } else { ?>
<!– Original Code –>
<?php } ?>
[/php]

To access the extra content, navigate to www.yoursite.com/anypage?test. To change ‘?test’ to any other word, edit the first line of the PHP.

This is also helpful for use with contact forms (sending the user back to your contact page with ?thanks in the URL or similar and replacing the contact form with a message), or sending users to different links on the same page to reveal codes or links.

Posted in HTML/CSS, PHP | Tagged adding content, develop, html, php, redirecting, secret links, style | Leave a reply

Drop Shadow

These text and box shadow techniques were written in an edition of .net magazine. At the time I couldn’t find any documentation on the text/box shadow fallbacks for up to IE 5.5 (which these are.) However, they should be used with great caution – the MS Filer CSS properties use a lot of processing power …

These text and box shadow techniques were written in an edition of .net magazine. At the time I couldn’t find any documentation on the text/box shadow fallbacks for up to IE 5.5 (which these are.)

However, they should be used with great caution – the MS Filer CSS properties use a lot of processing power and should be used sparingly.

The .net magazine article can be found here: CSS3 Techniques

Box Shadow:

[css]
-moz-box-shadow:0px 5px 5px #333333;
-webkit-box-shadow:0px 5px 5px #333333;
box-shadow:0px 5px 5px #333333;
/*IE 8*/
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#333333′)”;
/*IE 5.5 – 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#333333′);
[/css]

Text Shadow:

[css]
text-shadow:2px 2px 2px #333333
/*IE 8*/
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#333333′)”;
/*IE 5.5 – 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#333333′);
[/css]

Posted in HTML/CSS | Tagged css3, drop shadow, IE drop shadow, internet explorer | Leave a reply

‘, //what the widget title is wrapped in ‘after_title’ => ‘

‘, ‘after_title’ => ‘

‘, //what the widget title is wrapped in
‘after_title’ => ‘

‘,
‘after_title’ => ‘