Clickable Logo in Header in Artisteer 4 (a working solution)

Quote Nick:

Thanks for that TomcatDoc, you showed us another way of inserting a logo.

That said, this does nothing to solve the problem in hand. The logo, introduced as a RSS link, still disappears in the responsive layouts.

All is not lost though. With your method it's easier to introduce a logo and put a link on it. Before we had to do it with a shape, and edit the html content of the shape to insert the logo and the link manually. And since it had to be done with a custom html code, you had to manually upload the logo. This makes it easier.

To complete the process, we still need to have a Headline, and hide it with the CSS code which was generously shared by mightec earlier in this post (put it in the export options -> Additional CSS).

.art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover
{
z-index: -1;
}


With this, in the desktop layout, we can have a custom, clickable logo, and in the responsive layouts (tablets 1024px or less, and smartphones), we can have the text Headline.

This must be better addressed by Artisteer though, and sooner rather than later. It has been discussed and asked for, for several weeks now. Even Templateer does not address this issue, and a specific email sent to it's developer 3 days ago, and is still unanswered. I'm waiting Bud...

Quote TomcatDoc:

Thanks for the kind words Nick!
I opted to do something different for keeping the logo in the header on mobiles.
I utilized a CSS hack posted by Pekka M and expanded on it a bit. The result displays well on my Droid.
I located the image on the server in the Word Press directory that represents the logo, copied it and renamed it. Then I headed over to WP>Appearance>Editor>style.responsive.css
and made the following tweak:

.responsive .art-header {
width: auto;
height: auto;
min-height: 100px;
min-width: 1%;
margin-right: 1% !important;
margin-left: 1% !important;
background-color: transparent;
background-image: url("images/objectlogomobile.png");
background-position: left center !important;
background-size: contain;
background-repeat: no-repeat;
}
As you can see, in the responsive CSS stylesheet I added the background image pointer to the newly copied and renamed logo image file. That's really all that is needed. I did spruce it up a tiny bit and "position" it.
So far It's working and has not broken anything...YET....

<div id="my-div"><a href="/" class="fill-div"></a></div>

#my-div {

     width: 160px;

     height: 75px; 

} 



a.fill-div {

     display: block;

     height: 100%; 

    width: 100%; 

    text-decoration: none; 

}

Quote Greg J:

Heres a variation that does not require anything but a shape.

I have a banner where the logo is embedded in the left side of the banner. I did not want to have to redo the banner. So I thought if I could make the shape a div and make the whole area clickable I would achieve the correct results.

This is what worked for me...

1. Add a header shape to sit over the top of your logo. Resize it accordingly and make a note if the height and width properties for the shape - you will need these later.

2. Change the shape fill to transparent
3. Edit the html for the shape and add the following html code

<div id="my-div"><a href="/" class="fill-div"></a></div>

Now the next step is to make this entire div clickable. Copy and paste the following code into your Export > Options > Custom CSS box

#my-div {

     width: 160px;

     height: 75px; 

} 



a.fill-div {

     display: block;

     height: 100%; 

    width: 100%; 

    text-decoration: none; 

}

make sure you overwrite the height and width settings with the height and width of your shape

Quote TomcatDoc:

Hi Folks,
my $0.02 worth,
Cheers

1)insert an RSS control
controls>RSS
2)set your address and target
leave text and screen tips blank
3)right click on image and choose "options"
4)click on RSS
5)click on RSS presets
6)click on "insert icon from file"
6a)navigate to your local image(make sure your image is the size you want before inserting, resizing later will goof up your image)
7)Insert
8)Preview in browser to test
File>Preview in Browser

Be advised that your new RSS control image will always be the default RSS icon in Artisteer until you switch it back.

Artisteer 4.1.0.59688
Exported as Wordpress Template
Windows 8 running Firefox 17 & IE 10.
one last thing....I can not get the stubborn POS to work in IE8 on XP

Quote Mark C:

So, the solution:

1) Use the new Header Shapes feature available in Artisteer 4. Add a shape and place an image inside it by editing the shape's HTML (Right click > Edit Source HTML). Make this image into a link and place it on top of the website title. The source code will look something like this:

<a href="http://www.example.com"><img src="http://www.example.com/image.jpg"></a>