Joomla Templates Club 406,261 posts

[dragonlord Friend dragonlordJoin date: January 2008Posts: 57Downloads:0Uploads:3 Thanks: 6 Thanked: 15 times in 1 posts]

#133604

I have made a “Youtube Mod” of JA Rutile. I named it Youtube Mod because it looks like similar the Website Youtube with lots of white spaces an no visible borders.

Please forgive me my bad english. I am german and it’s really hard for me to explain the tutorial in english. I hope you understand what i am writing.

Here a Preview:

I have uploaded the modified version of JA Rutile (green Style #75af5b). The IE Search Bug

http://www.joomlart.com/forums/showthread.php?t=18033

is fixed in this package.

Update v1.0.1 – added points 6-8 from the Chapter 6 – Details Improvement

Here a tutorial how you can make the changes by yourself:

Step 1 – Introduction Web Developer Addon for Firefox

For Firefox (i am using Firefox 3, probably it is available for Firefox 2) there is an addon available which is really usefull for Web Developers (and Web Developers we are 🙂 ).

Install the Addon:

https://addons.mozilla.org/en-US/firefox/addon/60

When you installed it enable the Addon and activate “View/Symbol Bars/Web Developer Bar”

Now you see a Bar like this:

Then you go to “CSS”

Then choose the Option “View Style Information”

now you see a cursor

Now make a left click on the area from which you want the CSS informations, in this example i choose the background area from JA Rutile

You can see on the bottom all the CSS lines which are relevant for this area 🙂

Step 2 – Changing the background color to white

So, now i explain the change steps to make the “Youtube” Style of JA Rutile. The first step is to change the background from grey to white.

Here the original JA Rutile after a fresh installation from Quickstart Package

This background change will be done in the template.css of JA Rutile. Go to “your Joomla 1.5 Folder/templates/ja_rutile/css/template.css”

In line 25-29 you see this CSS Chapter:

"body#bd {
color: #000000;
margin-top: 5px;
background: #f1f1f1;
}"

Change the background to “ffffff”

Now it looks like

body#bd {
color: #000000;
margin-top: 5px;
background: #ffffff;
}

Here JA Rutile after the CSS change

Now the Background is white 🙂

Step 3 – Deleting the grey borders in the Template

Now the background is white, but in the template there are still grey borders

Here an aperture

To delete this grey borders we have to modify the template.css file again. Go to the Lines 516-744

/* PRIMARY COLUMN
--------------------------------------------------------- */
#ja-content {
clear: both;
display: block;
float: right;
width: 72%;
background: url(../images/content-center.gif) repeat-y center;
}

#ja-content-top {
background: url(../images/content-top.gif) no-repeat center top;
}

#ja-content-bot {
background: url(../images/content-bot.gif) no-repeat center bottom;
}

.narrow #ja-content {
background: url(../images/content-center-n.gif) repeat-y center;
}

.narrow #ja-content-top {
background: url(../images/content-top-n.gif) no-repeat top center;
}

.narrow #ja-content-bot {
background: url(../images/content-bot-n.gif) no-repeat bottom center;
}

#ja-current-content {
padding: 20px 20px 10px;
}

/* COLUMNS
--------------------------------------------------------- */
#ja-col1 {
float: left;
overflow: hidden;
width: 28%;
}

#ja-col1 div.ja-innerpad {
}

#ja-col2 {
float: right;
overflow: hidden;
width: 22%;
}

#ja-col2 div.ja-innerpad {

}

/*common style for column*/

/* COLLAPSIBLE LAYOUT
--------------------------------------------------------- */
#ja-containerwrap,
#ja-containerwrap-fr,
#ja-containerwrap-fl,
#ja-containerwrap-f {
padding: 0;
margin: 0;
clear: both;
}

/*content + left*/
#ja-containerwrap-fr #ja-mainbody {
width: 100%;
}

#ja-containerwrap-fr #ja-col1 {
width: 22%;
}

#ja-containerwrap-fr #ja-content {
width: 78%;
background: url(../images/content-center2.gif) repeat-y center;
}

#ja-containerwrap-fr #ja-content-top {
background: url(../images/content-top2.gif) no-repeat center top;
}

#ja-containerwrap-fr #ja-content-bot {
background: url(../images/content-bot2.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fr #ja-content {
background: url(../images/content-center2-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-fr #ja-content-top {
background: url(../images/content-top2-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fr #ja-content-bot {
background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}

/*content + right*/
#ja-containerwrap-fl #ja-content {
width: 100%;
background: url(../images/content-center2.gif) repeat-y center;
}

#ja-containerwrap-fl #ja-content-top {
background: url(../images/content-top2.gif) no-repeat center top;
}

