How Can I Set Background Color On Block

Developers Frontend
1

Using v4.1.2

I have added two blocks at the bottom of my product description page. I have set the wrapper of these blocks to sidebox_important and I am using a base Sortori theme.



I have spent hours trying to change the background of the block from the default background image that it uses to be just white but for the life of me no matter what I try I can't get it to change.



Have tried extra css in the theme, I have tried directly edition both base and style css files, I have added !important to bother background-image: none and background-color: #ffffff but that doesn't work.



Any suggestions on how I can change the background on the sidebox-important-wrapper for these two blocks…thanks in advance

2

[quote name='ibaker' timestamp='1393919939' post='178680']

Using v4.1.2

I have added two blocks at the bottom of my product description page. I have set the wrapper of these blocks to sidebox_important and I am using a base Sortori theme.



I have spent hours trying to change the background of the block from the default background image that it uses to be just white but for the life of me no matter what I try I can't get it to change.



Have tried extra css in the theme, I have tried directly edition both base and style css files, I have added !important to bother background-image: none and background-color: #ffffff but that doesn't work.



Any suggestions on how I can change the background on the sidebox-important-wrapper for these two blocks…thanks in advance

[/quote]

Hi Ibaker

It might be helpful to put a link to the site in your post, if possible. but one question, why are you setting it at sidebox-important-wrapper. would you not leave it blank and then put custom css in the theam.



Alan

3

In your block settings in custom css put something like the following



product-bottomdiscription



Leave the wrapper blank



In your theme, custom css put something like the following



/helps to format the bottom of the product description/

.product-bottomdiscription {

[color=#ff0000]margin-top:0px;

margin-bottom:20px;

margin-right:0px;

margin-left:0px;[/color]

}



the CSS in red is only random. you will need to change to what you need.



Alan

4

Thanks Alan, you can see the two blocks at the bottom of this page:

http://www.clearprop.com.au/shop_new/for-pilots/headsets/headset-units/recreational-flying-250-headset.html

They are for:

Other Items You May Like

Customers also purchased



I like the look of the blocks which use the side box important wrapper however I just want to make the background in each one to be white

5

I did it…well at least for all blocks that use the sidebar important wrapper…not the perfect solution as you never know that I may want to use the sidebar important wrapper somewhere else on the site with its default background color.



Found in the scheme.less template a css entry for

.sidebox-important-wrapper .sidebox-body {
background-color: lighten(@sidebar, 25%);
box-shadow: inset 0 30px 25px -20px #e5e5e5;
}

so changed the background-color in there to #ffffff and it worked but as I said, not the right or perfect way to do it, it's just that CS-Cart complicate things unnecessarily compared to many other web scripts