Add background color to video and slideshow content blocks?

ChancyRat · April 4, 2014

With Allen's help I've been able to add background color to the top navbar and the bottom Smugmug gallery style area (description, thumbnails and main image). I can add background color to an html block.

How do I place a background color to a video block and a slideshow block? A sample page where you can see the benefits - EDIT: NEED - to my doing this: http://www.joinrats.com/Enrichment/Outdoors/

Thanks.

Allen · April 4, 2014

ChancyRat wrote: »

With Allen's help I've been able to add background color to the top navbar and the bottom Smugmug gallery style area (description, thumbnails and main image). I can add background color to an html block.

How do I place a background color to a video block and a slideshow block? A sample page where you can see the benefits - EDIT: NEED - to my doing this: http://www.joinrats.com/Enrichment/Outdoors/

Thanks.

This adds a border and you can then see that the width needs to be adjusted.

.sm-page-widget-4316190 {
border: 2px solid #ccc;
background:#d0effa;
box-shadow:0 0 6px 0 #000;
}

ChancyRat · April 4, 2014

Allen wrote: »

This adds a border and you can then see that the width needs to be adjusted.

.sm-page-widget-4316190 {
border: 2px solid #ccc;
background:#d0effa;
box-shadow:0 0 6px 0 #000;
}

Hey, please be proud of me, Allen. I finally figured out how to find a widget in the source code. I confess I have a love-extreme-dislike relationship with your astute method of giving me only partial answers. In the end it's good to work my brain.

Two questions:
- I am sure there has to be a better way to find the widget number. I had the full source page open and was carefully scrolling back and forth to try to pin it down, and using search for 'widget' and the number you gave me to locate myself.
- Is there a way to control the container width besides my bandaid? I had to apply odd numbers to center the video or slideshow as well as reduce the margins to match the basic page layout. Changing the margins in the content block itself did not fix the problem.

/* background for youtube video */
.sm-page-widget-5720349 {
box-shadow: 0px 0px 12px 9px #FD000D;
background:#FEDC02;
margin: 5px 5px 5px 50px; /* top R bot L */
padding:10px 10px 10px 10px; /* top R bot L */
}

/* background for slideshow video */
.sm-page-widget-4316190 {
box-shadow: 0px 0px 6px 3px #FD000D;
background:#FDED86;
margin: 5px 45px 5px 80px; /* top R bot L */
padding:10px 10px 10px 10px; /* top R bot L */
}

Thanks!

ChancyRat · April 4, 2014

Wait wait I found it! Webdeveloper... Inspector... then you have to back up a bunch of tab-thingies to get to the widget! Woo hooo!
Okay so this is my main question:
- Is there a way to control the container width besides my bandaid? I had to apply odd numbers to center the video or slideshow as well as reduce the margins to match the basic page layout. Changing the margins in the content block itself did not fix the problem.

Allen · April 4, 2014

I use Firebug, right click element, pick "Inspect element with Firebug". Then look up a few lines for the widget number.

I would start by trying to set the box width and margins with its tool rather then CSS.

ChancyRat · April 4, 2014

"I would start by trying to set the box width and margins with its tool rather then CSS."

Which - what - is "its tool"?
I did try with the content block margin options and container size - that only resulted in more problems as the video or slideshow either moved slightly to the left or hit the left margin. No tweaking would fix that.

Hikin' Mike · April 5, 2014

ChancyRat wrote: »

"I would start by trying to set the box width and margins with its tool rather then CSS."

Which - what - is "its tool"?
I did try with the content block margin options and container size - that only resulted in more problems as the video or slideshow either moved slightly to the left or hit the left margin. No tweaking would fix that.

Using an inspecting tool. I use 'Firebug' for Firefox, same thing as Allen. There are other tools for Chrome.

EDIT: It's much easier to edit the inspecting tool, then using regular CSS. Once you get the margins using the inspecting tool, you can now add the specific margins in your theme's CSS. Make sense?

Allen · April 5, 2014

ChancyRat wrote: »

"I would start by trying to set the box width and margins with its tool rather then CSS."

Which - what - is "its tool"?
I did try with the content block margin options and container size - that only resulted in more problems as the video or slideshow either moved slightly to the left or hit the left margin. No tweaking would fix that.