#ja-containerwrap-fl #ja-content-bot {
background: url(../images/content-bot2.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fl #ja-content {
background: url(../images/content-center2-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-fl #ja-content-top {
background: url(../images/content-top2-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fl #ja-content-bot {
background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}

/*full*/
#ja-containerwrap-f #ja-mainbody {
width: 100%;
}

#ja-containerwrap-f #ja-content {
width: 100%;
background: url(../images/content-center1.gif) repeat-y center;
}

#ja-containerwrap-f #ja-content-top {
background: url(../images/content-top1.gif) no-repeat center top;
}

#ja-containerwrap-f #ja-content-bot {
background: url(../images/content-bot1.gif) no-repeat center bottom;
}

#ja-containerwrap-f #ja-current-content {
padding-left: 20px;
padding-right: 20px;
}

.narrow #ja-containerwrap-f #ja-content {
background: url(../images/content-center1-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-f #ja-content-top {
background: url(../images/content-top1-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-f #ja-content-bot {
background: url(../images/content-bot1-n.gif) no-repeat center bottom;
}

/* MODULE
--------------------------------------------------------- */
div.module h3,
div.module_text h3,
div.module_menu h3,
div.module_hilite h3,
div.ja-box-br h3 {
margin: 0 0 5px;
padding: 8px 0 2px 15px;
font-size: 175%;
}

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.ja-box-br {
padding: 0;
float: left;
clear: both;
width: 100%;
background: url(../images/box-br.gif) no-repeat bottom right #FFFFFF;
overflow: hidden;
}

div.module div,
div.module_text div,
div.module_menu div,
div.module_hilite div,
div.ja-box-bl {
padding: 0;
background: url(../images/box-bl.gif) no-repeat bottom left;
}

div.module div div,
div.module_text div div,
div.module_menu div div,
div.module_hilite div div,
div.ja-box-tr {
padding: 0;
background: url(../images/box-tr.gif) no-repeat top right;
}

div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.ja-box-tl {
padding: 4px 3px 4px 4px;
background: url(../images/box-tl.gif) no-repeat top left;
}

div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div {
margin: 0;
padding: 0;
background: none;
}

div.ja-box-ct {
background: url(../images/box-bg.gif) repeat-x top left !important;
padding: 10px 15px !important;
}

From each chapter you have to change the “background” command from example “background: url(../images/xyz.gif) no-repeat top left;

to

background-color: #FFFFFF no-repeat top left;

After this those chapters should be like this

/* PRIMARY COLUMN
--------------------------------------------------------- */
#ja-content {
clear: both;
display: block;
float: right;
width: 72%;
background-color: #FFFFFF repeat-y center;
}

#ja-content-top {
background-color: #FFFFFF no-repeat center top;
}

#ja-content-bot {
background-color: #FFFFFF no-repeat center bottom;
}

.narrow #ja-content {
background-color: #FFFFFF repeat-y center;
}

.narrow #ja-content-top {
background-color: #FFFFFF no-repeat top center;
}

.narrow #ja-content-bot {
background: #FFFFFF no-repeat bottom center;
}

#ja-current-content {
padding: 20px 20px 10px;
}

/* COLUMNS
--------------------------------------------------------- */
#ja-col1 {
float: left;
overflow: hidden;
width: 28%;
}

#ja-col1 div.ja-innerpad {
}

#ja-col2 {
float: right;
overflow: hidden;
width: 22%;
}

#ja-col2 div.ja-innerpad {

}

/*common style for column*/

/* COLLAPSIBLE LAYOUT
--------------------------------------------------------- */
#ja-containerwrap,
#ja-containerwrap-fr,
#ja-containerwrap-fl,
#ja-containerwrap-f {
padding: 0;
margin: 0;
clear: both;
}

/*content + left*/
#ja-containerwrap-fr #ja-mainbody {
width: 100%;
}

#ja-containerwrap-fr #ja-col1 {
width: 22%;
}

#ja-containerwrap-fr #ja-content {
width: 78%;
background-color: #FFFFFF repeat-y center;
}

#ja-containerwrap-fr #ja-content-top {
background-color: #FFFFFF no-repeat center top;
}

