Help with adding CSS to HTML content block
Teetime
Registered Users Posts: 202 Major grins
I have an HTML content block on my home page with some white text in it. This content block overlays the upper portion of my background slideshow. I would like to put a slightly opaque background in the HTML content block so the text would show better when slideshow images are light. I thought I understood how to determine the widget id for the HTML block but when I put my CSS in nothing changes. Here is the CSS code I am using for the HTML block:
Here is how I am determining the element ID:
1. In Chrome, I right click in the area of the HTML block and choose inspect.
2. I then move up one div at a time until the entire HTML block is selected.
3. If I move up one more div I am at the body so the selection in step 2 seems correct to me.
4. I copy the element ID from step 2 and create the code shown above.
Then I publish the change but there is no change to my home page, and when I inspect that element again in Chrome I don't see my CSS code.
Any ideas what I'm doing wrong here?
Also, my site isn't public yet, else I would put the link here.
Thanks,
Jerry
.sm-page-layout-row yui3-g {
background-color: rgba(175, 175, 175, 0.6);
}
Here is how I am determining the element ID:
1. In Chrome, I right click in the area of the HTML block and choose inspect.
2. I then move up one div at a time until the entire HTML block is selected.
3. If I move up one more div I am at the body so the selection in step 2 seems correct to me.
4. I copy the element ID from step 2 and create the code shown above.
Then I publish the change but there is no change to my home page, and when I inspect that element again in Chrome I don't see my CSS code.
Any ideas what I'm doing wrong here?
Also, my site isn't public yet, else I would put the link here.
Thanks,
Jerry
Jerry
0
Comments
This is the line you're looking for with the number you need.
<div id="sm-page-widget-WsdpWVsr" class="sm-page-widget sm-page-widget-html [COLOR=Red]sm-page-widget-1516504[/COLOR]" data-typeid="1516504">Yours will have its own number.
.sm-page-widget-XXXXXXX { background-color: rgba(175, 175, 175, 0.6); }
My Website index | My Blog
Allen, I followed your instructions and I get this widget ID:
But I still don't see any change when I update the CSS with this widget ID. But here's the strange part - I inspect the element again and this time it has a new widget ID:
It seems that every time I publish this element gets a new widget ID. What am I missing here?
Thanks,
Jerry
sm-page-widget-12375831 seems to be the one you're looking for. It stays the same in both versions. It takes some practice to get used to deciphering the source code to make changes with css but the process is similar every time so you'll get used to it as you make more changes.
Dave
Thanks Dave. I tried that but same result - no change to the HTML content block background. Maybe it is my syntax?
h1 { color: white; text-align: center; } h3 { color: white; text-align: center; } .sm-page-widget-12375831 { background-color: rgba(175, 175, 175, 0.6); }See if this works. Or background: rgba... without the -color.
.sm-page-widget-12375831 { background-color: rgba(175, 175, 175, 0.6) !important; }
or
.sm-page-widget-12375831 { background: rgba(175, 175, 175, 0.6); }
My Website index | My Blog
Allen, I gave that a try but still no luck. I'm still not able to find the CSS I am entering anywhere in the listed cascading styles when I inspect the element.
I appreciate everyone's effort on this, but I've given up for the moment and have an alternative design I can live with. When I get time I'll poke around more and post back here if I find out anything.
Thanks,
Jerry
My Website index | My Blog
BINGO! I was using the HTML CSS tab which seemed like the right choice to me. I just now put it in the homepage CSS and it works as expected. Thanks for hanging with me again Allen!
Jerry
Or add '.sm-user-ui' before the code:
[B].sm-user-ui[/B] .sm-page-widget-12375831 { background: rgba( 175, 175, 175, 0.6 ); }Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk