How To Make TinyMCE fonts bigger

The following instructions will show you how to make the fonts on your TinyMCE editor a little bigger than the default 10px. If your eyes are not as good mine, then you may need to increase the fonts to something a little bit more legible. Font sizes bigger than 12px would do.

If you are not familiar with TinyMCE, it’s a popular web-based text editor used by many web applications, CMS and blogging software. WordPress uses TinyMCE editor as well, which is the blogging software for this blog. Now, if you need to increase the size of the text in the textarea, then you will need to edit the several themes that came with TinyMCE.

I ended up editing several themes anyway because I didn’t clear the cache at first, and I kept trying different themes without seeing any changes. You will need to clear the cache in your browser to really see the desired results.

There are a total of 4 different themes in the TinyMCE folder. They are located at: tiny_mce/themes/advanced or tiny_mce/themes/simple folders. Change the font size for the textarea of the theme you are using. I found the CSS at the top of each file.

Clear your cache and reboot. You should see a much bigger font size of 12px.

JQuery Datepicker

Typing in dates in a date field is never fun. It’s cumbersome. There is always a possibility of typing in the wrong format. There are far superior techniques that can be used and implemented when populating date fields.

JQuery is one tool that can be used to format date fields. JQuery is a set Javascript libraries that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

JQuery has a component called JQuery UI, that provides low-level interaction like animation, advanced effects and themeable widgets use to build highly interactive web applications.

1. Download JQuery UI.

You can build your own custom JQuery scripts directly from JQuery’s website. You can select which feature you want installed. You can also select a specific theme. By selecting only the theme and features that you want, you can create a lean, strip-down version of JQuery. The download will include the following folders: css, js, development-bundle.

2. A Sample Datepicker Page

I created a simple HTML page that display how Datepicker works. In this example, I’m referencing Jquery UI from a local file. You can use a CDN if you want. I’m using the Smoothness theme and its supplied CSS.

The HTML input form needs to have an ID. In this case, we are using the id=”datepicker” for the date field. We are forcing the datepicker to use the ISO 8601 format which is “yy-mm-dd.”

