Creating a custom Theme/Skin for YAF

Skinning YetAnotherForum is kind of self evident. Just copy an existing theme folder and XML file from the themes folder. All there is to it is a theme.css file in the folder (and a bunch of images) and the settings in the XML file. Done.

Modifying the Layout of YAF

For as easy as changing the theme of YAF is, changing the actual layout is a time-consuming and involved process. And there are a few things which are not as evident from quick google searches or examining the code. So take a lesson from me and save yourself hours of time.

1. You cannot easily remove elements by commenting out the C#

Almost any main <YAF:Element> you try to comment out will trigger errors when you try to compile due to dependent blocks elsewhere. And the source of the errors may not always be apparent. You may be able to fix those errors, but chances are it will not be worth your effort. This is a pain because depending on what you want to do you may want to eliminate some elements from showing. This may be typical for ASP.NET, but coming from PHP it prevented a learning curve. Many things you may want to remove can be removed by changing BoardSettings. (See next tip)

2. YafContext.Current.BoardSettings are stored in the database

Once you start investigating the depths of the page and class files of YAF, you will eventually start noticing how many part of the board are in hide/show if blocks based on a value of YafContext.Current.BoardSettings.[something]. Other parts of the forum look to these settings for things.

I can’t tell you how many searches I made trying to find what file BoardSettings are stored in. I still don’t know if there is a file with defaults. I didn’t find it despite much searching.

These settings can be changed in the database under the Registry table. Easy peasy? I got thrown off because many of the settings are not in the table. If they are not in the table, you will have to insert a row. The “value” field is a string, so numbers and boolean values are stored just as their string equivalent. i.e. a true value can be stored as the string “true”.

3. The logical structure of the code is as follows

This may seem elementary, but I’m new to ASP.NET and working with modifying larger(ish) packages. It would have been helpful to me to have a diagram or even just a quick explanation of the layout of what calls what.
As you can see, any single page may reference a dozen or two files. This can be a serious pain, as those .cs files in the YAF.Controls.dll are in my experience, very tedious to edit. I didn’t realize I neede the SRC version until I realized I could not access TopicLine.cs, which is necessary to change how the single line each topic is displayed as when you look at a single forum.

And to be clear: There are many more pages, controls, and elements within Controls.dll that aren’t shown here. Also, there may be some exceptions to the hierarchy shown here.

4. CSS Class names do not always describe what they refer to

With class names like .header1, .header1Title, and .rightItem, it is not always easy to tell what element these CSS classes are referring to. This can be particularly challenging when you want to edit what they are referred to and you can’t locate which source file the element it is referring to spawns in. This is more of a heads up than an actual tip.

Enjoy, and Contribute

That’s all the tips I have for you today about YetAnotherForum. In my one-day’s experience with them, I found it to be a little frustrating, however now that I am more familiar with it I feel more confident in the likelihood I would be able to switch things up more rapidly. I hope these tips help other newbies trying to do what I was doing.

If you have any tips/tricks of your own you’d like to contribute, please feel free to share and comment.

The full MSDN article is here. I will summarize the multi-page verbose article with the two important points that you need to make the connection.

1. Modifying your web.config

Replace <connectionStrings /> with one of the following <add />’s:


<connectionStrings>
  <add name="MyDbConn1"
       connectionString="Server=MyServer;Database=MyDb;Trusted_Connection=Yes;"/>
  <add name="MyDbConn2"
      connectionString="Initial Catalog=MyDb;Data Source=MyServer;Integrated Security=SSPI;"/>
</connectionStrings>
</pre>

And obviously, change the MyServer to your server’s name (i.e. localhost or 172.0.0.1 or whatever address.), change MyDb to the name of the database you want to use in the server. Simple!

2. Open the connection in your ASP script

Use the following code wherever in your script.

At the top of your page, you need to make the include to the framework API:

<%@ Import Namespace="System.Data.SqlClient" %>

And then you’re free to use the following to connect when you need to. This is in C#.

