Dave
|
I think we need to suggest this feature as I don't believe that it is available.
|
| |
Garry
|
You can make you entire header image clickable as following :
You can do it changing following code:
<div class="art-Header">
<div class="art-Header-jpeg"></div>
-----------------
To:
-----------------
<div class="art-Header"onclick="location.href='http://www.yoursite.com/';" style="cursor: pointer;">
<div class="art-Header-jpeg"></div>
You can insert the logo by removing your slogan, mold the code I suggested to make only logo clickable instead of entire header image.
|
| |
Linda
|
Okay. This is how I do this.
1. Create a transparent gif file.
2. Add position logo to the templateDetails.xml.
3. Open index.php and change the code to this:
<div class="art-Header">
<div class="art-Header-jpeg">
<div class="logo">
<jdoc:include type="modules" name="logo" />
</div>
</div>
</div>
4. In template.css I change the art-logo to this instead:
div.logo {
float: left;
position: absolute;
top:0;
left: 0;
z-index:100;
width: 700px; ****NOTE: CHANGE WIDTH AND HEIGHT TO MATCH YOUR LOGO***
height: 165px;
}
div.logo a:link { border: none;}
5. In Joomla, create a custom xhtml module named logo. Insert the transparent.gif and size it to your logo. Make a link to your site. Publish the module.
I do it this way so that I can also position extra module to the right of the logo if I want. For example if you go to canterusa.org the paypal module at the top, right of the page.
|
| |
Kim
|
Thanks, Linda, I´l try your way, even if it seems a little complicated:).
A more simple way to do it would still be nice.
|
| |
Linda
|
Kim,
It is a little more complicated than onclick, however I do it this way because I also insert a module to the right. I didn't show that code above. But this way I can make that transparent.gif any size and clickable.
Phil,
Not sure who you are asking? I listed the files I change the code in for each step. If you don't know where index.php is then I would highly suggest exporting a site to a folder and take a look at the files/folders within a template.
Linda
|
| |
Gen
|
Phil,
If you are not making a dynamic site, but rather a static HTML site (or "Company Homepage," as the Artisteer start menu calls it), then you will not have any .php files (because Artisteer is not programming in php in this case, but just in html).
But export your design to a folder, and see if your index.html file contains enough of the same code to figure it out. Of course you will not see any include stuff (e.g., <jdoc:include type="modules" name="logo" /> ), but perhaps you can sort it out.
This does seem like a no-brainer of a feature that should be offered! 
|
| |
Pakito
|
The logo must be content not background so while the suggested solution works it is a semantic aberration. Artisteer should improve that. Meanwhile I suggest change the template a bit as in the Beez template:
<div class="art-Logo"> <h1 id="name-text" class="art-Logo-name"><a href="<?php echo $baseUrl; ?>/"><img src="/templates/beez/images/logo.gif" border="0" alt="Logo de Beez, tres pequeñas abejas" width="300" height="97" /> Title</a></h1> <!--<h1 id="name-text" class="art-Logo-name"><a href="<?php echo $baseUrl; ?>/">Título</a></h1>--> <div id="slogan-text" class="art-Logo-text">Texto de Lema</div> </div>
|
| |
Ian Shere
|
Linda, You mention that you place a module in the header position. Can you explain how to do this. Sounds like something I need. I assume you manually edit the code, or can you have joomla do it?
TIA.
|
| |
Linda
|
Ian,
I modify the header area as follows. You need to change three files: index.php, templatedetails.xml, and template.css. The example shown below is to add a slideshow module to the right of the logo area. However, you could put a banner there or whatever you want.
In index.php I change the header code to:
<div class="art-Header">
<div class="art-Header-jpeg"></div>
<div class="logo"><jdoc:include type="modules" name="logo" /></div>
<div class="topslideshow"><jdoc:include type="modules" name="topslideshow" /></div>
</div>
In template.css I ADD the following code.
div.logo {
float: left;
position: absolute;
top:5px;
left: 0;
z-index:100;
width: 300px;
height: 200px;
}
div.logo a:link { border: none;}
div.topslideshow {
position: absolute;
top: 0;
left: 310px;
width: 770px;
height: 200px;
z-index:101;
}
In templatedetails.xml, I add
<position>topslideshow</position>
<position>logo</position>
Once this is done, in Joomla Admin, I add two modules. One for logo position, insert logo and hyperlink it. The other for the slideshow module position.
The site I'm using this on is under construction, but you can see it here: https://saugeengolf.com/home
Hope this helps.
Linda
|
| |
Linda
|
I'm using superfish menu on this site. Unfortunately I am having some layering problems. Otherwise it works well.
|
| |
Stanley Rieck
|
Hi Linda.
Your code works great. I would just like to know if there is a possibility to add this code to all the generated templates, instead of having to do this each time after a template has been made?
|
| |
Werner
|
Quote Linda:
Once this is done, in Joomla Admin, I add two modules. One for logo position, insert logo and hyperlink it. The other for the slideshow module position.
The site I'm using this on is under construction, but you can see it here: https://saugeengolf.com/home
Hope this helps.
Linda
Hi Linda!
I appreciate this step by step guide. As I am new to Joomla I was able to do the first steps, but I did not manage to add the module for logo position. I dont know how to create a new module. Could you describe this as well step by step.
Thank you so much!
Werner
|
| |
Bonobo
|
Quote Werner:
Hi Linda!
I appreciate this step by step guide. As I am new to Joomla I was able to do the first steps, but I did not manage to add the module for logo position. I dont know how to create a new module. Could you describe this as well step by step.
Thank you so much!
Werner
Hi Werner,
this is Joomla knowledge.
In Joomla, go to Extensions/Module Manager and klick "New". In the following dialog, select "Custom HTML" and klick "next". This opens up the module settings dialog. Here you select the module positon where the HTML code should be rendered, in Linda's example this is "logo". This module position is only available after you have altered the three template files as Linda described. In the editor window at the bottom of the dialog, you insert your HTML code for the logo and the link to it. Don't forget to enable the module and - that's it.
Linda, thank you very much for your instructions how to add a clickable logo and an additional module position right of it. That's what I was looking for.
|
| |
Gauranga
|
Hi Linda
I have been able to insert the simple code as mentioned earlier:
Replace the following code:
<div class="art-Header"> with:
<div class="art-Header"onclick="location.href='http://www.prasadam.co.uk/';" style="cursor: pointer;">
It is easy and effective. In this way I can have the whole header linked to my homepage. Now I want to go further. I want a logo gif file within the header only linkable to my home page. The above instructions are difficult to understand.
Is there no way of editing the index.php to have Artisteer's text logo linking to my home page replaced with a linkable gif file instead? I do unfortunately not understand php to code this with some href statement or so, calling for the gif file instead of the text link.
Another option may be to link the transparent foreground image created in Artisteer to the home page. It seems such an obvious thing to do. Unfortunately Artisteer doesn't offer this feature. The text link really looks horrible I have to say, even though it nicely links to the homepage.
Any php coding help on this would be much appreciated.
Gauranga
|
| |
Gauranga
|
Linda
Your https://saugeengolf.com/home site is GREAT! How did you get this weather module??? It is super. Would love to have that :)
Gauranga
|
| |
mw1001
|
Great tips Linda - thanks for sharing your knowledge!
|
| |
priya
|
Hi Linda
thank you for you guide, its very good
i did all the steps
but i need to define the logo position
now, it looks like this
can you help me?
Priya
|
| |
Saji
|
Thank you all for tis post, it's been extremely helpful. Could anyone please take a look at http://afribuilders.com and let me know why the main body of the page is flushed left? Everything seems fine in the template and with the upload.
|
| |
Garry
|
@ Saji
You should visit following thread for solution:
http://forum.joomla.org/viewtopic.php?p=2070119
|
| |
Miguel
|
@Linda
I love you so much! 
Your solution is very simple and effective!
Regards from Chile!
|
| |
Jun
|
OK, I'm looking the solution, and simply doesn't work. I even couldn't find the <div class="art-Header"> line in my template's header.php! I can find a block-header.php however - but no "art-header" line either. Here I can find a <div class="art-blockheader"> line, but if I try to insert this onclick thing, it doesn't work.
So, what should I do?
bye
Jun
|
| |
WebAce
|
Is is possible to make a feature in Artisteer 3.0 to create a link of the header image?
webace
|
| |
Gabor
|
I am using Artisteer 2.6 and the 1.5.22 Joomla version, these methods worked me best, after trying more:
1. method: (the whole header is linkable - but I usually hide much of it with a flash gallery)
- insert the logo image in the header.jpg (folder: your default template/images/ ) at the required position with GIMP or PS
- make header linkable in the default template's index.php:
by modifying this:
<div class="art-header">
<div class="art-header-jpeg"></div>
to this:
<div class="art-header">
<a href="***"><div class="art-header-jpeg"></div></a>
*** is empty (= default page), or a certain url is defined: http://www.something.com
2. method: (only the logo is linkable, easier to adjust)
- in the template's index.php file, insert this: (under the line <div class="art-sheet">)
<a href=""><div id="logo"></div></a>
- then insert this in the template's template.css file (it is ok after the #art-main......block):
#logo
{
width: 100px;
height: 100px;
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
background-image: url('http://......./......../templates/***default template folder***/images/logo.png');
background-repeat: no-repeat;
}
- then copy the logo.png image in the template's images folder with the corresponding px sizes
(this case 100x100 px)
- adjust the px values (distance from upper left corner)
That's it... let me know how other Joomla versions work with it.
|
| |
Tommy
|
So, no way known to do it with 3.0 ( am using beta) and Joomla 1.6?
Here is my site (on a test folder till completion):
http://66.147.244.194/~ourtimed/
"One" of the last things I am trying to complete before launching.
|
| |
Linda
|
with 3.0 it is easier. To make a clickable logo, just need to add module position for the logo.
In the index.php, find:
<div class="art-header">
<div class="art-header-center">
<div class="art-header-jpeg"></div>
</div>
<div class="art-logo">
</div>
</div>
Add the module include as shown below:
<div class="art-header">
<div class="art-header-center">
<div class="art-header-jpeg"></div>
</div>
<div class="art-logo"><jdoc:include type="modules" name="logo" />
</div>
</div>
In templatedetails.xml
Add a position for logo
In Joomla, add a custom HTML module called logo and use the new logo position.
Upload your logo image and then add a hyperlink to it.
Please note:
You might need to change the template.css file for the art-logo class.
For example, I had a header that I wanted to be the logo and linked. So I changed the following class:
div.art-logo
{
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 950px;
}
|
| |
Tommy
|
Thank you so much ... relatively easy and worked perfectly.
|
| |
Ray
|
Quote Kim:
How can I insert a logo instead of the logetext and make et clickable pointing at the frontpage?
Would be nice if it was possible to upload a logo in Artisteer for use instead of the logotext.
Best regards
Kim
I just had a 'hands smacks forehead' moment there...
I needed a clickable logo in my Artisteer Joomla template and had no idea...
I followed the steps on this <a href="http://www.2ninerniner2.com/tips-and-guides/artisteer">tips page</a> to insert a header position for the logo.
Then I added my logo in a new html module (Module Manager>New>custom HTML). Once done, select the logo in the editor window and press the link button, insert your homepage url (or whatever url you want) and hey presto!
Bang... just like that... clickable logo in my header!
|
| |
Ray
|
Sorry that link above should be:
http://www.2ninerniner2.com/tips-and-guides/artisteer
|
| |
Ellis
|
Quote Tommy:
So, no way known to do it with 3.0 ( am using beta) and Joomla 1.6?
Here is my site (on a test folder till completion):
http://66.147.244.194/~ourtimed/
"One" of the last things I am trying to complete before launching.
Hi Tommy,
If you don't mind, could you detail how you got the shadow effect wider at the top of the sheet (background) and fading to nothing at the bottom?
|
| |
Chad Garber
|
Well I just figured out a non-code way of doing it. I used to the logo as a foreground photo. Then I typed the text of the logo again in the Headline and positioned it over the foreground photo version of the logo. Then I replace the text in the Headline with a bunch of spaces (and the same with the slogan). Now these is clickable area on top of the foreground logo. (Note: if you just put spaces in the Headline and Slogan, you can't position it which is why the step of typing in the text was necessary). http://theamcc.com
|
| |