#ja-containerwrap-fr #ja-content-bot {
background-color: #FFFFFF no-repeat center bottom;
}

.narrow #ja-containerwrap-fr #ja-content {
background-color: #FFFFFF repeat-y center;
}

.narrow #ja-containerwrap-fr #ja-content-top {
background-color: #FFFFFF no-repeat center top;
}

.narrow #ja-containerwrap-fr #ja-content-bot {
background-color: #FFFFFF no-repeat center bottom;
}

/*content + right*/
#ja-containerwrap-fl #ja-content {
width: 100%;
background-color: #FFFFFF repeat-y center;
}

#ja-containerwrap-fl #ja-content-top {
background-color: #FFFFFF no-repeat center top;
}

#ja-containerwrap-fl #ja-content-bot {
background-color: #FFFFFF no-repeat center bottom;
}

.narrow #ja-containerwrap-fl #ja-content {
background-color: #FFFFFF repeat-y center;
}

.narrow #ja-containerwrap-fl #ja-content-top {
background-color: #FFFFFF no-repeat center top;
}

.narrow #ja-containerwrap-fl #ja-content-bot {
background-color: #FFFFFF no-repeat center bottom;
}

/*full*/
#ja-containerwrap-f #ja-mainbody {
width: 100%;
}

#ja-containerwrap-f #ja-content {
width: 100%;
background-color: #FFFFFF repeat-y center;
}

#ja-containerwrap-f #ja-content-top {
background-color: #FFFFFF no-repeat center top;
}

#ja-containerwrap-f #ja-content-bot {
background-color: #FFFFFF no-repeat center bottom;
}

#ja-containerwrap-f #ja-current-content {
padding-left: 20px;
padding-right: 20px;
}

.narrow #ja-containerwrap-f #ja-content {
background-color: #FFFFFF repeat-y center;
}

.narrow #ja-containerwrap-f #ja-content-top {
background-color: #FFFFFF no-repeat center top;
}

.narrow #ja-containerwrap-f #ja-content-bot {
background-color: #FFFFFF no-repeat center bottom;
}

/* MODULE
--------------------------------------------------------- */
div.module h3,
div.module_text h3,
div.module_menu h3,
div.module_hilite h3,
div.ja-box-br h3 {
margin: 0 0 5px;
padding: 8px 0 2px 15px;
font-size: 175%;
}

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.ja-box-br {
padding: 0;
float: left;
clear: both;
width: 100%;
background-color: #FFFFFF no-repeat bottom right #FFFFFF;
overflow: hidden;
}

div.module div,
div.module_text div,
div.module_menu div,
div.module_hilite div,
div.ja-box-bl {
padding: 0;
background-color: #FFFFFF no-repeat bottom left;
}

div.module div div,
div.module_text div div,
div.module_menu div div,
div.module_hilite div div,
div.ja-box-tr {
padding: 0;
background-color: #FFFFFF no-repeat top right;
}

div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.ja-box-tl {
padding: 4px 3px 4px 4px;
background-color: #FFFFFF no-repeat top left;
}

div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div {
margin: 0;
padding: 0;
background: none;
}

div.ja-box-ct {
background-color: #FFFFFF repeat-x top left !important;
padding: 10px 15px !important;
}

Now the template should looks like this:

Now there are no grey borders in the template anymore 🙂

Step 4 – Modify the Navigation Bar

The modification of the navigation bar is a little bit more complicated. The navigation bar in original looks like this.

without hover:

The active Menupoint is orange and the rest is black

with hover:

wenn you go to the active menu point with the mouse cursor the active menu point change its color to red

The mouse cursor on other menu points except the active makes a transparent hover effect

If you want it to look it like this

you have to do following things.

1) Modify the black color of the navbar

The black color of the navbar will be modified in the “grad-2.gif” file. You find the grad-2.gif file in “your Joomla 1.5 Folder/templates/ja_rutile/images”

The grad-2.gif has graduent color theme. Here an extensive enlarged look at this file with Fireworks

You can see that the grad-2.gif is going brighter on the top and on the bottom (bottom not visible on example picabove).

If you want the same graduent color style i can’t help you because i am not an professional on graphic editing. You have to do it with your skill and your graphics program. I have just filled out the Pic with my chosen color without any graduents effects. I chose the color white, excactly #FFFFFF (this is the colorcode with this all exists colors can be exactly identified). I know that the colortheme at this point is orange (apparantly the standard color theme of the quickstartpackage). In the course of this tutorial i will show you to change the color from orange to green (or whatever you want).

