How to change color and size of the boxes?

Hi @niclasto,

Yeah, you can change the color of those boxes by the below CSS.

For Pros box:

.wp-classic-pros-cons .pros-content .wppc-box-symbol {
	color: #fff;
	background: #27C110;
}

For Cons box:

.wp-classic-pros-cons .cons-content .wppc-box-symbol {
    color: #fff;
    background: #f00;
}

To change the width of the circles, use the below css:

.wp-classic-pros-cons .wppc-box-symbol {
    width: 63px;
    height: 63px;
}

You can add this CSS in the Additional CSS section of the customizer.

Let me know, how it goes.

Thanks,
Akash

Hey Akash,

many thanks for your answers. All your codes work only for wpc_style=”wppc-view1″ but not for wpc_style=”wppc-view2″. Is there a way to make it applicable for view2 as well?

Thanks
Niclas

@niclasto,

Here’s the code for modifying both views colors:

/* View 1 - Changing BG Color */

.wp-classic-pros-cons.wppc-view1 .cons-content .wppc-box-symbol {
    color: #fff;
    background: purple;
}

.wp-classic-pros-cons.wppc-view1 .pros-content .wppc-box-symbol {
    color: #fff;
    background: blue;
}

/* View 2 - Changing BG Color */

.wp-classic-pros-cons.wppc-view2 .cons-content .wppc-header {
    color: #fff;
    background: purple;
}

.wp-classic-pros-cons.wppc-view2 .pros-content .wppc-header {
    color: #fff;
    background: blue;
}

To change width:

/* View 1 - Height/Width */
.wp-classic-pros-cons.wppc-view1 .wppc-box-symbol {
	width: 63px;
	height: 63px;
}

/* View 2 - Height */
.wp-classic-pros-cons.wppc-view2 .wppc-header {
	height: 73px;
	display: flex;
	align-items: center;
	justify-content: center;
}

This will do the trick for you.

Let me know, how it goes.

Thanks.

Hey Aksah,

now it works. Many thanks for your help!

Regards,

Niclas

Cool @niclasto,

Closing the issue then. You can always open a new one if something else comes up.

If you feel, do let us know your experience by leaving us a review here.