Footer widget customization questions

Support
#1

The site I am working on is http://dallaswarriorshockey.com/. In the footer, I have a question about the submit button in the first footer column and the events widget in the third column.

The submit button for the mailchimp widget is currently set to the default button colors of the site, but I would like to make the button white, with the current red on hover. I know how to do this, but can’t figure out the id to write this css in the global css. Can you help here?

Secondly, I have The Events Calendar widget in column three of the footer. I would like to change the event titles to white with the same red on hover as the event date. I have found what I thought was the correct id and have added the following css, but have not achieved the desired results. Also, I would like to remove the white border around the entire widget.

Thank you for your help.

#2

Hi,

To change the text color in your footer widget area, you can add the code below in Theme Options > CSS

.x-colophon.top .widget_mc4wp_form_widget [type="submit"] {
    color: #fff;
    border-color: #fff;
}

.x-colophon.top .widget_mc4wp_form_widget [type="submit"]:hover {
    color: rgb(216,40,55);
    border-color: rgb(216,40,55);
}



.x-colophon.top .tribe-event-title a {
   color:#fff;
}

.x-colophon.top .tribe-event-title a:hover {
    color: rgb(216,40,55);
}

.x-colophon.top .tribe-events-list-widget ol,
.x-colophon.top .tribe-events-list-widget ol li {
    border:0;
    box-shadow:none;
}

I was able to come up with that code with thelp of google chrome inspect element

Hope that helps

#4

Will you please assist with the second part of the original post?

#5

Hello There,

Thanks for updating in! To resolve the second part of your inquiry, please be advised that the links is using what has been set in the theme options. Please go to X > Theme Options > Typography > Site Links and change the Link color and Link hover colors.

If you only want to change specifically the colors for your event calendar in the footer, you can make use of this code instead:

.tribe-events-list-widget .tribe-event-title a {
    color: white;
}

.tribe-events-list-widget .tribe-event-title a:hover {
    color: red;
}

Hope this helps. Please let us know how it goes.

#6

This worked, but I haven’t been able to figure out how to remove the thin white border surrounding the events. Can you assist on this?

Thanks!

#7

Hi Jerod,

Please add this to Theme Options > CSS

/*remove borders and showdows from the top footer links*/
.x-colophon.top .widget ul,
.x-colophon.top .widget ol,
.x-colophon.top .widget ul li,
.x-colophon.top .widget ol li,
.x-colophon.top .widget ul li a,
.x-colophon.top .widget ol li a {
	border-width: 0 !important;
	box-shadow: none !important;
}

Hope it helps,
Cheers!

#8

Worked great. Thanks!

#9

Glad we could help,

Cheers!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.