User Defined CSS in Bottom Container

When I add a User Defined CSS to the Bottom Container it bleeds up into the Central Container on some cart pages.



For example look at home page at www.lewiestanning.com or product page at lewiestanning.com/store/devoted-creations-limited-couture.html. All looks good on these pages.



Now look at a Category page at www.lewiestanning.com/clearance-items.html or sign-in page at lewiestanning.com/store/index.php?dispatch=auth.login_form&return_url=index.php%3Fdispatch%3Dorders.search



See how the CSS is bleeding up into the Central container. I have not modified any code. All is through the Block Manager and CSS.



It appears to be some bad coding in a few of the default Cs-Cart 3.01 Ultimate templates.



Anyone know how to correct this as this is preventing us from going Live.

Hi



my opinion is that thas has to do with the class of some grid in the footer area. It propably shares the same css from another grid.



I would put different classes on all grids downthere and then set those classes in css, to be on the safe side.



Have you tried that?



Fotis

I had to abandon my original design, it just wasn't working on all the pages the same way. Weird. Not sure why it would display different on category pages then product pages. Anyway, I am pretty happy with my new compromised design layout.



David

Are you using the My Changes Addon?



I am designing themes for version 3 and find that if I make custom css classes for individual blocks then the whole original css files remain untouched. Only when I want to change something in the original css files do I port the css over to my custom style sheet.



This then overirides the relevant original csss class for me.



Makes your site easier to upgrade between versions too :)

I do not like to use hooks. When an update is released I use Winmerge to compare files and make appropriate changes. This gives me more control of my site.

How you added shadow around your website… please tell…

All done through CSS





.main {

width:980px;

background:#FFFFFF;

box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);

margin: 5px 0;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

min-height: 400px;

}

Triplet, in case you want the box-shadow work for IE7 IE8 you can follow this steps:


  1. copy to the root the file “PIE.htc” from www.css3pie.com (copy only the PIE.htc)
  2. in the root .htaccess add the line:


AddType text/x-component .htc



3. In your css declaration just add the line “behavior: url(PIE.htc)”, example:



.main {
behavior: url(PIE.htc);
}




This works for me in regular Apache cPanel host.



I don't like it, but still I find some customers using IE8.

[quote name=‘Triplets’ timestamp=‘1341684096’ post=‘140128’]

All done through CSS





.main {

width:980px;

background:#FFFFFF;

box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);

margin: 5px 0;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

min-height: 400px;

}

[/quote]



Thanks mate.:)

[quote name='Triplets' timestamp='1341684096' post='140128']

All done through CSS





.main {

width:980px;

background:#FFFFFF;

box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);

margin: 5px 0;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

min-height: 400px;

}

[/quote]



Forgive me for being a newbie, I added the above code to add shadow to the main site, but when I do the main section is aligned left, instead of being aligned centered, For the life of me I can not figure it out. Does anyone have any suggestions? I am using just the basic v3 site with demo data if that helps.



Also does anyone know how to add drop shadows behind the individual products in a grid list?

Hi Mardukeme,



Maybe someone already answered your question but here goes. Just copy and paste these 2 extra lines in your css file.



.main {

margin-left: auto;

margin-right: auto;

}



If you have any questions then please contact me for further help.