WordPress › Support » Need help with making clickable header

fanboi
Member
Posted 1 year ago #

I'm customizing the Desktop Chaos theme. The original theme used html text for the blog title, bit I wanted to use a logo. There was no header graphic (header is built into a large background image - that goes behind content area AND header)

I added an invisible gif to the section of the stylesheet css and then added the following code (taken from a site that has clickable header) to make that area clickable...

<div id="blog-title .title" onclick="location.href='http://thejordanpease.com/test/';" style="cursor: pointer;">

but it made the WHOLE PAGE clickable, not just the "blog-title .title" area. Although other buttons work fine, clicking in the search box sets it off - which disables search.

HELP?
fanboi
Member
Posted 1 year ago #

http://thejordanpease.com/test/ is the customized site location.
fanboi
Member
Posted 1 year ago #

Let me know if u need to see more code from any specific pages to see how to integrate an invisible clickable header that sits atop large page background image
govpatel
Member
Posted 1 year ago #

That is because you have not closed the link with </a>
fanboi
Member
Posted 1 year ago #

I copied the code directly... It didn't start with <a href

it started with location.href=... do I still end it with </a>

I changed it to

<div id="blog-title .title" onclick="location.href='http://thejordanpease.com/test/'</a>;" style="cursor: pointer;">

link doesn't work anymore - but whole page is still clickable.
no married to using the code above is someone has a better solution.
govpatel
Member
Posted 1 year ago #

You need add after the code so you would have

<div id="blog-title .title" onclick="location.href='http://thejordanpease.com/test></a>
fanboi
Member
Posted 1 year ago #

that restored the link, but whole page is still clickable
govpatel
Member
Posted 1 year ago #

Where did you get that code from as looks like is not how it should be

Paste your header.php file in http://wordpress.pastebin.com submit and paste url here
fanboi
Member
Posted 1 year ago #

I got the code from another theme that I use. Works fine in that theme. Like I said - happy to use another solution if anyone has one.

pastebin url for header

pastebin url for stylesheet
Steffen Jørgensen
Member
Posted 1 year ago #

You have the following code in your html-header section, which is very wrong!
<div id="blog-title .title" onclick="location.href='http://thejordanpease.com/test/';" style="cursor: pointer;"></a>

Insted you should change the <div id="blog-title"></div>-section to something like:

<div id="blog-title" onclick="location.href='http://thejordanpease.com/test/"></div>
fanboi
Member
Posted 1 year ago #

I swapped my code for yours (replaced at the same spot in code) and it didn't work. Caused whole page to shift down and killed the link that had been working.

Did i place the code in the wrong place? Where does it belong in the header file?
Steffen Jørgensen
Member
Posted 1 year ago #

I shouldn't be in heder.php
Maby index.php...
Whereever the code <div id="blog-title"> is...
fanboi
Member
Posted 1 year ago #
OK, i deleted that code from the header.php (which fixed the page shift).

Then I added it to index.php - added it within existing <div id="blog-title"was. It did not give me a clickable area.
```
<div id="blog-title">
        <span class="title"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></span>
        <span class="description"><?php bloginfo('description'); ?></span>
	onclick="location.href='http://thejordanpease.com/test/">
        </div>
```
I also tried completely replacing the existing code with the code you gave, didn't work that way either.

The theme I'm using doesn't have a graphic in the header. Image for header comes from page background, so there was no image to make clickable. So I uploaded an invisible.gif file and added it to the stylesheet.css - i need to make that clickable.
```
#blog-title {
	padding:46px 0 0 100px;
	font-size:11px;
}

#blog-title .title {
	display:block;
	width:400px;
	height:26px;
	background: url(images/invisible.gif) left bottom no-repeat;
	overflow:hidden;
	color:#000;
	font-size:24px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#blog-title .title a {
	color:#000;
	text-decoration:none;
}
```
I'm a graphic designer not really a programmer. I know enough to do some minor edits to code or add working code from other sources, but don't know enough to write from scratch or retool code that doesn't work the same was as the theme does.
govpatel
Member
Posted 1 year ago #
```
<div id="blog-title">
        <span class="title"><a href="http://thejordanpease.com/test/"><img src="image url here"></a></span>
        <span class="description">Your description here </span>
        </div>
```
This is the right code and I looked at how you have your header and you have all part of your background
http://thejordanpease.com/test/wp-content/themes/the-jordan-pease/images/outer-back.jpg