string connStr = ConfigurationManager.ConnectionStrings["MyDbConn1"].ToString();
SqlConnection conn = new SqlConnection(connStr);

And walah! You should be connected.

More short articles will follow further explaining performing queries and outputting data.

A few days ago I launch, for the first time, ZombieAttackPlans.com. The site is for users to submit their plans for surviving the zombie apocalypse. If you have some idea of what you want to do, come post it! If you don’t, come and read others’ plans. Leave feedback, rate plans, vote in the Poll of the Week, and read the Tip of the Day (updated daily, as per the name).

Please check it out and leave me some feedback on the site. I want to know how I can make it better. What do you like? And more importantly, what don’t you like?

What doesn’t work

1. strip_tags

Strip tags is bad for a few reasons. First, it ends up removing content, and sometimes more than you would think. That is not the goal of [textfield] sanitation. Sanitation is meant to prevent mischief while preserving the integrity of the user’s message. Secondly, and more importantly:

This function does not modify any attributes on the tags that you allow using allowable_tags, including the style and onmouseover attributes that a mischievous user may abuse when posting text that will be shown to other users.

That is bad for you, bad for me.

2. preg_replace (or any other regular expression function)

Regular expression is great for some things, but trying to create regex algorithms that will accurately do what you want here is not likely, and even if it does, it will be overly-complicated, time consuming, and not quickly modifiable  if you want to allow more tags. Basically, it’s overkill.

So what is a good way to let certain HTML tags through?

The Right Way

The right way is simple and maintains the integrity of the original input by first making a clean sweep, and then going back and choosing what to let through. Here is the code.

function sanitize_out($input){
  htmlentities($input);
  $c_p_open=0;
  $c_p_close=0;
  $c_b_open=0;
  $c_b_close=0;
  $input = str_replace('&lt;br&gt;','<br />',$input);
  $input = str_replace('&lt;hr&gt;','<hr />',$input);
  $input = str_replace('&lt;p&gt;','<p>',$input,&$c_p_open);
  $input = str_replace('&lt;/p&gt;','</p>',$input,&$c_p_close);
  $input = str_replace('&lt;b&gt;','<b>',$input,&$c_b_open);
  $input = str_replace('&lt;/b&gt;','</b>',$input,&$c_b_close);
  while($c_p_open > $c_p_close){
    $input .= '</p>';
    ++$c_p_close;
  }
  while($c_b_open > $c_b_close){
    $input .= '</b>';
    ++$c_b_close;
  }
  return $input;
}

Now the code here could be cleaner, but it gets the job done.

What is it doing?

1. Convert all brackets and other XML-important characters to their corresponding entities with htmlentities().
2. Back-convert specific entities into their HTML counterparts. In this case; <p> </p> <b> </b> <br> and <hr>.
3. Closes all hanging tags, so that there will be a </b> for every <b> and a </p> for every <p>.

Next time you want to do this type of input formatting, do it this way, rather than using overly-complicated eregs or some other expression.

that's cool – Original input
that\'s cool – First sensitization (single apostrophe escaped)
that\\\'s cool – Second sanitization (single apostrophe and backslash both escaped)

It only gets worse from here.

Doing input sensitization on a per-line basis is sloppy and inefficient. It is asking for you to slip up and forget to sanitize. After all, you are only human. So why not save yourself the trouble and do a universal sensitization of all user input at the beginning of your code? Use this follow PHP code at the very beginning of your script to save yourself a lot of trouble.

$_GET = sanitize($_GET);
$_POST = sanitize($_POST);
$_COOKIE = sanitize($_COOKIE);
$_REQUEST = sanitize($_REQUEST);

function sanitize($input){
  if(is_array($input)){
    foreach($input as $key => $value)
     $input[$key]=sanitize($value);
    return $input;
  }
  else
    return mysql_real_escape_string(stripslashes(trim($input)));
}

