Container color?

jasonarneyjasonarney Registered Users Posts: 6 Big grins
edited October 23, 2015 in SmugMug Customization
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.

Comments

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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. :D

    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>
    
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited 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"
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • jasonarneyjasonarney Registered Users Posts: 6 Big grins
    edited 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.
  • jasonarneyjasonarney Registered Users Posts: 6 Big grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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;
        }
    
  • jasonarneyjasonarney Registered Users Posts: 6 Big grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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.
  • jasonarneyjasonarney Registered Users Posts: 6 Big grins
    edited October 23, 2015
    Mike:
    Awesome! Thanks for your time.
Sign In or Register to comment.