Ok, after i changed the color from grad-2.gif the navigation bar looks like this:

You can see that the normal background color switched to white. The navigation point “Layouts” is grey/black because my mouse cursor was over it an then cames the hover effect for not active navigation points and this is till this point grey/black.

Now we modify the separators

The separator is the “mainnav-sep.gif” It can be found in “Your Joomla 1.5 Folder/templates/ja_rutile/images” For this file apply accordingly what is written for the grad-2.gif. Change easily the color to the color you want. In this tutorial i change it to green (#75af5b).

Now it looks like this

Now we modify the hover effect on non active navigation points from grey/black to white. This effect is to find in the “mainnav-hover.gif”. It can be found on “Your Joomla 1.5 Folder/templates/ja_rutile/images”. You can chose the color you want in this tutorial i chose green (Colorcode #75af5b).

Now the navigation bar looks like this with the mouse curser over a non active menu point

You can see that you see a green hover effect of the non active menu point “Layouts”.

Now we will modify the hover effect on the active navigation point which is currently red.

This effect is to find in the ja.scriptdlmenu.css which can be found here “Your Joomla 1.5 Folder/templates/ja_rutile/ja_menus/ja_scriptdlmenu/ja.scriptdlmenu.css”

Note: In this case it is the ja.scriptdlmenu.css because in the quickstartpackage the default navigation type is the dropline menu

if you want another menu type you have to modify the following line in the css file of the other menu types!

Now go to line 50-56. It should look like this:

#jasdl-mainnav li.active a,
#jasdl-mainnav li.active a:hover,
#jasdl-mainnav li.active a:active,
#jasdl-mainnav li.active a:focus {
background: url(../../images/mainnav-active.gif) no-repeat center top #CC0000;
color: #FFFFFF;

Change the “backgroundline” to this:

background-color: #FFFFFF;

Now it should look like this:

#jasdl-mainnav li.active a,
#jasdl-mainnav li.active a:hover,
#jasdl-mainnav li.active a:active,
#jasdl-mainnav li.active a:focus {
background-color: #FFFFFF;
color: #FFFFFF;
}

Then there is no more red hover effect if you go over the active menu item with the mouse cursor.

If you want a color effect change the #FFFFFF to the color you want to be the hover effect color.

The next thing to do is to change the main color theme from orange to green. For this we go to the template manager in the backend of Joomla 1.5 “Extensions/template manager/JA_Rutile”
and change the “Color Variation” from orange to green.

Now the Site looks like this

But this is not the green i want to have. I want a green with the colorcode: #75af5b, so i have to change it. At first i go to the folder “Your Joomla 1.5 Folder/templates/ja_rutile/images/green”. You now see following files:

I open all files except the “logo.jpg” (this file can you modify like you want, it has nothing to to with this tutorial and fill them with that green which i want to have, in this case #75af5b. This can be with a graphic program like Photoshop, Fireworks, Gimp, etc.. (it’s the same way like mentioned above with the recoloring of the navigation bar). After coloring the files in #75af5b they should be like this:

The site looks like this now

You can see that the graphical elements like hover effect on navigation bar, read more button and the search button are in the correct green, but the rest is still in the “old” green look.

To change this we go to the “green.css”. This file can be found in “Your Joomla 1.5 Folder/templates/ja_rutile/css/colors/green.css”

Now we change all “#6C7F2F” instructions into “#75af5b”. After that the whole green CSS should be like this:


/*------------------------------------------------------------------------
# JA Rutile for Joomla 1.5 - Version 1.0 - Licence Owner JA96724
# ------------------------------------------------------------------------
# Copyright (C) 2004-2008 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com - http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
-------------------------------------------------------------------------*/

a {
color: #75af5b;
}

a:hover, a:active, a:focus {
color: #75af5b;
}

a.readon {
background: url(../../images/green/readon-bg.gif) no-repeat center left #75af5b;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
background: #75af5b;
}

.modifydate {
color: #75af5b;
}

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
color: #75af5b;
background: url(../../images/green/arrow.gif) no-repeat 16px 12px #F7F7F7;
}

ul.menu li.active a {
background: url(../../images/green/arrow.gif) no-repeat 16px 12px #F7F7F7;
color: #75af5b;
}

ul.menu li li a {
background: url(../../images/green/arrow.gif) no-repeat 25px 10px #F7F7F7 !important;
}

#ja-search {
background: url(../../images/green/search-bg.gif) no-repeat;
}

