[SOLVED] Adding a box for, ads-banners, news, info etc in the header

[cecepee]

Hello.

I would like to know if there is any simple way to add a box in the header as in the picture i included.
I am using a free theme and i end up with a big white empty area that would suit perfect for a box, that i from backoffice can put ads, banners, news, etc into. Ive looked around for a solution, but all i can find is some module that puts a box above the header. But i want it within the header.

If anyone have an idea on how to do this, or if there even is a module for this that i have missed, please let me know.
All info and input is most appreciated.

Pls. see picture for reference.


Best regards
Peter

[jhnstcks]

Have you tied AddHeader module -> http://www.ecartservice.net/04082009/addheader-a-sibling-for-addstuff/

[cecepee]

Hello John, thanks for your reply.

And, yes i have tried that module, But its no good for this it does either place your stuff above the header, and the pushes down the header, which looks stupid. or it puts it on top of pages (home) and it ends up behind my jquiery-slider, only 30px is visible outside left side of slider. And also that's to low. I want to place my box/stuff exactly where i have placed the red square on the picture posted above.
Its like put a box in front of the header like a floating layer, not sure how to explain since im no coder. but i hope that you all understand what i mean.
Any other suggestions?

And thanks John for your effort.

Best regards
Peter

[jhnstcks]

Try this version i have altered it slightly to hook into the top of the page (where the currency, language block are).

Alternatively you could insert the code directly into header.tpl directly after the logo code.

addheader_0_1_0.zip

[cecepee]

Great John

Thank you very much. I havent tested it yet, but i will do so a bit later today.
I will then report back here to you.

Again, thank you

Best regards
Peter

[cecepee]

Hello

I have now tested your modified version, and its getting closer, but its still not at all as i would like it.
I attached a new picture. i made three red squares on it.
Square nr.1 is where i want to have my box.
Square nr.2 is where the new modified version ended up now
Square nr.3 is my jquery-slider

Before the modification, the box ended up behind square 3, and also it was a bit more below.
Now with mod its in front of square 3, and also a bit higher up.

But i would like it to be where i putted square nr1.

What did you change from the original? maybe i can try my self to test some editing, but would need to know what and where you changed so that i can try. When i look briefly in the php file i see its hooked to "top" can that maybe be changed to header? or will that again just place it above the whole header?

Thanks for your patience.
Best regards
Peter

[jhnstcks]

Did you change the position of my module on the admin>modules>positions page? Change it till it is first in the list.

[cecepee]

Yeah, i have tried to place it first, second, third, and so on. i did the same when i transplanted it to header of pages as well.
very nice of you to help me, but have you been able to move it to the top in the header in a test system so that you know it actually might work?
Can this module maybe get tweaked more or different?
Otherwise i just have to keep on looking for other modules i guess. Unless someone else might have a trick up their sleeves.

Thanks for your time and help john

Best regards
Peter

[jhnstcks]

I dont have any themes that look like to be able to get it up there but i will have go and see what i can come up with.

[jhnstcks]

Ok i have just had a look at your site and i think i know why it isnt going into the right hand banner slot. Your h1logo division is set to width 680px, so there isnt enough space for the addheader module to go into there. At line 194 of your global.css file comment out or delete the width setting and then install the addheader module with your image in the first position. Let me know when it is ready and i will take another look and see if we can position it better using css.

Oh and please clear the smarty cache by deleting the files in /tools/smarty/compile apart from the index.php file.

[cecepee]

Oh, this i didn't know.
I am actually not doing the test now on my live shop, im doing it on my local web-server in one of my dedicated servers here at home.
But i do run same theme on them both of course, with the difference that on my home web-server it runs 1.31 and my live shop is still 1.25
But i will definitely try this now, on both places and see if its workable.

Thank you again. :-)

//Peter

[cecepee]

Well, i have changed it now, Commented it out, but still no joy.
The box will not come up above the blue "bar". When i move adheader to first place in the positions menu, the box moves up maybe 20-30px and end up on the furthest right in the blue bar, above the cart. that's still the closest i can come after i have commented out the 680px width.
I believe you are on to something here, i just don't know how to code it.

its still in my test-shop on my own webserver im doing this, so you cant get any info from analyzing my live-shop.
im afraid to fiddle with it since its always at any time of day is 10-30ppl visiting and i don't want to mess up for them.

Best regards
Peter

[cecepee]

i have the free theme italian design on my test server, that theme have divided the header-space between the H1#Logo and #Header.
Like this.

h1#logo {
   float: left;
   width: 300px!important;
   margin-top:0.5em;
}
#header {
   float: right;
   width: 679px!important;
   text-align: right;
   margin-top:10px;
}

With this in global.css you get the stuff from the header just right next to the logo, as i want it. (In the italian design theme)
But when i try to use the same code in my global.css it still wont work.
Is there any other places that the code needs to be changed, i looked in header.tpl but they looked the same in both themes.
Anywhere else this is suposed to edited?

[jhnstcks]

You wont be able to move the banner from the addheader module because it has no css linked to that module.

In the html file you are using you will need to surround the code for the image with a div tag.

So if you add the following before the image code:

and then after the image code add

the in your global.css file at the end of the file ad the following:

#add_header {
     float:right;
     margin-top: -7em}

It looks like the theme you are uing is technically not a v1.3 theme as the css file has slight encodig errors. At the last line on coding,before the } there should be no ; so on your code that you posted above you have:

#header {
   float: right;
   width: 679px!important;
   text-align: right;
   margin-top:10px;
}

but it should be

#header {
   float: right;
   width: 679px!important;
   text-align: right;
   margin-top:10px
}

and that should be the same for the whole css file. Although it wont really affect your site visually, if you try and get the site w3c validated, it will fail.

Can you point me to the theme you are using, then i will be able to tell you exactly how to get the banner in the right place.

[cecepee]

I couldnt find the DL link for it just now.
But its a free theme called mavilim or similar.
Its as you can see a bit basic but it suits me.
I attached a .zip with it.

Thanks for your attempts

mavilim.zip

[kolomvos]

Hey, why don't you just edit the logo picture and make it as wide as your main page and add anything you want on its right side? You can then save it as eg logo.jpg and upload it. You will have both your logo and anything you want to advertise.

[cecepee]

Have thought about it yes and it works for pictures and texts, but if i want to have a flash banner, news-ticker, or links in it, then its not working to do that way. But if everything else fails, then that's the way to go.

[kolomvos]

Yes, I see. Have you tried editing the appropriate file and change your logo.jpg to something like logo.swf, where you can have animations, links etc. Maybe it work that way.

[jhnstcks]

This look ok?

Edit: Just to say this isnt photoshopped its what it looks like.

[cecepee]

Yes that looks like what im trying to achieve, is the right side logo placed in a box like adheader or sotew's ?
But it sure looks like what i want to do.

[jhnstcks]

Thats using the addheader module

I have attached 2 files one has some global.css code add this to the bottom of your global.css the other is the html file from the addheader module. Edit the address for your banner image and leave the rest in place and upload to your addheader module folder.

I have checked the placement module in ie8, ff and chrome and it looks ok

Desktop.zip

[cecepee]

Yes, This finally did it. That i also was showing you the wrong theme didnt make it any easier.
But after i realized and changed the code as you explained it, it then works exactly as i want it.

its a very useful "mod" and it gives me many opportunities to display news, messages, extras, campaigns, adverts and so on.

Thanks a lot again,

Best regards
Peter

[somits1]

Hello Representative,

I have created my site through Prestashop. all is well but i want to insert google adsense in my website. I have insert one in right side through google adsense and one in left side through HTML box. but i want to insert one more above the image slider. So please guide me how to insert manually or tell me if any other free module. I have tried content box but that showing code in my site. so please suggest me how can i add html boxes on the site.

 

Thanks

Somit

[vekia]

and where is your "slider" attached? to what hook?

what theme you use?

[somits1]

Thanks for reply, i am using default prestashop theme english version. you can check my site www.slmobileprice.com , i want to insert one more google adsense above the image slider.

[vekia]

html box free module, use "home" hook and insert your adsense code.

then go to modules > positions and search for "displayHome" modules list.

 

drag'n'drop your slider module to the top of the "displayHome" list

[somits1]

Thanks for reply.

i have installed html box. how many adsense i can insert in html box using home hook.

[prestafrm]

Hi Vekia,

 

Just installed the HTML box to PrestaShop 1.6.0.5 and added the Google Adsense code:

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Google_Ad-->

<ins class="adsbygoogle"

     style="display:inline-block;width:468px;height:60px"

     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

     data-ad-slot="xxxxxxxxxxxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

 

and selected the "top" option for the place but when I save and browse the shop there is no Ad. The source of the page reveals the following codes:

 

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Google_Ad -->

<ins class="adsbygoogle" style="display: inline-block; width: 468px; height: 60px;" data-ad-client="ca-pub-xxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></ins>

 

the following bit from the above codes was missing:

 

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

 

I checked back to see the source within the HTML box and noticed the code has been slightly changed to:

 

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Google_Ad --> <ins class="adsbygoogle" style="display: inline-block; width: 468px; height: 60px;" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxxx"></ins>

<script>// <![CDATA[

(adsbygoogle = window.adsbygoogle || []).push({});

// ]]></script>

 

probably the [CDATA] strings are not being parsed by the module properly or may be due to any other error the following code is being left out from the compiled page:

 

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

 

Best regards,

[prestafrm]

FYI,

 

I entered the Google AdSense codes by selecting the "Source Code" option from the HTML Box

 

Regards,

[vekia]

there is still something wrong with on/off buttons

i think that this causing the problem in 1.6 release

 

if I were you i will try this:

 

open htmlbox.php

 

search for this line:

<textarea class="rte" type="text" style="margin-bottom:10px; width:99%; height:300px;" id="htmlbox_body" name="htmlbox_body">'.$array['body'].'</textarea>

remove class="rte"

 

now editor will be without tinyMCE - so if you hit save, original code will be saved without [CDATA]

 

can you try it, please?

[prestafrm]

Great!

 

Its working now!

 

Thanks so much indeed.

 

Best regards,

[vekia]

so as you supposed, it was related to these [CDATA] code

i have to search some solution for this annoying thing,

it's not first time when i see problem like that