The Joomlashack Blog

Click on Site then Global Configuration

Set "Site Offline" to "Yes" and then click Save

Now when you visit the front of your site you'll see a screen like this. Anyone who has a Super Administrator, Administrator or Manager account can login and view the site as normal. Everyone else will only be able to see the splash. You can keep search engines, rivals and all other unwanted guests out of your site until you're ready.

If you'd like to take this one step further and customize your offline page with a new logo and text, click here for the next tutorial.

Video Showing How to Take Your Site Offline

Many, many screens in a Joomla site have both "Save" and "Apply" Buttons. This tutorial will show you the difference between the two.

Change the "Site Name" field to something different (this is just an example, you can try changing anything on any page with a Save and Apply button).

1. Click on Apply
2. Notice that there's a message "The Global Configuration details have been updated"
3. Notice that you're still on the same "Global Configuration" page

This time we'll try clicking the "Save" button.

This time you still get the "The Global Configuration details have been updated" message but now you've been logged out of the screen.

So what's the difference between Save and Apply?

• "Save" saves your changes and forces you out of the current screen
• "Apply" saves your changes but keeps you on the current screen

I want my image to appear at the top of the article so I'm going to place my cursor before the first text.

Scroll to the bottom of the article and click on the Image button

Click on the image you want to use and its location should appear in the "Image URL" field. Then (and most importantly) chose either "left" or "right" from the "Align" dropdown. Finally, you can can click on "Insert".

This is what your image and text will look like if you choose "right" in the "Align" dropdown.

This is what your image and text will look like if you choose "left" in the "Align" dropdown.

Go to example.com/administrator and login to your site.

Click on "Extensions" and then "Template Manager"

rhuk_milkyway is my default template so I'll click on that name.

Click "Edit HTML" in the top-right corner.

Scroll all the way to the bottom of the page and post your code right above the final lines: . Then click "Save" in the top-right corner and you'll have finished.

You can login via your hosting company's site or you could go via FTP. Essentially you just need a way to get to your files.

Every hosting company should give you access to your files, althought the access may be in different places with each host. This is an example from the popular CPanel software.

We're going to open up the folder that contains our templates.

Select the "rhuk_milkyway" folder and click "Copy"

Choose a new name for the folder. In this case, I'm simply going to call it "rhuk_milkyway_copy" and click "Copy File(s)"

Check the box next to "templateDetails.xml" and select any of the editing options. templateDetails.xml is the table of contents for our template and contains all of the identifying information that Joomla needs.

Inside the fields, change the name of the template to something that clearly identifies it as a copy.

Now if you go to Administrator >> Extensions >> Template Manager you should see the two copies of the same template.

Often you can access your CPanel just by adding /cpanel to your domain name ... example.com/cpanel

Although your screen may not look 100% identical to the one above, every version of Cpanel does come with a "File Manger" option somewhere.

Visit the front of your site in its new location and verify that everything is working correctly.

Change that setting to remove your /test/ folder

Change that setting to remove your /test/ folder. Click "Save" in the top-right corner.

First, we'll find the current width of your screen so you can have an idea of how large these sizes are. Most of the time it will be in your computer settings:
- For my Mac its Apple icon >> System Preferences >> Displays
- For my PC its Start >> Control Panel >> Display >> Settings
In this case my screen is 1680x1050.

Your own screen probably isn't the best width to use. I'd go to Google Analytics and check what the most common screen sizes are for your site visitors. Go to Visitors >> Browser Capabilities >> Screen Resolutions.

Generally the more tech-savvy your visitors, the large the screen. In this case it wouldn't make much sense to have a narrow website width. Ideally our site will be at least close to 1000px. Increasingly widths of around 960px are common.

If you do, the problem is JSecure. Have you really forgotten your secret code? If so, read on ...

Or you could go via FTP. Essentially you just need a way to get to your files.

Every hosting company should give you access to your files, although the access may be in different places with each host. This is an example from the popular CPanel software.

You need to access the /plugins/ folder than then the /system/ folder.

Just give jsecure.php a different name and save it. Next time to try to access your site, the 404 error should have gone.

No question about it, Firefox is the best tool you can find for fixing problem on your website. Download from https://www.mozilla.com/firefox and install.

Firefox is useful for the same reason as Joomla ... it has 1000s of amazing addons. The one we're going to use is called "Web Developer". Visit https://addons.mozilla.org/en-US/firefox/addon/60 in your Firefox browser and click "Add to Firefox".

We're going to use the default Joomla for this tutorial.

In this example, our welcome message is too small. We'd like to have "Welcome to the Frontpage" in larger text.

Click "CSS" in the toolbar and then click "View Style Information"

Hover your mouse over any part of the page and a red box will appear around it. Click on that area.

At the bottom of the page you'll get a lot of information about why that item on your site looks like it does. Here's what's controlling the "Welcome to the Frontpage" line:
1: The file with it's exact location
2: The exact line number inside that file
3: The code at that line number
In this case you can see that the font-size is 1.5em. We'll need to increase that number.

Go to Extensions >> Template Manager inside your site

Browse down to find the template you saw in the previous step called "Find the CSS code at the bottom of the page". Click "Edit" in the top-right corner.

I'm using Notepad in this example, but any text editor will do. If you have a code editor with line numbers, even better!

If you're doing this for the first time, you will make mistakes. Backup your file so that you can roll back those mistakes when they happen.

Search for the code that you find earlier in the tutorial.

Especially when you're getting started, this may involve some trial and error. In this example, I'm going to increase the font-size from 1.5 to 1.7.

Paste the code back into your Template Manager and click "Apply".

Great - in this case the change worked and text is larger. If you the change isn't just what you want, you'll need to go back a few steps to "Change the Code" and try again.

1) This is a process of trial-and-error. Don't expect to get it right first time, ever time.
2) Make one change then check. Make one change then check. If you do that, it's easy to spot a mistake. However, if you make wholesale changes before checking, it will be very difficult to find where you went wrong.
3) If you want to move faster, get an FTP Editor that will allow you to edit this files more quickly and accurately. That however, is for another tutorial :)