Joomla Templates Club 406,261 posts

[douglas Friend douglasJoin date: March 2006Posts: 42Downloads:0Uploads:1]

#116629

Hello,

First off, I am very impressed with the direction of Joomlart adding this Forums area so users can ask questions and obtain answers about templates and how to modify them or make code changes.

I have managed to hack my way around for the past month learning many of the in’s and out’s of managing Joomla and templates, as I am building a web portal for my hometown area of the West Kootenays in British Columbia Canada. URL: http://www.westkootenayunplugged.com

I am using the ja_procyon template and want to make some small changes to it, but don’t want to mess it up. I want to do the following to start with before making other modifications:

QUESTION 1: I want to change the logo image sizes for the header logos at the top of the template.

If I would would like to change the size of the header logo on the left and the right in the ja_procyon template. I changed the images before I uploaded the ja-procyon template, but I kept the image size identical to the original header logos. But I want to make both of them larger, so I opened the Template Manager and then selected the ja_procyon template and clicked on Edit HTML to find the area of code that I believe is necessary to change the header logo image sizes.

By looking at the HTML code it looks like I need to change the width and the height areas for the two sections of code to change the width and height of the header-main.jpg and the header-logo.gif.

QUESTION 2: Is this correct to change this area of the HTML code in each area of the ja_procyon template if I want to make the header-main and header-logo images larger, so I can then modify the graphic image sizes in Fireworks before replacing the logos in the template area on my server?

header-main.jpg” —-> width=”160″ height=”128″ change to –> width=”260″ height=”140″

header-logo.gif” —-> width=”350″ height=”108″ change to –> width=”260″ height=”140″

SECTION OF HTML CODE IN ja_procyon template that I believe I must make changes to:

<!– BEGIN: HEADER –>
—–
——-
<tr>
<td colspan=”2″ scope=”col” valign=”top”>
<div class=”frameshadow” style=”margin-top: 4px;”>
<div class=”frame”>
<div id=”header”>
<div class=”header-photo”><img src=”<?php echo $mosConfig_live_site;?>/templates/ja_procyon/images/header-main.jpg” border=”0″ width=”160″ height=”128″ alt=”<?php echo $mosConfig_fromname;?>” /></div>
<img src=”<?php echo $mosConfig_live_site;?>/templates/ja_procyon/images/header-logo.gif” width=”350″ height=”108″ border=”0″ alt=”<?php echo $mosConfig_fromname;?>” />
</div>
</div>
</div>
</td>
<!– END: HEADER –>

Any help in this area is appreciated.

🙂 Doug

---

Attachments:

1. 

[itguy Friend itguyJoin date: November 2005Posts: 140Downloads:0Uploads:38 Thanked: 2 times in 1 posts]

#209235

Hi Doug,

I haven’t used this template but I just pulled it down and reviewed the index.php and template_css.css files. You are correct, you will need to modify the height and width of the header-main and header-logo IMG tags in index.php.

In addition you will need to modify the following classes in template_css.css in the css folder.

Set the height on the header:


div#header {
padding: 0;
background: #CC0000;
height: 130px;
}


Set the height on the header image:


div.header-photo {
width: 180px;
float: right;
background: #CC0000;
height: 128px;
overflow: visible;
}


It appears that that would do it. Just make sure your image width combined will fit within the 800 x 600 layout. So that gives you 600 pixels of width for both graphics. This way you can still shift the template to 800 x 600 with no adverse effects.

Before you do anything make backup copies of the index.php and template_css.css files and the images so that if you need to put everything back you can. I find the best way to tweak the templates is open a direct ftp connection to the server and then ftp the files into place rather than having to zip and then upload using the Admin panel. It is much faster and then you can save the file, upload, and check the results after each step of the modifications.

The templates on the website are stored under you joomla directory/templates/templatename.

One of the developers should be able to confirm that these are the only modifications necessary to accomplish the graphics change. They may also shed some light on the 2 pixel diference in the height. Most likely a 1 pixel border but I didn’t catch it in the stylesheet. I would just make the header 2 pixels taller than your image and everything should line up fine.

