Brought to you by
2BlueSolutions Creative Web Design

Sunday, February 28, 2010

Developer Note: Customizing Agora Forum - Size of the horizontal menu bars

Okay, let's begin digging a little deeper into the style code of the Agora Forum.  We're going to begin with editing the horizontal bars to help control the appearance of your forum.

First, let's start with making sure you have the Firebug extension installed for Firefox.  The Firebug extension will really help shed a light on how the custom style sheet affects the horizontal bars.  Once installed, you can select the row in Firefox and see what styles are being used to control the row.

The one key property you are looking for is height.  It is the height of each class that we will be changing to customize the size of the horizontal bars.  What this blog post will do is show you which classes to edit in your style sheets.

Let us begin with the top horizontal bar, the main menu row of Agora Forum.  This one bar is controlled by the one class div.ag_rightend found in common.css (/joomla/components/com_agora/style).  Adjusting the height property for this one class gives you total control over the height of this horizontal bar.

Now, let's move on to what I'll call the forum row.  This is the bar that sits above your forum posts that shows the RSS feed, the forum name, topics, posts, latest post and the forum min/max button.  This particular bar is actually tied to many classes.  Each of these classes can be found in index.css (/joomla/components/com_agora/style).  Below, I'll break the bar down into each of it's columns and classes:

  • th.ag_lefthand - RSS column
  • th.ag_spacer  - spacer column
  • th.ag_column - forum name column
  • th.ag_topic2 - spacer column
  • th.ag_topic - topic column
  • th.ag_topic - replies column
  • th.ag_lastpost - latest post column
  • th.ag_spacer - min/maximize column
  • th.ag_rightend - spacer column

As you can see, there are 7 classes that you will have to edit to adjust the height of the row because the height of the row is always decided by the largest height.  So, if you edit only 4 of the classes and the others are still bigger, then it will still be the size of the largest height.  Conversely, to grow the height of a column, you technically only need to edit one of classes because the height is always decided by the largest value among the above classes.  It's still good practice to change all of the height properties across all the classes.

The next row is the board info row which is actually tied to the the same class as the main menu row:  div.ag_rightend.  So, bear in mind that whatever you change the height of the top main menu row, you will also be adjusting the height of the board info row.  Of course, this can be changed easily by adding a new style to the board info row, which we'll cover when we get to the upcoming customized style post.

The final row that you can edit will be the footer row.  This row is controlled by the class ag_footer, found in common.css.

Saturday, February 27, 2010

Developer Note: Customizing Agora Forum - Adjusting Most Active Users Section

Most Active Users Section

If you wish to remove the "Most Active Users" section of your forum, you'll need to comment out the top section of footer.tpl, which can be found in the templates directory of the Agora Forum component directory:  /components/com_agora/template/

Opening up footer.tpl, you'll find that the top section has the "Most Active Users" section surrounded by a starting and ending comment block.  To remove the "Most Active Users" from your forum, just comment out the code that is between the two comment blocks.

Now, on a side note, this area is important, if you choose to keep the "Most Active Users" section, because this is one area you'll need to apply styles, if you are customizing the look of your Agora Forum.  Take note of this location and we'll come back to it in the post I make about customizing the look of your forum.

Saturday, February 20, 2010

Developer Note: Customizing Agora Forum - Turning a cell into a link

Making The Entire Cell "Clickable"

The default settings for Agora Forum requires a user to click on the text of the forum/topic name to enter that forum/topic.  This isn't necessarily the most user friendly method of accessing your forums.  One way around this is to make the entire row cell click-able and then a user just needs to click anywhere on the cell.  You can see an example of this at the Prosupplements Forum.

So, what one needs to do is make the cell a click-able object and the easiest way to accomplish this is to add an "onClick" event to the table cell.  

Thursday, February 18, 2010

Developer Note: Customizing Agora Forum - Files

This will be the first of a few posts describing methods for customizing Agora Forum, a free component for Joomla.

Before we begin, you will need to download the Agora Forum component.  After you download you and install it, let's take a look at the files that you'll need to become familiar with.

Friday, February 5, 2010

Restoring Your Joomla Site From A JoomlaPack Backup

If you don't already have a backup file to use, install JoomlaPack and make a backup of your site and download the .jpa file that is created.

These instructions will handle restoring your Joomla site onto a new server (server move) or back onto your own server (disaster recovery).  Take the .jpa file that you downloaded after using JoomlaPack and upload it to the root of the server you want to expand it onto (ie.   /www/)  using an FTP program or your server hosts administration file handling software.  Now, grab Kickstart and upload it alongside your .jpa file.  Kickstart will allow you to log into your server through a web browser and handle the extraction of the jpa file online.

Once you have the Kickstart file and the JoomlaPack archive uploaded, browse to the location using a web browser (ie.  If you can't find the file online, then double check where you uploaded it to and put in that address.

In most cases, you can just click the green 'Start' button to proceed to the unpacking stage.  If not, see the bottom of this post for more notes.  When the jpa file has finished unpacking, you will be presented with a couple of links.   Read carefully and choose the first link that refers to setting up the installation and keep the current window open.

Review the server setup check that you are presented with.  You should have all green OKs across the board and if you don't, double check the errors and see if you can fix anything (usually permission errors involving your configuration.php file).  Click 'Next' in the upper right corner.

Now comes the database restore process which is the part that causes the most confusion.  For most cases, the first 2 lines will stay the same (MySQL and localhost).  If this is a new install onto a new server, you will need to enter your server's hosting admin page and set up a database with an admin (full permission) user.  Even if this isn't a new install and you have a database installed, I like to create a new database anyways to prevent any issues.

Now, once you have a database setup and an username to use, you can fill in the remaining three text boxes in the DB Restore page:

  • username:  host_username + db_username (ie.  myuser_admin)
  • password:  your password
  • db name:  host_username + db_name (ie. myuser_testdb)
It's not uncommon to run into a connection error at this point.  Just review all your information and make sure it is correct and try again.  Sometimes, it feels like it just works all of a sudden.

The next step is to enter your FPT login permissions.  Once they are accepted, then you will be told that the install was a success.  Now you can close that window and go back to the previous browser window that you didn't close and click the link that mentions resetting the .htaccess file.  Once that is complete, you should be up and running.  

Monday, February 1, 2010

Developer Note: Non-Standard Fonts

Many of us would like to use non-standard fonts on our websites.  The old way used to involve creating a few different styles for different browsers along with different fonts for those browsers.

I went through a situation where I converted a font from a Mac font to a Open Type Font (OTF) to a True Type Font (TTF) then, finally, to an Embedded Open Type (EOT) font.  Of course, one needs an EOT for Internet Explorer and a TTF for everything else (usually).  In my case, I needed to use 3 different programs to make the fonts that I needed!

Well, now I've stumbled across a site called Font Squirrel that will generate all the fonts that you need along with the CSS style code that you will need to use the fonts on your page.