Widget code to modify background of a photo content block

ChancyRat · October 4, 2014

I have the lovely code for text, html, youtube, and video blocks.
How about the code for a photo block? Just an individual photo.

I've tried inspect element and roamed through all the codes I see associated with a photo block, and tried inserting some of them, but nothing 'takes'.

Anticipating

cry

cry:cry I will be told No Can Do

cry

cry

is there a workaround to achieve that, other than putting the photo into an html block? I'm reluctant to do that because I don't want to loose Analytics counts on individual photos.

Thanks.

Allen · October 4, 2014

Can you post a link to this photo block?

ChancyRat · October 4, 2014

Hey, Allen, thanks. Sorry I hadn't included a link, the gallery is unlisted currently.
So I added a photo to this gallery:
http://www.joinrats.com/EarningTrust/Letratsdecide/

There's a video, then a photo.
I added a title, and there's a caption.
Is it possible to put one background behind all 3? (Title, photo, caption).
So they are "one group".

Does it matter if I have "open in lightbox" turned on?

Allen · October 4, 2014

You want the widgets expanded so the backgrounds will show around them?

.sm-page-widget-8203732 {
background:red;
padding: 10px;
}

.sm-page-widget-8226700 {
background:red;
padding: 1px 10px 10px 10px;
margin-top: 10px;
}

ChancyRat · October 4, 2014

Thank you so much Allen.
After you asked me for that info, I vaguely recalled you might have given me this direction before, but going back months in time in the threads I can't find the original.

I did find where you got that code in inspect element.

One question: I copied the formatting (padding etc.) from the CSS for the video block, but with both having a container width of 940 px, the photo block is still too wide/large, left and right.

I left it that way so you could see what I mean. Way too much padding on the left and right.
The explanation may be that the caption width is too wide.
http://www.joinrats.com/EarningTrust/Letratsdecide/

I was able to fix this partly by changing the container width to 850 or so. However the block is then flush left instead of centered. Changing margins or anything else in the CSS doesn't fix it.

Can I:
- Reduce by default the margins of the caption? Which might then fix the container width.
- Or go the route of changing the container width, but then how do I center the block?

Allen · October 4, 2014

Set the width and center

.sm-page-widget-8226700 {
width: 896px !important;
margin: 0 auto !important;
}

Allen · October 4, 2014

Center and size text width

.sm-page-widget-8226700 .sm-tile-info {
width: 680px;
margin:0 auto;
text-align:center
}

ChancyRat · October 4, 2014

WHOOP! You ARE the MAN.
Perfect!
And guess what! I figured out one can do the same coding on a set of photos ("photos I choose"). The widget code works there as well.
One more question though - on the unlisted page, the background color is a blue. The photo caption is a cream.
I think the photo-caption color is set in the site-wide CSS (eons ago, so of course I forget).

Adding a background color along these lines does not work to change the color:

.sm-page-widget-8226700 .sm-tile-info {
width: 660px;
margin:0 auto;
background-color:red;
}

Can I set the background color of the caption for an embedded photo?

Allen · October 4, 2014

Try this

.sm-page-widget-8226700 .sm-tile-info p {
background:none !important;
}

ChancyRat · October 4, 2014

Hmm, not quite.
This image is from the unlisted gallery.
The light blue is the main background of the photo block.
The cream portion of the caption is the default caption color.
The bright blue derives from the code you gave me.
So it did change the background of the text, but only part of it.

