Ahead: My experience with Wordpress and Joomla, and recommendations about which one to choose!

Okay, I haven't written anything for a while about Joomla. I have been busily packing, trashing, moving and building a new business site. I started out building the site with Joomla. I designed it and began to code it. But because of my no-PHP skills, I kept running into template questions. "How do you make it do this?"

After weeks of trying and frustration, I decided I needed to hire a programmer to help. We had almost finished the project when all of the sudden he was non-responsive. But it left the template unable to be used. Finally, he said he could do it for additional money. 

In the meantime, my brother opened a business, and I needed something simple and fast for him - with no huge learning curve. That knocked out making it a joomla site. He simply wanted a blog, and no CMS stuff. So, I talked to my friends using Wordpress and decided to make his site a wordpress site. It's not quite live yet, but will be in a few days: www.localflavorscatering.com.

As I was working with Wordpress, coming off a very, very frustrating time with Joomla, I thought, "I have died and gone to heaven!" (Wait, there's more to the story before you go off running to Wordpress.)

Real World: I wanted to make an expanding, adjustable, rounded corner, complicated module. I didn't want to just add some nice border to the module. I wanted fancy.

Easier said than done. But it can be done. Here's how.

I'm going to use the basis of another tutorial. You can access that other tutorial at WebDesignerWall, here. But I'll tell you what you need to know from that tutorial now. You can download my image files here, and it will eventually look like this.

Step 1: Make a box you want on the site! See my tutorial. 

( How to design my own module in Joomla.)

Step 2: Go into your administrator back-end, Extensions>Module Manager, and set-up a module (New module -->Custom HTML -->Enable). Under PARAMETERS on the right of the module set-up, you will notice a box called "suffix." Type in the name of your module design you will code. In other words, if your module will be called "bird," in the suffix box put underscore bird or _bird, no spaces.

For our  purposes, the module will be called "sunbox." This is how the module parameters would look for this exercise:

I've been working for the past few weeks on a new design for Joomla!. I had not really delved into how to create a "beyond-the-standard" look of a module, with expanding images. So, let me explain how to do it for all of my fellow Noobs.

First, there is some good documentation on the Joomla site - access "Tutorial: Using Class Suffixes in Joomla 1.5." This tutorial will teach you how to add a suffix in the administrator backend of your site > Extensions Menu > Modules > Choose a Module > Parameters on right of module set-up.

Go, read that, really! 

Second up is how to really create the graphic you'll need.

I've been experimenting with several template overrides. You'll need to work on a template override to have your Joomla template lean, mean and fast as a table-less template. Say what??

Well, here's the deal. You can work up that perfect template with only html (no tables) and a slick css. But the Joomla! system itself (read "modules") generates tables!

One easy way to do away with all of those tables is to:

1.) create your template and upload your template package into your joomla install;

Google analytics is a great addition for tracking what your visitors do with your website. And it's easy!

Here are the steps:

1. Get a Google Analytics account and add your domain information to this account. 
2. Get your Tracking Code. If you don't see that or know how to find it, follow these instructions. The code is a line of script Google tells you to put into your site so that they can "find it."
3. Add your tracking code to your blog template html. In the administrator backend of your joomla site, go to "Extensions" -->  Select the Radio Button next to the template being used by your blog you directed Goggle Analytics to --> Select "Edit" in the top right corner --> Select "Edit HTML" --> Scroll down to where you see this head tag, beginning with <head>. Paste your Tracking Code into the head tag where shown in this html image below. Save. Close Template editing.
4. Go back to your google analytics account. Click on 'check status' (the yellow triangle) if you see a yellow triangle.

Everything you actually see on a web page is in an "imaginary" box. Text is in a long box, pictures are in a box, video is in a box, and every element on your page is in a box that sometimes is seen because of an actual border, but often is unseen.

If you could think of each element on your page as a container box which holds an element, then what we do with CSS (cascading style sheets) is change where that "box" lives on the page. Essentially, we can lift that box and carry it to a different location.

When I first started looking at joomla templates, I was a bit confused about how to move something on the page. I got the idea of thetag and thought that I could move things around with the tag in the html of a template. Although true to a limited degree, the power of joomla is it's use of CSS for positioning.