Good luck!

EDIT: The maximum width on the 800 x 600 template is 775 pixels not 600 pixels as I stated. Sorry. Keep your combined image width under 765 pixels and it should be fine. I see your proposed images equal 520 pixels in width so my typo should not affect the outcome. 😀

---

Attachments:

1. 

[douglas Friend douglasJoin date: March 2006Posts: 42Downloads:0Uploads:1]

#209260

Hello itguy,

I very much appreciate your response to my query. I will follow your suggestions and get to making the changes to the logos on Sunday evening. Going out for a BBQ this evening so no looking into the flat panel for a few days.

I am going to be looking into some other queries next week, in regards to news feeds. Slowly but surely I am learning more and more about Joomla and how to manage and modify it to my specific needs.

Your response is very very much appreciated as it has saved me a ton of frustration.
Thank You very much,

Doug
http://www.westkootenayunplugged.com

[douglas Friend douglasJoin date: March 2006Posts: 42Downloads:0Uploads:1]

#209262

Another question about the ja-procyon template. Changing colors?

I was wondering how to change the ja-procyon template and its colors. I would like to make some mods to the the template colors so that I can have other sections of my web site that ar slightly different in color for visual navigation benefits.

It should be straight forward, by looking into the code, and then modifying the color code(s) in every place necessary, but once again I don’t want to make changes if I am going to mess up the template and cause errors all over the place.

Perhaps the best thing for me to do is install the ja-procyon template ina test directory for my template modification testing work so I don’t mess with my main web site?

[nathanbohn Friend nathanbohnJoin date: March 2006Posts: 230Downloads:0Uploads:0 Thanked: 9 times in 1 posts]

#209333

Hi there,

I have changed the colours of this theme by going modifying the ‘template_css.css’ in:

JoomlaFolder/templates/ja_procyon/css/template_css.css

One way to approach this is to set up a development site and make changes there. I do this on my localhost machine. Make a back up copy of the original ‘template_css.css’ for safekeeping. Find a tool that will show you what the colours are that are in the file. eg. #000000 = black, #FFFFFF = white, #cc0000 = red, etc. I’m using a Mac so a simple tool to check what those colours are is the free ‘Color Blender’ application. Just type the colour numbers in the program and it will show you what the colour looks like. If you are on a PC I’m sure there are all kinds of free/shareware tools like this to use.

Then the way I approach this is to use an editing tool that I can easily number each of the lines in the file so I can do this:

ORIGINAL:

69 body#bd {
70 margin: 8px 0 8px 8px;
71 background: #DDDDDD;
72 }

MODIFIED:

69 body#bd {
70 margin: 8px 0 8px 8px;
71 background: #777fbc;
72 }

I copy and keep this information in a text file so I can make the change in the file, use my editor to remove the line numbers, save the file with the change, then take a look at the results of the colour change I just made. If I don’t like it, then I can easily go straight back to the line where I made the change and do another change or put it back to the original colour.

Take your time and go through the css file. Make your changes one at a time. You will start to get familiar with what the code relates to in the site. Before you know it you will be confidently editing the colours of your site like a pro.

[douglas Friend douglasJoin date: March 2006Posts: 42Downloads:0Uploads:1]

#209334

Thanks Nathanbohn,

I very much appreciate your help. I am just now going to be modifyiong the colors of the Procyon template, and I set up a test site so if I mess up, it is not going to mess up anything important.

I have found a good tool to use as you suggested and I will hack away at it. the past few days have been all about learning about CHOWN (Change Owner and Configuration.php stuff), so I have been learning as I go. From one month ago, I am starting to wrap my noodle around all this and things are getting easier, but nothing helps more than people like you that take the time to answer questions on this forum.

When I learn more and feel comfortable, I hope to help others such as you have helped me.

Thanks again.

Douglas

[Author]

Posts