The Joomlashack Blog

The default Joomla offline page has a large Joomla logo and the message "The site is down for maintenance. Please check again soon."

In order to to start changing the page, go to the Administrator area of your website, click "Site" and then "Media Manager".

Click the red X next to the file called joomla_logo_black.jpg. We're going to delete that file so that you can upload your own.

Here's the thing ... you must make sure that the file you're uploading is also called joomla_logo_black.jpg. If it isn't yet, rename it.

At the bottom of your screen, click "Browse" to find the image on your desktop. Then click "Start Upload". If your image had uploaded successfully you should be able to visit the front of your site and see the new logo.

If you'd like to change the text that appears on your offline page, go to Site >> Global Configuration and you can edit two area:
- Offline Message
- Site Name

Click Save when you're done and visit your new offline page:

Login to the Administrator area of your site and click "Menus" then "Main Menu".

Click "Home" in the list of menu items.

On the right-hand side, click "Parameters (System)".

There are two ways to fix this problem:
1) You can change "Welcome to the Frontpage" to something that matches your site.
2) You can set "Show Page Title" to "No" and just remove it entirely.

The first thing you should know is that the Bolt template is 960px wide. That's how much space we have to work with. By default, there are three elements taking up that space - the left column, center column and right column,. They are controlled by only four CSS elements.

First of all we have the left div. This div is straightforward and the most important element is the width:

#left {
 float:left;
 font-size:1.2em;
 overflow:hidden;
 width:160px;
 }

Next there is a second layer of CSS added to the left div. This only happens when there are three columns live on the site. The margin is 660px from the edge of the right column and actually controls the placement of left column. If this number were -770px then the left column would disappear off to the left-hand side of the site.

.threecolumns #left {
 margin:0 0 0 -660px;
 }

This is the CSS that controls the main body text. The left margin of 170px keeps the main body out of the way of the left column which is 160px wide.

.threecolumns #center {
 margin:0 10px 0 170px;
 width:480px;
 }

Finally we have the right column. This is even simpler than the left column - the main element is the width of 300px.

#right 
 {
 float:left;
 font-size:1.2em;
 overflow:hidden;
 width:300px;
 }

We're going to reduce the right column size so that it is only 200px wide rather than 300px. Here's what we need to change.

Remember that the left column position is definited by its margin from the right column. So if the right column shrinks, we need to increase the margin if we want the left column to stay in the same place. Because the right column is shrinking by 100px, we're going to increase the margin by 100px from 660px to 760px.

.threecolumns #left {
 margin:0 0 0 -760px;
 }

Also, we're going to allow the center of the site to take up the extra 100px so let's increase its width from 480px to 580px:

.threecolumns #center {
 margin:0 10px 0 170px;
 width:580px;
 }

Finally, we actually need to shrink the right column from 300px to 200px:

#right 
 {
 float:left;
 font-size:1.2em;
 overflow:hidden;
 width:200px;
 }

We're going to increase the left column size so that it is 260px wide rather than 160px. Here's what we need to change.

Remember that the left column position is definited by its margin from the right column. However, the controlling element is the left-hand side of the left column. That's not moving. Neither is the right column. So we can leave this part alone:

.threecolumns #left {
 margin:0 0 0 -660px;
 }

We do need to change the width of the left column. This is fairly simple: we just change 160px to 260px:

#left {
 float:left;
 font-size:1.2em;
 overflow:hidden;
 width:260px;
 }

We're going to take that extra 100px from the center of the site so let's decrease its width from 480px to 380px:

.threecolumns #center {
 margin:0 10px 0 270px;
 width:380px;
 }

Finally, we can leave the right column alone:

#right 
 {
 float:left;
 font-size:1.2em;
 overflow:hidden;
 width:300px;
 }

Whereas the three column layout can be tricky, the two column layouts are much more staightforward. We're just using simple widths for the two columns:

#left
 {
 float:left;
 font-size:1.2em;
 overflow:hidden;
 width:160px;
 }

