[solved] Add This Kind Of Box On Top

[safetyrestore]

Hi,

I'm wondering if it's possible to add a box luike on the image attached. My website is: safetyrestore.com and as seen on the attached image, the yellow box on top, how and what can I do to achieve that?

 

Thanks in advance!

[NemoPS]

Hi,

I'd create a simple html box in a module (maybe with some rich text editor for the content)

 

Hook it to "displayTop", then set a fixed with for the bos. Use thisn kind of css:

 

position: absolute;

left:50%;

top:0;

margin-left: -(enter half of the element's width here)

width: some width you want

 

It should do it. You can also hardcode it if you don't know how to create a module, It's just plain html and css at that point

[safetyrestore]

well if i have an image, can i just code it to the footer.tpl (appears on every page) and position it on top?

 

if so any suggestion on what code?

 

thanks!

[NemoPS]

Yes, but if you want it to be on top, place it in header.tpl (just cause it makes more sense!)

Same code as before, wrap the image into a box with those values

[safetyrestore]

I don't seem to be able to figure it out.

 

I have my image (353x90) i want it adjusted on the top:center of all pages. Could you do a steb-by-step guide on how to do this? I've located the header.tpl added the code, but it messes up the logo on top left, and other codes such as the navigation menu...

 

Please, Thank You!

[vekia]

sometimes the position depends on your theme construction.

so my question is: you use default template?

and another one: your website is online? If so - please paste the url, im convinced that it will be really helpfull here

[safetyrestore]

Hi,

 

Its safetyrestore.com

 

Thanks

[vekia]

hello

 

thanks

 

I checked your website and created a code:

<div style="display:block; position:absolute; width:300px; height:70px; background:yellow; top:10px;left:340px;">test</div>

 

insert it into the header.tpl file

right after the div id=header, and before the <a id="header_logo"> exactly as i show below:

 

 

 

effect:

 

 

 

 

of course you can create own styles like border-radius, font size color etc.

[safetyrestore]

Ah, that's perfect if I'm putting HTML text, but what if I already have an image? I simply need to put an actual photo/image in that spot - a 300 x 70 image. A premade image I did in Photoshop and uploaded to my server, once I put that image up in that space it'll be a link....

[vekia]

that isn't problem, to the:

<div style="display:block; position:absolute; width:300px; height:70px; top:10px;left:340px;"></div>

 

add own image <a href="YOUR_URL"><img src="URL_TO_IMAGE" /></a>

 

don't forget about width & height change (for div block)

[safetyrestore]

you guys are awesome. its up and rolling, check it:

 

http://www.safetyrestore.com/

 

thanks again!

[vekia]

you're welcome

 

thanks for information that it works now. I checked it - brilliant

 

now i can mark this thread as solved

 

regards