How do you put an image in your banner.

Summary:

HELP!

How do you put an image in your banner.

Aetrox 07 Nov 2009 23:47

Okay, so I have this lovely black banner on my title page… which I want to put up a picture instead.

My wikidot: http://castleage.wikidot.com

I found someone that did an awesome job with their banner but don't know how to add my own like this.

http://aqwwiki.wikidot.com/class-of-2009-banner

Do you know what size the image has to be to fit perfectly in there like that?

Any and all help is greatly apprecaited!

Re: How do you put an image in your banner.

RobElliott 08 Nov 2009 00:01

It's done with CSS. As we've been advising another new user about this over the last couple of days, have a look a the thread here then come back with further questions.

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Last edited on 08 Nov 2009 00:03 by RobElliott + Show more

Re: How do you put an image in your banner.

Aetrox 10 Nov 2009 05:51

Sorry, i've been looking over this site for a few days and I'm a total beginner at all of this. I catch on quickly, but could still use some help. The posts in the other thread are similar to what I am trying to do. They were talking about inserting a logo into the nav:side. Other threads were talking about creating a new theme all together, which is something I may want to do down the line. At this time I just want to put a picture at the top. Does anyone know what the dimensions (in pixels) this has to be to fit up there nicely? Here is what I'm looking for, this site did it perfectly!

http://aqwwiki.wikidot.com/class-of-2009-banner

Here is my ugly site…

http://castleage.wikidot.com/

Any and all help is greatly appreciated.

Re: How do you put an image in your banner.

Phil Chett 10 Nov 2009 09:12

there are two images in the aqwwiki.
one that says aqwwiki
and a background for it to sit on.

rob has pointed out where the info is to do this.

get fire bug or web dev on firefox
look at the css for the aqwwiki site.
use that css on your own site with your images replacing theirs.

to get the image properties from aqwwiki, right click on the images and look at the proprties of that image.

---

.Goal NHGC

Re: How do you put an image in your banner.

Ed Johnson 10 Nov 2009 16:52

Other threads were talking about creating a new theme all together, which is something I may want to do down the line. At this time I just want to put a picture at the top.

You can't have one without the other. In order to place an image in the header of your site, you have to create a custom theme and edit the CSS so the image will display. As Rob said, have a look at http://community.wikidot.com/forum/t-192751/http:eastenclave-wikidot-com-home. This might also help: http://community.wikidot.com/howto:use-logo

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Last edited on 10 Nov 2009 18:44 by Ed Johnson + Show more

Re: How do you put an image in your banner.

Aetrox 10 Nov 2009 18:21

Thank you all for your help. I'll give this a go and see what happens. Thanks for your support, but please stand by, chances are I'll need your help again soon. :D

Re: How do you put an image in your banner.

Aetrox 10 Nov 2009 18:29

Another question… I have not been able to get Firefox to work on my computers, so as a result I use Chrome, does anyone know if the same thing can be done using Chrome? It has a bunch of web developer things built in.

Re: How do you put an image in your banner.

RobElliott 10 Nov 2009 18:53

An image can be put into your header whatever browser you are using. Using Firebug or the web dev on Firefox is just a way to view your CSS and see on-the-fly what any changes would look like, they don't actually change the CSS. For Chrome there is apparently an add-in called Chrome Inspector which I believe does many of the CSS inspection tools available with Firebug. I'm about 3 hours drive away from my computer running Chrome so I can't see what Chrome Inspector is like, sorry

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Re: How do you put an image in your banner.

Aetrox 10 Nov 2009 18:46

Sorry for all the spam posts, is this the script I'm looking for?

http://aqwwiki.wdfiles.com/local--theme/test-6/style.css ???

Re: How do you put an image in your banner.

RobElliott 10 Nov 2009 18:59

You need to create a custom theme before you can put an image in your header, then you can worry about the CSS code to put into your theme. Why not invite one of the admins to be a member of the site, elevate them to admin and they'll show you how how to do it live on the site.

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Re: How do you put an image in your banner.

Ed Johnson 10 Nov 2009 19:17

If you want to mimic the theme on the aqwiki site, then yes, that is the CSS you want to copy. Just replace the 2 images with your own that have the same dimensions.

http://i41.tinypic.com/hv5mb6.jpg is 663 x 130 (the AQWiki logo text). That image is actually a PNG disguised as a JPG (JPG images can't have transparent backgrounds). Not sure why this was done, but the software looks inside the file and figures it out anyway.

http://i43.tinypic.com/311tl6a.jpg (the background image) is 1254 x 562, but only the top 162px or so is actually visible - your image probably doesn't need to be that tall.

The custom CSS used by AQWiki is extending the Shiny theme.

Is this enough to push you over the edge or do you need more step-by-step details to make this work? Remember, the best way to learn this stuff is to roll up your sleeves and dig in! :)

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: How do you put an image in your banner.

Phil Chett 10 Nov 2009 23:11

(the background image) is 1254 x 562

not quite ed.

look below the top banner and you will see the rest is the gradient to suit the quake theme.
(i never did like the way this is done - but that s a personal thing.

@ Aetrox. we look forward to seeing the results. Advice will follow. Good to see you get your hands dirty and getting stuck in. Its the only way to go, :-)
(thats how the rest of us learnt. )

---

.Goal NHGC

Re: How do you put an image in your banner.

Ed Johnson 11 Nov 2009 00:44

While the Quake theme uses that section as a gradient, this one doesn't.

If you inspect the image, the bottom of the graphic is not a gradient. It's solid #EDEDED and then the page background is #EEEEEE. So subtle, I couldn't detect the change without using my eyedropper tool.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: How do you put an image in your banner.

Aetrox 10 Nov 2009 19:22

This is perfect! I think I got it from here. You have all been a tremendous help! Now that I have the dimensions… Photoshop here I come! :D I'll post when I'm finished so you can all see the completed work…. and more than likely help me fix all of the issues. haha!