The container box is created with the tag. But if you would mark that box with a special name, then you can tweak it and move it with the CSS.

Here's a typical example so that you see what I mean. You find the xhtml in the index.php file. This file contains both php and xhtml. Let's look at the xhtml.  

 There are two "boxes" named here: header and topmod. By naming those (with an "id"), CSS can be written to define what those boxes look like and where they live on the page.

Let's look at the CSS for these two "boxes."

#header {
    position: relative;
    z-index: 100;
}

 #topmod {
    height: 100px;
    float: right;
    margin-top: 20px;
    overflow: hidden;
    width: 500px;
    position: relative;
}

The header is positioned "relative" - or basically it will stay within the normal flow of events as put in the xhtml template. The z-index makes sure that it is on top. Notice that it doesn't give a size as that's handled by other CSS in this particular template.

The topmod does give a size and margins, etc. You can play with these and see what happens.

To summarize, the index.php will name "boxes" with a name indicated by the id="name." Look for those names in the CSS, and they will always start with a # sign. There are other ways to name "boxes" and that's for another post.

 

 

Read More...

on Aug 05, 2009 Posted by: Sandy in Joomla Stuff | Comment (0)

Tagged in: tutorial

Shout-Outs to Best Templates Out There

Over the years I've experimented with three companies for joomla templates. Of these, I highly recommend any of these three companies, "Yootheme" - "Rockettheme" - "Shape5." They each do quite a bit of work in their templating at giving each template a nice trim look with great CSS coding, and joomla program overrides where needed.

These companies:

• offer subscription service at reasonable rates and at different lengths of time
• give great support that is timely and extremely helpful
• provide wikis or "how-to's"
• provide bulletin boards for customizing templates, and a place to ask questions
•  are committed to helping joomla get better

Recently, YOOtheme released it's July 2009 template and it's worth looking at: Phoenix. It's based upon a grid system:

"It provides a hybrid fluid-pixel grid and all the elaborate functionalities that make our templates easy to edit, nice to look at and super fast, in every browser. "

-- YOOtheme website on Warp5 System

It looks extremely flexible and very rich in design.

Read More...

on Jul 22, 2009 Posted by: Sandy in Joomla Stuff | Comment (0)

Tagged in: joomla templates

Want to Know How to Local Test Your Joomla?

I can’t believe it worked! I’ve tried to install LAMP before so that I could have a localhost server for testing pages and joomla previously – with much growling and frustration unbecoming to a lady. I was reading here (http://techwhimsy.com/local-development-installing-xampp) today as I was getting ready to launch this new blog site and a whimsical thought attacked my brain: WHY NOT TRY IT AGAIN! It’s so good to see the browser come up with XAMPP all fired up and ready to dance!

Thanks Shane Perris in Australia!

If you don’t know what XAMPP is – look at Shane’s article and he’ll explain what you would want it for!

To install Joomla onto this localhose XAMPP – see Shane’s tutorial at www.techwhimsy.com.

[Invalid video specified] 

Read More...

on Jun 11, 2009 Posted by: Sandy in Joomla Stuff | Comment (0)

Tagged in: resources

Joomla 1.5 "Template": Coding for Modules

Here is a snapshot of the site structure including modules. It will help me as I replace the places in my Dreamweaver html file with the actual code for modules. (*This is not the same as a site mock-up but is simply a layout visualization help. The colors are not representative of the site.)

Click on this image to see the larger more readable version. Save it if you like, by right clicking and choosing "save as."

Each place where a module is located replaces some code in our Dreamweaver page. You can see the

Read More...

on Jun 09, 2009 Posted by: Sandy in Joomla Stuff | Comment (0)

Tagged in: joomla

A Clean, Simple Joomla 1.5 Template for Blog

One website, joomlatp.com, takes free CSS templates and creates free Joomla! 1.5 Templates.

Here's the module layout for this one made off of keepitsimple free css from styleshout.com.

Read More...

on Jun 08, 2009 Posted by: Sandy in Joomla Stuff | Comment (0)

Tagged in: templates

<< Start < Prev 1 2 Next > End >>