.dropcap {
color: #75af5b;
}

h1.logo a {
background: url(../../images/green/logo.jpg) no-repeat center;
}

/*split menu*/
#ja-splitmenu li.active a,
#ja-splitmenu li.active a:hover,
#ja-splitmenu li.active a:active,
#ja-splitmenu li.active a:focus {
background: url(../../images/green/mainnav-active.gif) no-repeat center top #75af5b;
}

/*dropline menu*/
#jasdl-mainnav li.active a {
background: url(../../images/green/mainnav-active.gif) no-repeat center top #75af5b;
}

/*css + moo*/
#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
background: url(../../images/green/mainnav-active.gif) no-repeat center top #75af5b;
}

Save the green.css file and then the site should be like this

You can see, all the site has the beautiful #75af5b style 🙂

Notice:

The steps above can be made for every color you choose. For example if you wish your site in a blue color #3399FF style

then modify every pic and every color css instruction to this Colorcode as we have done it to green (#75af5b). Be careful that you chose the color variation in the backend of Joomla which you have modified. In this case i have modiefied all files related to the green color variation. But i had just as well chosen the blue color variation (then i had to modify all the pics in the blue folder in the “images/blue” into green and the blue.css in “css/colors/blue.ss” from #00508E to #75af5b. The easiest way is to modify this color variation which is the nearest to your chosen color, because it’s the feweset confusing. So is that done in that tutorial. My chosen color was a green variant so i modiefied the green color variation of JA Rutile.

In principle we are finish with the navigation bar. But i think it looks like a liitle bit better if the textcolor of the navigation bar is not white/grey (#CC0000) but white (#ffffff).

To change this open the “ja.scriptdlmenu.css” file. The file can be found in “Your Joomla 1.5 Folder/templates/ja_rutile/ja_menus/ja_scrptdlmenu/ja.scriptdlmenu.css”

Notice:

If you chose another Menutype instead the Droplinemenu (f.e. Split Menu) you had to modify the CSS File from this Menutype!

Change the lines 34-42 from

#jasdl-mainnav a {
display: block;
float: left;
text-decoration: none;
font-size: 92%;
text-transform: uppercase;
color: #CCCCCC;
padding: 8px 20px;
}

to

#jasdl-mainnav a {
display: block;
float: left;
text-decoration: none;
font-size: 92%;
text-transform: uppercase;
color: #75af5b;
padding: 8px 20px;
}

Now, the Navigation Bar is definetely finish and should look like this

Step 5 – Rearrange the Template

Now the Template looks good, but there are some improvement points. At first i have changed the Menus in the “left” module position against the Login Form. It looks like this

You can see that the levels are disarranged. That will be fixed now.

At first we rearrange the Logo and the Search. Unfortunately I haven’t found out an solution without to deactivate the Top Menu on module position “User3”. We have to move the Search and so it will conflict with the Top Menu. Please deactivate it in the backend

Now we want to move the Logo to the left. This can be done in the template.css in line 776-781. There should be this code

}

h1.logo, div.logo-text {
margin-top: 0px;
margin-bottom: 20px;
margin-left: 20px;
}

replace it with this Code


}

h1.logo, div.logo-text {
margin: 0 4px 20px;
padding: 0;
}

Save it and you can see that the Logo moves to the left. Unfortunately i have made an mistake with the first version of this Tutorial on Step 6 – Rearranging and have the right CSS found and saved without to make screenshots. I don’t want to make all undo so there are no example images, sorry, but no fear the Code is correct 😉

Now we have to move the Search to the right. Go to lines 1109-1117 in the template.css and change the code from


/* Search */
#ja-search {
background: url(../images/search-bg.gif) no-repeat;
position: absolute;
right: 50px;
top: 35px;
height: 24px;
width: 276px;
}

to

/* Search */
#ja-search {
background: url(../images/search-bg.gif) no-repeat;
position: absolute;
right: 14px;
top: 35px;
height: 24px;
width: 276px;
font-size: 12px;
}

Now you can see that the Search moves right.

Ok but now only the first Level (=Logo & Search) and the third Level (=Main Body) are arranged. The second Level (=navigation bar & Font Tools) is disarranged. Now we want to move the navigation bar to the right. This can be done in the template.css in line 845-854.

You see this code

