12 replies to this topic

[brasesco]

Hi,

I need a little help with the "Add custom CSS class to these boxes" page setup option. I'm trying to essentially make a css shortcode for applying an irregular drop shadow to my boxes. I've defined a class called

shadow_16_9_1

and entered it into the space provided:



I have the following CSS in my Pagelines Customize style.css

Please Login or Register to see this Hidden Content

The result is almost what I want.



However, despite the background-position being set to 0px the image does not seem to be all the way to the left. Also, I cannot get the image to go past the width of the box element. I really want the image to go into the content-pad so that the shadow can be wider than the box. I tried an earlier attempt in pagelines customize using the content-pad area instead of the box but the background image covered the whole area and spanned multiple boxes with the image thus not giving the drop shadow effect.

Any thoughts would be appreciated.

Thanks,
J.D.

[Danny]

Hi J.D,

If I understand you correctly, are you referring too (on the link you provided) the Template 2 Boxes: 16x9 | One Sidebar and the boxes not be aligned to the left hand side as the boxes above it?

If so please add the following CSS to your custom CSS.

Please Login or Register to see this Hidden Content

If this isn't what you were referring too, please reply here.

[brasesco]

Thanks @Danny Your code above fixed the other problem that I was having - that the boxes in the header section did not align with the boxes in the content section. Thanks for that! But that was not the problem I was looking for help with in this question. I've updated the image above. I want the background image "test_shadow.png" to extend beyond the borders of the box element to the left and right sides. I cannot set the background postion to negative pixels to make the image extend left of the box element. And if I make the background image larger than the box it just gets clipped on the right side of the box element rather than extending past it.

[Danny]

Hi J.D. I'm sorry but I still don't quite understand what you're after, would it be possible to attach an image please, so I get what you're trying to achieve and then I can assist you.

[brasesco]

Thanks @Danny

Let me try to clarify. Here is my standard box:



I want to use the "Add custom CSS class to these boxes" option to insert a background shadow image behind the box. This is a crude mock-up shadow image example:



The resulting effect would look something like this:



However, this is what I get today:



The background image does not extend past the box edge on the left and is clipped on the right side.

Here's the current code:

Please Login or Register to see this Hidden Content

[catrina]

Have you considered making the "top" image above the shadow a little smaller? Or even adding the shadow behind the photo image in Photoshop so that you don't need to add a separate shadow image behind it?

[brasesco]

@catrina The "top" image fills the box automatically by selecting the "Only the image, no text" selector in the box meta settings. The black area is where an actual photo would go. The white border is all just CSS, not done in Photoshop. My goal was to do all the border and edge effects in CSS so I can just drop photos in the boxes and not have to create them all custom and individually in Photoshop.

[Danny]

Hi J.D,

So you want to have the effect like in this image:



using no images but purely CSS, is this correct ?

[brasesco]

@Danny CSS-only would be ideal, but I'm not sure that's possible. I'm happy with the css-only white frame border as-is. I'm willing to layer an irregular "shadow" image behind the box if I can get it positioned right in Framework. I thought it was going to be easier to do with a custom class in the meta data than it has turned out to be.

[catrina]

Have you tried making the white frame border image a little smaller?

[brasesco]

@catrina No matter what the white frame size is the associated image and frame stretch to the full width by default when selecting the "Only the image, no text" selector in the box meta settings of Framework.

You can see various sized frames here:

Please Login or Register to see this Hidden Content

[brasesco]

@catrina It looks like you have me on the right track. I just looked at this again and realized that my image size in the box meta data was larger than the page width so thats why the images were always 100% width. I've reduced the image size meta data and added the following to shrink the white border width back down on the sides:

Please Login or Register to see this Hidden Content

I still need to play around with padding and margin, but I'm close now. I'm also trying to get all of this to happen from the custom class box meta tag so I may need to modify this code further.

[brasesco]

I think I got it. Thanks for sticking with me @Danny and @catrina

Please Login or Register to see this Hidden Content