Monday, 31 March 2008 - 10:39 AM EDT

I am referring to putting a banner on the blog, not the web site, in the last question.  The best way to put a banner of your own choosing on a blog?

Monday, 31 March 2008 - 1:04 PM EDT

yes, you can do it using the advanced custiomization templates . It's best if your replacement bammer is of the same size as the one being replaced. 

Tuesday, 1 April 2008 - 7:11 AM EDT

well, i will look again, i could not figure it out, but i do know html or at least enough to get by

Wednesday, 2 April 2008 - 3:05 PM EDT

ok, i give up, can't figure it out--if you have any easy instructions let me know, please--or i will beat my head against the wall for a while--thanks

Wednesday, 2 April 2008 - 9:17 PM EDT

What is your blog address?

Thursday, 3 April 2008 - 9:51 AM EDT

My apologies for not checking back here sooner.You didn't leave your blog url so I'll just give general instructions for an AF blog template with a horizontal banner across the top.

blogmanager---> adv. customization-----> list of template components. Select "mainpage layout (index.btpl) This will bring up the layout component. Click the edit link at the bottom of the template list.

look for this block of code. You are interested inr the img src part

<div id="ghead">
    <img src="<BLOG_VAR IMG_SERVER>/wedding/head_bg.jpg" border="0">
  </div>

You will need an image to replace the one used by your template. In my example the image to replace is sized 800x 118. I found that by viewing the image in my blog and looking at the dimensions. You will want an image that is the same width as the one you're replacing. height can vary.

Upload your replacement image to your AF account. I suggest you upload it anywhere EXCEPT the blog folder as the blog folder contents can no longer be reached from your webshell. They were locked for a few reasons that I won't go into here. Just upload it and remember the URL. You will use that URL in your code.

now change the img src in the blog template (<img src="<BLOG_VAR IMG_SERVER>/wedding/head_bg.jpg" border="0">) to your new image URL so it looks like this....
 
<img src="http://yadayada.com/banner_whatever.gif" border="0">

preview the changes and if you like it save them. Then go back to the template list and publish it using the link at the bottom.
 

Thursday, 3 April 2008 - 9:55 AM EDT

PS deleting <BLOG_VAR IMG_SERVER> from the img src code was not a misprint

Saturday, 5 April 2008 - 1:48 AM EDT

Perhaps I should give up.  I tried every which way to make the banner work, and it doesn't.  The one I am trying to change is the picket fence, and it does not have the exact same code as what you gave me to change--it did not have <img src= before the BLOG VAR IMG SERVER--and when I put it in there, that didn't work either.  So, I tried adding and removing all kinds of things, and it didn't work.  The only thing, which I don't know if it matters, is that my banner is 799 pixels wide and not 800.  I put my banner into my web shell for my web site.

Saturday, 5 April 2008 - 8:06 AM EDT

Knowing your blog template is helpful.  Your template image code is written ion css style. To edit-Same template as before main page layout, (index.btpl). Here is the code in your blog to look for.

#ghead {
background: #c6c6c6 url(<BLOG_VAR IMG_SERVER>/oldhouse/head_bg.jpg);
border: 1px solid  #C90606;
border-width: 1px 0;
}

change to this, inserting the full http:// url for your uploaded image.

#ghead {
background: #c6c6c6 url(http://yadayada.angelfire.com/new_image.jpg);
border: 1px solid  #C90606;
border-width: 1px 0;
}

Make sure to maintain the (); that surrounds the image file path. If uploaded to a subdirectory make sure to include the subdirectory in the URL.

To find the URL of the uploaded picture, select it from your webshell list then use the "view" option. When the image displays, copy it's URL from the browser location bar and paste it into your template.

hope this helps 

Saturday, 5 April 2008 - 8:35 PM EDT

one more time what is the blog address?

Saturday, 5 April 2008 - 10:32 PM EDT

