The Joomlashack Blog

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 :)

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.

Your files and folders will be listed alphabetically. Scroll down until you find htaccess.txt

Check the box next to htaccess.txt and click "Rename" at the top of the page.

Enter .htaccess as the new file name and click "Rename File"

Go https://www.google.com/calendar, login and and click "Settings" in the top-right corner.

Click on "Calendars" and then click on the name of your calendar. Scroll down to "Calendar Address" and copy the "Calendar ID" to your notepad. It will have a long string of characters and then @group.calendar.google.com

Click "Share This Calendar", check the box next to "Make this calendar public" and click "Save".

Now that you have your Google Calendar set up correctly, we're going to install the necessary Joomla component. Visit https://g4j.laoneo.net to download the GCalendar component

Click on the GCalendar folder and extract it so you can see the various extensions inside.

Go to Extensions >> Install/Uninstall and click "Browse" to upload com_gcalendar

Go to Components >> GCalendar >> GCalendars

Click "New" in the top-right corner. You'll see three fields. You only need to give the calendar a title and enter the "Calendar ID" you found and saved earlier. Click "Save"

Go to Menus >> Main Menu >> click "New" >> choose "GCalendar"

Choose the calendar you created and click "Save".

Visit https://www.joomlatools.eu/docman-14.html and download Docman v1.4.0. There is a more modern version of Docman that is commercial. We're using the free version in this tutorial.

Login to the administrator area of your Joomla site and go to Extensions >> Plugin Manager. Click to enable the "System - Legacy" plugin.

Go to Extensions >> Install/Uninstall and click "Browse" to upload Docman

Go to Components >> Docman >> Categories and click "New" in the top-right corner.

Give your new category a name and click "Save" in the top-right corner.

Click "Files" and then "Upload" in the top-right corner.

Normally you'll want to keep this option as it is and just click "Next>>>"

Browse to find your file and then click "Submit"

Once you have uploaded your file, the next step is to create a "Document" out of it. That simply means giving it a name, description and other details. Click "Make a new document entry using this file."

Make sure that both "Approved" and "Published" are set to "Yes". Then click "Save".

Hopefully your new document will appear as above.

Go to Menus >> Main Menu >> click on "New" >> choose "Docman". Choose a title for your menu link and click "Save".

Click "Preview" in the top-right corner and you'll see your new menu link. Click on it and you'll see your Docman category. Open the category to see your file

Docman also has a very powerful permissions system that allows you to control who can and cannot access documents. Start by going to Components >> Docman >> Groups

Click "Add" in the top-right corner". You can create a group of users simply by moving them from the "users available" list to the "Members in this Group" list.

Now when you open up any document you can click "Permissions" and give access only to a certain group of users.

Go to Administrator >> Extensions >> Module Manager

Click "New" in the top-right corner

We can choose to create any kind of new module here. We'll choose "Custom HTML".

Click the Image button at the bottom of the page. You'll see a pop-up window. Either choose an image from here or click "Browse" and upload your image.

Click "Insert" and your image should be in the text editor.

Choose your module position from the dropdown and then click "Save"

Visit the front of your site and the image should now appear on the page.

Login to your Joomla site administrator area and hover your mouse over "Menus". Click on whichever menu has the star beside it.

Look for the link that has the yellow star in the default column. That is your current homepage.

Check the box next to the link that you would like to be the homepage and then click "Default" in the top-right corner.

"Joomla License" is now your homepage.

Go to Administrator >> Components >> Virtuemart >> Admin >> Configuration

Check the box next to "Enable Downloads" and click "Save.

Go to Products >> List Products and click on an existing product.

When the product is open, you'll see a new link on the left under Products. This new link will be called "Add Image/File". Click on it.

After clicking on "Add Image/File" you'll be taken to a screen like this where you can attach images to your product.

You can always check back and see which files are assigned to which products by going to Products >> List Products and clicking on the "Media" column.