Jump to content
Sign in to follow this  
jdbrasesco

Help with "Add custom CSS class to these boxes" page option

Recommended Posts

jdbrasesco+    3
jdbrasesco

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: qwrhx.png I have the following CSS in my Pagelines Customize style.css
	.page-id-143 #boxes .content .shadow_16_9_1 {
		background-image:url('http://brasesco.com/test/wp-content/uploads/2012/03/test_shadow.png');
		background-repeat:no-repeat;
		background-origin:border-box;
		background-size:1082px 626px;
	 	background-position:0px 0px;
		}
	

The result is almost what I want. 3NeSV.png 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.

Share this post


Link to post
Share on other sites
Danny    1,327
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. [code].one-sidebar-right #column-main .mcolumn-pad, .two-sidebar-right #column-main .mcolumn-pad {padding: 14px 30px 0 0px;}[/code] If this isn't what you were referring too, please reply here.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jdbrasesco+    3
jdbrasesco
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.

Share this post


Link to post
Share on other sites
Danny    1,327
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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jdbrasesco+    3
jdbrasesco
Thanks @Danny Let me try to clarify. Here is my standard box: [IMG]http://i.imgur.com/UFjZM.png[/IMG] 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: [IMG]http://i.imgur.com/AxAbp.png[/IMG] The resulting effect would look something like this: [IMG]http://i.imgur.com/j6rWU.png[/IMG] However, this is what I get today: [IMG]http://i.imgur.com/BnyU4.png[/IMG] 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: [code] .page-id-143 #boxes .content .shadow_16_9_1 { background-image:url('http://brasesco.com/test/wp-content/uploads/2012/03/test_shadow.png'); background-repeat:no-repeat; background-origin:border-box; background-size:1090px 635px; background-position:0px 0px; } /* ==BOXES: PADDING AND BACKGROUND COLOR== */ #page #boxes .box-media-pad { border: 1px solid #F3F3F3; background: #edebe0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 17px 15px 10px 15px; border-radius: 8px; } /* ==BOXES: MARGIN== */ #boxes .fboxgraphic {margin-bottom: 0px;} .one-sidebar-right #column-main .mcolumn-pad, .two-sidebar-right #column-main .mcolumn-pad {padding: 14px 30px 0 0px;} [/code]

Share this post


Link to post
Share on other sites
catrina    103
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?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jdbrasesco+    3
jdbrasesco
@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.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi J.D, So you want to have the effect like in this image: [img]http://i.imgur.com/j6rWU.png[/img] using no images but purely CSS, is this correct ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jdbrasesco+    3
jdbrasesco
@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.

Share this post


Link to post
Share on other sites
jdbrasesco+    3
jdbrasesco
@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: [url]http://brasesco.com/test/feature-test-page/boxes-16x9/[/url]

Share this post


Link to post
Share on other sites
jdbrasesco+    3
jdbrasesco
@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: [code] .page-id-143 #boxes .blocks.box-media-pad { margin: 10px; } [/code] 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.

Share this post


Link to post
Share on other sites
jdbrasesco+    3
jdbrasesco
I think I got it. Thanks for sticking with me @Danny and @catrina [IMG]http://i.imgur.com/t6VRO.png[/IMG] [url]http://brasesco.com/test/feature-test-page/boxes-16x9/[/url]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×