Need help? Check out our Support site, then


Making Header Image Click-able

  1. I know this question has been asked umpteen number of times before, but I'm not being able to figure out a way to make my header image link back to my main page. I don't like the "Back to Home Page" Widget very much.

    I removed the blog title and the description from the style sheet because they looked plain ugly with the rest of the design

  2. Making the header image clickable as I understand it would require access to the underlying program files, something that we do cannot do here at wordpress.com.

  3. With Sandbox being so "wide open" to CSS customization, perhaps one of the CSS guru's will have an idea.

  4. thesacredpath,

    I really hope so! I have seen some great help (you being one of them) with CSS in this forum. I've picked up the basics after reading all the help posts.

  5. Wow! timethief to the rescue. I've bookmarked that for future reference.

  6. @tsp
    BIG GRIN I knew you would. ;)

  7. timethief,

    thanks for the link. I'm tweaking the code to get it to work with my blog.

    h1 a {
    display:block;
    text-align:left;
    background: url(http://farm3.static.flickr.com/2126/2145490721_ac2f0708b6_o.jpg) top center repeat-x;
    height:200px;
    width:1263px;
    border:1px solid #FFFFFF;
    text-indent: -9000px;
    
    }

    As you can see, I had to change the height, the width and the 'no repeat' to 'repeat-x'. I also removed the image link from this part-

    body {
    	background:#fff
    	color:#000;
    	font-family:'arial', sans-serif;
    	font-size:0.8em;
    	line-height:1.4em;
    	margin:0;
    	padding:0;
    }

    If I do it this way, then the image is in the blog header, but there is a big gap of around 200 px above the image. Is there any way I can shift the image to the top of the page?

    (My blog doesn't show this new code now. I was trying it using the preview function).

  8. All right! So I finally have a header that links to my home page :) I used this code:

    #blog-title {
    	color:#fff;
    }
    
    #blog-title a {
    	color:#fff;
    	text-decoration:none;
    	position:absolute;
    	left:15px;
    	top:-30px;
    	width:1236px;
    	height:190px;
    }
    
    #blog-title a:hover {
    	color:#fff;
    	text-decoration:none;
    }
    
    #blog-description {
    	display:none;
    }

    Basically, what I've done here is removed the blog description by setting it to display:none; (like I did before). Next, the color of "blog-title" and "blog-title a" have been set as the body background color (which was #fff for me). This doesn't really matter because what I do is-push off the blog title text off the page by setting the top to -30px. I also gave the blog title-a width and height values- same as the custom header size. That's it! Fairly simple. :)

    Hopefully, it will help someone.

Topic Closed

This topic has been closed to new replies.

About this Topic