First, this script automatically trims your input, preventing usernames with spaces before or after, for example ‘Admin ‘, which to the user would look identical to ‘Admin’.

Second, it strips any backslashes out from previous sanitizations (plus typically you don’t want backslashes in input)

Third, it escapes any sensative characters (‘, “, and \n, for example).

Essentially it leaves you with ALL input safely cleared of any possibility of SQL injection.

Learn how to do this in two minutes following my near-light speed tutorial.

Breaking Out Your Grid

To get started, take any image with transparency. GIFs are a poor choice for this, because while they have transparency it is either on or off. You want to use PNG-24 images with alpha transparency.

Choose an image. In most cases, it’s not worth it to make your own since what you want has a great chance of already being made and free. Check out some of these posts from Smashing Magazine (I’m a huge fan) to take an eye to free icon and image sets made with developers like you in mind: 50 Free High-Quality Icon Sets and 35 (Really) Incredible Free Icon Sets

For this demonstration, I’ve selected this banana image from KlukeArt.

Position Relative

Now, it’s a pretty spectacular image by itself, but it’s within the lines of this post and doesn’t “pop” out of the page.

position: relative;
left: -150px;

With these two lines of code, the banana now pops over the border to the left, having moved 150 pixels left from where it was supposed to lay… unfortunately text does not wrap around it, so it looks sort of rubbish.

Next let’s see what happens when you float it to the left…

position: relative;
left: -150px;
float: left;

This is better… the text will wrap, but now the issue is that it still pushes the text out to form a margin where the image used to be, not where it is now. We will remedy this by adjusting the margins manually to match the left-shift.

position: relative;
left: -150px;
float: left;
margin-right: -140px;

Ahh! Much better! Now you have your image shifted over, breaking the linearity of your page and instantly making it more interesting and less boxy!

Position Absolute

We still have one more property at our disposal however. Up until now we have been using position: relative;. Another method is using position: absolute;. Absolute position allows you to position your element wherever you want within it’s parent box. It’s parent box will be either the element it is in with position:relative, or the entire page window itself.

For example:

<div class="relative">
  <img class="absolute" />
</div>

