[SOLVED] How to add custom navigation ribbon design to header?

[generalexperts]

I am trying to add a custom ribbon to the header of my site. Especially the ribbon that goes off the edges on each side (shown by red circles). Looking for a little expert help on this one. My URL is shown in the image below. I am using Prestashop 1.5.4.1 and a custom theme. I see how it can be done in firebug but I don't understand the code well enough to change mine with my theme... Please view the 2 images below.

Edited November 7, 2014 by generalexperts (see edit history)

[vekia]

to html box free paste this code:

<div style="width: 41px; height:37px; display:block; position:absolute; top: 85px; right: -23px; z-index:1; background:url('http://i.imgur.com/rMFy4fO.gif')"></div>
<div style="width: 41px; height:37px; display:block; position:absolute; top: 85px; left: -23px; z-index:1; background:url('http://i.imgur.com/XqLnQRX.gif')"></div>

for to the .sf-container add:

z-index: 1;
position: relative;

so it should looks like:

.sf-contener {
clear: both;
z-index: 1;
position: relative;
}

for .sf-menu use this code:
 

.sf-menu {
margin: 0;
padding: 0;
width: 980px;
background: url('http://i.imgur.com/MIH6C41.gif');
height: 38px;
}

these styles its a part of superfis-modified.css located in blocktopmenu module directory.

 

 

and also change line-height to 38 in:

.sf-menu a {
display: block;
margin-right: 2px;
padding: 0 30px;
line-height: 38px;
border: 0;
text-decoration: none;
}

effect:

[generalexperts]

Worked great! thank you! The only problem I encountered was when editing the html box and submitting it a few times as I added things... the code added slashes. for example...starting out with <div style=" then after a few times of submitting it the previous code would show <div style=\\\\" and eventually it wouldn't work. After I realized it and deleted all the slashes everything worked perfect, Thanks again!

[vekia]

your server use probably magic quotes, this is why these slashes are added automatically

i suppose so

[sb20-07]

Hi Vekia,

thanks for the great tutorial.

I've done the same modifications in superfish.modification css

but I'm not able to see the central part of the ribbon. Do you have an idea to solve?

I use Prestashop 1.5.4 and a custom theme

 

 

[generalexperts]

sb20 do you have a link to your site?

[vekia]

Hi Vekia,

thanks for the great tutorial.

I've done the same modifications in superfish.modification css

but I'm not able to see the central part of the ribbon. Do you have an idea to solve?

I use Prestashop 1.5.4 and a custom theme

 

Cattura di schermata (1).png

 

this guide is based on default theme, as i can see on your screenshot you use non default one.

this is probably why you've got troubles with it.

anyway, url will be helpful, otherwise it will not be possible to help.

[sb20-07]

here is my site

www.ideecountry.com

[vekia]

your theme doesn't use default block top menu module, and your theme is totally different with different structure.

move htmlbox module to to the top of the list of modules named: displayTop

[generalexperts]

sb20, I wasn't able to connect to your site. Connection times out.

[sb20-07]

at generalexperts: try now...i have just tried and have no problem

 

at Vekia: 

 

your theme doesn't use default block top menu module, and your theme is totally different with different structure.

move htmlbox module to to the top of the list of modules named: displayTop

I can move htmlbox only on TOP or HEADER. I haven't  displayTop as you mentioned.

now I have choose Header but nothing changed

[generalexperts]

Okay I can see it now...

Edited March 3, 2014 by generalexperts (see edit history)

[sb20-07]

I don't know why...I see the website both in google and in firefox

[generalexperts]

First, The #categoriestopmenu will need some editing to get the center png overlayed on top. Use a high Z-index for the ribbon. I see you currently have it set to 1000 for the background you don't want. Your current background is url("../../../../img/topmenu_bg.jpg") repeat-x scroll left top rgba(0, 0, 0, 0). You'll need to change the background to your URL of the ribbon jpg. Change the style width on the categoriestopmenu to 999px. and add Left: -10px. That should get the menu across the whole page.

 

I can see you need to change the gif to a png file and get rid of the white space for the Left and Right parts of the ribbon. You can do this in a photoshop program and erase the white with a transparent background. Re-upload the image with a link to your .PNG. To move the Left side of the ribbon you'll need to make a few changes to the element.style. Make sure these are set: Top:151px; Left:55px. And you'll need a higher Z-index as the home image slider will overlap the corner of this. For the Right side; make sure you have right:53px; top:150px; and a higher Z-index. Let us know how all that goes!

[sb20-07]

generalexperts and Vekia

thank you very much!!

 

I have enlarged center ribbon to fit with my template, please can you take a look and tell me what do you think?

 

I think there are few things to fix: Left and right are above the central ribbon...is that correct?

 

the dotted line is only in the up side???

 

Thanks again for your help

[generalexperts]

I am not sure how to fix what you have going. Sorry

[vekia]

use this code:
 

<div style="width: 41px; height:37px; display:block; position:absolute; top: -22px; right: -56px; z-index:1; background:url('http://www.ideecountry.com/STORE/img/grafica/ribbonright.png')"></div>
<div style="width: 41px; height:37px; display:block; position:absolute; top: -22px; left: -56px; z-index:1; background:url('http://www.ideecountry.com/STORE/img/grafica/ribbonleft.png')"></div>

and add position:relative to this div:

 

 

effect

[sb20-07]

I change the code but I don't know where exactly add position:relative to div style

[vekia]

i have no idea how you added it.

it's probably a part of categories top menu module, or a part of CS slider module.