Make logo a link, but not whole div?!

1 Posts

sararoyle Reply #1, 15 years, 1 month ago

We are trying to make our logo a link.

So far, I have managed to track down the section of the template that pulls in the image, which appears to be pulled in with the $banner variable, as if I remove the [[$banner]] tag, but leave the div in place, the image vanishes - hence I suspect the image is pulled via the $banner variable, along with the address, etc (see:

 http://www.icedmagiccakes.co.uk/

)

I can add a <a href> tag to the div than the [[$banner]] variable sits inside, and make the whole div into a link, but this is not what is wanted...

I am unsure where the $banner is defined. What I am wondering is, if I find where the $banner is defined, perhaps on that page, I can make the img src a link?!

Any ideas?

312 Posts

allanb Reply #2, 15 years, 1 month ago

You should look for a chunk named banner under Elements.

Hope this helps and welcome to MODX

DEVELOPMENT ENV:- Ubuntu 12.04 | MODx Revolution 2.2.8 | LAMP 2i Apache 2.2.22 | Php 5.3.10 | Mysql 5.5.31 MySQL client version: 5.5.31

70 Posts

silverman63 Reply #3, 15 years, 1 month ago

also, why not put the <a href> after the div but before the call, and just put the closing tag on the other side of [[$banner]]?

21 Posts

kopimi Reply #4, 15 years, 1 month ago

It seems that your header image, in the banner <div>, is actually a background image located in the #banner-inner ID of your page.

It’s actualy being defined in the css file : http://www.icedmagiccakes.co.uk/css/globalstyles.css

#banner-inner {
    width: 460px;
    background-attachment: scroll;
    background-image: url(../images/logo3.jpg); 
    background-repeat: no-repeat;
    background-position: left top;
    height: 90px;
    padding: 10px 0 0 400px;
    margin: 0 auto;
    text-align: right;
}

If this is seriously YOUR site, you should know things like that. But hey, if you want to fix that, simply remove the css rule for the background then place an actual image into the #banner-inner ID of the site. Make that image link to whatever you what after that...

my little attemp (on the fly);

edit the css file : http://www.icedmagiccakes.co.uk/css/globalstyles.css
remove the back ground rule : background-image: url(../images/logo3.jpg);
edit your HTML source (or modx chunk or whatever serves as your HEADER)
Inside the <div id=banner-inner> tag, insert: <a href="http://__MY_SITE_URL__"><img src="../images/logo3.jpg"/></a>

if it doesn’t display as you like, then...... fiddle fiddle fiddle (and also, learn html+css)

Remember i haven’t tested any of this, i am prone to making typo mistakes.