/* MAIN NAVIGATION
--------------------------------------------------------- */
#ja-mainnav {
padding: 0;
background: url(../images/grad-2.gif) repeat-x top #333333;
width: 100%;
position: relative;
}

To move the navigation bar to the right we add the command
"margin-left: 16px;"

To move the the Fonts Tools to the left (they are now 16px too left because of the command above) we change the command
"width: 100%" to "width: 98%"

The final code should look like this


/* MAIN NAVIGATION
--------------------------------------------------------- */
#ja-mainnav {
padding-left: 16px;
background: url(../images/grad-2.gif) repeat-x top #333333;
width: 98%;
position: relative;
margin-bottom: 10px;
}

Now it should look like this

Now you can see that all levels are arranged perfectly 🙂

Step 6 – Details improvement

This is the last Step to perfectionize (how much as i can) the template.

1) Modifying the background from some buttons

You can see that some Buttons on the page have a black background. This doesn’t match with the green style.

With the “View Style Information” from the Web Developer tool (see Step 1) we can see that this could be done in the “template.css” in the lines 173-180. Now you see this Code

.button {
padding: 1px 8px;
border: 1px solid #333333;
background: #333333;
color: #FFFFFF;
text-transform: uppercase;
font-size: 92%;
}

Change it to

.button {
padding: 1px 8px;
border: 1px solid #75af5b;
background: #75af5b;
color: #FFFFFF;
text-transform: uppercase;
font-size: 92%;
}

Save it and now it should look like this

🙂

2) Modifying the color of the module headings

At the moment you can see that the module headings are black

That doesn’t match with the green style really so we modify it in the following way. Again the Tool “View Style Information” from the Web Developer Tool (see Step 1) show us that the relevant CSS command is in the “template.css” in the lines 62-66. You see this code

/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
line-height: normal;
color: #000000;
}

Change the color command to “#75af5b”. Now the Code should look like this

/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
line-height: normal;
color: #75af5b;
}

Now the module headings should look like this

🙂

3) Changing the Space between Level 1 (=Logo + Search) and the upper end of the site

I think the space between Level 1 (=Logo + Search) and the upper end of the site is to much

We have to correct the space individually for the logo and the search.

At first we correct the space between logo and upper end. For this we have to modify the lines 771-776 in the “template.css”. You see this code

#ja-header {
line-height: normal;
position: relative;
padding: 20px 0 0;
z-index: 999;
}


Change the “padding” command to
"padding: 5px 0 0;
Now the code should look like this


#ja-header {
line-height: normal;
position: relative;
padding: 5px 0 0;
z-index: 999;
}

Now you can see that the Logo move to the upper end to the site

but you also see that the search bar has not moved. Therefore we have to modify the lines 1106-1115 in the “template.css”. You should see this code

/* Search */
#ja-search {
background: url(../images/search-bg.gif) no-repeat;
position: absolute;
right: 14px;
top: 35px;
height: 24px;
width: 276px;
font-size: 12px;
}

We have to change the “top” command to 20px (The reason for 20px is the change of the logo from 20px to 5px = difference 15px you remember 😉 So we want to take the same difference here. Top original has 35px so we have to chose 20px to have the same difference)

Now the code should look like this

/* Search */
#ja-search {
background: url(../images/search-bg.gif) no-repeat;
position: absolute;
right: 14px;
top: 20px;
height: 24px;
width: 276px;
font-size: 12px;
}

Now it should look like this

Now you see Level 1 (=logo + search) has moved to the upper left, so less space is wasted 🙂

4) Modification of the space Level 2 (navigation bar + fonts tools) and Level 3 (main body / rest)

I think that the space between Level 2 (navigation bar + fonts tools) and Level 3 (main body / rest) is too little

To make it larger we have to modify the lines 846-851 of the “template.css”. You should see this code

#ja-mainnav {
padding-left: 16px;
background: url(../images/grad-2.gif) repeat-x top #333333;
width: 98%;
position: relative;
}

We have to add a “margin-bottom” command to make a space between Level 2 and Level 3. With the “margin-bottom” command the code should look like this


#ja-mainnav {
padding-left: 16px;
background: url(../images/grad-2.gif) repeat-x top #333333;
width: 98%;
position: relative;
margin-bottom: 10px;
}

Now it should look like this

You can see that the space between Level2 and Level3 is a little bit larger 🙂

5) Space between voting and article

We are near to the finishline 😀 The last point i’ve seen is that the space between voting and article doesn’t fit