.leftcolumn #center {
 margin:0 0 0 170px;
 width:790px;
 }

We're going to increase the size of the left column by 100px so let's increase the width from 160px to 260px:

#left
 {
 float:left;
 font-size:1.2em;
 overflow:hidden;
 width:260px;
 }

For the center column we need to reduce the width from 790px to 690px in order to add that width to the left column. We also need to accomodate the left column by increasing the margin from 170px to 270px:

.leftcolumn #center {
 margin:0 0 0 270px;
 width:690px;
 }

Again, the two column layout is staightforward. We're just using simple widths for the two columns:

.rightcolumn #center 
 {
 margin:0 10px 0 0;
 width:650px;
 }

#right 
 {
 float:left;
 font-size:1.2em;
 overflow:hidden;
 width:300px;
 }

We're going to make the right column narrower by 100px. So in order to fill up that space, let's make the center column wider by 100px:

.rightcolumn #center 
 {
 margin:0 10px 0 0;
 width:750px;
 }

Now let's remove 100px from the right column.

#right 
 {
 float:left;
 font-size:1.2em;
 overflow:hidden;
 width:200px;
 }

Go to Joomlacode.org and download the User Meta plugin.

In your Joomla site, go to Extensions >> Install/Uninstall and upload the User Meta plugin. Then go to Extensions >> Plugin Manager and enable the plugin.

Next, we'll go and set up our extra user fields. Open your file manager and browse to /plugins/system/usermeta/. Open the user.xml file.

What you'll see are the current parameters that users see. These are "Back-end Language", "Front-end Language", "WYSYWYG Editor for this User", "Help Site for this User" and "Time Zone for this User":

You can create your own parameters in here using Joomla's default system. It's the same plugin language used for all templates and extensions. I've chosen to use a radio button for this example, hence type="radio".

If you have any predefined choices you can save them using options as in the example above. When you save your user.xml file, go and login to the front of your site and visit the normal Joomla user account page. It should look like the image below:

You can also add these fields to any Joomla layout page. However, it makes sense to add it to the registration form so you can collect this information when people join. All you need to do is insert: {UserMeta}. In order to use it in the registration form, I've edited /components/com_user/views/register/tmpl/default.php. The result is shown below:

Click "Install Firebug For Firefox". You'll have to restart your browser for the installation to finish. When it is over, you'll see an extra Firebug icon in the bottom-right of your browser.

Click on the icon and it will be enabled.

Refresh your page and you'll see Firebug starting to do it's work in a new panel at the bottom of your browser. There are lots of features in Firebug. We're going to use a couple that will allow us to analyse our Joomla template.

In the bottom-left hand corner of your browser, click on the blue arrow. You should get a pop-up message saying "Click an element in the page to inspect". That's what we're going to do.

Click on the Joomla logo. There will be a blue box around the outside. At the bottom of the page, you'll see Joomla's HTML layout on the left and its CSS on the right. We can see that the logo area is placed on the page using this HTML:

Put your cursor into the background CSS and it should pop-up as in the image above. You can edit any part of this. I'm going to choose to edit the image. I'm going to replace it with the Google logo: https://www.google.com/images/logos/ps_logo2.png

When you've done that, click your cursor somewhere else on the page and you should see that your change has taken effect:

OK, that's great, but the image is still too large. Let's go back to the CSS. I'm going to change the width of the logo to 498px and also change the height of the logo to 140px.

Refresh your page and you'll be back to the design. All those changes only took place in your browser. No-one else saw them.

Imagine that I have a problem with the CSS in my template ... I'd like to change the color of my links. To get started, enable the Inspect feature and click on a link. The CSS will appear beneath. This image above shows all the CSS affecting the link, regardless of what file it appears in.

If you want to know where the CSS is stored so that you change it, Firebug will tell you exact file location and line number. However, first we need to make and test our changes. All you need to do is click on and change the color CSS:

I'm going to change #135CAE to #FF0000 and that will change all the links to red: