Changing color in Footer Widget – DigitalPro theme

[thibaultsa]

Hi,

I am trying to change the color of my footer widget using the Appearance > Personalise > Colors > Accent Colors: Change the default color for button hover and the footer widget background.

It worked but only on the Footer 1 Widget. I have also added Widgets in Footer 2, but for some reason the background color stays black. I don't understand why the Footer 1 widget seems to be functioning differently than Footer 2 and 3.

Am I missing something ?

Many thanks

[Victor Font]

Please provide a link to the site.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Victor Font]

If you look at the demo, the Digital Pro theme is designed to display the accent color in footer-widget-1 only. https://my.studiopress.com/themes/digital/#demo-full

What you want to do falls outside of the theme's design. If you want the accent color to spread across all three footer widgets, you have to change code. Edit output.php in the theme's lib directory. Locate the following code at line 28:

	$css .= ( digital_customizer_get_default_accent_color() !== $color_accent ) ? sprintf( '
		button,
		input[type="button"],
		input[type="reset"],
		input[type="submit"],
		.archive-pagination li a:focus,
		.archive-pagination li a:hover,
		.archive-pagination .active a,
		.button,
		.entry-content a.button,
		.footer-widgets-1,
		.textwidget a.button {
			background-color: %1$s;
		}

Right after .footer-widgets-1, add:

.footer-widgets-2,
.footer-widgets-3,

Save the file and you will be good to go.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[thibaultsa]

Thanks for this ! It partly fixed my problem, as the footer on this theme seems to have more than 3 widget sections. So now I have approx 1/4 left (on the right side) of my footer that is in black color.

Thank you again

[thibaultsa]

FYI I did try to add another line with .footer-widgets-4, but that didn't work. Would you have any other suggestion?

Thank you

[thibaultsa]

Actually I had this issue because I had no widgets placed in the Widget 3 area. Once I included one, the colour automatically changed.

What I hadn't understood is that the Widget area is not equally split, Widget 1 is much smaller than 2 and 3 and the parameters are just different.

Is there a way to customise this footer widget area so I can have clean and equal columns to work with ? I'd also like to change the colours of the fonts and possibly the font themselves. Basically the footer area from the DigitalPro theme does not meet the requirements that I have so I need to customise it.

Thank you once again for all your help.

Best

[ᴅᴀᴠɪᴅ]

If you're wanting to change the style of the theme, look inside the stylesheet (style.css)

There you'll find the CSS that creates the layout. Go to the Footer Widgets section and you'll find

.footer-widgets-1 {
	background-color: #e85555;
	text-align: right;
	width: 25%;
}

.footer-widgets-2 {
	text-align: left;
	width: 39.8%;
}

.footer-widgets-3 {
	padding-left: 0;
	text-align: left;
	width: 35%;
}

Just change the percentages to all be 33.333% for equal columns or to however you want it.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[thibaultsa]

Hi Dave,

Thanks for a lot for the input. I just did what you said, and also aligned the widget 1 to "left" instead of "right", I saved it but for some reason nothing has changed. Did I miss a step ?

Also, could you direct me to the code line where I can change the font color, size, and font type, please ? Right now the font on widget 1 is black but on widget 2 and 3 it is in white.

Thanks again !

[ᴅᴀᴠɪᴅ]

As Victor said before...

"If you look at the demo, the Digital Pro theme is designed to display the accent color in footer-widget-1 only"

What you're trying to do requires a bit of work, as the theme is setup in a way that means customizing the footer-1 widget from the customizer screen inside the WordPress dashboard. To change this, you'd have to amend the customizer.php file.

If you're just wanting to change the fonts inside the footer, you'd add something like this

.footer-widgets {
    font-family: lato;
    font-size: 18px;
}

For future reference, you may want to read this post , which teaches you how to find the bit of the stylesheet you need to change to make simple changes like this.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[marriagematrimonial]

Color has a great role in web designing.Color combination should be matched in all poses and all the styles. We like this article so much.

---

Guruvayoor matrimony profiles

[Author]

Posts