7.8.09

Fixing the search function in Wooden Fence Theme for Blogger

This is just a quickie for anyone who is using this template (originally a wordpress theme which has been converted for blogger), or would like to use this template, and doesn't know why the search function takes them up, up & away, instead of, you know, searching your blog.
It is a really simple edit, but I didn't know that last night! After trying for an embarrisingly long time to insert complex code here & there (I am a complete & utter coding dunce), I finally stumbled on the easiest fix ever... then wanted to pummel my head against my desk for not working it out sooner.

So, without further ado....!

Go to "Layout" > "Edit HTML"

You need to find the following piece of code, the easiest way to do this is by pressing "Ctrl+F" this will bring up a search or find box at the top of your browser window. Type in 'search' & you will see that it comes up with around 10 instances in your code where 'search' is written. Click 'Next' until you come to this code;




<!-- Search -->

<div id='mainsearch'>


<form action='http://demo.templatelite.com/?q=Search' id='mainsearchform' method='get'>


<input class='input' id='s' name='q' onfocus='doClear(this)' type='text' value='Search ...'/>


<input class='submit' type='submit' value=''/>

</form>



Change this bit;



<!-- Search -->

<div id='mainsearch'>


<form action='http://demo.templatelite.com/?q=Search' id='mainsearchform' method='get'>


<input class='input' id='s' name='q' onfocus='doClear(this)' type='text' value='Search ...'/>


<input class='submit' type='submit' value=''/>
</form>


to your blog's search, ie: 'http://YOURBLOGHERE.blogspot.com/search', Click 'Save' & your done! :D

The other thing you might want to sort out with this theme is how it displays the time above your post & not the date. Go to "Settings"> "Formatting" & change the TIME display to the long date format. Voila!


Hope this has been of some help to other coding noobs! ;)


