Container color?

jasonarney · October 19, 2015

I can barely code my way out of hello world, so CSS is pretty beyond me... but I'm hoping to get my site near where I see it in my mind.

First, is there anyway to have the background slide show margined? I'd like to set the header to 100% white and have the slide show start below it, then allow the header to be pinned once the user begins to scroll.

Second, can I add background color and opacity to container objects? For example, if I could set 50% white to the news or photo containers, it would make the text within readable regardless of the background image.

www.jasonarney.com is where I'm at now.

ChancyRat · October 21, 2015

I'm not really a code person, but I see you haven't gotten a response yet, so I'll give this a try.
I love your transparent background for the header!
I see you got the scrolling/pinned header set.
I personally love the transparent header, though, more than the pinning.

For the background color, the code is going to be specific or different for the type of content block. I have no idea about photos - I think it depends on where and type: a single photo content block versus all the photos in a gallery (different rules/possibilities for different gallery types).

For text only content blocks, I can't remember - you can either specify it in the CSS of the page, or limit it to one single text block on a page (element?). "Real" code folk will know.

For HTML content blocks, here's code that works for me:

#box {
  font-size: 130%;
  margin: 10px;
  background-color:#FBFFBE;
  padding: 10px 20px 10px 10px;
  box-shadow: 0px 0px 2px 0px #000000;
}

<div id="box">
  <h2>How do I think about the heart &ndash; the soul,...</h2>
</div>

Allen · October 21, 2015

To target HTML widgets/boxes you can use .sm-page-widget-html for all HTML boxes
or .sm-page-widget-1516504 for a specific box. Each box/widget has a unique class
name with the numbers.

Using "Inspect Element" this is in the

for the html widget. Probably have to scroll up a few lines to find it.
class="sm-page-widget sm-page-widget-html sm-page-widget-1516504"

jasonarney · October 23, 2015

Like I said, I can find my way out of hello world so I'll give this a try, but a lot of what you guys are going on about is flying right over me. Let me see what I can do before resuming my beg position.

jasonarney · October 23, 2015

As best I can tell, my "News and Updates" section is widget 12673754... so, my code would be...

#12673754 {
  font-size: 130%;
  margin: 10px;
  background-color:#FBFFBE;
  padding: 10px 20px 10px 10px;
  box-shadow: 0px 0px 2px 0px #000000;
}

?

I'm 100% sure I'm missing a ton.

Fiddled as best I could and only got dumber.

Hikin' Mike · October 23, 2015

jasonarney wrote: »
As best I can tell, my "News and Updates" section is widget 12673754... so, my code would be...
#12673754 {
  font-size: 130%;
  margin: 10px;
  background-color:#FBFFBE;
  padding: 10px 20px 10px 10px;
  box-shadow: 0px 0px 2px 0px #000000;
}
?

I'm 100% sure I'm missing a ton.

Close:

.sm-page-widget-12673754 {    
    font-size: 130%;
    margin: 10px;
    background-color:#FBFFBE;
    padding: 10px 20px 10px 10px;
    box-shadow: 0px 0px 2px 0px #000000;
    }

jasonarney · October 23, 2015

Mike:
Indeed that was the trick.

If I may ask further... I want to have those boxes feature the same opacity as the header, just a hint of something below. I poked around and found I could...

.sm-page-widget-12673754 {    
    margin: 10px;
    background-color:#FFFFFF;
    padding: 5px 5px 5px 5px;
    opacity: 0.8;
   
    }

But this makes everything in the container 80% and thus, the photos go to poo in their presentation.

Hikin' Mike · October 23, 2015

Remove this:

.sm-page-widget-12673754 {    
    margin: 10px;
    background-color:#FFFFFF;
    padding: 5px 5px 5px 5px;
    opacity: 0.8;   
    }

And add this instead:

.sm-page-widget-12673754 {    
    margin: 10px;
    background: rgba( 0, 0, 0, [B]0.8[/B] );
    padding: 5px 5px 5px 5px;
    }

You can adjust the opacity using the '0.8' setting.

jasonarney · October 23, 2015

Mike:
Awesome! Thanks for your time.

Container color?

Comments