When I left the "none" in the code (I assume that's for transparency?), the color remained fully cream.

Allen · October 4, 2014

ChancyRat wrote: »

Hmm, not quite.
This image is from the unlisted gallery.
The light blue is the main background of the photo block.
The cream portion of the caption is the default caption color.
The bright blue derives from the code you gave me.
So it did change the background of the text, but only part of it.

When I left the "none" in the code (I assume that's for transparency?), the color remained fully cream.

Different gallery? Not the one you posted. Letratsdecide

ChancyRat · October 5, 2014

Yes, Allen, sorry about that.
So I played with the code in the public gallery.

Without the negative px margin, the blue covers only a portion of the caption (the text alone).

So the image looks great, but what is really happening is that the blue is on top of the default caption color, not in place of it. Is that the only way to achieve one color?

It took padding and margin tweaks to achieve this.

.sm-page-widget-8226700 .sm-tile-info {
width:800px;
margin:-2px auto;
}

.sm-page-widget-8226700 .sm-tile-info p {
background:#59B1F9 !important;
padding:5px 10px 5px 10px;
margin: 0 auto !important;
}

EDIT: HAH! I now see a sliver of cream in this photo as well, to the left of the bright blue.
So, tweaking padding and such is not a fix.

ChancyRat · October 5, 2014

In the other unlisted gallery, I'm unable to fully cover over the cream default caption background.
So this code results in a sliver of cream on the left side. If I were to want this bright blue, I - well, I can't do that because of the sliver of cream.

.sm-page-widget-8227369 .sm-tile-info {
width: 748px;
margin: -2px;
text-align:left;
}

.sm-page-widget-8227369 .sm-tile-info p {
background:#59B1F9 !important;
padding:7px 10px 7px 10px !important;
margin: 0 -11px -3px -8px !important;
}

Allen · October 5, 2014

I have no idea what galleries to look at. The Letratsdecide gallery looks ok.

ChancyRat · October 5, 2014

Allen wrote: »

I have no idea what galleries to look at. The Letratsdecide gallery looks ok.

This one is fine to use, and, it has the same problem, it's just that the closeness of 2 colors makes it hard to spot. I enlarged it and drew a box around the default color, which sticks outside the left side of the blue.

The blue is forced into position, left and up with padding and margins, and then the default cream moves left and up as well.

The blue in the code is not replacing the cream, it's just masking it, and masking only part of it. If I have a different background color for the page, than the cream of the default caption background, the problem color is much more evident.

ChancyRat · October 5, 2014

The default caption size and position is not something I can manage with position. When I do position for the Blue (your code), the position of the default caption background moves relatively. Hope I'm making sense.

Allen · October 5, 2014

ChancyRat wrote: »

This one is fine to use, and, it has the same problem, ...

... and exactly where is it?

ChancyRat · October 5, 2014

You must just want to bop me on the head and I don't blame you. :toni
http://www.joinrats.com/EarningTrust/Letratsdecide/

What I did:
- Add your codes without any margin or padding tweaks.
The color and text were then placed wrong. To try to fix them, I moved the text with padding and margin, up and out left and right.

But, the default caption background color also moved relatively up and out (left and right).

The blue did not replace the cream.

Allen · October 5, 2014

ChancyRat wrote: »

You must just want to bop me on the head and I don't blame you. :toni
http://www.joinrats.com/EarningTrust/Letratsdecide/

What I did:
- Add your codes without any margin or padding tweaks.
The color and text were then placed wrong. To try to fix them, I moved the text with padding and margin, up and out left and right.

But, the default caption background color also moved relatively up and out (left and right).

The blue did not replace the cream.

So it's ok now?

ChancyRat · October 5, 2014

Nooononononono, it's not.

In the images I've attached where I've drawn black line boxes around sections, those sections have the wrong color, the default cream.

How can I truly remove the cream so that the only active color is what I want? (In this example the blue.)

One answer, maybe, is to manipulate padding and margin, but that moves the text only, not the caption background color.

Part of the problem is the code you gave me (where blue is the example), is applying a background only around the text, not on the full caption background area.

I added padding and margin to force space up and out from the text, making it appear as if the caption area was bigger, but the Real caption area also expands up and out, and is not fully masked.

In the image example you could say, well it looks okay, but I have pages where the color won't be so close so the problem color will stick out like a sore thumb.

Allen · October 5, 2014

I meant that the one page is ok but the others still need fixin'.
I need page links to the ones not yet correct.

ChancyRat · October 5, 2014

Allen, are you playing with me... ? Asked playfully because I'm over here laughing hysterically. You Must be, right?

No, the page t letratsdecide, the code is not right for the caption in the photoblock.

The code you gave me, I hacked it with margins and padding, but nothing I did would get rid of the default caption background color, which in the images is a faint cream sticking out on the left, right, and bottom.

Insofar as it's a bit hard to detect that, you could say it's okay. But I have other pages where the colors are very different and so the sticking out (of the default caption background color) will be prominent.

So on this page http://www.joinrats.com/EarningTrust/Letratsdecide/ which you felt looked good, I changed the background for the photo block to grey. Now you can see the default cream behind and sticking out from the blue.

Every time I changed the code to move the blue, I could not remove or control the cream.

Can I fix the cream?

Allen · October 5, 2014

See if this gets rid of the cream background. Letratsdecide page

.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
padding:0 !important;
margin-top: 5px; /* move down so it doesn't overlap photo */
}

Edit: added !important

Allen · October 5, 2014

Here's that background you're trying to remove. My last post shows that it's the padding area
that shows as the background. So setting padding to zero should work.

Just an example showing the color background created with added padding.
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
background: red !important;
}

ChancyRat · October 6, 2014

Thank you Allen! Do I have unnecessary code as a result of patching so much of it to try to fix the problem? This is the code I have, and I've tried removing parts (along with adding padding or margins to other parts), and in the end all of these seem to be required to make sure that the default caption background color is fully changed (or masked) when I change that color.

/* adds background behind single photo block, all parts */
.sm-page-widget-8226700 {
background:#FFFDC9;
padding:5px 5px 5px 5px;
box-shadow:0 0 1px 1px #4c4d4f;
width: 896px !important;
margin: 0 auto !important;
}

/* Controls r and left margins of caption of single photo block */
.sm-page-widget-8226700 .sm-tile-info {
width:800px;
margin:0 auto;
}

/* single photo caption paragraph formatting and text background color */
.sm-page-widget-8226700 .sm-tile-info p {
background:#FFFDC9 !important;
padding:5px 10px 0 10px;
margin: 0 auto !important;
}