.relative{
  position: relative;
  background-color: #f99;
  width: 400px;
  height: 300px;
}
.absolute{
 position: absolute;
 bottom: -100px;
 right: 20px;

Pretty nifty. Oh no! There is a banana is on top of my text! Oh no! There is a banana is on top of my text! Oh no! There is a banana is on top of my text! Oh no! There is a banana is on top of my text! Oh no! There is a banana is on top of my text! Oh no! There is a banana is on top of my text!

The down side to absolute positioning is it is impossible to margin text around it effectively. So ideally you want to use it in areas where you don’t need to do so.

Comment!

I hope you enjoyed this quick tutorial. This technique works in Firefox, Chrome, IE 7+, and Opera… and probably more.

Input validation has long been a highly debated field. No one disputes some sort of validation is appropriate, but the question how much is subject of great debate. And more: server-side only enough, or are modern websites expected to have client-side too? Google “email validation,” or more specifically, “php email validation” and you’ll find hundreds of scripts all of which go about it different ways.

Programmers have spent years of man-hours working on the same sets of problems when it comes to validation. Username, password, email address, name, phone number, and so on. These fields are common in thousands of registration pages. Most have different ways of handling it. I will admit I’ve reinvented the wheel a few times. Perhaps this is because there is no definitive set of functions cross-language cross-platform that we’ve all agreed upon as the way to validate.

7 Tips for Validation

1. Validate to help your users

On the surface, the reason for validation is to make sure it doesn’t screw up your database, isn’t it? Wrong! That should just be a by-product. The real goal is to help your users—That is the entire goal of your site isn’t it? Users hate being wrong and they hate going back to fix their mistakes. The less frequently you can make them wrong and have your system work the better. The main goal of validation is to make them realize when they accidentally provide wrong information, as in accidental typos, not information your database doesn’t like.

2. Avoid over-validation

Over-validation is when you take over-examine the field you are validating, thinking strict validation will somehow help you or your user. The fact is people are not exact, and won’t like it if you try to force them to be. Try to compensate by other means (see tip#4). Furthermore, no amount of validation will prevent people from giving false names and e-mail addresses. If the reason for your rigorous screening for e-mail addresses is that, then you should reconsider.

“No amount of validation will prevent people from giving false names and e-mail addresses.”

Example

E-mail addresses are notoriously annoying for validation. What is the right way to validate? Read the follow two ways of validation (in plain English) and tell me which you think is better:

Method One: Two or more characters followed by an @ symbol followed by 2 or more characters followed by a valid extension (.com, .org, .uk, .ca, etc.). The strings before and after the @ symbol can have a-z, A-Z, 0-9, hyphens, underscores, and periods, but it must begin and end with a letter or number, and cannot have two symbols adjacent to each other. The domain name should be a valid domain (this could be checked). The entire address should not be longer than 64 characters.

Method Two: a-z, A-Z, 0-9, _, -, and ., followed by an @, followed by more of the same, followed by a period followed by a-z or A-Z only. The entire address should not be longer than 64 characters.

The first one obviously is stronger in that it required an e-mail address that is one hundred percent realistic. But, it does more than it needs to and generally will only stop people who are giving a fake e-mail from giving one that is quite so fake. Instead they’ll give a more realistic fake one. Why bother? Save yourself the time.

On Error Resume Next

'SETTINGS - ADJUST
strComputer = "YOUR_COMPUTER_NAME_HERE"
strUsernameBase = "User"
strUsergroup = "PCUsers"
intNumOfUsersToCreate = 20
intPasswordLength = 6
strFilePath = "c:\usernames_and_password_list.txt"

'===start script
Set colAccounts = GetObject("WinNT://" & strComputer & "")
Set objComputer = GetObject("WinNT://" & strComputer & ",computer")
output = "Username" & vbTab & "Password" & vbCrLf & "=================================="

For i = 1 to intNumOfUsersToCreate

	strTempUsername = strUsernameBase & i 'change to adjust how username iterates

	' === CREATE RANDOM PASSWORD ===
	strRandPassword = ""
	For o = 1 to intPasswordLength
		Randomize
		Select Case Chr(Int(3 * Rnd() + 49))
			Case "1"
				strRandPassword = strRandPassword  & Chr(Int(10 * Rnd() + 48)) 'numbers
			Case "2"
				strRandPassword = strRandPassword  & Chr(Int(26 * Rnd() + 65)) 'capital letters
			Case "3"
				strRandPassword = strRandPassword  & Chr(Int(26 * Rnd() + 97)) 'lowercase letters
		End Select
	Next
	' ==============================

	objComputer.Delete "user", strTempUsername 'deletes old user if one exists -- remove if you value the old users

	Set objUser = colAccounts.Create("user", strTempUsername )
	objUser.SetPassword strRandPassword
	objUser.SetInfo

	output = output & vbCrLf & strTempUsername & vbTab & strRandPassword

	' === ADD USER TO GROUP
	Set objGroup = GetObject("WinNT://" & strComputer & "/PCTeam" & strUsergroup & ",group")
	Set objUser = GetObject("WinNT://" & strComputer & "/" & strTempUsername & ",user")
	objGroup.Add(objUser.ADsPath)

Next

' ===== WRITE RESULTS TO FILE =========
Dim objFile, strFile, strFilePath
Set objFile = CreateObject("Scripting.FileSystemObject")
Set strFile = objFile.CreateTextFile(strFilePath, True)
strFile.WriteLine(output)
strFile.Close

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php

RewriteEngine on
RewriteRule ^(.*)$ $1.php

RewriteEngine on
RewriteRule (.*)/(.*)/(.*)/$ /$1.php?$2=$3

RewriteEngine on
RewriteRule ^(.*)/(.*)/(.*)/(.*)/(.*)/$ /$1.php?$2=$3&$4=$5