Jump to content


Photo
- - - - -

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


  • Please log in to reply
12 replies to this topic

#1 brasesco

brasesco

    Advanced Member

  • Members

  • 55 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 20 March 2012 - 06:40 AM

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:

Posted Image

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.

Posted Image

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.

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 March 2012 - 11:20 AM

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.

#3 brasesco

brasesco

    Advanced Member

  • Members

  • 55 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 22 March 2012 - 04:46 AM

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.

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 March 2012 - 12:54 PM

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.

#5 brasesco

brasesco

    Advanced Member

  • Members

  • 55 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 22 March 2012 - 05:09 PM

Thanks @Danny

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

Posted Image

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:

Posted Image

The resulting effect would look something like this:

Posted Image

However, this is what I get today:

Posted Image

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



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 23 March 2012 - 02:20 AM

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?

#7 brasesco

brasesco

    Advanced Member

  • Members

  • 55 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 23 March 2012 - 05:00 AM

@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.

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 March 2012 - 12:16 PM

Hi J.D,

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

Posted Image

using no images but purely CSS, is this correct ?

#9 brasesco

brasesco

    Advanced Member

  • Members

  • 55 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 23 March 2012 - 03:28 PM

@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.

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 23 March 2012 - 04:00 PM

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

#11 brasesco

brasesco

    Advanced Member

  • Members

  • 55 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 23 March 2012 - 04:50 PM

@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



#12 brasesco

brasesco

    Advanced Member

  • Members

  • 55 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 23 March 2012 - 08:06 PM

@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.

#13 brasesco

brasesco

    Advanced Member

  • Members

  • 55 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 23 March 2012 - 09:53 PM

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

Posted Image


Please Login or Register to see this Hidden Content