There is no space between voting and article. This can be fixed in the lines 151-154 of the “template.css”. You should see this Code


form {
margin: 0;
padding: 0;
}

We have to make a “margin-bottom” command. I have chosen 12px. After this the code should look like this

form {
margin-bottom: 12px;
padding: 0;
}

Now it should look like this

Now there is a space between voting and article 🙂

Unfortunately you can not increase the space between voting and the title of the artice, because also the “search” text would moving.

F.E. if you make a “margin-top” or “padding-top” command like this

form {
margin-bottom: 12px;
padding-top: 12px;
}

it look like this

You see that the space between article title and voting is although larger, but the search text is moving out his area.

6) Change the color of the category-list layout

If you choose a menu item to display a category-list layout there is the wrong color black in the title bar

To change this to our green color (#75af5b) we have to go to the lines 211-217 of the “template.css” The Code look like this

/* content tables */
.sectiontableheader {
background: #333333;
padding: 4px 8px;
color: #FFFFFF;
font-weight: bold;
}

We have to change the “background” command from #333333 to #75af5b The Code should now look like this

/* content tables */
.sectiontableheader {
background: #75af5b;
padding: 4px 8px;
color: #FFFFFF;
font-weight: bold;
}

Save it and then your site should look like this

🙂

7) Reaarange the position of the main body to match with the modules right and left

Now, the main body is a few pixel to much to the bottom in comparison with the modules right and left

To change this we have to edit the lines 553-555 of the “template.css”. The Code look like this

#ja-current-content {
padding: 20px 20px 10px;
}

We have to change the first value (=padding-top) to 16px. Now the Code should look like this

#ja-current-content {
padding: 16px 20px 10px;
}

Now the site should look like this

🙂

8) Realign the spaces between the modules right 6 left to the main body

The spaces between the modules right & left to the mainbody are not exactly equal. The space between the right module position and the main body is a few pixel wider than the space between the left module and the main body

To change this we have to edit the lines 553-555 of the “template.css” again (see point 7). Now the Code look like this

#ja-current-content {
padding: 16px 20px 10px;
}

we have to add a fourth value (the fourth value will edit the padding-top). We add 25px. Now the Code should look like this

#ja-current-content {
padding: 20px 20px 10px 25px;
}

Save it and the site should look like this

🙂

End

This was the tutorial. I hope you enjoy it. Please report bugs you may encounter in this Thread i will try to fix them.

It would be nice if you could support my petition to joomlart to make a modul class suffix for JA Rutile. I have posted this petition in this thread

http://www.joomlart.com/forums/topic/improvement-module-suffix/

Maybe if enough club members support this petition joomlart make such a modul class suffix 🙂

---

Attachments:

1. ja_rutile_template_modification_youtubestyle_v1.0.1.zip

9 users say Thank You to dragonlord for this useful post

1. scattdaddy21
2. TomC
3. 2Patrick
4. kemios
5. skewered
6. kicr
7. ukfraternite
8. xpnetxp
9. alt_f4

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#271730

how about a link to the site

[scattdaddy21 Friend scattdaddy21Join date: September 2008Posts: 6Downloads:0Uploads:0 Thanks: 3]

#271732

thank you! that’s a great start for us newbies. look forward to more info!

[dragonlord Friend dragonlordJoin date: January 2008Posts: 57Downloads:0Uploads:3 Thanks: 6 Thanked: 15 times in 1 posts]

#271733

<em>@mfcphil 81375 wrote:</em><blockquote>how about a link to the site</blockquote>

This isn’t pssible because i have JA Rutile only installed on my virtual Xampp Server, sorry..

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#271734

<em>@dragonlord 81378 wrote:</em><blockquote>This isn’t pssible because i have JA Rutile only installed on my virtual Xampp Server, sorry..</blockquote>

Thanks anyway and good luck with the rest of your site…will keep popping back to see how well its looking…

maybe a link when your live 😉

[dragonlord Friend dragonlordJoin date: January 2008Posts: 57Downloads:0Uploads:3 Thanks: 6 Thanked: 15 times in 1 posts]

#271737

<em>@mfcphil 81380 wrote:</em><blockquote>Thanks anyway and good luck with the rest of your site…will keep popping back to see how well its looking…

maybe a link when your live ;)</blockquote>

My Site is http://www.veggie.de, but this Site runs with the Hivemind Template from Rockettheme. I will test the Rutile Template on my Xampp server extensive, if i have success (means all runs and looks like i want to do) then i will replace the hivemind template with the JA Rutile..

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#271749

