You just need pointing in the right direction
Don't worry about the php, in the Templates index.php file you will find <div></div> tags. Between those tags you will see things like <jdoc:include type="modules" name="position-12" />
That is a variable and is defined in the templateDetails.xml file and displays in the edit screen of a module. Every module that is set to that Position displays where the variable is. The whole lot is enclosed in a php if statement
<?php if ($this->countModules('position-12')): ?>
<div id="top"><jdoc:include type="modules" name="position-12" />
<?php endif; ?>
If there is a module(or modules assigned to to Position 12) display the div and the module(s).
The css controls the display of the divs. Use Firebug with Firefox to view the site. You can make edits to the css to see the changes it makes. The changes are temporary. So you will need a method to make changes that can be viewed quickly and (if necessary undone quickly).
You can practice editing a Template on your test site
If you use Filezilla ftp client you can easily undo changes
You can see the the css with Firebug http://getfirebug.com/
It also tells you the location of the css
tells you what the css means.
A methodology for editing that works (you will use a method that suits you)
- Download http://www.snapfiles.com/get/notepadplus.html Notepad ++
- Download and install Filezilla ftp Client http://filezilla-project.org/download.php
- Put the ftp details of your site into Filezilla and connect
- Download and unzip rjtext editor
- In filezilla locate the css file on your server, right click and open for edit
- Select \Program Files (x86)\Notepad++\notepad++.exe as editor for css files
- The file will open for edit
- After saving the file ... Filezilla will prompt to upload.
- If you don't like the changes you can easily undo them.
If you have edited the file from within Joomla then it will be chmod 555. And you will need to change it to 644 to edit if opening up with Filezilla.