Jump to content
BoKr

solved: new backgorund div around featured products module

Recommended Posts

Hello

 

I am on PS149 with Alternativ Theme and am trying to set a shadowy box/background around/behind my featured products 'grid' on my homepage. However, this time I am not able to get it done.

Since I use the Alt Theme I edit the /themes/alternativtheme/modules/homefeatured.tpl.

 

I added the proper class to my global css.

 

.shadowbox {
background: url("framebg.png") repeat-x scroll 0 0 #F0EAE5;
border-radius: 3px 3px 3px 3px;
border-top: 1px solid #CCCCCC;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
padding: 5px;
position: relative;
/*	z-index: 3;*/
}

 

and added a new div around all in my homefeatured.tpl like this:

<!-- MODULE Home Featured Products -->
{if $products|@count}
<br /><br /><br />
<div class="shadowbox">
<div class="block_content v2-homefeatured">
{foreach from=$products item=product name=homeFeaturedProducts}
.......
.....
...
</div>  /* end shadow box*/

 

Can somebody please help me to get this easy thing done?

 

thanks alot!

Edited by B.Köring (see edit history)

Share this post


Link to post
Share on other sites

the code provided looks good(except its missing vendor prefixes for the box-shadow property, which I think is not the problem now)

 

we need to see a live link or atleast screenshot with firebug open or something like that. If you can provide a live link I'll be able to give you solution immediately.

 

Few blind guesses, try adding overflow: hidden; to your new box to see if its a floats issue and ofc clear cache and recompile the smarty templates.

Share this post


Link to post
Share on other sites

Hello Steve

 

here is a screenshot from my older local test site. Please have a look and feel free to optimize :)

 

12QXU.png

 

PS:

 

After doing some reading on floating with CSS I addes for test purposes the clearfix to the class but no improvement to no avail. Think, I did it wrong.

Edited by B.Köring (see edit history)

Share this post


Link to post
Share on other sites

As I said before, just add overflow: hidden; and youre good to go.

 

 

Cheers

Edited by Snade (see edit history)

Share this post


Link to post
Share on other sites

That did the trick!

I just had to comment out/take out my added clear:both and then it worked.

 

Thank you very much!

  • Like 1

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More