Support » Themes and Templates » Need help with making clickable header

  • Resolved fanboi

    (@fanboi)


    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?

Viewing 15 replies - 1 through 15 (of 41 total)
  • http://thejordanpease.com/test/ is the customized site location.

    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

    That is because you have not closed the link with </a>

    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.

    You need add after the code so you would have

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

    that restored the link, but whole page is still clickable

    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

    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

    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>

    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?

    I shouldn’t be in heder.php
    Maby index.php…
    Whereever the code <div id="blog-title"> is…

    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.

    <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.

    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 🙁

    Can you paste the file you making changes in pastebin as the header.php does not have what I am looking for.

Viewing 15 replies - 1 through 15 (of 41 total)
  • The topic ‘Need help with making clickable header’ is closed to new replies.