A review of the Clarisonic PRO Sonic Skin Cleansing for Face and Body

I finally got a Clarisonic. I wanted to see what the hype was all about (and since I just found out I had lupus, retail therapy is all I have).

Grey is my color of choice because I can’t stand seeing dirt marks appear on my beauty gadgets.

I got the Pro model because I wanted the body brush and attachment. I really don’t want to spend that much money on my face alone.

The package came with the following:

  • Cleansers (which I gave away)
  • Body handle (which I end up not using, since I don’t use it on my back)
  • Charger
  • Regular face brush
  • Body brush

The first time I used the Clarisonic on my face, the first word that came to mind was “meh.” It was definitely underwhelming. I was expecting some rigorous action, not the soft massaging pulse.

The second time, I did notice that my skin felt smoother – but only immediately right after. The feeling was temporary, but it felt good just the same.

I just ordered the deep pore replacement brush which hopefully will remove some of the “meh.” (By the way, just found out Amazon is the worst place to buy replacement heads. Most are fakes.)

I have been using Clarisonic more often on my body, too. Ironically, I stopped using the body brush handle, since the only place I can’t reach is my back, and I don’t see any reason to use it there. Plus, the body handle can get quite slippery when soapy. As with the face, there’s a fleeting smooth feeling after using it.

It would probably take 2 to 3 months of use for me to finally get the verdict of how useful this gadget is. In the meantime, my reco would be to buy only if you have the disposable income to do so.

Joomla Template Tutorial (Part 2)

This is Part 2 of the Joomla Template Tutorial series. Part 1 is here. Part 3 is here.

By now, you should already know what Joomla elements are, particularly Main Body and Modules/Module Positions. Let’s move on:

3. Identify where you want to place your Joomla elements

Now take a look at your mockup and decide where you want to put your Main Body & Module Positions.

Here is mine:

As you probably notice, I didn’t use any of the optional elements. I usually just use Main Body & Module Positions, and worry about the minor ones later on.

And, my template is actually very simple. My motto is: If it can be placed on a module, don’t hardcode it in the template.

A common mistake is trying to put everything in the template. I know some people who put in their menus & banners, when these can easily be placed in modules. Try to avoid these mistakes. Remember that modules are easier to edit than templates.

A template should only be a skeletal framework of your website. As a rule of thumb, only put the graphics and text that you will not be updating for at least 6 to 12 months. For me, these are my logo, my background image, & the tables which provide the division between my content & elements.

4. Create the directory structure

In your computer, create the directory structure below:

  • Create a directory called template_name (or any name you want). Don’t put spaces.
  • Under template_name, create 2 folders: css and images.

This is where you will be saving your template files, which is explained in the next section.

5. Code the HTML version of your mockup.

It’s now time to write some HTML. You need to take your time on this. Don’t worry if it takes you hours, or even days.

Look at your mockup, and start creating its HTML version — yes, with all the title, head, body, table tags. For purposes of this tutorial, save it as template.html.

Include also your logo & other graphics you have decided should be part of your template.

For those who are “HTML-challenged,” if you are using Fireworks or ImageReady, you can use the export to HTML function. Most will probably design their first template using WYSIWYG editors such as Dreamweaver & Frontpage. There are, however, some people who are proficient enough with HTML that they can use a text editor. Again, use the tools you’re most comfortable with.

Where to save your files. By the way, your files should be placed in the proper folder / subdirectory. Remember the directory structure you created in the previous step? Here is a brief explanation of what should be saved where:

Folder Save what files
template_name template.html (which will be renamed later on to index.php)
template_name/images All images
template_name/css CSS file (template_css.css)

 

You can start coding your Cascading Style Sheets, too. If you’re not sure how to go about this, just create a blank text file with the filename template_css.css. Or, you can also use my Blank CSS Template for Joomla which includes all the styles that is used by Joomla.

Remember to save your template_css.css file in the proper folder: /template_name/css

6. Rename your HTML mockup to index.php

Backup your template.html file, and save it in a different folder. Now go back to your template.html file (the one that is located under template_name), and rename this to index.php.

7. Enter the code for the Joomla elements

It is now time to put the Joomla Element Codes in your template. You see, there is a special code assigned to each Joomla Element. You simply have to enter these codes where you want your Joomla Element should appear.

Open index.php (formerly template.html) in your text editor. You can also use Dreamweaver, but make sure that you are in Code View. Now locate where your Joomla elements are located, and paste its corresponding code.

Joomla Element Code
Main Body <?php mosMainBody(); ?>
Module <?php mosLoadModules ( ‘module_name’ ); ?>

Note: Change module_name to what you want to call your module. For example, if your module name is right, your code should be <?php mosLoadModules ( ‘right’ ); ?>

Date <?php echo mosCurrentDate(); ?>
Footer <?php include_once( $GLOBALS[‘mosConfig_absolute_path’] . ‘/includes/footer.php’ ); ?>
Pathway <?php mosPathWay(); ?>
Site Name <?php echo $mosConfig_sitename; ?>

