Techmarket (PS 1.5 theme) - add shadow borders around content

[Elecco]

Today I switched to using this theme:

 

http://www.prestashop.com/forums/topic/2829[spam-filter]techmarket-free-prestashop-theme-15x/

 

I like it more than the default PS 1.5 theme. However, I was wondering if it is possible to add shadowed borders around page content? Also when doing this I should also implement that the background image should not be "repeated" outside of those borders.

 

Can it be done and if so, how? I found some instructions but I couldn't find correct "spot" in the global.css to insert code.

 

EDIT1: I don't have that blue horizontal menu enabled, if that matters anything.

Edited April 8, 2014 by Elecco (see edit history)

[dioniz]

It can be done like this:

 

Open themes/techmarket/css/global.css and add this code:

#page {
    box-shadow: 0 4px 6px 0 rgba(20, 20, 20, 0.3);
    padding: 0 10px;
}

Change padding and shadow to your liking.

[Elecco]

It can be done like this:

 

Open themes/techmarket/css/global.css and add this code:

#page {
    box-shadow: 0 4px 6px 0 rgba(20, 20, 20, 0.3);
    padding: 0 10px;
}

Change padding and shadow to your liking.

 

Hi, thanks for the tip, it did add borders and shadow, however the background image is still being repeated outside of those borders. Background image is that grey upper part and then white lower part.

 

EDIT:

 

I think here it is defined in global.css:

 

/* TECH MARKET */

 

 

body{

background:url(../img/bg.png);

backgroun-position:top;

background-repeat:repeat-x;

}

 

Can I define it to be repeated certain amount of pixels in width and adjust those borders accordingly so it results in nice transition? If it is possible, the background outside of the borders could be something different than white to make it look my page "floats" or something...

Edited April 8, 2014 by Elecco (see edit history)

[Elecco]

Okay, I managed to get it work the way I meant. I edited one wide background image and centered it, then did as dioniz advised, thanks. There is however one little problem and two design questions:

 

- On PC (running Windows 7) and Mac (running 10.7.5) everything looks OK on Internet Explorer, FireFox and Safari, however, Chrome on Android 4.1 phone does not render it exactly how I like, page looks fine except for the right column, the background image does not cover the whole area under the shopping cart block and some other stuff I have there. I am using HTMLBox Free to insert images to right column. Can this be fixed? Left side and the page in general is OK.

 

EDIT: I discovered that when using Android tablet with higher resolution (1280 x 800) there problems does not appear, my phone has 960 x 540.

 

- Question 1: If there is not much content on a product page, the background image is cut leaving shadow under the image, not just on borders, how can I make the image to continue all the way down regardless of what resolution the display has? My PC laptop has 1680 x 1050 and Macbook 1280 x 800.

 

- Question 2: How can I define background outside the borders, to be black for example? This would make my page "float" as I described in my previous post.

Edited April 10, 2014 by Elecco (see edit history)