Add an Image to the Header Punbb

by runawayhorses June 12th 2013, 8:51 pm

Hi, I have a new forum version punbb and I'm trying to figure out how to add a small gif image at the top right-hand side of the header. I have the area marked with a red X where I would like to place the image. I'm new to punbb template editing and nothing I tried worked so far. Anyone know of the best way to go about this? thanks

Add an Image to the Header Punbb Sshead11

Add an Image to the Header Punbb Sshead11

https://i.servimg.com/u/f80/12/28/94/48/sshead11.jpg

by nasko7 June 12th 2013, 9:23 pm

You cannot add one more image.
But you'll can, if you edit your logo. Smile

by runawayhorses June 12th 2013, 11:09 pm

The logo already as an image thats the text image you see on the left. Yes there is a way to add an another image to the right.

by Richard. June 12th 2013, 11:40 pm

Sure you can, what is the image that you want up there?

by runawayhorses June 13th 2013, 12:14 am

Does it matter? I'd prefer to not post it right now.

by Spyro Dragon™ June 13th 2013, 12:22 am

Theres a way you can Add the imiage and make it disapeer too , kinda like this.
Look at the picture for a minute...something should pop up verry slow, and then disapeer.
I had this for my website a long time ago.

Add an Image to the Header Punbb GIFLOGOOGOGOGOGOOGOGOGOOGGOGOGAGET

Add an Image to the Header Punbb GIFLOGOOGOGOGOGOOGOGOGOOGGOGOGAGET

by runawayhorses June 13th 2013, 1:08 am

that's otherwise known as a animated gif image.

I'm looking for a code to place in the template or CSS code.

by Spyro Dragon™ June 13th 2013, 1:13 am

Im not sure what your trying to ask for, can you edite this through photoshop and and screenshot of what your trying to do with the site?

by Spyro Dragon™ June 13th 2013, 1:22 am

Try cutting your picture, and putting the rest of your picture into this code.

Code:: <a href=WEBSITELINK><img src=BUTTONPICTURE></a>

by Richard. June 13th 2013, 2:20 am

alright .. i dont see anything wrong with giving me the imagine,but making my job harder, here ill make a cod.

put this in overall_header

Code:: <div class="second-image"><img src="LINK IMAGE"></div>

CSS:

Code:: .second-image{ height: 0px; position: relative; float: right; }

after you put this code, let see your site to see how to change the code to make ur imagine in da place u want.

by **SLGray** June 13th 2013, 2:53 am

Spyro Dragon™ wrote:Im not sure what your trying to ask for, can you edite this through photoshop and and screenshot of what your trying to do with the site?

Spyro Dragon™ wrote:Try cutting your picture, and putting the rest of your picture into this code.

Code:
<a href=WEBSITELINK><img src=BUTTONPICTURE></a>

Please do not double/triple post. Use the edit button.

Second Reminder

by runawayhorses June 13th 2013, 3:11 am

@ Richard, thank you I tried your code but nothing showed. I tried adding the image the header same place you suggested but it just seems to be the wrong place. I add it before the closing body and html tags.

I don't get it..

by Richard. June 13th 2013, 4:16 am

Code:: <div class="second-image"><img src="LINK IMAGE"></div>

Code:: .second-image{ height: 0px; position: relative; top: -100px; right: -500px; }

by runawayhorses June 13th 2013, 4:44 am

No it wasn't the CSS positioning I know how to write css, and I know how to write ID classes, thank you. I think its another issue that has to do with location within the template.

by Mr.EasyBB June 13th 2013, 4:54 am

Runawayhorses my friend, simple as asking me Very Happy

Go to ACP>DISPLAY>TEMPLATES>GENERAL>OVERALL_HEADER

Find this code

Code:: <div id="pun-intro" class="clearfix"> <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>  <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>   <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>  </div>

Change to this

Code:: <div id="pun-intro" class="clearfix"> <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a> <img class="animate" src="yourSRC" title="yourTITLE" />  <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>   <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>  </div>

Now change the yourSRC and yourTITLE

Add this CSS

Code:: #pun-intro{position:relative} .animate{position:absolute;right:10px;top:5px;display:block}

Now if the image doesn't show let me know ok man

by runawayhorses June 13th 2013, 2:49 pm

Thanks Easy that worked like a charm! Yeah I would have asked you but you were kinda busy so I thought I'd come here and ask it.. lol

So it was location within the template I thought so. Smile

thanks again,