For example, if you want to put the Main Body in the center table, then you have to put the code <?php mosMainBody(); ?> inside that table.

This ends Part 2 of the Joomla Template Tutorial. Click here for Part 3

Joomla Template Tutorial (Part 1)

This is Part 1 of the Joomla Template Tutorial series. Part 2 is here. Part 3 is here.

This is an article that I’ve been delaying because its not the easiest thing to write. But as luck will have it, I decided to do a redesign of my website, & decided not to put this off any longer. Hit two carabaos with one stone, so to speak.

Some notes:

  • The instructions are meant for Joomla 1.0.12
  • This tutorial is for those who are already comfortable with HTML & CSS.
  • Unfortunately, I will not be touching on the CSS of Joomla. CSS is an entirely different animal altogether, and if you think about it, is outside the scope of any template tutorial. I will, however, try my best to cover the different styles that are called by Joomla in another article.
  • For the purposes of this tutorial, the new template design of chette.com (v5.00) is used for illustration purposes.

Please do give me feedback about this tutorial (either thru my contact form or thru the comment form). Tell me what you think of the article, any suggestions for improvements, or even your own tips.

1. Conceptualize the design of your website

Before doing any template development, the first step is always to come up with the “look” of your website. I personally use Macromedia Fireworks (now Adobe Fireworks), or doodle on good ol’ fashioned paper.

Use the graphics program you’re most comfortable with. And yes, enough of this Photoshop vs. Illustrator vs. Fireworks debate.

As a general rule, make the mockup as simple as possible. Try to avoid designing mockups which require you to use complicated nested tables.

Below is my mockup:

2. Identify the Joomla elements to use

While designing your mockup, you need to decide which Joomla elements you need to use. This is where it gets tricky for newbies. What are Joomla elements, anyway? I will try to explain this part as simple as I can, and then show you examples so you can get a better idea.

You should treat Joomla like furnishing your office space. Where do you put the tables, the cabinets & chairs?

Your blank template page is the room itself. The tables, chairs, & cabinets are the Joomla elements. Where do you want to put your articles? How about the list of latest news? The menu?

There are 2 major elements that you need to be aware of: Main Body & Module Position. Most, if not all, Joomla-based websites use these two.

Main Body is where your content items will appear. This is the meat of your website – full contents of your article, list of articles of a particular category, your guestbook, etc. They all appear on the same place on a page — not at the same time, of course, since it depends on what menu item was clicked. For instance, your guestbook will appear if you clicked on Guestbook, and your article will appear if you click on the link to your article. But basically all these are displayed on the same position, which is the main body.

Modules are your menu, polls, headers, custom text, banners, etc. It can even be static text. Some people call this “sideblocks.” Let’s just say that these are the mini content items that can appear around your Main Body.

Now Module Positions are where you want your modules to be placed. You can name it any way you want, but it is advisable that you use a highly descriptive name such as right, left, top, bottom, footer, etc.

If your polls and your menu will be placed on the same part of the page (for example, on the right side, but on top of each other), only define one module position for that (“right”). Why? Because you can have multiple modules in the same module position. You can even change the ordering — which module will appear on top, etc.

And another thing about modules: You can make a module to appear only for a specific menu item.

For example, you have 2 menu items called Cars & Motorcycles. Whenever your user is reading an article under Cars, you want a graphic module to appear. However, when your user is reading an article under Motorcycles, you want another graphic module to appear, but in the same module position. This is possible. You just need to set it in the Administrator later on.

Modules are very powerful. Almost anything can be placed on a module. I know people who merely upload a barebones template (practically blank), and just put their logos, mastheads, & other graphics in modules. It makes templates a lot easier to maintain.

There are more modules built-in to Joomla, but they are optional:

  1. Date. Displays the current date, based on your web server’s system date.
  2. Footer. For copyright notices at the bottom of the page. I personally don’t use this because it’s a lot cumbersome to edit. I merely define a “bottom” Module Position and put my copyright text there.
  3. Pathway. The breadcrumbs navigation of your website. For example: Home > Menu > Article
  4. Site Name. Use this if you want the name of your website to appear anywhere else in your page.

This ends Part 1 of the Joomla Template Tutorial. Click here for Part 2.

Changing ordering of page title and site name in Joomla

It is good SEO practice to put the page title first in your title tags, and then your site name. Unfortunately, by default, Joomla places the site name first before the page title.

To change this, grab a copy of the file /includes/joomla.php

Around line number 507, replace this:

$this->_head['title'] = $title ? $GLOBALS['mosConfig_sitename'] . ' - '. $title : $GLOBALS['mosConfig_sitename'];

With this:

$this->_head['title'] = $title ? $title .' - '. $GLOBALS['mosConfig_sitename'] : $GLOBALS['mosConfig_sitename'];

Removing horizontal space in mosimage

When using the mambot {mosimage}, Joomla automatically puts a horizontal space (hspace) around your image. This can destroy a website layout, especially one that is specifically sized up to the last pixel.

An alternative, of course, is to just