Options

Target the Background of a Content Block in Order to Change the Color?

Darter02Darter02 Registered Users Posts: 947 Major grins
edited September 14, 2014 in SmugMug Customization
I'm currently playing around with my homepage a bit. I didn't like the way I had it. I'm attempting to make it more "personal."

Anyway, one of the things I'd like to do is to see if I can change the background color of the Feed Block. I'm curious if having it be a different color will look nice. I can't test what I see in my mind because I can't seem to sort out what to target with CSS.

The feed block.

i-w27LxW2-L.jpg

I also think it could be useful to target the space taken up by HTML blocks. I use them for titles, text fields, etc.

i-KbLzTBH-L.jpg

I don't want to just embed a block of color rigidly on the page, and hope it lines up with my content block. If I can get the actual background of a block to be a different color, I'd not have to worry about the content "sliding off" of it when seen on different screen sizes.

As always, any help is super appreciated.

Comments

  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited September 12, 2014
    Every widget block as a unique class name so you should be able to define the background.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    Darter02Darter02 Registered Users Posts: 947 Major grins
    edited September 14, 2014
    I tried this code as an experiment to see if I could change the feed background, but no dice. Am I using the wrong modifiers, or whatever you call the command lines to change things?
    .sm-page-widget .sm-page-widget-feed .sm-page-widget-358353 {
background-color: rgba(175, 0, 190, 0.6);
padding: 20px;
}
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited September 14, 2014
    You only need this unique name.
    .sm-page-widget-358353
    Try it without all the rest.

    Then add !important

    background-color: rgba(175, 0, 190, 0.6) !important;
    padding: 20px !important;
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    Darter02Darter02 Registered Users Posts: 947 Major grins
    edited September 14, 2014
    WOW! THAT worked! That color is one crazy purple... Laughing.gif

    Thanks, now to refine the color.

    If you ever go birding in lower/western Wisconsin, I'll meet up with you and buy you one of our fine malt beverages.
  • Options
    Darter02Darter02 Registered Users Posts: 947 Major grins
    edited September 14, 2014
    This what I used, and it worked perfectly. Also, just a heads up on padding for anyone else who may try this. Since the content block is a set size the padding can't extend beyond it. Instead, the higher your padding number, the more the content scales down INSIDE the box.
    .sm-page-widget-358353 {
background-color: rgba(57, 60, 51, 0.25) !important;
padding: 1px!important;
}
Sign In or Register to comment.