Joomla Templates Club 406,261 posts

[ksarb Friend ksarbJoin date: October 2009Posts: 10Downloads:0Uploads:2 Thanks: 4]

#145657

For less confusion i have reverted the files so you can see my reference. i can change the header back to my desired height.

Hello I first want to thank you all here, I had trouble with my images all night and this really helped. I can now add the .png logo with the correct size…which is the entire header.
But I still cannot figure out these last two things.
First I have a question: Can the image not be a background where I can add two specific hot spots?
I noticed that the logo is a link < a href=….>, in the browser if I hover I see the link reference and when I click it to go to that address. In this instance the index home page.How to I prevent that ?

Here is the index.php file(I refert it back to the original) I could not remove it for the rest of the if/else statement would apply and o end up with text or its just messy. I just want to have the logo

[PHP]<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam(‘logoType’)==’image’) { ?>
<h1 class=”logo”>
<a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $siteName; ?></span></a>
</h1>
<?php } else {
$logoText = (trim($tmpTools->getParam(‘logoText’))==”) ? $config->sitename : $tmpTools->getParam(‘logoText’);
$sloganText = (trim($tmpTools->getParam(‘sloganText’))==”) ? JText::_(‘SITE SLOGAN’) : $tmpTools->getParam(‘sloganText’); ?>
<div class=”logo-text”>
<p class=”site-slogan”><?php echo $sloganText;?></p>
<h1>
<a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $logoText; ?></span></a>
</h1>
</div>
<?php } ?>
[/PHP]

2. When I saw the .png file in the browser-the corners are rounded, inoticed that there is a still a white box background. I figured out itw as the { templates/ja_rutile/images/box-tl.gif} image that is on all four sides. I played with the padding in the css from 4px 3px 4px 4px to 0px 0px 0px 0px

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;

and the margins and padding to 0px from the below that its in th template.css
/* HEADER
——————————————————— */
#ja-header {
line-height: normal;
position: relative;
padding: 20px 0 0;
z-index: 999;
}

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

h1.logo a {
width: 355px;
height: 38px;
display: block;
background: url(../images/logo.png) no-repeat center;
}

…….

The padding goes away but it still see a little of the box-tl.gif in the top right and left corners, I thought I could just make it round or delete it , but when I deleted the box-tl.gif image, I also notice it was the menu background image as well which would then disappear. I am not sure if i should touch the h1 sections, but it was getting too messy.

It basically looks like this..image below.
Except. the pink is the logo.png with round edges and i changed the box-tl.gif to be represented as black so it can be seen here.
but behind the upper right and left corner you can see some of the box-tl.gif.

Thank you for any assistance, i apologize if i put it in the wrong section, this was the closest i found for this specific. templates

---

Attachments:

1. 

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#322267

<em>@ksarb 151086 wrote:</em><blockquote>
First I have a question: Can the image not be a background where I can add two specific hot spots? [/quote]

Yes, in theory…but it ain’t gonna be easy. 🙂
I would forget the “hotspot” functionality of old HTML days (we’re playing in PHP now)…and create separate images (one for each of your “hotspot” targets) with links from each.

THEN…you need to do two things:

+ Update your CSS to reflect each of the new images
+ Update your index.php file to reflect multiple logo images

Currently your CSS looks like this:


h1.logo a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../../images/orange/logo.jpg) no-repeat scroll center center;
}

And the matching code in your index.php looks like this:

[PHP]<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam(‘logoType’)==’image’) { ?>
<h1 class=”logo”>
<a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $siteName; ?></span></a>
</h1>
…blah, blah, blah
[/PHP]

In the CSS you’re going to need to change that out of an H1 class into just a normal class (perhaps “logo1” and “logo 2”). If you leave it in an H1 class it act like H1 test with the carriage returns, margin protections, etc.

Will this work? I don’t know, but in theory it can.

Perhaps the real question should be…wouldn’t it be easier to blow out the logo area and replace it with a new module area?
Then you can pretty much do what you want! 😉

NOW – as for question #2…it appears your PNG files have been inadvertently saved with the background included. You need to open it in Photoshop or some other image editor that will handle a PNG file correctly…and punch out the background black areas…so that they again are transparent. Then carefully save them with the transparency in tact.

Have fun!
John.

1 user says Thank You to John Wesley Brett for this useful post

1. ksarb

[ksarb Friend ksarbJoin date: October 2009Posts: 10Downloads:0Uploads:2 Thanks: 4]

#322283

Thank you sooo much, i am on it, i will try to put it up where there can be a link to make it easier….i really appreciate the fast response…on to having some fun :)…

[ksarb Friend ksarbJoin date: October 2009Posts: 10Downloads:0Uploads:2 Thanks: 4]

#322322

Hello jbrett i just wanted to thank you. I took your advice on the hot spots(not worry about it) i am considering the images links instead. and the header is in. I copied the following(this way changes don’t affect the rest of the template):

Original

[PHP]<div class=”ja-box-br” style=”overflow: visible;”><div class=”ja-box-bl”><div class=”ja-box-tr”><div class=”ja-box-tl”>
<div id=”ja-header” class=”clearfix”>[/PHP]

and me new names to Changed:custom
[PHP]
<div class=”ja-custom-a” style=”overflow: visible;”><div class=”ja-custom-b”><div class=”ja-custom-c”><div class=”ja-custom-d”>
<div id=”ja-header” class=”clearfix”>[/PHP]

I noticed when I deleted it the (original above)my pages was all out of whack and they all represented something so I just renamed it and zeroed out the margins and paddings.
the ja-box-tl,br,tr,tl… are gone so the .png can show the rounded top corners.(oh i had used the black initially so people can see what i was referring to, it was too small to see with a white screen background. I have two issues now but will start a new thread for i can see how the above can be confusing, i will post the url below just in case.
Thanks again, i just really had to give up that hot spot idea 🙂

oh, i almost forgot, getting rid of the logo itself was becoming very complicated so i just kept it, and in joomla admin select it as text and put a period (.) it will match the final logo(so small anyway it really doesn’t matter). I figure this way if the cursor touches the header it is does not link anywhere. this maybe incorrect but that’s the simplest way and it seems to work…well so far. thanks again:)

[ksarb Friend ksarbJoin date: October 2009Posts: 10Downloads:0Uploads:2 Thanks: 4]

#322326

the new thread is http://www.joomlart.com/forums/showthread.php?p=151224#post151224, just to make it a little easier.

[Author]

Posts