Content Block Backgrounds

Jkatzphoto · June 19, 2015

Hello Smugmuggers,

I have an HTML/CSS question that I have been unable to resolve:

I want to create independent backgrounds for specific HTML content blocks within a page. Every time I try and change the background within the HTML block, it changes the background for the entire page, which is not what I want. For example, when I add a HTML content block, I want to have that content block have a white background that is independent of the main page background. I know this is doable because I have seen this feature on other Smugmug themes, but I can't figure out how to do it myself.

For reference, see:
http://www.tomfosterphotos.com/

Anyone who can show me how to do this (with the CSS code) will rate super awesome, I would really appreciate it.

Allen · June 19, 2015

Jkatzphoto wrote: »

Hello Smugmuggers,

I have an HTML/CSS question that I have been unable to resolve:

I want to create independent backgrounds for specific HTML content blocks within a page. Every time I try and change the background within the HTML block, it changes the background for the entire page, which is not what I want. For example, when I add a HTML content block, I want to have that content block have a white background that is independent of the main page background. I know this is doable because I have seen this feature on other Smugmug themes, but I can't figure out how to do it myself.

For reference, see:
http://www.tomfosterphotos.com/

Anyone who can show me how to do this (with the CSS code) will rate super awesome, I would really appreciate it.

Every widget has a unique class name. Your slideshow starts with this html. I found the class name
using "Inspect Element" in the right click popup menu using Firefox. For any widget R/C on or around it and
the html line will highlight in a popup box. Then look up about 4 or 6 lines and find the class name.

<div id="sm-page-widget-M6SBrdSx" class="sm-page-widget sm-page-widget-slideshow sm-page-widget-9608205" data-typeid="9608205">

.sm-page-widget-9608205 {background: red}

Example: Guessbook photo widget. Yellow is what highlighted and red is widget class name.

...
<div id="sm-page-widget-mLpdBZk8" class="sm-page-widget sm-page-widget-images [COLOR=Red]sm-page-widget-9476944[/COLOR]" data-typeid="9476944">
    <div class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-Gfn9Rfm7" class="sm-page-widget-body">
            <div id="yui_3_8_0_1_1434747992757_398" class="sm-tiles-grid sm-tiles-spacing-24 sm-tiles-center-image sm-tiles-1x1 sm-tiles-S sm-tiles-col-4 sm-tiles">
    <ul id="yui_3_8_0_1_1434747992757_495" class="sm-tiles-list">
        [COLOR=Yellow]<li id="sm-tile-yui_3_8_0_1_1434747992757_432" class="sm-tile-wrapper sm-tile-photo " itemtype="http://schema.org/ImageObject" itemscope=""></li>[/COLOR]
...

Allen · June 19, 2015

These widget class names are unique on your whole site so the CSS can be put in "entire site" CSS.
Add a comment for each one so you know where they are used.
/* guessbook photo box */
.sm-page-widget-9476944 ...
/* homepage slideshow box */
.sm-page-widget-9608205 ...

I do not use the theme CSS because some day I might change themes.

Jkatzphoto · June 22, 2015

Allen,

Thanks a lot for your input. I was able to code what I wanted into my pages. Really appreciate your help.

Content Block Backgrounds

Comments