How to make blocks such as categories, information etc. transparent so background image is visible?

[supersudsme]

Hi, can anyone help? I'm truly stuck and can't find a way through....

Have posted this as a last resort having gone through all threads I can find on transparent images but anything I have tried doesn't seem to work.

I'm trying to adapt my theme so that the background image on my shop pages is visible behind the blocks/modules.

Please see the attached image for a better idea.

I've tried changing global.css attriubutes for individual blocks but can't seem to get the PNG files I've created (to replace the dewfault theme GIFS) to show up with any transparency. They keep coming up as solid....

I'm using Firefox and Firebug to check the code.

Can someone put this noob out of his misery?

Thanks in advance.

[Melinda]

Only way I know is to remove the graphics and any background color on the div.block .block_content and maybe use just a border around them.

You can also put a transparent background on this style:
div.block .block_content {
padding:0.5em 0.7em 0pt;
background: transparent #f1f2f4 url('../img/block_bg.jpg') repeat-x bottom left;
min-height:20px;
border: 2px solid #CCFF00;
}

which in effect does the same as removing the graphic.

If you want a lighter color for the boxes to be transparent I wouldn't know.

[supersudsme]

Hi Melinda,

That has worked a treat. Have spent nearly 3 days on this because I'm a noob in a new world!

Don't think I'll go any further than this for now - would be ideal if I could make the menus slightly "more solid" but at least the them looks far more co-ordinated than before.

Just to re-itrate: I amended the global.css file with Melinda's code (shouldn't need to make any changes except for either deleting the existing div.block .block_content (or comment original out with /* */ marks in case you need to keep it for future ref.).

Here's a pic for anyone interested:




SOLVED? For some people maybe! Not full resolution.

[supersudsme]

Forgot to mention:

To make the WIZNAV bar elements transparent:

Edit your wiznav.css file (/modules/wiznav/css/). Almost at the top of the file you'll see the #nav block with its attributes.

I changed:

#nav {padding:0 0 6px 0; margin:0; list-style:none; height:36px; background:none url(../img/blankbg.gif) repeat-x; z-index:500; font-family:arial, verdana, sans-serif; width: 850px; float: left }
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#000000; text-decoration:none; font-size:13px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;background: url(../img/blank.png);}
#nav li a.top_link span {float:left; display:block; padding:0 12px 0 6px; height:36px;background:url(../img/blank.png) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 12px 0 6px; height:36px; background:url(../img/blanka.gif) no-repeat right top;}

to:

#nav {padding:0 0 6px 0; margin:0; list-style:none; height:36px; background-color:none; background-image: transparent url(../img/blank_test.png);
background-repeat: no-repeat; z-index:500; font-family:arial, verdana, sans-serif; width: 850px; float: left }
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:none; text-decoration:none; font-size:13px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;background-image: transparent url(../img/blank.png);}
#nav li a.top_link span {float:left; display:block; padding:0 12px 0 6px; height:36px;background-image: transparent url(../img/blank.png) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 12px 0 6px; height:36px; background-image transparent:url(../img/blanka.gif) no-repeat right top;}

Now, happy to admit I'm a novice and truthfully, because I made these changes all at once without testing each time I'm not sure whether ALL of these attributes needed changing but it worked for me.

Only thing I'm having any trouble on is the search form & the magnifying glass icon which is stubbornly sticking to its white background.

If anyone cares to share the solution pls feel free. I can say with hand on heart that this apparently simple change took me hours & hours to get a solution for!

[Melinda]

It looks great! Gave me some ideas also!

What is wiznav? Is that a prestashop module?

[Melinda]

Take the themes/*/img/icon/search.gif and give it a transparent background in your graphics program. If you want the glass white then put a white circle under it.

I have attached one for you.

[supersudsme]

Melinda,

Yes, it's a module that someone wrote specially for PS. If you search for wiznav 2.1.3 then it should come up.

Basically, it's a module that plugs into the back end and gives you easily customisable menu options.

The menu items you see in the pic above are Wiznav's default standard menu options. I shall log into the PS back end at a later time to change these to other menu options with their corresponding URLS (wiznav takes care of all the CSS / HTML scripts for you!

Cheers & thanks for the tip about the search form above

Antony