Customising Help Needed

How about showing us your page where it isn't working?

I can't unless I save the changes to the current template. It looks a little stupid when I put the code it and it doesn't work, so I've taken it out and changed it back to how it was.

However, this is the HTML of the current blog/template. Where should I put both parts of the code?
files/forum/html.txt

I didn't check your links, but here is a simple solution. Just replace the image source code (<img src=...) part with this:

<script>document.write('<img src="images/headers/' + eval(Math.floor(Math.random()*16)+1) + '.jpg">');</script>

and put all your images in the images/headers/ folder and name them like this: 1.jpg, 2.jpg, etc. In the example code above i had 16 images in total. You can adjust that number to fit your needs.

btw, i stole this code like 6 month ago from larusson's old web site. ;)

Tut tut, bad boy.

Ivan there's one slight problem, I don't want it for an image, it's the header I'm wanting to rotate.

Any ideas?

I've got a php script that switch image every hour..

Perhaps not what your'e looking for?

(WEEE 100 posts)

I have used this php script to get the job done. It works just like it should. :)

http://automaticlabs.com/products/rotator

For the template I'm using, I have to insert the URL of the header image. Here's the bit of the HTML.

Quote:

#kheader {

background: url "http://img.photobucket.com/albums/v260/abdulrehman/kubrickheadercherrysp...") no-repeat bottom center #73a0c5;

}

For the rotator script that you gave imurf, it says I have to link to the file using the <img src> tags. How would I got about doing that when the above is the HTML showing how I currently change my headers?

Another problem with that would be that I don't have a folder where I store my images. All I have to my blog, is this HTML page which I can edit, nothing else. All images are stored on Photo Bucket and then linked.

:?:

Check this out!

I spent the whole day doing thumbs and sketches for my current Illustration project and so I didn't have much time to search properly, hence I asked on here.

I just did a few searches now, and low behold, I get EXACTLY what I'm looking for. Hehe, he's using the same template as me and shows how to do it too. I'm going to give it a try, will let you know if it works.

http://mcdevzone.com/2005/02/22/header-graphic

A slight problem, he's using WordPress, not Blogger. :oops:

For the second bit, it says to save the headers in a directory which I think the script searches in each time. I don't have a directory, is it possible to tweak the second bit so that umm it goes to Photo Bucket and picks one from there?

Can't you just refer to the folder on photobucket?

Abdul wrote:

Tut tut, bad boy.

Ivan there's one slight problem, I don't want it for an image, it's the header I'm wanting to rotate.

Any ideas?

you can just move the header image from your CSS as a background image to your html as a regular image. you know what i mean?

I love it when you talk dirty! :oops: :roll:

Nope, I don't know. Care to explain please, Ivan?

I don't think Photo Bucket has folders Pokie, there's only albums. :roll:

Sure. Sorry.

At the moment your header image is called from CSS. You need to delete it from there. Find this in your template and delete the background image:

#kheader {

background: url("http://img.photobucket.com/albums/v260/abdulrehman/kubrickheadercherrysplit.jpg") no-repeat bottom center #73a0c5;

}

And, replace it with:

#kheader {

background-color: #73a0c5;

}

Now, find this part of the html. This is where the kheader div is displayed. Since we deleted the kheader background image, you would get a flat background color. We need to add the image as a simple html img src.

<div id="kheader">

*****insert the code below here*****

<div id="headerimg">

<h1><a href="http://bitsofabdul.blogspot.com" title="Bits of Abdul - v.3">Bits of Abdul - v.3</a></h1>

<div class="description">The Life of a Solitary Graphic Design and Photography Student.</div>

</div>

</div>

Now insert this code in to the html where I mentioned:

<script>document.write('<img src="images/headers/' + eval(Math.floor(Math.random()*16)+1) + '.jpg">');</script>

As you can see, instead of a simple img src, we are inserting a script that will randomly insert an image.

Let me know how it works out.

Ivan, where it says <img src="images/headers/"....>, I put the directory/folder where the headers are saved in the quote marks right?

The thing is, I don't have a folder. All I have are the images stored seperatly on Photo Bucket. What do I do?

The rest of it looks simple, but I haven't tried it. I need to know what to do about the above first.

I just tried it with replacing the "images/header' with a the URL of the album.

Now it rotates the headers which is fine, but it comes out a little weird. The header is above the title for some reason.

Have a look on my umm test blog. http://www.boauk.blogspot.com/

one idea to fix this would be to delete the title and include the title in the image. you would need to do that anyway if you wanted to create a logo for your site. also, there is some alignment problems. the image is slightly shifted to the right and down or something. you would need to check if there is an unnecessary <br> or space tag.

I'm working on it!

Will let you know if umm any obstacles come in the way.

I like the lonely green leaf ;) , is that a photo of yours?

Ok, the title's removed but now look what happens. There's still two blue lines, one on top of the header, and one below. How do I get rid of them?

Pokie, that's a stock photo I got off a disc.

Any ideas?

this will require some serious debugging. i think the divs are messed up or something...

Sorry for all the hassle.

Well I managed to get it look sort of straight again, but there's still the blue bits around the header. http://www.boauk.blogspot.com/