I tried some CSS but the show did not center in the box plus those ugly R/L arrows are really way out
there and don't think they stay inside the box. At least the R one did not and disappeared.
BTW, this was the 1st one down the page.

ChancyRat · April 5, 2014

Hikin' Mike wrote: »

Using an inspecting tool. I use 'Firebug' for Firefox, same thing as Allen. There are other tools for Chrome.

EDIT: It's much easier to edit the inspecting tool, then using regular CSS. Once you get the margins using the inspecting tool, you can now add the specific margins in your theme's CSS. Make sense?

Thank you Mike, I think I have figured out how to do this. I thought Had Firebug, but apparently not. I also found the way to adjust the margins as you suggested. I'm not sure I see a difference between doing that and edited the theme's CSS directly. One can see the block move in real time. But I will try using this tool more often.

ChancyRat · April 5, 2014

Allen wrote: »

I tried some CSS but the show did not center in the box plus those ugly R/L arrows are really way out
there and don't think they stay inside the box. At least the R one did not and disappeared.
BTW, this was the 1st one down the page.

Allen, I thank you for doing some checking. This feels very muddy because what I see on the screen is fine. The slideshow arrows do look odd but one of the photos is much bigger horizontally than the others, so I think they are accommodating that. The arrows stay inside the box. I've tried on IE, FF, and Chrome and the 2 youtube videos and the slideshow blocks remain centered. Even if I resize the browsers or zoom. The only screwy thing I see is on IE8 (which I have to use for work-related stuff), the slideshow arrows are messed and one of the 3 photos in the slideshow does not appear at all. The only browser I can't test on is IE after 8. (I wonder if that is a bug for the block?? Shouldn't a basic slideshow work in IE8?)

I wish I could see what you see... as far as I can tell I got what I needed in terms of the background code... This little project has exposed a few muddy issues, so I'm wondering if I should just stop and live with what I got.

By the way - it is still the case - is this correct - that we cannot apply a background in which more than one content block is included? Not sure I'm saying this well but I have a background on the page... and then backgrounds on the individual content blocks (including the HTML blocks). If I wanted to group multiple classes of blocks onto one background, I would need javascript?

Thanks

Allen · April 5, 2014

ChancyRat wrote: »

...
By the way - it is still the case - is this correct - that we cannot apply a background in which more than one content block is included? Not sure I'm saying this well but I have a background on the page... and then backgrounds on the individual content blocks (including the HTML blocks). If I wanted to group multiple classes of blocks onto one background, I would need javascript?

Thanks

I did this to adjacent boxes on quite a few pages. Merged two vertical boxes by removing top or bottom
border then slide the boxes together. On my homepage the top two horizontal boxes are slide together,
removed R and L borders between them. border-width: top R Bot L;

.sm-page-widget-4000657 {
  border: 6px double #222;
  border-width:[COLOR=Red] 0 [/COLOR]6px 6px 6px ;
  background: rgba(22, 22, 22, .40);
...

ChancyRat · April 5, 2014

Which two sections do you have merged?
I see
- Welcome section with photo to the right
- Map
- Thumbnails

All 3 sections are separately boxed with borders I see on all four sides.
Very pretty transparency for the background on the sections.

Allen · April 5, 2014

Text (html box) and slideshow box on right slide together with no borders between them so it looks like one box.

Next two below are merged. HTML box heading and map box below slide together.

Not really merged but slide together to look like one box.

BTW, the two maps I have linked looks like has a current bug. Only the aerial shows, the
normal view shows nothing, should show map.

ChancyRat · April 5, 2014

Clever! I will keep that in mind for particular pages...

ChancyRat · May 8, 2014

Now how about text blocks?
Allen, your solution for a background to the youtube video block, does not work for a text block. I'm stumped.

On this page, http://www.joinrats.com/RatHealth/SOUNDS/HealthyOrSickSqueaks/

There is a text block under the title. I found the .sm code with Inspect Element, but setting up this code does not put the block in a box:

/* background for intro */
.sm-page-widget-5sQgHZdv {
box-shadow: 0px 0px 12px 9px #FD000D;
background:#FBECB7;
margin: 5px 5px 5px 50px; /* top R bot L */
padding:10px 10px 10px 10px; /* top R bot L */
}

Are text blocks specially-excluded or need additional code?

Hikin' Mike · May 8, 2014

ChancyRat wrote: »

Allen, your solution for a background to the youtube video block, does not work for a text block. I'm stumped.

On this page, http://www.joinrats.com/RatHealth/SOUNDS/HealthyOrSickSqueaks/

There is a text block under the title. I found the .sm code with Inspect Element, but setting up this code does not put the block in a box:

Are text blocks specially-excluded or need additional code?

What text box are you trying to use?

This doesn't work because the numbers change each time: .sm-page-widget-5sQgHZdv

ChancyRat · May 8, 2014

Hikin' Mike wrote: »

What text box are you trying to use?

This doesn't work because the numbers change each time: .sm-page-widget-5sQgHZdv

Hey Mike.
I meant text BLOCK.
I found the .sm code for the one specific text block I would like in a box. I realize if I have many blocks on a page, I would have to do separate code for each.

Allen had shown me the inspect element method for youtube blocks. I'm not understanding why I can't put a text block in a box also.

Hikin' Mike · May 8, 2014

Again, what are you trying to do. Are you still trying to style the video blocks?

ChancyRat · May 8, 2014

Hikin' Mike wrote: »

Again, what are you trying to do. Are you still trying to style the video blocks?

Sorry for my lack of clarity. I can already put video blocks in a box with a background color.
I can do that for HTML blocks and video blocks.
I have text blocks also and would like to do the same thing.

Here's a page with videos in boxes: http://www.joinrats.com/Enrichment/Outdoors/, which shows how the layout plays out when different blocks are in boxes.

Now on the page I'm working on, historically it was set up with: html, video, and text blocks. Rather than re-do a lot of it which is in text blocks, I thought it would be easy enough to find the .sm code for a specific text block, and add the CSS in the page css block. However the method I use for video blocks isn't working on text blocks.

I have a feeling I might be repeating myself without getting any more clear; if that has happened, I'm sorry.

ChancyRat · May 8, 2014

Mike, so this code ought to work to put the first text block on the page, in a box, but it does not:

/* background for intro */
.sm-page-widget-5sQgHZdv {
box-shadow: 0px 0px 12px 9px #FD000D;
background:#FBECB7;
margin: 5px 5px 5px 50px; /* top R bot L */
padding:10px 10px 10px 10px; /* top R bot L */
}

the 5sQqHzdv is the code for one specific text block. Why doesn't this code put that block in a box?

Hikin' Mike · May 8, 2014

ChancyRat wrote: »

Mike, so this code ought to work to put the first text block on the page, in a box, but it does not:

the 5sQqHzdv is the code for one specific text block. Why doesn't this code put that block in a box?

I told you because that code (in red) is generated a new number each time you view that page. It's random.

.sm-page-widget-[B][COLOR="Red"]5sQgHZdv[/COLOR][/B]

Please post a screen print or let us (or me) know which block you want to style.

ChancyRat · May 8, 2014

Oh Mike my brain could not hear that - I translated "random" to "unique", which is how it works for the video blocks - because no matter how many times I visit a page with that code on one, the background and box are functional.

Okay I drew a green bar along the text block.
http://www.joinrats.com/RatHealth/SOUNDS/HealthyOrSickSqueaks/
However, I do need to add a box and a background to all text blocks
(Maybe a different border or background color however.)

I'm now totally curious as to what the options are for text blocks. It is very curious that they aren't treated the same as video blocks.

thanks.

Hikin' Mike · May 8, 2014

ChancyRat wrote: »

Oh Mike my brain could not hear that - I translated "random" to "unique", which is how it works for the video blocks - because no matter how many times I visit a page with that code on one, the background and box are functional.

Okay I drew a green bar along the text block.
http://www.joinrats.com/RatHealth/SOUNDS/HealthyOrSickSqueaks/
However, I do need to add a box and a background to all text blocks
(Maybe a different border or background color however.)

I'm now totally curious as to what the options are for text blocks. It is very curious that they aren't treated the same as video blocks.

thanks.

Try this:

.sm-page-widget-3344164 .sm-page-widget-content  {
    box-shadow: 0px 0px 12px 9px #FD000D;
    background:#FBECB7;
    margin: 5px 5px 5px 50px; /* top R bot L */
    padding:10px 10px 10px 10px; /* top R bot L */
    }

Allen · May 9, 2014

The 2nd red number is regenerated with every page load. The 1st red number is the one to use.

...
<div id="sm-page-widget-ZgspfQ6k" class="sm-page-widget sm-page-widget-youtube 
          [COLOR=Red]sm-page-widget-3344170[/COLOR]" data-typeid="3344170">
    <div id="yui_3_8_0_1_1399642775168_2341" class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-[COLOR=Red]JW6JB52P[/COLOR]" class="sm-page-widget-body"></div>
...

ChancyRat · May 12, 2014

Sorry it took so long for me to get back to this, I was chomping at the bit to apply your new rules. Mike your code worked great for that one block.
Allen, your code helped me navigate inspect element better.
Is there a code that would apply the box and other css code to all text boxes at once, on a given page?

ChancyRat · May 12, 2014

I realize that my page is a hodgepodge of text and html boxes and youtube videos, but this was one of the very first pages I set up in New mode, and I was looking for the quickest setup route available. I had about 4 months of re-structuring pages ahead of me. They go from crude, rude and practically vulgar, to better.

Hikin' Mike · May 12, 2014

ChancyRat wrote: »

Sorry it took so long for me to get back to this, I was chomping at the bit to apply your new rules. Mike your code worked great for that one block.
Allen, your code helped me navigate inspect element better.
Is there a code that would apply the box and other css code to all text boxes at once, on a given page?

Yes. Each page has its own page node number. You can find that on the <body> tage:

<body class="sm-user-portfolio sm-page sm-page-node [COLOR=Red]sm-page-node-7pNJK[/COLOR] sm-page-gallery sm-page-gallery-album">

You can then add the page number to any element like this:

.sm-page-node-7pNJK .sm-page-widget {
    border: 2px solid #f00;
    }

This will add a red, 2px border around EVERYTHING on that page. You can also wrap a class around like-minded blocks/boxes. So if you put something like this on each html/css box, you can the control what the text looks like.

[html]
<div class="body-text">
<p>A bunch of text here.</p>
</div>
[/html]

Then adding the CSS. This will add a red, 2px border; a white background and black text on each HTML/CSS boxes you use when wrap the .body-text div.

/* Styles for all body text*/
.body-text {
    background-color: white;
    color: black;
    border: 2px solid #f00;
    }

Make sense?

ChancyRat · May 12, 2014

Arggh you tempt me with delicious code and now I have to wait a bit. Be back when I can!

ChancyRat · May 13, 2014

Mike, Just ran a test of your red borders around all elements:

.sm-page-node-7pNJK .sm-page-widget {     border: 2px solid #f00;     }

I'm not on that page, but I was able to find the page node code for a different page. Thank you!

However, I was asking about all text content blocks ONLY, at once. Is there a code for all text content blocks, to say format all of them on this one page, the same way. I ask because it appears I have to do each block separately.

Your code also puts the border around the social icons, the top menu, the title, etc.

I do understand also the basics for adding customization for the HTML blocks (your 2nd suggestion). I understand that also needs separate CSS in each HTML block.

Since text blocks get formatted for boxes and background color, in the main page CSS (as opposed to the block itself, like an HTML block does), I was hoping the main page CSS could apply a format to all text blocks at once.

I think I was sloppily calling text blocks, text boxes, which may have been why you came up with the code you did.

Hikin' Mike · May 13, 2014

Try using '.sm-widget-text' instead:

.sm-page-node-7pNJK .sm-widget-text { }

ChancyRat · May 13, 2014

Hikin' Mike wrote: »
Try using '.sm-widget-text' instead:
.sm-page-node-7pNJK .sm-widget-text { }

HOT TAMALES, or as another dgrinner says quite often, and it's been infectious, COOL BEANS.
Your code seen here:
http://www.joinrats.com/RatHealth/SOUNDS/HealthyOrSickSqueaks/

I assume this is an either-or-none option, correct? Either they're all formatted one way, or each text block gets all code applied separately. Still, this is awesome. if I want to single out a block I can switch it to HTML.

Okayyyy.... first the

lust

, and then, is it possible to do the same for all youtube or SM video blocks on a page? Allan had provided code to "close up" the different types of blocks such that a group of blocks could appear to have only one background applied, when in fact the different backgrounds are overlapping... I wonder where he put that code...

Add background color to video and slideshow content blocks?

Comments