Tips & Tricks

[ndee]

Hey guys, how are you today?

I compiled a small list of CSS, Javascript, PHP and even HTML tips & tricks.
I didn't spend that much time on this, so it may not be the best tutorial -- written by me.

Anyway, right to the point.
I'll be dividing the tutorial into 5 parts:

I.CSS
II.PHP
III.HTML
IV.Javascript
V.HtAccess

I.CSS

Small and simple but useful Link Rollover trick (this might also be known as CSS Sprite):

Code:

/* The following will display part of an image and then display another part if you hover over it. */
a {
       display: block; /* This sets a line break before and after the image */
       background: url(imagelinkhere) no-repeat; /* Chooses the image, please change imagelinkhere to your images location */
       height: heighthere; /* Sets height */
       width: widthhere; /* Sets width */
       text-indent: -9000px; /* Makes the link invisible to visitors */
}

a:hover {
       background-position: 0 -25px; /* Sets starting point for the image */
}

Neon shadow (the one used on thenopslide.com):

Code:

h1 {
text-shadow: 0 0 0.2em #cb1b1b, 0 0 0.2em #cb1b1b,
        0 0 0.2em #cb1b1b; /* Sets a neon shadow for anything in the <h1> tags. Be sure to change #cb1b1b (Red) to anything you wish. */
}

Rounded Borders (although there are many similar to this, I just like using the simple version):

Code:

#roundedborder {
    border-top: 1px solid #444; /* Sets a 1px solid border with a grayish color to the top */
    border-bottom: 1px solid #444; /* Sets a 1px solid border with a grayish color to the bottom */
    border-right: 1px solid #444; /* Sets a 1px solid border with a grayish color to the right */
    border-left: 1px solid #444; /* Sets a 1px solid border with a grayish color to the left */
    border-radius: 15px; /* Sets the border radius to 15px, this is what makes your borders rounded */
}

Input buttons background:

Code:

input {
background-color: #ff0000; /* Sets the background color for the input to red */
color: #ffffff; /* Sets the input text color to white */
font-weight: bold; /* Makes the text bold */
font-size: 10pt; /* Changes text size to 10 points */
}

That's it for CSS.

II.PHP

Automatic Copyright Year:

PHP Code:

2009-<?php echo date("Y") ?>

Require_once: (Wasn't sure if I should post this since it's not exactly a trick, but I do find it useful)

settings.php:

PHP Code:

<?php
$stuff = "a Playstation, an Xbox, and 3 notebooks."; // Creates $stuff and sets it to a Playstation...
?>

index.php:

PHP Code:

<?php
require_once('settings.php'); // This is where the magic happens, we'll require_once settings.php, and here's what happens:
echo "I own $stuff"; // Here we echo $stuff from settings.php
?>

Ternary Operator:

Normal PHP:

PHP Code:

if (isset($_POST['ternary'])) // If ternary is set
{
  $ternary = $_POST['ternary']; // It will set $ternary to the value set above
}
else
{
  $ternary = "TNS"; // And if not, it will set it to TNS
} 


Ternary:

PHP Code:

$ternary =  (isset($_POST['ternary'])) ? $_POST['ternary'] : "worked"; // ? means if true, and : means else 


PHPInfo:

PHP Code:

<?php phpinfo()  // Displays PHP info and a bunch of other stuff ?>

III.HTML

Image instead of bullets:

Code:

<dl>
<dd><img src=".." />Text</dd> <!-- Creates a bulleted list with '...' as the bullet. -->
</dl>

Marquee:

Code:

<b> <!-- Sets text to bold -->
<font color="#FF0000" size="5"> <!-- Changes color to red and size to 5 -->
<marquee behavior=alternate direction=up scrolldelay=30 height=250 style="Text-align;filter:wave color:'#FF0000' scrollamount='5'"> <!-- Sets marquee -->
<center> <!-- Centers text -->
ndee
</center>
</marquee>
</font>
</b>

Text around image:

Code:

<center>
<table border="0" width="85%" cellpadding="10" cellspacing="10" bgcolor="#222222"> <!-- Creates a table -->
<tr>
<td>
<font color="#ffffff">
Text on the left
</td>
<td align=center>
<img src="..." width=150 height=200>
</td>
<td>
<font color="#FFFFFF">
And here the text is on the right
</td>
</tr>
</table>
</center>

IV.Javascript

Edit page using Javascript:

Enter the following in the address bar:

Code:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Javascript calculator:

Enter the following in the address bar:

Code:

javascript: alert(5+5);

V.HtAccess

Custom 404 error page:

Code:

ErrorDocument 404 /c404.html

Custom default index page:

Code:

DirectoryIndex custom.html

Automatic www.:

Code:

RewriteEngine on
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} ^thenopslide.com tld$ [NC]
RewriteRule ^(.*)$ http://t.tld/$1 [R=301,L]

Redirect:

Code:

RewriteEngine On
RewriteRule ^(.*)$ http://www.thenopslide.com/$1 [R=301,L]

And there you go, that'll be all for now. I may make a part 2 later.

You may find these codes somewhere else, but that's just because most of them are common.

[.:xX[ThunderStorm]Xx:.]

Nice codes by the way did you write them your own?

[ndee]

Yes, the codes are written by me.

However, I have no doubt there are people who know these and have posted something similar to them somewhere else.

[Tierney]

Thanks for this. I auctually learned something from the CSS part. I suck at CSS.