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:
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.
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.
Comments
Post a Comment