I just wonder why you can link just header you need to break your header image to make it click able by it self.
fanboi
Member
Posted 1 year ago #
I said the header was part of background image - that is the way the theme I'm trying to customize (graphics swap and minor CSS edits) is set up.

i don't know enough to make a major edit like changing how the background image works to the theme - can't I just place an invisible gif over the background where masthead should be and use that as the clickable item?

tried this...
```
<div id="blog-title">
        <span class="title"><a href="http://thejordanpease.com/test/"><img src="images/invisible.gif"></a></span>
        </div>
```
but didn't work either :(
govpatel
Member
Posted 1 year ago #

Can you paste the file you making changes in pastebin as the header.php does not have what I am looking for.
fanboi
Member
Posted 1 year ago #

pastebinurl for index.php
fanboi
Member
Posted 1 year ago #

really appreciate the help by the way!
govpatel
Member
Posted 1 year ago #

<span class="title"><a href="http://thejordanpease.com/test/"><img src="images/invisible.gif"></a></span>

try add / before images/invisible.gif if that does not work try adding the full url
fanboi
Member
Posted 1 year ago #

where does that code go? Same place I had code before? Within `<div id="blog-title">?
`

fanboi
Member
Posted 1 year ago #

I put that code where the old code was... even tried full URL. Gif still isn't even showing up (I made a green streak thru invisible gif so I would be able to see it).

<div id="blog-title">
	<span class="title"><a href="http://thejordanpease.com/test/"><img src="http://thejordanpease.com/test/wp-content/themes/the-jordan-pease/images/invisible.gif"></a></span>
        </div>

govpatel
Member
Posted 1 year ago #
I think the problem is that who ever designed the theme put the code for title and description in templates while a normal way is to have it in header.php file so you will have problem from page to page you will have go in every template and make changes.

I just looked html code and all I see is this
```
<div id="blog-title">
<span class="title">
<a href="http://thejordanpease.com/test/"/>
</span>
<span class="description"/>
</div
```
No link
Root
Member
Posted 1 year ago #

I dont think you are on the right lines here. It is not necessary to include the image in the html via a template. To accommodate IE it is the link which needs to be clickable. Not the zone it is in. We would normally
set the link to display: block and increase its height so it fills its parent container. Then we set the fancy bg up in the css as a background.
Understood correctly this is a CSS question not a php / template thing.
fanboi
Member
Posted 1 year ago #
Root - i don't understand what you are talking about. What does IE have to do with this?

govpatel - you said you looked html code and saw this
```
<div id="blog-title">
<span class="title">
<a href="http://thejordanpease.com/test/"/>
</span>
<span class="description"/>
</div
```
I'm confused... you say no link... but there is a link in the code you mention.
Root
Member
Posted 1 year ago #

Well proper browsers let you use anything as an anchor not just a link........
fanboi
Member
Posted 1 year ago #

I don't understand what that means... what is an anchor? I am not a programmer. I'm not able to take an idea and write code for it.
Root
Member
Posted 1 year ago #

html is mark up not code
good luck with this
fanboi
Member
Posted 1 year ago #

code - mark up, whatever you call it. Six of one half dozen of the other. You know what I mean.

I can't write it, but I can usually reverse engineer something and make it work - I didn't really think this would be so difficult.

I thought it would be relatively easy to just add the invisible gif to the header and make it a link.

I still think I was closer when i started. At least then I had the link working. Sure the whole page was a link, but it worked in part.

Does ANYONE have a clue as to how to do this... If I have to add code (or markup - whatever that is) to every template that's fine. I just want to make it work.
elfin
Moderator
Posted 1 year ago #

@fanboi - could you add the code to theme and then post a link to a page with that code in place (ie add <img src="http://thejordanpease.com/test/wp-content/themes/the-jordan-pease/images/invisible.gif">).

that way we can see exactly what your issue is and be able to help.
fanboi
Member
Posted 1 year ago #
the code
```
<div id="blog-title">
	<span class="title"><a href="http://thejordanpease.com/test/"><img src="http://thejordanpease.com/test/wp-content/themes/the-jordan-pease/images/invisible.gif"></a></span>
        </div>
```
is in place on index.php at http://thejordanpease.com/test/

but doesn't seem to do anything, so I'm not even sure if that is the right approach. I started out doing this differently (see code I mentioned at start of thread) but was told that was wrong (even tho it came closer to working than anything suggested).

pastebin URL for index.php

let me know if u need links for stylesheet. or any or the other desktopchaos files.

Thanks for looking into it!

12 Next »

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] Need help with making clickable header (41 posts)

Topic Closed

About this Topic

Tags

Code is Poetry