17 comments:

  1. *comment test*
    (Still working on how to modify the comment verification box... any ideas?!)

    ReplyDelete
  2. Aha!!! "Settings"> "Comments"> "Comment Form Placement"> Set to "Full Page"

    :D :D :D

    ReplyDelete
  3. Hi Vic!
    Looks like you have a pretty cute pumpkin yourself!
    Thanks for the Wooden Fence template fixes...they worked like a charm. One other question, can you tell me how you changed the images on the laundry line? Here is my blog again: http://theadventuresoflittlebug.blogspot.com/
    By the way, I love your craft ideas!
    Wishing your family all the best!

    ReplyDelete
  4. Okay...I'm brand new at this and flying by the seat of my pants. My daughter is the one who is the html person not I. I'm more of a cut/paste and pray I did it right type of mom.
    I would like to change the photos on the laundry line but need specific instructions (like you did with the search box fix) in order to swap out your photos for our family ones. This is a blog we are going to use for our family reunion in 2 years so inevitably being the family historian I will be asked why we don't have one of my hundred or so family photos on the blog header. www.ohsmithfamily.blogspot.com is our site.
    Thanks in advance!

    ReplyDelete
  5. Thanks for the great tips. I was able to add pics to my header but am wondering how you got yours to align so perfectly? Here's my blog to see my "unaligned" header: www.dianagardner.blogspot.com

    It's not horrible, but I'd like to get it to match up with the rest of the background.

    Thanks!

    ReplyDelete
  6. Cool stuff here!
    I have the same template. However, after following your search tip, it's still not working for me. Thanks for sharing though. I appreciate it! :)

    ReplyDelete
  7. Thanks a lot for the fix BUT search still isn't working for me.

    ReplyDelete
  8. Can you tell me how you changed the photos? I tried and ended up replacing the entire blue background with the photo.

    Thanks.

    ReplyDelete
  9. Catherine & lanceloni, I would recommend double checking that everything is EXACTLY as I have written in your code, excepting your blog name, as it really is a simple fix & should be working if done this way.

    Catherine, you need to save a copy of the original clothesline background to your computer, edit it in photoshop or similar to fix the photos, upload your saved, edited version to photobucket & then update the original link to that image, which I think you must know how to do if you managed to change the image at all.

    Hope this helps!!

    ReplyDelete
  10. how did you get the new photo header to line up? i can't seem to do that. thanks!

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Hi... could u teach me how do to upload the image on the header site..tq

    ReplyDelete
  13. I really like the wooeden fence template but in the first place i dunno how to get the html code of it. it's ashamed but I dont have any idea at all. I hope you could help me

    ReplyDelete
  14. For those of you looking to update the photos in the laundry line, this is what I was able to figure out. It only took me about 4 hours since I know nothing about html code. Hopefully you can take my notes and figure it out too.

    First copy and paste the entire HTML code into Notebook and save it.-This is in case you screw something up you can just recopy it back in.

    Then open a new browser window and copy (ctrl+c) and then paste (ctrl+V)this url which is found in the code you downloaded from the Wooden Fence template.


    http://3.bp.blogspot.com/_t47uhxwKFVM/SlgthH_MhLI/AAAAAAAAAys/Ht5j32vAzY0/s1600/bg_header.jpg

    This opens the background header by itself into the browser. Then right click the picture to save the picture on your computer (and remember where you save it).

    Open the picture you saved from your computer into your picture editor (photoshop or Paint shop). White out the current photos so they look like blank pieces of paper hanging from the clothes pins. Flatten the image and save it using the same name. This is now your new template saved on your computer so you can update photos again in the future.

    To personalize
    Copy and paste your 3 personal photos you want to use individually. Resize them to fit into the white picture frame and flatten and save using a new name (bg_headerpersonalized.jpg) IF YOU DON'T KNOW HOW TO DO THIS YOU SHOULD ATTEMPT TO CHANGE.

    Go to www.photobucket.com and create a new account. Upload the file bg_headerpersonalized.jpg from your computer into your photobucket account. Once its uploaded there, it will give you options to 'SHARE' this picture. Copy (ctrl+c) the 'Direct Link' url.

    Go back to the blogger to edit the html template you downloaded for Wodden Fence. Find this code

    #header{
    position:relative;
    width:980px;
    height:300px;
    background:url(http://3.bp.blogspot.com/_t47uhxwKFVM/SlgthH_MhLI/AAAAAAAAAys/Ht5j32vAzY0/s1600/bg_header.jpg) no-repeat top center;
    }

    ********
    Where it says 'background:url' paste (ctrlV) your url from Photobucket inside the parenthesis().

    CLICK PREVIEW if it looks good then save the template.

    Hope this helps

    ReplyDelete
  15. Thanks for the search fix. Is there any chance that it won't work if my blog is not public? This problem isn't specific to your template - the blogger default templates didn't work either.

    Thanks

    ReplyDelete
  16. Hey all, I’ve tried all the fixes listed here. A couple of problems I’m having/figured out:

    For those who are having trouble with their image showing up too small/not in the right place, I figured out that photobucket for some reason won’t save the file as large as it was. So, it’s showing up with only 600 pixels wide or so.

    Here’s what I tried: I went to several photo resizing sites, but my image always comes out blurry. You can see my site here: jennifersmithgallery.blogspot.com

    @ Larabelle, thanks for the help on editing. Any more suggestions on how to get it uploaded the correct size? Or resize on the computer? (I have a Mac.)

    Next, if I don’t use Larabelle’s suggestion, and upload using the header edit button (use this image instead of your title option), it shows up slightly off from lining up. Same problems with sizing.

    Finally, my search bar still doesn’t seem to work, even after checking, and double checking the code, and replacing the code with my own website. It just brings up the homepage again!

    Any and all suggestions are helpful. :-) Thanks all!

    ReplyDelete
  17. For anybody still having trouble resizing the header try imageshack. Worked perfectly :)

    Thanks for all the info on this. I wouldn't have been able to do it without it.

    ReplyDelete

Let's have a chat. And a biscuit. And some tea. And another biscuit.

LinkWithin

Blog Widget by LinkWithin