Adding a box shadow to a row

[Jackcoldrick]

Hey Guys,

I’m trying to add the below CSS to a row I created in the SPB.

-webkit-box-shadow: 1px 6px 11px -2px rgba(133,133,133,1);
-moz-box-shadow: 1px 6px 11px -2px rgba(133,133,133,1);
box-shadow: 1px 6px 11px -2px rgba(133,133,133,1);

I can’t seem to figure out a way of applying it to a single row, I have tried this:

.fw-row {
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    -webkit-box-shadow: 1px 6px 11px -2px rgba(133,133,133,1);
    -moz-box-shadow: 1px 6px 11px -2px rgba(133,133,133,1);
    box-shadow: 1px 6px 11px -2px rgba(133,133,133,1);
}

The above works fine, but the issue is that every single row then gets the shadow. I only want to add it to one specific row. Any clue as to how to achieve this?

Thanks,
J

[Rui Guerreiro – SUPPORT]

Hi,

Add an extra class in that specific row. Like this.
https://www.dropbox.com/s/ubmdl4fl8dil64l/Screenshot%202015-10-08%2014.34.12.png?dl=0

Then you can use the class to target the row.

.custom-row {

}

Give it a try if it works.

-Rui

[Jackcoldrick]

Hi Rui,

Your solution does not work. I assigned my row a class and applied the following CSS:

.spb_content_element.col-sm-12.my-hero-bar {
    -webkit-box-shadow: 0px 10px 12px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 10px 12px -3px rgba(0,0,0,0.75);
    box-shadow: 0px 10px 12px -3px rgba(0,0,0,0.75);
    /* border-bottom: 5px solid black; */
}

When I do this I can see a black border:

.spb_content_element.col-sm-12.my-hero-bar {
    border:5px solid black;
}

So I know that I am successfully targeting the row. As I mentioned before my inner row seems to be contained within another row called fw-row. However I cannot seem to apply a class to this as it’s generated from outside of the SFB…

[Rui Guerreiro – SUPPORT]

Can you provide me the link to that page?
Thanks

-Rui

[Jackcoldrick]

Hi Rui,

Can’t provide a link, the page isn’t live! however If you do following you should be able to replicate

– Create page
– Go to SPB and add a Row element.
– Add a Custom HTML element within this Row
– Give the Row a custom class
– Apply CSS

That is effectively what I am doing and no joy…

[Rui Guerreiro – SUPPORT]

It worked on mine
https://www.dropbox.com/s/4rmmnodhw3vpdit/Screenshot%202015-10-08%2017.01.25.png?dl=0

Try this css

.my-hero-bar {
    -webkit-box-shadow: 0px 10px 12px -3px rgba(0,0,0,0.75)!important;
    -moz-box-shadow: 0px 10px 12px -3px rgba(0,0,0,0.75)!important;
    box-shadow: 0px 10px 12px -3px rgba(0,0,0,0.75)!important;
    border-bottom: 5px solid black!important; 
}

-Rui