Making Header Image Click-able

  • Author
    Posts
  • #177080

    ruhi
    Member

    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

    #177195

    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.

    #177197

    With Sandbox being so “wide open” to CSS customization, perhaps one of the CSS guru’s will have an idea.

    #177199

    ruhi
    Member

    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.

    #177203

    timethief
    Member
    #177205

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

    #177207

    timethief
    Member

    @tsp
    BIG GRIN I knew you would. ;)

    #177231

    ruhi
    Member

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

    #177309

    ruhi
    Member

    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.

The topic ‘Making Header Image Click-able’ is closed to new replies.