Here's another script which I found and seems to work for Blogger templates. I'm supposed to put the first bit in the head... can you show me where exactly in the HTML please Ivan?

Quote:

<script type="text/javascript" language="JavaScript">

<!-- Copyright 2002 Bontrager Connection, LLC

//

// Type the number of images you are rotating.

NumberOfImagesToRotate = 7;

// Specify the first and last part of the image tag.

FirstPart = 'http://img.photobucket.com/albums/v53/artguy86/banner';

LastPart = '.jpg';

function printImage() {

var r = Math.ceil(Math.random() * NumberOfImagesToRotate);

document.getElementById("header").style.backgroundImage = 'url('+FirstPart + r + LastPart +')';

}

//-->

</script>

And this next bit is supposed to go in the header div, which I now know where it is. :)

Quote:

<div id="header"><script type="text/javascript" language="JavaScript"><!--

printImage();

//--></script><div>

Do you think this will work better?

Ugh, Javascript always gives me a headache. :(

Yes, I've done it!

I got some help of Blogger Forum. All I needed to do was change the script you gave Ivan, and add a 0 margin padding and border to it so it looked like:

Quote:

<script>document.write('<img src="http://photobucket.com/albums/v260/abdulrehman/headers/' + eval(Math.floor(Math.random()*3)+1) + '.jpg" style="margin:0;padding:0;border:0;">');</script>

I hope it looks ok in all browsers. If you guys would just like to check and see if it's looking right, then I can implement the changes to my proper blog. http://www.boauk.blogspot.com/

Anyone got any cool photography they'd like to share for me to use on my headers?

Thanks all!

Wow, that looks great! Nicely done.

Yeah, thanks. What browser you using, Firefox?

I need to know just another little coding please? For the links, I want the text decortation to appear as a dashed/dotted underline and on the hover over, a solid line. I got the solid underline working on the hover, it's just the dashed bit.

I tried "dashed underline" and just "dashed" after the "text decoration:" bit, bit it still appears as a solid underline. What's the coding for the links to appear with a dashed underline?

This is just crazy! I've found out how to add that dashed line too. This is the line you have to add under text decoration.

Quote:

border-bottom:1px dashed

I don't think I'll be using i though, it messes up the title of each post, since that also is a link too.

Just wanted to say thanks all for helping out. I'll be making the changes on my actual blog later. :)

excellent! looks cool. except one little thing that i mentioned earlier already. i would get rid of the border around your kubrick layout. find this code in your template and delete the whole line that starts with border. Just a suggestion.

#page {

background-color: white;

margin: 20px auto 0;

padding: 0;

width: 760px;

border: 1px solid #959596;

}

Yeah, I'll try that too when I start making the changes later on. Thanks Ivan.

Just a quick "noobie" question, if I want an image stretching all the way across the page (from left to right of the post margin), how do I find the size of what I should set the image as? Including the border that appears too.

Know what I mean?

didn't get the question. can you refrase?

Never mind Ivan, sorry about that.

Well anyway, it's all done. For some reason the border wouldn't go away so I just umm changed the colour of it. :wink: Cool!? I also managed to get the headers link to the homepage of the blog. You know at first I thought crap, how am I going to do that. Turned out to be easy really.

I'm learning quite a bit here. I never thought I'd learn some bits of HTML just by blogging. My initial aim was just for a blog using standard Blogger templates. Being the greedy design person I am, I just wanted more! In the process, I've learnt quite a bit of HTML too which is super!

Here's the blog now. :arrow: http://www.bitsofabdul.blogspot.com/

Thanks a lot for all the help guys and Ivan, it's spelt 'rephrase', not "refrase"... :twisted:

Excellent, it all looks great.

If you want i can give you the next project: make the CSS external instead of internal. Your site will load faster, because the CSS file will be catched. Right now the CSS is in the html file, which needs to load every time you load any page. Here is what you need to do:

1. Cut all the CSS information from your html template. It's the code between "<style type="text/css" media="screen">... to ...</style>. Delete these style tags too.

2. Paste the CSS code into an empty text file. The above mentioned style tags are not needed here either, just the code in between them. Call it blogstyle.css (any name will work).

3. Find the <style type="text/css"> part and see the two imported blogger style sheets. You will need to add a third line linking your newly created blogstyle.css to it.

4. Check your page. If you have the Dev. extension you can press Apple-Shift-E to see all the CSS files linked to your page.

At the moment you've got a panel called inline styles. That will disappear and you will have a new tab called mystyle. If you have access to your other imported CSS files, you can merge them to create fewer files, but that will not speed the page loading further, just makes it cleaner.

Eeek, calm down Ivan. :lol:

How about I try that in the half term break I'll be getting in 4-5 weeks time? Right now I don't really have any more time left to play with CSS/HTML and get headaches! I need to make sure I'm ready for when I go back on this Tuesday coming.

But deffinetly will try that though some time, it's only in my interest.

Nice! Is the rose your own picture?

I wish Pokie. None of them are mines. But when I get enough saved up for this Cannon DSLR, I'll be getting my own images in the banners.