I have to applaude dragonlord for taking the time to create his “how-to’s” for the JA Community.

I, too, look forward to the day you will be able to showcase this template modification live.

[2Patrick Friend 2PatrickJoin date: July 2008Posts: 256Downloads:0Uploads:19 Thanks: 74 Thanked: 11 times in 1 posts]

#271758

Hi Drangon Lord

Thanks a lot. You have been very helpful.

If your work succeeds, please do attach the updated template for us to use.

Novices like us are very grateful to you.Thanks thanks thanks

[dragonlord Friend dragonlordJoin date: January 2008Posts: 57Downloads:0Uploads:3 Thanks: 6 Thanked: 15 times in 1 posts]

#271974

Please consider the changes in Step 5 – Rearrange the Template. In the first version (made ca. 5 hours before) i made a bad modification. Now the right modification on this Step 5 is updated!

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#272017

Changed the title of your post…hope you don’t mind 😉

1 user says Thank You to mfcphil for this useful post

1. treybraid

[Hilary Cheyne Friend Hilary CheyneJoin date: September 2014Posts: 19Downloads:0Uploads:0 Thanks: 3 Thanked: 3 times in 2 posts]

#272078

Great tutorial!

As a Developer Toolbar Junkie, there is a little tip that might help when using it. If the ‘window’ is at the bottom of Firefox you can’t see too much of the css at one time. But you can move it. In step 1, see that little arrow inside Dragonlord’s red outline at the top of the CSS between ‘Style Information’ and the red ‘close window’? If you click that it rotates the css window around the browser. I use it on the left so have plenty of room to see all the CSS that applies to the element I am checking.

Hils

[dragonlord Friend dragonlordJoin date: January 2008Posts: 57Downloads:0Uploads:3 Thanks: 6 Thanked: 15 times in 1 posts]

#272101

@ mfcphil

Of course that is no problem, thx for the better description of this thread 🙂

@ hils

Thx for the advice with the Web Developer Tool

@ all

Please consider the changes in Step 2 – removing the grey borders. I have made at first a no optimal modification, but now in the tutorial is the updated better modification!

I have attached the template.zip. Unfortunately i was not able to upload the modified Quickstart Package because Joomlart have a Filesize Limit for Zip Files of 4,7 MB and the Quickstart Package has nearly 6 MB. So you have to install the original Quickstart and then you overwrite easily the “ja_rutile” folder (Your Joomla 1.5 folder/templates) with the “ja_rutile” folder which contains the Zip file i have uploaded.

Please report bugs you may ancounter in zhis thread, thx!

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#272129

I really think this would be a great idea for all templates….Just think how much time would be saved if you could come to one thread in every post and see a step by step guide to making the changes you need to personalise your website…..

If this was my post I would invite people to add to it with their own hints and tipsof knowledge..

Cant wait to see this live

[dragonlord Friend dragonlordJoin date: January 2008Posts: 57Downloads:0Uploads:3 Thanks: 6 Thanked: 15 times in 1 posts]

#272492

I have added the points 6-8 to the Chapter “6 – Details improvement”. I have uploaded the updated template (Version 1.0.1) with this changes included!

[Sarah Catcher Friend Sarah CatcherJoin date: September 2014Posts: 6Downloads:0Uploads:0]

#280324

I can’t seem to figure out how to post a new post for this topic, but its been the worse day of my life and such a long 30 days that I just need to find some answers to such a simple problem!!! SOMEONE PLEASE!!!

I am running PHP 5 , XAMPP on Leopard OS X and using Joomla 1.5 :-*

I am completely stumped why I can’t import an SQL file that I just exported from my local server.

I’ve installed XAMPP and been working on a localhost website for 30 days now. Every time I make significant changes, I back up by exporting the sql database in all formated possible and saving the corresponding files on the server.

Today…. I screwed up bad and I went to restore to the previous version of my website…. I can’t import…. I get a maxium size exceeded error and the file is only 30k….. so I tried Big Dump and it won’t accept the file either…. :((

I’ve tried everything… I’m not lacking technical knowledge or skill either….
I work as an IT Technician but I don’t work with SQL or PHP often… I left this behind a year ago…..

What can I do to reimport the files??? I can’t keep starting from scratch after months of working on a joomla site !!!

THANKS!!! :((
soooo tired and hoping tomorrow will be a better day

:confused:

[Author]

Posts