Joomla Templates Club 406,261 posts

[paulfam99 Friend paulfam99Join date: July 2008Posts: 3Downloads:0Uploads:0]

#131087

Hi,

I need to change the logo on the Drimia template. Can someone please tell me where I can find this image and is it as simple as replacing the image with my new logo image.

I no this may not look the best but it is within my capabilities.

Thanks

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#260929

located in
/templates/ja_drimia/images/

yes, just replace, but you will need to match size and type if you do not know how to edit css

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#260944

Hi
That is logo.gif in templates/ja_drimia/images folder, and you can see it in template.css (line 1146)

h1.logo a {
background:transparent url(../images/logo.gif) no-repeat scroll 0% 0%;
display:block;
float:left;
height:45px;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
text-indent:-5000px;
text-transform:uppercase;
width:198px;
}

[artaddicted Friend artaddictedJoin date: June 2008Posts: 50Downloads:0Uploads:3 Thanked: 2 times in 1 posts]

#260952

I changed out the logo, however it took several steps and edits.

1. Replace the logo.gif with your replacement logo.gif (use the same name).
2. Changed the height css, to mach new logo (only need to change if different height).
3. Modified the top bar image (there appear to be two images for this).
a. Moving the end cap from the left side of the standard logo to the end of the bar code image.
b. Replaced the text under the bar code.

I was able to use the pds files that were available on the download area. I still need to replace my logo image with one of a higher resolution. This was not easy for me, as I am a novice. Here is my result: http://nexusanalytix.com

[paulfam99 Friend paulfam99Join date: July 2008Posts: 3Downloads:0Uploads:0]

#260964

Thanks everyone for all your help.

I’ll have a go today or tommorrow. It’s great to see so much support on this forum. I thought my post might just sit there until answered by a mod.

Nice work art addicted. I love this template, so profesional yet so easy to work with. After spending big money on some other websites that wern’t as good I’m beginning to realise how much money I wasted.

I’m developing the site at http://www.famsecurity.com.au Not much done yet though.

Thanks again.

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#260966

this is one of the more complicated to change the logo on. it has several pieces to it. I should have given you more detail in my first post.

[artaddicted Friend artaddictedJoin date: June 2008Posts: 50Downloads:0Uploads:3 Thanked: 2 times in 1 posts]

#260993

<em>@paulfam99 68002 wrote:</em><blockquote>I’m developing the site at http://www.famsecurity.com.au Not much done yet though.
</blockquote>

Hi PaulFam99,

I have worked hard on some of the little issues in this template. I am sure most of them are because I am a novice. However, I may be able to give you a few hints.

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#260999

<em>@artaddicted 67983 wrote:</em><blockquote>I changed out the logo, however it took several steps and edits.

1. Replace the logo.gif with your replacement logo.gif (use the same name).
2. Changed the height css, to mach new logo (only need to change if different height).
3. Modified the top bar image (there appear to be two images for this).
a. Moving the end cap from the left side of the standard logo to the end of the bar code image.
b. Replaced the text under the bar code.

I was able to use the pds files that were available on the download area. I still need to replace my logo image with one of a higher resolution. This was not easy for me, as I am a novice. Here is my result: http://nexusanalytix.com</blockquote>

Hi artaddicted and paulfam99,

From my own experience, gif file is not very high resolution. I prefer .png (even more than jpg) for the same image kb size, I got better resolution with png. To do this, you may consider changing the logo image itself using better logo image creator.

First make your logo, call it mysitename-logo.png, for example, at the size and resolution you want. Note: I have many sites so I always include the name of the site.

To make the changes, I do FTP:

To upload mysitename-logo.png:

Via, FTP, once you are in your Joomla installation:

templates => ja_drimia => images (upload mysitename-logo.png in this directory)

after it has been uploaded, locate and highlight

mysitename-logo.png => (cut mysitename- so that it becomes) => logo.png

to make changes in the spacing itself in the header, where the logo is located:

Again via FTP, go back one directory to ja_drimia as indicated in the route below:

templates => ja_drimia => (then click) css => template.css

