code for changing the background color & alignment of widgets

Hello, anyone have any ideas about this?

Just checking back. Any help much appreciated!

Thank you.

Hi there – I’ll answer your questions separately.

1. The images I have in the First Footer Widget area (just regular image widgets that are meant to be links) have an empty background, which is showing up as white, different than the background color of the footer (I’m not sure the code for the color, but it’s an off-white that is slightly tan). Is there code for changing the background of the widgets?

The white background colour looks to be coming from the paragraph tags you’re using within the text widgets, which have a white background colour defined on them here:

p {
    background-color: #ffffff;
    color: #515151;
    font-family: "Khula";
    font-size: 17px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.6;
    padding-right: 8px;
}

You can either remove the background colour wherever you defined it originally, or try this override in your custom CSS:

.widget p {
  background: none;
}

2. I’m also wondering about being able to change the alignment of the widgets themselves (especially in responsive mobile screen, the main three widgets will all sit on one side instead of being centered–is there code to have them be centered in any size screen?

Give this a try:

.footer-widget-area .widget {
  text-align: center;
}

2b. I also want to change the images in my aforementioned footer widgets to be centered within the widget instead of off to one side. I can’t tell as much, but I think that the main three widget images are not quite centered as well. Is there CSS for this?

I’m not quite sure how this differs from the above, but let me know if the above CSS takes care of it for you. I only see two widget areas in the footer now, not three.

Hello, anyone have any ideas about this?

Just checking back. Any help much appreciated!

Please don’t “bump” threads in the future. Not only is it against forum etiquette, it removes your thread from the “unreplied” forum queue, which is where a lot of volunteers look for threads needing help, so you’re actually doing yourself a disservice by bumping. ?? Also bear in mind that it was a holiday long weekend in the US and Canada, so there is a big backlog of threads needing replies in the forum this week. Thanks for your understanding!

Kathryn,

Thank you SO MUCH! Code worked great for centering footer widgets.

I wasn’t clear in explaining the second part of my question, let me give it a go again.

I am wondering about code to center the Front Page Widgets (three main ones that show up on Sela’s Front Page Template).

I tried a version of your code there for the footer widgets with the words “frontpage” instead of “footer” but it didn’t work–any chance you could post code for the Front Page Widgets centering as well?

Thanks again so much!

And really sorry about bumping, didn’t know what that was or the etiquette surrounding it, won’t do it again.

Thanks,
Irene

Irene, it looks like Kathryn’s code has centered your footer area widget content. If I’m missing something, please let me know.

Hi Irene – is everything centered how you’d like now? Let me know so we can mark this thread as resolved. Thanks!

Thanks! And sorry for the delay in my reply.

I actually centered it how I wanted it by changing to using Jetpack widgets for the images, they are good and resolved my problems–didn’t have to enter extra CSS code then.

Thanks so much for your help!

Irene

Glad you’re all set, thanks for confirming!