Close

This Weeks Special

phpBB3 Spam Killer Auto Ban Mod

phpBB3 Spam Killer

This mod is an actual spam killer for phpBB3.

One Shot Auto Ban feature for the phpBB3 ACP.
Are you getting sick of the banning process for spam in phpBB3?
This mod will clean up the mess of a spammer in a simple click!

  • Ban users IP
  • Ban username
  • Ban email
  • Remove users website details
  • Remove users signature
  • Empty users PM outbox
  • Add user to a pre-specified usergroup
  • Move the user’s posts/topics to trash forum
  • All in one process

Only $5.00
Video of Spam Killer in action.
More Info

May 19th, 2010

Custom Web Fonts got Easier

Custom fonts for styling just got easier with Googles release of the new Font API

It has been a bit of a pain including custom fonts in styling do to file size, bandwidth, page load etc…
With Google releasing this new API Google Font Directory it will make things a whole lot easier for us developers and also for the users viewing the sites.

As we know including external files from huge redundant places like Google offers the best browser caching around.
The reason is that the more sites that include these files in their site, the better the chance is the the users visiting already have the file cached in their browsers.

So without further ado, here is how you can use the Google custom fonts.
There are 2 ways you can use this API, the first being more pointed towards using just one font,

You include the API style link in your html head section like this

1
2
3
4

<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>
<style type="text/css">
	h3 { font-family: 'Cardo', arial, serif; }
</style>

Now any place a h3 tag is used the font will be Cardo.
Another option is to import it directly into your CSS file at the top

1

@import url(http://fonts.googleapis.com/css?family=Cardo);

Now you can use the Cardo font anywhere in your CSS file you wish.

There is also a JavaScript version to include multiple fonts.
It looks like this,

1
2
3
4
5
6
7
8

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>

The CSS uses a class so that if it is not activated via the JavaScript, it will not even be included to the element.
The CSS looks like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style type="text/css">
.wf-inactive p {
        font-family: serif;
      }
.wf-active p {
        font-family: 'Tangerine', serif;
	 font-weight: bold;
	 font-size: 26px
      }
.wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
.wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
</style>

Here is a complete working example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google Custom Fonts</title>
<!-- Custom fonts http://code.google.com/webfonts -->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style type="text/css">
	h3 { font-family: 'Cardo', arial, serif; }
</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif;
      }
      .wf-active p {
        font-family: 'Tangerine', serif;
		font-weight: bold;
		font-size: 26px
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
<body>
    <h1>This is using Cantarell</h1>
	<h3>Something with Cardo</h3>
    <p>This is using Tangerine!</p>
</body>
 
</html>

With these new font options developers like me get an even bigger playground!

Tags: ,
Posted in: CSS
Comments: No Comments »

May 5th, 2010

VW Pro Twitter Tweeter

The Twitter Tweeter

This is a PHP/Ajax script that I made on Saturday and it turned out so slick that I am strongly thinking about adding it as an admin option to VW Pro WordPress Themes. I might even make a phpBB3 mod out of it. At the moment it’s just thoughts….

Here is a quick video of what it looks like at this point.

Tags: , , ,
Posted in: WP Theme Options
Comments: No Comments »

May 4th, 2010

CSS Arrows and Diamonds

arrow
Quick example of pure CSS power

Not that this is of much use it shows just how powerful CSS is!
There are a few spots that code like this can be applied as an alternative to using an image.

Did you know you can make an arrow out of pure CSS!

As seen in the post thumbnail, you can create arrows, diamonds and endless other shapes.

Now this is not production code here, just an example.
Here is the rough CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.arrow-block {
	float:	left;
	display: block;
	position: relative;
	width: 220px;
	height: auto;
	margin: 20px;
}
.horizontal {
	float: left;
	display: block;
	width: 200px;
	height: 15px;
	background: #333;
}
.arrow-left {
	float:	left;
	border-right: 20px solid #333;
	border-top:	20px solid transparent;
	border-bottom: 20px solid transparent;
	width: 0px;
	margin: -12px 0 0 0;
}

And this is the HTML

1
2
3

<div class="arrow-block">
	<div class="arrow-left"></div><div class="horizontal"></div>
</div>

The transparent borders are the key border-top: 20px solid transparent;.
They overwrite the colored part of the border.

You can see the code in action here in this demo.
Check out the source code for that page!

Tags: , ,
Posted in: CSS
Comments: No Comments »

Page 3 of 101234510...Last »