Feature Box Background/Border Color

Support
#1

Hello, I was wondering if it was possible to add a background color and different border color to the Classic Feature Box element. There are not settings for this in the element itself. As a temporary workaround I had initially put the 3 feature boxes in that row in their own columns and then created a background color and border for the column itself. Visually that achieves the effect I wanted, however when I look at the site in mobile view (or any that stacks the elements top to bottom) the three columns sit directly on top of each other without any spacing and I can’t adjust them since adjusting the padding/margin adjusts the feature box outside of the column.

So I’m wondering if there is anyway to add background color and a different color border to a feature box? If not, is there some way to add space between the 3 columns when they stack?

Thanks

#2

Hello,

Yes it is possible to do both of what you are asking we just need to add some few CSS. To assist you with this, can we ask for your site URL? So we can provide you with the exact CSS codes.

Thanks.

#3

Hello, thanks for the response. I’m going to attach the URL as a secure note since the site is not live yet.

Glad there is a way to modify them, that’s very helpful. One other thing I noticed as I’ve been playing with those feature boxes I’m trying to change the colors of, and found that while the feature boxes themselves scale up and down as I check the site at various pixel dimensions, the images I have in each do not, and appear outside the edge of the boxes at certain screen resolutions. Is there a way to make the images scale with the boxes?

Thanks!

#4

Hi There,

Thank you for the URL, please add a CLASS to your featured boxes (core-competency, self-assessment, lsa-resources) respectively. And then add this to Theme Options > CSS


/*general style*/
.core-competency,
.self-assessment,
.lsa-resources {
	border: 6px solid #fff;
	padding: 2em 1em;
}

/*individual style*/
.core-competency {
	background-color: cyan;
}
.self-assessment {
	background-color: magenta;
}
.lsa-resources {
	background-color: lime;
}

Feel free to change the colors values. Remove the background-color you applied on the column so they won’t going to look attach to each other when viewed on mobile.

What screen-size you’re viewing the page? I don’t see the images getting overflown even on 360px screen-width.

Instead, its your headlines are getting overflow on mobile. Please apply a Responsive Text Settings to your headlines.

Play with the minimum-size, maximum-size, and compression option until you get the desired look on desktop and mobile.

Hope it helps,
Cheers!

#5

Hello, thank you for the follow up. I’ve tried adding the CSS and classes but I must be doing something wrong as it doesn’t seem to be working. I went thru the Wordpress menu to Appearance > Themes > Customize. Then at the bottom where Additional CSS is an option I added the CSS you shared. Then I went in to the individual feature box elements and in class added general-style and individual-style. But maybe those are not the correct classes?

I made the adjustments to my headlines so they are responsive now, thank you.

The feature box images overflow only on the top 3 feature boxes, the ones we’re trying to add the CSS too right now to get the color right. When I view the page at the 481-767px setting they fall outside of the boxes and are no longer centered. On the smallest setting they switch and stack on top of each other so it’s not a problem, it’s just the screen size right before that where the 3 columns are their narrowest that the images fall out of them.

Thanks

#6

Hi,

Can we also ask for the username? You only provided the URL and password for wp admin. So that we can look in to it.

Thanks

#7

Sure, no problem. Thank you

#8

Hi There,

You got that wrong, sorry for the confusion. the /*general style*/ and /*individual style*/ are just a code-comments, you can actually remove that. What I am saying above is put a class core-competency, self-assessment, and lsa-resources on respective featured box.

Then add the given CSS code to Appearance > Theme Options > CSS


Regarding the feature box image issue, please add this to Theme Options > CSS as well.

/*only on screen between 768px and 979px*/
@media (min-width: 768px) and (max-width: 979px) {
	/*featured box image size*/
	.core-competency .x-feature-box-graphic-inner,
	.self-assessment .x-feature-box-graphic-inner,
	.lsa-resources .x-feature-box-graphic-inner {
		max-width: 100px;
	}
	/*featured box title font-size*/
	.core-competency .x-feature-box-title,
	.self-assessment .x-feature-box-title,
	.lsa-resources .x-feature-box-title {
		font-size: 18px !important;
	}
}

Again, this is not going to work if you did not add the respective class for each featured box.

Hope it helps,
Cheers!

#9

Thank you!

#10

You’re most welcome.

#11

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