2 Questions Re: Bueno Headers

  • Unknown's avatar

    Hello,

    For this bueno themed site, I’d like to make my header image clickable, and I understand this can be done using the custom CSS tools. I’ve gathered that I need to create a transparent .png and code it as a link within a text widget in my sidebar. I believe that I have gotten that far. Can someone please help me get the rest of the way there?

    Also, for aesthetic reasons, I’d like to avoid having the header text visible, but I’m worried that this may affect SEO. Is that a valid concern? If so, are there any ways I can still have that text crawled by the search engines?

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    I’m sorry to report that you have accidentally posted to the wrong support forum. We cannot help you here at WordPress.com with that site as it’s not being hosted by WordPress.com and we run on different software. This is the correct forum for your software http://wordpress.ORG/support/
    WordPress.com vs WordPress.org: The Differences
    http://support.wordpress.com/com-vs-org/
    Best wishes with your site.

  • Unknown's avatar

    Oh rats! I clicked the wrong link. The blog you point to is a free hosted WordPress.com blog. I do apologize for clicking into the wrong blog. Does this entry help? https://en.forums.wordpress.com/topic/bueno-custom-header-css?replies=14#post-641783 Please be patient while waiting for another Volunteer who works with CSS to help you.

  • Unknown's avatar

    Thank you — that gets me close on the first issue.
    I need to tinker with the positioning a bit.

  • Unknown's avatar

    I’m so glad I was able to help as I goofed when I first posted. Best wishes with this and not to worry as the Volunteer who helps with CSS editing will find this thread and help you when he can.

  • Unknown's avatar

    Update: the solution provided in the thread to which you linked is working ok. I am able to generally position the link area over the header image area, but the position changes depending on the browser. The user who provided the solution said that the position shouldn’t change, so perhaps I am doing something wrong?

  • Unknown's avatar

    That is one of the drawbacks of this method as the clickable area shifts depending on whether you are logged in or logged out by the width of the top admin bar.

    This can be done right and accurately with the CSS upgrade, but without that, you are going to have to live with the shifting and just adjust the positioning and the height set in the text widget div to get it “OK.”

  • Unknown's avatar

    Thanks. I have the CSS upgrade and I am eager to learn to do it the right way. I know it involves a transparent PNG file loaded into to a sidebar widget that links to the desired destination (just the homepage in this case). I have the PNG–I just don’t know how to code it into the right position.

    Can you advise?

  • Unknown's avatar

    Remove everything from the text widget you are now using and put this into that text widget, upload your transparent PNG to the media library, get the URL of that image and put it where it says IMAGE URL between the double quote marks in the code below and save.

    <a href="<a href="LINK URL"><img src="IMAGE URL" title="" alt="" /></a>"><img src="IMAGE URL" title="" alt="" /></a>

    Let us know when you have done that and we will help move it up and over the top of your header image.

  • Unknown's avatar

    Ok, I have that code pasted into the body of my text widget.

  • Unknown's avatar

    Add the following to your CSS.

    #container {
    position: relative;
    }
    
    #text-4 {
    position: absolute;
    top: 220px;
    left: 90px;
    width: 930px;
    height: 198px;
    }

    Also, you have some left over code in the text widget that you need to remove. This at the beginning

    <a href="

    and this at the end

    ">

  • Unknown's avatar

    Thank you! I have added the text to my CSS. It appears that the spacing isn’t quite right for my screen/browser combo. Should I just try tinkering with the positioning coordinates until I get it right?

    Also, for the code in the widget, I found the first bit to remove, but not the second (“>). Can anyone point me in the right direction? I notice that the widget automatically makes some little modifications to the code as pasted above in sacredpath’s 12/14/11 post. When I enter my values and save it, the widget changes it to this:
    <img src="http://acculturated.files.wordpress.com/2011/12/home.png" title="" alt="" />"><img src="http://acculturated.files.wordpress.com/2011/12/home.png" title="" alt="" />

    There’s an extra “&gt that gets added in. Could that be related to extra bit of code that is showing up on the site?

    Thanks again everyone for all the help!

  • Unknown's avatar

    Sorry–I think I messed up the code from the widget that I was trying to paste in the above post. Let me try again to show you what the widget does to scaredpath’s code:
    <img src="http://acculturated.files.wordpress.com/2011/12/home.png" title="" alt="" />"><img src="http://acculturated.files.wordpress.com/2011/12/home.png" title="" alt="" />

  • Unknown's avatar

    Dang it–I did it again. I’m sorry. I’ll stop trying to paste the code I’m seeing since I seem to just be repeating the same mistake.

  • Unknown's avatar

    I’m sorry, I should have looked closer as what I had given you will not work with this theme since the “container” is the full width of the browser window. Remove the text widget from the sidebar and remove the code I gave you above from your CSS and add the following. The text widget ends up not moving with the content.

    #logo {
    bottom: 70px;
    height: 190px;
    position: absolute;
    width: 930px;
    }
    
    .site-title a {
    color: #FFFFFF !important;
    display: block;
    height: 190px;
    text-indent: -999px;
    width: 930px;
    }

    What I’ve done is to increase the side of the regular site-title text element and then position it over the top of the image. The old site-title text is then pushed way off to the left with the negative indent.

  • Unknown's avatar

    Thanks again. I’ll give that a try and report back.

    I really appreciate the help, thesacredpath.

  • Unknown's avatar
  • Unknown's avatar

    What a nice solution! Thank you!

  • Unknown's avatar
  • The topic ‘2 Questions Re: Bueno Headers’ is closed to new replies.