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.