1. Body
I felt the main divs containing everything under the banner were too far down from the top menu so I edited the template.css to include:
'margin-top: -30px;'
and this has made the gap much smaller.
2. Search Form
I felt the spacing around all the elements in the search form were too big so I edited the template.css to reduce them so it was much more compact. I found this code in the file that controls the spacing around the form:
div.search input {
width: 145px;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
}
I need to change the bottom and top margins, so I changed the values to:
div.search input {
width: 120px;
border: 1px solid #ccc;
margin: 5px 0 8px 0;
}
This makes the form shorter so I can fit the search button to the right, and adjusted the distance above and below the form so the elements of the module are tighter. I also took off the module title, as the button and form make it clear what it is for so it didn't need a title.
3. Right Column
Scanning through the CSS and HTML I found that Joomla uses tables, and the column width was defined in the HTML with the table width.
It was set as td width="170" and I decreased it to td width="150"
This was the smallest amount without putting the account login text on to 2 lines. This frees up more space for the main articles, and makes the right column appear much tighter.
4. Article Headings
I feel as though the article titles are too plain as they don't look much different than the text in the article so I have edited the CSS to make the title bolder. The piece of CSS I am looking for is located in template.css. In the HTML they are defined in a class called class="contentheading". This leads me to this in the CSS:
h2, .contentheading {
color:#333333;
font-family:Arial,Helvetica,sans-serif;
font-size:1.4em;
font-weight:normal;
padding:0;
text-align:left;
vertical-align:bottom;
width:100%;
}
and I will change to this:
color: #555555;
font-weight: bold;
The title is now bold and the colour is a dark shade of grey so it's not as dark as pure black.
5. Logo Centred
I found the CSS to the position of the logo div inside template.css and this is what I found:
div#logo {
position: absolute;
left: 0;
top: 0;
float: none;
width: 289px;
height: 75px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 20px;
margin-top: 25px;
and changed them to this:
div#logo {
position: absolute;
left: 10;
top: 0;
float: none;
width: 300px;
height: 77px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: -25px;
margin-top: 25px;
Notice I changed the height and width slightly to be exactly the size of the logo. Strangely I couldn't set the position using the 'left value', as any value put it just off centre. Using that I decide to correct it's off centre position by changing the margin left value to a minus number.
6. Background
I want to modify the background to be a green to white gradient. This will keep the colour scheme I want, lighten up the page a bit and make it more interesting than a flat colour.