WCA blog banner!

[Tom_Laws]

Sorted by Mitch....

Instructions for wordpress users. I will do blogger and normal Html in a min.

Check out http://tomlaws.wordpress.com/wca-banner/

Cheers

Tom

[Tom_Laws]

Just having some cache issues, check back real soon!

[mattr]

It just appears as a red cross in the corner of the screen for me :-(

Edit - Tom beat me to it

[Tom_Laws]

Right, got it sorted, instructions for wordpress are up!

[mitch]

Looks like the guys at Team-Tea are backing this too...

[RobMoffatt]

Sorry to be thick but:

I copied the stuff into my CSS and into the sidebar widget thingy, and when I previewed my page there was a message telling me that in order for me to save the new settings in my CSS I had to buy a Custom CSS add on. Do I have to? or have I made some numpty error somewhere?

[Tom_Laws]

Sorry to be thick but:

I copied the stuff into my CSS and into the sidebar widget thingy, and when I previewed my page there was a message telling me that in order for me to save the new settings in my CSS I had to buy a Custom CSS add on. Do I have to? or have I made some numpty error somewhere?

To edit CSS on wordpress you have to buy (for a measly couple of quid) the CSS editor. Well worth it in my opinion. Then you can do all manner of silly things, or even add camo!!

Hope that helps.

Tom

[David McCraw]

Can anyone help with getting the image to float over the centre of the page, rather than just the top right?

I'd like it on the corner of my site (over the actual site) but I can't figure out a way that works in IE (Firefox allows you to put it inside a centred div, with float:right).

[lozbrown]

Excellent, I knew someone would do it if I posted up about it.

However it doesn't seem to be rendering quite right on your site tom, it's not quite at the top of the page...

[Rockrat]

I can't even get it to go on a Blogger blog. Maybe it's because my whole knowledge on CSS, HTML and Widgets has been based on trial, error with a bit of luck thrown in.

[RobMoffatt]

To edit CSS on wordpress you have to buy (for a measly couple of quid) the CSS editor. Well worth it in my opinion. Then you can do all manner of silly things, or even add camo!!

Hope that helps.

Cheers Tom, will try and sort it out after work.

[Tom_Laws]

Excellent, I knew someone would do it if I posted up about it.

However it doesn't seem to be rendering quite right on your site tom, it's not quite at the top of the page...

Its set to be hard right, and about 25 pixels south of the top, so people who are logged into wordpress can see the whole thing. I'm just piddling about with it at the mo.

Pat C has one on his blogger blog, so it must be possible.

Tom

[Rockrat]

Looking at Pat C's code I've managed to get the first part of the code in place, but don't know where to locate this bit:

Code: Select all

<div class=”badgecorner”><a href=”http://access2water.wordpress.com”>[img]”http://www.countrywideweekends.btinternet.co.uk/notacrime.gif”%20alt=”Kayaking%20is%20Not%20a%20Crime”%20Title=”Kayaking%20is%20not%20a%20crime”%20/[/img]</a></div>

Any help? I've tried including it as a sidebar widget.

[Tom_Laws]

I think on Blogger it has to be located within the body tags?

[robt]

Cool. Neat stuff.

However, may I take the liberty of throwing in an alternative implementation for some variety. The problems with Tom/Mitch's code as it stands is:

a) it can easily fall behind other content (e.g. blogger header covers bit of the banner).

b) The whole rectangle containing the banner is clickable. Ideally, you'd want just the banner to be clickable.

This alternative addresses these issues, and is effectively a faithful deconstruction of the make poverty history banner.

Maybe that helps someone, anyhow.

[lozbrown]

Nice one Rob, thats exactly what I was looking for

[robt]

Can anyone help with getting the image to float over the centre of the page, rather than just the top right?

I don't really get what you mean (why float it, isn't it absolutely positioned?), but if your problem is that the main site div covers it up, try adding the following css to the banner div:

Code: Select all

z-index:1000000000;

[Rockrat]

Now got it on Blogger. Had to change all the " to ' and it worked. Take a look: http://rockratrobinson.blogspot.com

[David McCraw]

I don't really get what you mean (why float it, isn't it absolutely positioned?)

That's exactly the problem. My site isn't absolutely positioned, but I'd like it to look like this:



I thought some kind of relative positioning might have worked, but IE spat out the dummy.

[robt]

I'd like it to look like this

Ah, I totally misunderstood. You should still be able to do this with absolute positioning. I'll use my example, as I have a convenient local copy to play with, but the same could be done for the original.

The right hand banner is placed in position using a positive and negative margin (banner is 163px wide):

Code: Select all

div.noCrimeRight
{
position:absolute;
left:100%;
top:0px;
margin:0 0 0 -163px;
}


As you have an 800px wide site container (I think), then you want to place it absolutely in the centre, and offset it a little to the right. Chnage the left to 50%, and the margin goes from -ve to +ve; 800/2-163=237px..

Code: Select all

div.noCrimeRight
{
position:absolute;
left:50%;
top:0px;
margin:0 0 0 237px;
}


Looks like it's working in IE7+FF. I'm not sure if it will break if your browser window is smaller than 800px width, not sure, worth double checking.

You'll have another problem, though: if you do it like this, you're 'links' menu button won't work :-P. Maybe make the banner smaller?

[David Fairweather]

I've put it up on my blog now. Cheers to everyone that's helped to put it together, I can see this being one of those effective viral ways of spreading a message that TimS keeps talking about.

[Patrick Clissold]

I have a little problem with it on my blog. As you can see the search blog bar on the top partially obscures the banner. Any suggestions/

Also due to playing around with it have mucked it up so the faint lines above and below "Clissold's Adventures" are all weird now. Anyone know who to put them back where they came from?

[David Fairweather]

Pat, as a crude and simple fix, you can move the banner down the page by changing this:

position: absolute;
right: 0;
top: 0;

to this:

position: absolute;
right: 0;
top: 30;

Which will just move the banner down the page by 30 pixels.

I'm sure there are much smater ways to do the same thing., people smarter than myself would be the ones to ask.

[Patrick Clissold]

I tried that and it doesn't have the desired affect. The banner is now too low. Any number other than 0 I put in to top it moves the banner to the same position.

[robt]

Try putting this as an extra line after the top: 0; line:

Code: Select all

z-index:1000000000;

It won't move it, but it should now display over the top bar rather than under it.

[Patrick Clissold]

Sorry Rob it still lies behind the bar.

[robt]

Ah, the source div (<div class=”badgecorner”>..</div>) is probably nested inside another div, which stops this working. I don't know what access to the source code you have in blogger, but it should work if you can move the source div outside all the other ones. If that makes any sense.

Actually, insetad in your case try adding:

Code: Select all

#sidebar
{
z-index: 10000;
}


..after the end of all your other css.

I don't know why the simple offset isn't working for you. Just check it isn't something silly like a lack of unit label (the 'px') maybe (?):

Code: Select all

position: absolute;
right: 0;
top: 30px;


I feel like a helpdesk. But at least I'm now off to the pub!

[Patrick Clissold]

Thanks Rob, I added units and it now works.

Off to the pub?? I would have thought you wouldn't want anything to do with alcohol after last night!

[Tom_Laws]

Huge thanks to Rob for dealing with all this geekery, which I couldn't have done, not least because I was up to my neck in water in my squirt boat :D

Tom

[David McCraw]

As you have an 800px wide site container (I think), then you want to place it absolutely in the centre, and offset it a little to the right. Chnage the left to 50%, and the margin goes from -ve to +ve; 800/2-163=237px..

Crikey Rob... nice work..

I just had to add an area to the map for my RSS icon to poke through - job's a good one!