Oh, excellent, CW, it worked!  The only problem it has now, is that it is repeating across the page and apparently will go on forever.  I looked in the style sheet (i learned html, but not CSS much yet), and I see where it says repeat and figure that needs to come out, but I'm a little bit chicken.  I'm just getting started with the blog, so no disaster yet.  https://www.angelfire.com/film/wildcatphotography/blog/

Thanks, and if I'm going to get in trouble taking out the "repeat" from the style sheet please let me know.

Saturday, 5 April 2008 - 10:41 PM EDT

I didn't look hard at the css code this AM but if the code looks something like this.....

background-repeat: repeat

don't take it out but tell it not to repeat. Like this:

background-repeat: no-repeat 

if that doesn't work, post back and I'll take a closer look 

Saturday, 5 April 2008 - 10:55 PM EDT

Just about everything I know about css was learned through practice on the blog templates. They are a good learning tool. If you're really unsure, then create a test blog for practice. You really can't screw up the adv. customization templates as long as you don't save the changes so don't be afraid to play with them. Make the change and preview. If you don't like it, go back to the template and ctrl+z. That should restore you back to the prechange and you can try again.

If you really screw up a template, you can create a new blog that uses the same template. From there, the advanced customization btpl file can be copied from the new blank blog and pasted to replace your original btpl component template.

Saturday, 5 April 2008 - 11:00 PM EDT

Ok, well, I took out a "repeat" or two and previewed, and it didn't do anything for it, so will mess around some more, thanks.

Saturday, 5 April 2008 - 11:34 PM EDT

Here is the code to stop your image from repeating, added to the header image's css style. wherever you saw a background repeat, that isn't the code for the header image. repeat is the default so you need to add the code to not repeat. it will look like this

#ghead {
background: #c6c6c6 url(https://www.angelfire.com/.....landing_blog_800.jpg);
background-repeat: no-repeat;  
border: 1px solid  #C90606;
border-width: 1px 0;
}

you might want to change the background color to something that better blends with your picture. If you have an image editor with an eye dropper for picking colors out of your image, use the hexnumber or rgb code of the matching color to replace the gray of #c6c6c6 (as in background: #c6c6c6) a white background would be coded as background: #ffffff

or code as an rgb color as in the example below using a color I picked out of your image,


#ghead {
background: rgb(78,61,54) url(https://www.angelfire.com/.....landing_blog_800.jpg);
background-repeat: no-repeat;  
border: 1px solid  #C90606;
border-width: 1px 0;
}

hope that helps

Sunday, 6 April 2008 - 12:08 AM EDT

do you want to look like this

https://www.angelfire.com/md/jdfaq/djd/ 

Sunday, 6 April 2008 - 7:47 AM EDT

no thanks, dellah, I would not want it to look like that,         please keep in mind that all photos are copyrighted, and i do not want them to appear anywhere else, thanks for the help     

Sunday, 6 April 2008 - 8:05 AM EDT

Ok, CW, i put in the no repeat, and it works. Actually, I don't mind the gray under the photo, or black might be ok.  Maybe I could have made the banner wider.  The red lines still carry on across past the picture, but I'm not terribly concerned with that right now.  Yeah, maybe I need a dummy blog to experiment with because I can sure make mess.  Thanks

Sunday, 6 April 2008 - 8:52 AM EDT

making the banner wider won't help because you will never fit it to all screen resolutions. 800 wide is for a reason, that's the smallest resolution in use worth considering in designing a template. A picture that will tile across the top seamlessly (like the pickets) is also there for a reason. It accomodates all screen resolutions.

the border lines can be removed or changed in thickness, color and other properties. Look back at the header code and you'll see css code for borders including color. Play with them.

look at the link above for some good css tutorials.

Awesome pictures! 

Sunday, 6 April 2008 - 10:35 PM EDT

#ghead {
background: #000 top center url(your image url) no-repeat;
border: 1px solid  #333;
border-width: 1px 0;
}