<link href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
// <![CDATA[
  $(function() {
  $( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
  });
// ]]>
</script>

Here’s a demo.

Add Focus To HTML Forms

When you visit Google.com, you probably noticed that the mouse cursor jumps to the searchbox, ready for users to type and submit a search. This method is called form focus. It’s made possible by using Javascript. With Javascript, you can set certain elements of the HTML form to be set in focus. This is particularly helpful for pages where there is minimal content, and the intent of the web developer/designer is to get the user to enter data and submit quickly. A login page is a perfect example of such a page.

You can bring into focus the username field, so users can start typing their login credentials. The form focus saves users from finding the mouse cursor on the screen, and then clicking on the field. With form focus, users are already on the form, ready to input text and submit. If the user presses Tab, the cursor jumps to the next field, which happens to be the password field. Pressing Enter, simply submits the form to start the login process. This article will show you the most simple way to add form focus to your HTML forms. Consider a login page. It has two fields: username, password, and a Submit button. The HTML markup is:

<form method="post' action="submit.php">
<label for="username">Username: </label>
<input type="text" name="username" />
<label for="password">Password: </label>
<input type="password" name="password" />
<input type="submit" name="submit" value="Login" />
</form>

How To Add Focus To Forms

1. Assign an ID to the form. We are using an id of “login” in this example.

<form id="login" method='post' action="submit.php">

2. Add IDs to the fields.

<input id= "user" type="text"  name="username" />
<input id= "pass" type="password" name="password" />

3. Add Tab Index to the fields. Notice the order starting with 1 and then 2.

<input id= "user" type="text" name="username" tabindex="1" />
<input id= "pass" type="password" name="password" tabindex="2" />

4. Add Javascript at the end of the form.

<script type=”text/javascript” language=”JavaScript”>
document.login.user.focus();
</script>

Where login is the id of the form, and user is the id of the field.

Final Form

<form id="login" method="post" action="submit.php">
<label for="username">Username: </label>
<input id="user" type="text" name="username" tabindex="1" />
<label for="password">Password: </label>
<input id="pass" type="password" name="password" tabindex="2" />
<input type="submit" name="submit" value="Login" />
</form>
<script type="text/javascript" language="JavaScript">
document.login.user.focus();
</script>

This is just one way of adding form focus to HTML forms. There are other methods, like using body onload and such, but I find this method the cleanest and the most simple one to implement by far.

A New Theme

A new year, a new theme, a new framework, a somewhat familiar layout, and the same old background. The new theme is based on the Genesis framework by StudioPress. I’m using a child theme called News.

The new theme should be more flexible when it comes to layout and functionality. The Genesis framework is quite robust. The framework has a plugin called Simple Hooks that makes it easier to make theme customizations.

A piece of code can be inserted using Simple Hooks. It will accept any HTML, Javascript and PHP code. The hooks can do wonders when inserted in key sections of the framework. Plugins shortcodes can be inserted as well.

Overall, I’m still learning how to work with this framework works. The concept is a little foreign to what I am used to, but I like what I have done to the theme so far.

I hope you like the new theme.

Aptana Studio 3

I finally took the plunge and downloaded Aptana Studio 3. Aptana is an open-source IDE or integrated development environment for web developers. The IDE supports all the latest web technologies including HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python.

It’s impressive despite having only a couple of hours playing with it. I really like the ‘code assist’ feature that comes with the IDE. I haven’t use all the features yet, but the deployment wizard, git integration, and the built-in terminal, sounds very, very inviting.

The learning curve isn’t steep. It’s just the right level for someone who may be tempted to try using an IDE. Aptana reminds me of Eclipse and a little bit of Textmate. The program does require Java, which my Ubuntu desktop already has installed.

Some people had issues with Git commits and some complaints about the program being resource hungry. I can’t comment on those yet since I’ve only been using it for a couple of hours. My first impression of Aptana Studio 3 is very good.

Adding Javascript Confirmation To Forms

One feature worth implementing when designing websites is to add confirmation to forms. A simple popup message saying “Are you sure?” can greatly enhanced the user experience. It gives users a chance to confirm or escape out of a certain function. This is particularly feature is valuable after users click the Save, Delete or Submit button.

Unfortunately, both HTML and PHP languages lack the feature to add confirmation to forms. We turn our attention to Javascript the popup confirmation message we need in our forms. Below, you will see a simple, plain vanilla, submit button inside a HTML form.

HTML Form

<input type="Submit" name="submit" value="Submit" />

To add a confirmation to our submit button, we will use Javascript’s onclick event to detect if the input object has been clicked. Here’s how we add the onclick event in our simple form.

<input type="Submit" name="submit" value="Submit"
onclick="return confirmation();" />

Javascript Confirmation

Where’s our Javascript function? Well, here it is. Now that we have added the onclick event to our submit button, we will now add our Javascript function that you can place anywhere on your page. Here it is:

<script>
function confirmation()
{
var answer = confirm("Are you sure?")
 if (answer)
 {
  return true;
 } else {
  if (window.event) // True with IE, false with other browsers
  {
   window.event.returnValue=false; //IE specific
  } else {
   return false
  }
 }
}
</script>

The if statement with window.event is for the IE browser since it doesn’t play nice like the other browsers. You can call the Javascript function multiple times on the same page every time you need a popup confirmation. So there you have it, a simple popup confirmation you can add to your forms.

Redirect With Cancel Button

When working with HTML Forms, a Cancel button is sometimes handy when you want to reset a form. It deletes the user’s input and displays the same form again. This is particularly helpful to users that want to reset a form from scratch and start with a new form entry.

Here’s a simple HTML page called “form.html” that uses the “post” form method and uses an action to itself – the same page which is “form.html.” The form also contains a Cancel button which will be rendered using the input markup below. Notice the input type is set to “submit.”

Cancel Button To Reset Form

<html>
<head>
<title>Form</title>
</head>
<body>
<form method="post" action="form.html">
<label for="firstname">Firstname:</label><br/>
<input type="text" name="firstname" value="" />
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="cancel" value="Cancel" />
</form>
</body>
</html>

Redirect With The Cancel Button

To use redirect with the Cancel button, we will use a simple Javascript event called “onclick=window.location” to send the user to another page called “anyfile.html.” We can also redirect the user to another domain if we want to such as “http://google.com.” Notice the input type is now changed from “submit” to “button.” This is very important. The input type needs to be set to “button,” otherwise our redirect will never work.

<input type="button" name="cancel" value="Cancel"
onclick="window.location='anyfile.html'" />

This is just a simple way to redirect users with the Cancel button. There are other ways of redirecting users such as using Javascript functions, etc., but it’s beyond the scope of this article.

Add Tweet Box To Your Blog

Tweet Box allows Twitter users to tweet directly from your website or your blog. To add Tweet Box to your website or blog, simply add this little piece of code to your WordPress single.php theme file. You can place it anywhere you like. I have it installed at the bottom of this single.php page. See below.

<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#tbox").tweetBox();
  });
</script>

You can modify Tweet Box by passing parameters to the script.

<div id="tweet-box"><h3>Twitter</h3></div>
<script type="text/javascript">
    twttr.anywhere(function (T) {
      T("#tweet-box").tweetBox({
        'counter' : true,
        'height'  : 50,
        'width'   : 440,
        'label'   : "I made it easier for you to tweet this:",
        'defaultContent' : "Just read: <?php the_title(); ?>
        @ulyssesonline",
      });
    });
</script>

In this example, I’m displaying the counter, which counts the number of characters left in the tweet box. You can set the height and the width of the Tweet Box. I have it set to 440px x 50px to match the content area of my blog. I’m also displaying the label, as well as the default content. The default content includes the title of the blog. I’m calling the WordPress’s the_title() function to display the post title.

I hope you find this helpful. Send a tweet.

JSColor Is The Best Color Picker

Javascript color pickers are fun. They make picking colors on web forms an easy task. One of my favorite color pickers is called JSColor. I like it for its simplicity. It’s easy to install and use. It’s also elegant.

To use JSColor, just download the source and paste this code in your pages:

<script type="text/javascript" src="jscolor/jscolor.js"></script>

Add the “color” class to your input tag:

<input class=’color’/>

And you’re done. Simple.

This is the main reason why I rated JSColor the best Javascript color picker.

See the demos here.