/* single photo default caption text and text background, control of position */
/* required to mask default caption background color */
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
padding:0 !important;
margin-top: 5px; /* moves down so it doesn't overlap photo */
}

Here's the Before:
EDITED to correct the image.

ChancyRat · October 6, 2014

And here's the after:

ChancyRat · October 6, 2014

Here's another way to show the "after". With this last section of code:

/* single photo default caption text and text background, control of position */
/* required to mask default caption background color */
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
padding:0 !important;
margin-top: 5px; /* moves down so it doesn't overlap photo */
}

There is no longer any default cream caption background color. So when I change the blue and grey to any color (in this case I did want cream), the colors are seamless.

Allen · October 6, 2014

ChancyRat wrote: »

Thank you Allen! Do I have unnecessary code as a result of patching so much of it to try to fix the problem? This is the code I have, and I've tried removing parts (along with adding padding or margins to other parts), and in the end all of these seem to be required to make sure that the default caption background color is fully changed (or masked) when I change that color.

ChancyRat wrote: »

Here's another way to show the "after". With this last section of code:

/* single photo default caption text and text background, control of position */
/* required to mask default caption background color */
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
padding:0 !important;
margin-top: 5px; /* moves down so it doesn't overlap photo */
}

There is no longer any default cream caption background color. So when I change the blue and grey to any color (in this case I did want cream), the colors are seamless.

Assuming your goal is wanting this on every case of a photo block anywhere.
So we need to find the CSS needed to apply to all photo blocks.

Starting from scratch I'd suggest removing it all and reapplying one step at a time.

1st add photo block background of contrasting color to prepare for checking caption background.
Check all photo blocks and see if bg applied. Modify this to apply everywhere.
Change from widget to block type. Perhaps this .sm-page-widget-image

/* adds background behind single photo block, all parts */
.sm-page-widget-8226700 {
background:#FFFDC9;
padding:5px 5px 5px 5px;
box-shadow:0 0 1px 1px #4c4d4f;
width: 896px !important;
margin: 0 auto !important;
}

2nd add CSS for caption background find class to apply everywhere

/* single photo caption paragraph formatting and text background color */
.sm-page-widget-8226700 .sm-tile-info p {
background:#FFFDC9 !important;
padding:5px 10px 0 10px;
margin: 0 auto !important;
}

3rd CSS to remove padding and hence no outside background around caption.
Add background: red !important to it to make sure it's not seen. Padding disabled xxpadding.
Check all and see if it applies everywhere.

/* single photo default caption text and text background, control of position */
/* required to mask default caption background color */
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
xxpadding:0 !important;
margin-top: 5px; /* moves down so it doesn't overlap photo */
background: red !important;
}

Should see the red backgrounnd around captions everywhere.
Remove the xx from xxpadding and check it gone everywhere.

Does this make sense?

ChancyRat · October 6, 2014

Thanks again Allen.
The one section of code you removed, had controlled the left and right margins of the text in the caption (or so I thought). By tweaking the line in GREEN, in your new code, I obtained the correct margins.

What does this mean?: "Change from widget to block type."

Thank you for asking if it makes sense... yes, insofar as my non-CSS brain can determine.
I have been adjusting the code in the unlisted page in parallel with this page. The unlisted page has both a single and a multiple photo block. I've been able to duplicate the sections of code for both blocks and the format is great.

clap

Allen wrote: »

Assuming your goal is wanting this on every case of a photo block anywhere.
So we need to find the CSS needed to apply to all photo blocks.

Starting from scratch I'd suggest removing it all and reapplying one step at a time.

1st add photo block background of contrasting color to prepare for checking caption background.
Check all photo blocks and see if bg applied. Modify this to apply everywhere.
Change from widget to block type. Perhaps this .sm-page-widget-image

/* adds background behind single photo block, all parts */
.sm-page-widget-8226700 {
background:#FFFDC9;
padding:5px 5px 5px 5px;
box-shadow:0 0 1px 1px #4c4d4f;
width: 896px !important;
margin: 0 auto !important;
}

2nd add CSS for caption background find class to apply everywhere

/* single photo caption paragraph formatting and text background color */
.sm-page-widget-8226700 .sm-tile-info p {
background:#FFFDC9 !important;
padding:7px 40px 0 40px;
margin: 0 auto !important;
}

3rd CSS to remove padding and hence no outside background around caption.
Add background: red !important to it to make sure it's not seen. Padding disabled xxpadding.
Check all and see if it applies everywhere.

/* single photo default caption text and text background, control of position */
/* required to mask default caption background color */
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
xxpadding:0 !important;
margin-top: 5px; /* moves down so it doesn't overlap photo */
background: red !important;
}

Should see the red backgrounnd around captions everywhere.
Remove the xx from xxpadding and check it gone everywhere.

Does this make sense?

Widget code to modify background of a photo content block

Comments