do Edit template.css to open the file. As indicated by nguoiabcd, if you Find “logo”, you will find in the template.css

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
position: relative;
z-index: 10;
}

#ja-header
{
background: url(../images/head-bg.gif) no-repeat 0 60px;
height: 140px;
position: relative;
z-index: 999;
}

.narrow #ja-header
{
background: url(../images/head-bg-n.gif) no-repeat 0 60px;
}

h1.logo
{
font-size: 300%;
height: 45px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 60px;
width: 198px;
}

h1.logo a
{
background: url(../images/logo.gif) no-repeat;
display: block;
float: left;
height: 45px;
outline: none;
text-indent: -5000px;
text-transform: uppercase;
width: 198px;
}


when you are beginning focus on this, as suggested by nguoiabcd:

h1.logo a
{
background: url(../images/logo.gif) no-repeat;
display: block;
float: left;
height: 45px;
outline: none;
text-indent: -5000px;
text-transform: uppercase;
width: 198px;
}

if you decide to use logo.png, for example, change:

background: url(../images/logo.gif) no-repeat;


to

background: url(../images/logo.png) no-repeat;


the other changes of course are the height and width.

The outline above is the same procedure for almost any Joomlart template, there are just slight differences in the affected CSS specifications, depending on how complex the logo is. This happens to be one of the more complex ones.

Cornelio

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#261002

Note that changing the height and/or width affect the relative positions of the other images in a complex logo layout like that used in JA Drimia.

When I was new doing this, after making one change, after another, I got lost, to the extent that the final layout is so messed up. To avoid this, I decided to keep tract of the original CSS specifications

this can be done by adding

/* orig added removed */

The items included in the /* orig added removed */[ are not executed by the software used, provided you both have the begin and end: /* */.

like this:

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap
{
position: relative;
z-index: 10;
}

#ja-header
{
background: url(../images/head-bg.gif) no-repeat 0 60px;
height: 140px;
position: relative;
z-index: 999;
} /* orig background: url(../images/head-bg.gif) no-repeat 0 60px; height: 140px; added removed */

.narrow #ja-header
{
background: url(../images/head-bg-n.gif) no-repeat 0 60px;
} /* orig background: url(../images/head-bg-n.gif) no-repeat 0 60px; added removed */

h1.logo
{
font-size: 100%;
height: 45px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 60px;
width: 198px;
} /* orig font-size: 300%; height: 45px; top: 60px; width: 198px; added removed */

h1.logo a
{
background: url(../images/logo.gif) no-repeat;
display: block;
float: left;
height: 45px;
outline: none;
text-indent: -5000px;

width: 198px;
} /* orig background: url(../images/logo.gif) no-repeat; height: 45px; width: 198px; added removed text-transform: uppercase; */


orig => my abbreviation for original

“added” and “removed” should be obvious.

Anyway, what I learned hard is to be patient changing the parameters one at a time, and seeing how it affects the surrounding items.

Cornelio

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#261020

also, if your going to use png, and your right, they are better, check it out in IE6 and 7, IE6 has issues with png’s and transparencies, if it does not render correctly you can install a png fix from joomla extentions

[paulfam99 Friend paulfam99Join date: July 2008Posts: 3Downloads:0Uploads:0]

#261258

Thanks again for all your help. I’ve changed the logo to jpg for better resolution and modified the css to allow for a larger image. It does something funny when it loads, overlaping the menu bar but I’m happy with how if sits so I’ll leave it as is.

One more question which should maybe in a new thread. I am always concerned about the security of the Joomla administrator login page.

Every time I see a Joomla site I can often get to this page by just adding /administrator to the end of the domain. This only leaves me to guess the username and password which I see as a problem.

I read somewhere that the login for this should be renamed. What are peoples thoughts and how can I change the name from /administrator to improve security

Thanks

Paul

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#261273

<em>@mj1256 68069 wrote:</em><blockquote>also, if your going to use png, and your right, they are better, check it out in IE6 and 7, IE6 has issues with png’s and transparencies, if it does not render correctly you can install a png fix from joomla extentions</blockquote>

I wish the time will come when people realize that Internet Explorer is part of the problem.

Cornelio

[Author]

Posts